Material」についてその特徴と使い方を説明する。Materialは簡単な設定のみでモダンなマテリアルデザインのコンポーネントをアプリで使用できるようにするフレームワーク。スタイルや機能も簡単にカスタマイズできる事から導入している企業も少なくないはず。Angularをマスターするのであれば必ず知っておきたいフレームワークだ。MaterialはGoogle社によって開発されているAngularのための公式のUIコンポーネント集。マテリアルデザインはAndroidなどでも採用されているシンプルでモダンなデザイン。この記事の執筆時点での最新バージョンは12.2.11だ。Materialは以下のような特徴を持つ。Materialの公式サイトではすべてのコンポーネントをプレビューすることができる。Materialのデザインが自分のアプリにマッチするかどうかチェックしてみよう。サンプルのコードも見ることができるので、使い方はすぐに理解できるだろう。Materialの使い方を見ていこう。Materialはデフォルトではプロジェクトに含まれていない。Materialのスキーマを取り込む必要がある。以下のコマンドを実行しよう。@angular/materialコマンドの実行中に以下の3点について尋ねられる。テーマを4つのプリセットから選択する。Pinkタイポグラフィー設定をするか否か。Animationの設定するか否か。yesコマンドが終了すると関連するファイルがアップデートされる。Materialのコンポーネントをプロジェクトで使ってみよう。ここではもっともよく使われるであろう「Button」コンポーネントを例に簡単な使い方を説明する。Materialの公式サイトを見てほしい。Materialのコンポーネントを使用するには、それぞれのコンポーネントに対応したモジュールをapp.module.tsにインポートする必要がある。MatButtonModuleをapp.module.tsに追加しよう。それぞれのコンポーネントがどのモジュールに対応しているかは公式サイトで確認できる。原則的にモジュールは「Mat+コンポーネント名+Module」で命名されている。buttonを表示したいコンポーネントに以下のコードを追加して、ボタンが表示されるか確認しよう。me!!</button>問題が無ければ以下の写真のような白いボタンが表示されるはずだ。「mat-raised-button」はボタンの種類を指定している。Materialではこういった属性(Attribute)を使うことにより、より目的に合ったコンポーネントを選ぶことができる。Materialのコンポーネントはそれぞれに固有のプロパティを備えている。プロパティを使って先ほどのボタンに色を加えてみよう。button要素にcolor=”primary”を追加する。me!!</button>先ほどのボタンの背景が青に変化するはずだ。primaryとして設定されているカスタムのSCSSファイルを加えることによって変えることもできる。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。14のアップデートを解説!スタンドアロンコンポーネントとフォームのタイプ指定。この記事では、主な新機能である「スタンドアロン・コンポーネント」と「リアクティブ[...]Angularのi18nでアプリを国際化対応する!ngx-translateとの比較。2021.11.24この記事では、Angularの国際化ライブラリであるi18nを使用してアプリを多言語化する方法について説明したい。15についておもな変更点をまとめてみた。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。