Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/04/12 14:00

 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公式トップ
図1 Material-UI公式トップ

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

図2 Material-UIで利用可能なコンポーネント
図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インストール結果
図3 Material-UIインストール結果

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

著者プロフィール

  • WINGSプロジェクト 飯田 勝也(イイダ カツヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact入門
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5