AngularによるWebアプリ開発②~Angular Materialでマテリアルデザインを実装する

前回のあらすじ

前回はAngularでCLIを用いたアプリの立ち上げとコンポーネントの生成、ルーティングの基本設定を行いました。今回はその続きをやっていきたいと思います。

app.component.htmlを削除

まずサンプル画面↓を削除するために「app.component.html」を以下のように編集します。

<app.component.html>

<router-outlet></router-outlet>

前回の流れからうまくいっていると「/test」にアクセスすると以下のようになっています。

これに後はcssにマテリアルデザインを設定できればAngularでのアプリ開発の初期設定は完了です。

Angularにマテリアルデザインをインストール

まずはアプリケーションの見た目の基本設定を行っていきます。Angularをそのまま使うだけではモダンなデザインのWebアプリを簡単に作ることはできないので、AngularMaterialというマテリアルデザイン用のモジュールをインストールします。

ちなみに、マテリアルデザインとはGoogle様が2015年に発表した概念で、要は↓の画像のようにサイトのフォームとかボタンとかを影のついた立体的にすることでユーザービリティを追求しようぜというやつです。

Angularではマテリアルデザインを簡単に使えるようにしてくれるモジュールがあるのでそれをインストールします。

# Angular Material のインストール
$ ng add @angular/material

このコマンドはGoogleが公開しているマテリアルデザインのCSSクラスをまとめたものを落としてきてくれる。これで今風のモダンのサイトをクラスひとつで簡単に作れるようになります。色は何でもいいです。

コマンドを実行すると以下のような質問が出てきますが、両方ともYes(y)で問題ありません。

Set up HammerJS for gesture recognition?
Set up browser animations for Angular Material?

インストールが成功したら、次は「app\app.module.ts」を編集します。

<app.module.ts>

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { SampleComponent } from "./sample/sample.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { MatToolbarModule } from "@angular/material/toolbar"; // 追加
import { MatIconModule } from "@angular/material/icon"; // 追加

@NgModule({
  declarations: [AppComponent, SampleComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule, // 追加
    MatIconModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

次にapp.component.htmlを編集します

<src/app/app.component.html>

<mat-toolbar color="primary">
<span>My App</span>
<span class="spacer"></span>
<mat-icon>home</mat-icon>
</mat-toolbar>

<src/app/app.component.scss>
.spacer { flex: 1 1 auto }

.icon {
  display: flex;
  padding: 4px;
}

上手くいくと↓のような画面になっています。

他にもAngularMaterialにはオシャレで高機能なタグが沢山用意されており、それらを使いこなすことで誰でも簡単にモダンで高機能なweb画面を実装することが可能です。このブログでも一部解説していますが全容は公式ドキュメントを参照してください

AngularMaterial公式ドキュメント

AngularMaterialの関連記事

次はAngularの基本ディレクティブの1つであるngIfの使い方について解説していきます。

次の記事→AngularによるWebアプリ開発③~Ngifを使いこなす

オススメ参考書

ブログ運営者

・関連記事







プログラミングの独学はとても難しい


プログラミングは小学校の義務教育にも導入され始めており、これから社会人として生きていく上でプログラミングはもはや出来て当たり前、出来なれば論外というエクセルレベルの必須スキルになりつつあります。そしてそういう話を聞いて参考書なりを購入して独学でプログラミング勉強しようと思っている人も少なくないでしょう。しかしプログラミングを独学で勉強し始めようと思うものの



・「分からない箇所で詰まって挫折してしまった」

・「勉強する時間が足りない」

・「ネットの記事だと情報が断片的でよくわからない」

・「コードのエラーの原因が分からない」



という壁にぶち当たって、プログラミングの勉強を止めてしまう方が少なくありません。独学でプログラミングを勉強してる時間のほとんどはつまづいている時間です。実際僕も最初のころ独学でプログラミングを勉強していた頃はエラーの原因が分からず丸1日を不意にしてしまった・・・そんな苦い経験がありました。それで僕は一度はプログラミングの学習を諦めてしまいましたが、就活で現実を知る中で



「プログラミングを勉強して、いずれフリーランスとして自由な生き方がしたい」

「エンジニアとして若いうちから高収入を得たい」



という強い気持ちから一念発起して「侍エンジニアのwebサービスコース」に申し込み、プロのエンジニアの方に対面でマンツーマンでPythonによるWebサービス作り方とWeb技術の基本を教えてもらい、ようやくプログラミングが理解でき、今ではエンジニアとしてそこそこの暮らしができるようになりました。





侍エンジニアでは、とりあえずプログラミングやインターネットの基本を知っておきたい人から、HTML・cssなどでWebサイトやWebアプリを作ってみたい人やPythonを勉強してデータサイエンティストやAIエンジニアになりたい人まで幅広いニーズに応えた様々なコースが用意されています。



IT業界と言ってもエンジニアの仕事はプログラミング言語次第でサーバーから機械学習・ディープラーニングまで多種多様ですし、侍エンジニアの無料レッスン(カウンセリング)を受けてみて、自分のやりたいITの仕事は何なのか?を見つけるのがエンジニアへの第一歩になります。ちなみに今侍エンジニアの無料レッスンを受けると1000円分のAmazonギフト券がもらえるので、試しに受けてみるだけもお得です。


自分は半端に独学やオンラインスクールで勉強して金と時間を無駄にするくらいなら、リアルのプログラミングスクールに通ってしっかりプログラミングを勉強した方がいいと思います。ちなみに今、侍エンジニアに申し込むと、25歳以下の学生の方であれば、受講料が20%OFFになるので超お得です。


そして、プログラミングは大勢で授業を受けたり漫然とオンライン学習をするよりも自分が分からない箇所をピンポイントでプロの講師に直接質問して、ちゃんと納得するというスタイルの方がお金は確かに少し掛かりますが、独学で学ぶよりも絶対にモノになります。


シェアする

  • このエントリーをはてなブックマークに追加

フォローする