2017.2.2
2020.1.16

【Angular Material】フレームワークを使ってみた感想

以前から気になっていたAngularJS用のUIフレームワーク「Angular Material」を使ってみました。これまではUI BootstrapAngularStrap、モバイル系ではIonicを使ってきていたので、今回のフレームワークでUI系は4つ目となります。

実際に使ってみたサイトはこちら

最初はAngular Materialのみでやってみるつもりでしたが、ほしいUIコンポーネントがなかったので一部 UI Bootstrap を利用しています。

またコンポーネントの存在を知らずに自前で作成しているところ(両サイドのパネル)もあります。せっかくなのでMaterialのコンポーネントを試してみたかったのですが、さすがに作り直す気にはなれませんでした。

よってすべてのコンポーネントを試したわけではないとう前提での、肝心の使ってみた感想ですが、他のフレームワークと比べて見栄えは非常にいいな、という印象です。

サイト作成時に必要となる基本的なコンポーネントだいたい揃っていますし、使用できるアイコンも豊富です。

Material icons - Material Design

個人的に一番良かったのは、ボタンやタブを押した時の波紋アニメーションです。最初はアニメーションされることを知らず自前で用意しようとしましたが、いい感じの波紋アニメーションができませんでした。それが手軽にボタンを配置するだけで使えるというのは非常に有難く、さすがMaterialデザインといったところです。

逆に使いずらかったのが、ちょっと色を変えたい、ちょっと形状を変えたい、ちょっと...といったコンポーネントに手を加えることがかなり難しい点です。このフレームワークに慣れていないだけかもしれません。もしかしたら簡単にできる方法があるかもしれません。そういった可能性もありますが、他のフレームワークもスタートは一緒だったので、他と比べて見栄えがいい分、ちょっとした変更でも苦労するというのは間違っていないような気がします。

またこのフレームワークは現在(2017年2月初旬)のところAngular2には対応していないようです。サイトには開発中であると記載されていて、最近ではionicのAngular2対応版が正式にリリースされたみたいなので、Angular Materialも もう少し待てばリリースされるかなぁと勝手に思っています。

UI Bootstrap、AngularStrap、Angular Materialの内、個人的にサイトで使うとしたらAngular Materialです。モバイル用途の場合はスワイプ処理が重要になってくると思うので、さすがにIonicやOnsen UIの方がいいとは思いますが、まあ、試してみないとなんとも言えないですね。

AngularJS】関連記事