シンプルで美しい！Google発のUIフレームワーク「Material Components for the Web」とは？

ここ最近、GoogleのMaterial ComponentsのGitHubページが頻繁に更新されています。

Material Componentsとは、Googleが推奨しているデザインフレームワーク*「マテリアルデザイン」(Material Design)*をさまざまなプラットフォームで簡単に取り入れることができるフレームワークです。
ゼロからマテリアルデザインのドキュメントに沿ってパーツを作らなくとも、Material Componentを組み込むだけで、簡単にマテリアルデザインのUIを取り入れたWebアプリケーションを作成することができます。

もともとはMaterial Design Light(MDL)としてリリースされていたフレームワークですが、iOS版、Android版も続々とリリースされてきました。
注目すべきは、Web版として「Material Design for the Web」(通称MDC-Web)がリリースされたことです。

今回は、Google発のUIフレームワーク*「Material Components for the Web」*の概要や簡単な使い方をご紹介します。

Material Componentsとは？

Material Componentsとは、Googleの各種Webサービスやモバイルアプリでもおなじみの「マテリアルデザイン」をiOSやAndroid、そしてWebで簡単に取り入れることができるフレームワークのことです。
普段GoogleマップやGmail、Inboxなどのアプリを触ったことのある人であれば、同じようなインターフェイスで開発することができるのだとイメージしてみてください。

Material Componentsには、「for Android」「for iOS」、そして今回リリースされた「for the Web」があります。

Material Components for Android

もともとAndroidはGoogleが開発したOSなので、Design Support Library for AndroidになじみのあるAndroidアプリの開発者はこのフレームワークにすぐに慣れてしまうでしょう。
開発環境を変えたり、ツールを切り替えたりすることなく、少しのコードでマテリアルデザインを実装することができます。

Material Components for iOS

GoogleはMaterial ComponentsをiOSのデベロッパーにも解放することで、ますますマテリアルデザインの普及に邁進しようとしています。
こちらもiOSのデベロッパーが使いやすいように、Objective-CやSwiftのようなネイティヴなコードで開発・実装ができるようにしています。
Appleの厳格なデザインの基準に合わせられるように、Platform Adaptationというガイドラインまで用意しているところが、Googleの抜け目のないところだとも言えます。

Material Components for the Web

そして今回注目したいのは、Webデベロッパー向けにMaterial Componentsが解放された点です。
こちらはReactやAngularJS、Vueなどのさまざまなライブラリともシームレスに統合することができます。
また、非常に軽量で、使いやすいのもポイントです。