React×Material-UIでモダンなUIを実装する

基礎からはじめるReact入門 第3回

　Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。前回はReactコンポーネントの基本であるPropsとState、およびライフサイクルについて解説しました。本稿ではデザイン性をアップさせてくれるサードパーティー製のコンポーネントセット、Material-UIの使用方法について紹介します。Material-UIは、Googleのデザインガイドラインに則って開発されたコンポーネントのライブラリで、活用することで簡単に見栄えのいいアプリを作ることができます。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactに興味／関心があり、これから学び始める方

前提環境

• macOS Sierra 10.12
• Node.js v6.6.0／npm 3.10.3
• React 15.4.0
• Material-UI 0.16.7

Material-UIの導入編

　最近のエンドユーザーは優れたデザインを兼ね備えた多くのプロダクトに慣れ親しんでおり、それなりに利用されるものを作るには、アプリの機能だけでなくデザインも重要な要素です。

　Yahoo! Japanは検索窓の枠を1ピクセル太くしただけで約5億円の広告収入増を達成した、というニュースが以前話題になりましたが、デザインが再訪問率やコンバージョン率に与える影響はますます大きくなっています。こういった背景から、新しいプロダクトを作る場合にはデザイナーを含めたチームを構成してプロジェクトを進めるべきですが、なんらかの制約でデザイナーを確保できず、デザインを勉強したことのないエンジニアが、UIの優れた成果物をアウトプットしなければいけない状況もあるでしょう。

　Reactではサードパーティーによって開発された、さまざまなコンポーネントがMITライセンスで公開されています。これらを活用することで、ある程度しっかりした作りのアプリを比較的容易に開発できるようになります。利用目的がはっきりと決まっている場合はGitHubに公開されているコンポーネントを利用してもいいですが、ここでは最も有名なコンポーネントセットの一つである、Material-UIを利用する方法を紹介したいと思います。

図1　Material-UI公式トップ

　冒頭でご紹介した通り、Material-UIはGoogleのデザインガイドラインに沿って開発されたコンポーネントセットであり、npmパッケージとして提供されています。画面内の部品に相当するReactコンポーネント群と、画面全体の色調を設定するテーマの二つを組み合わせてアプリを作成します。Material-UIで利用できる全てのReactコンポーネントを本稿で紹介することはできませんが、図2で紹介している通り、ボタンやカレンダー、ダイアログをはじめ、多くのコンポーネントが利用可能となっています。また、個々のコンポーネントとテーマに標準で適用されているデザイン（スタイル）は、必要に応じてカスタマイズすることもできます。

図2　Material-UIで利用可能なコンポーネント

Material-UIのインストール

　Reactプロジェクトのトップディレクトリで下記コマンドを実行し、パッケージをインストールします。Material-UIのコンポーネントでは、タップ系のイベントの取得にreact-tap-event-pluginを利用しています。この依存関係は将来的にはなくなると公式サイトに記載されていますが、現行バージョン（React 15.4.0）ではMaterial-UI導入時にreact-tap-event-pluginも併せてインストールする必要があります。

リスト1　material-uiとreact-tap-event-pluginのインストール

$ npm install --save-dev material-ui
$ npm install --save-dev react-tap-event-plugin

　インストールが完了すると、下図のようにMaterial-UIのパッケージが追加されます。

図3　Material-UIインストール結果