eyecatch
Thu, Sep 6, 2018

React + Reduxアプリケーションプロジェクトのテンプレートを作る ― その5: Material-UIとWebフォント

ReactとReduxを学ぶために、開発環境というかプロジェクトテンプレートをスクラッチから作っている。 (最終的な成果はGitHubに置いた。) 前回はCSS周りの処理系をセットアップした。 (adsbygoogle = window.adsbygoogle || []).push({}); 既成Reactコンポーネント 前回まででHTMLもCSSもReactコンポーネント単位で書けるようになったんだけど、実際、自分で1からコンポーネントを書くのは、特にデザインセンスがない人にとっては辛い。 かっこいいUIコンポーネントを作りたいならデザイナーの協力が必要だけど、個人の開発などそれができない状況も多い。 という問題を抱えた人たち向けなのかはわからないが、既成のReactコンポーネントセットが色々OSSで提供されている。 Material-UI: GoogleのマテリアルデザインのReact実装。 Semantic UI React: Semantic UIのReactバインディング。 antd: Ant DesignのReact実装。 Blueprint: 複雑でデータ量の多いUI向けに作られたReact UIツールキット。 React-Bootstrap: BootstrapのReactバインディング。現時点ではv4未対応。 Grommet: HPEによるエンタープライズレディなデザインシステム。 Office UI Fabric React: OfficeなどのMicrosoft製品に使われているReactコンポーネントセット。 今回はこの中でも圧倒的に人気なMaterial-UIを導入する。 Material-UI Material-UIは簡単に使える。 とりあえずコアパッケージをインストールする。 yarn add @material-ui/core あとはパッケージに入っている色々なコンポーネントをMaterial-UIのドキュメント見ながら使えばいいだけ。 import React from 'react'; import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; const Wrapper = styled.div` font-size: 5rem; `; const App = () => ( <Wrapper> - HOGE + <Button variant="contained"> + HOGE + </Button> </Wrapper> ); export default App; これでただのテキストがボタンになった。 CSS Web Fonts 前節でいちおうMaterial-UI使えたけど、フォントをケアしてやるともう少しかっこよくなる。 Material-UIはRobotoフォントを想定して作られているが、これはブラウザにデフォルトで入ってはいないので、そのままだとArialとかにフォールバックされちゃう。 のでRobotoフォントを導入する。 フォントはCSS Web Fontsの機能である@font-faceで、フォントファイルをブラウザにロードさせることで導入できる。 @font-faceで読み込むフォントファイル(i.e.