React・TypeScript環境で Material UI と styled-components の環境構築をする方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、React・TypeScript環境で Material UI と styled-components の環境構築をする方法について解説していきます。

React・TypeScript環境で Material UI と styled-components の環境構築

React・TypeScriptの環境構築については、以前の記事にまとまっているので、そちらをご確認ください。

【React】create-react-app を使ってReact-TypeScriptの環境を構築する (Redux, ESLint, Prettier)も導入する

DockerでReact・TypeScript環境を構築する方法(ハンズオン講座)

Material UI と styled-components の installに関しては、Material-UIの公式ドキュメントが丁寧でまとまっています。

必要なものをすべて組み合わせた次のnpm install では、

Material-UI と Material-UI-Icon と、Material-UIに組み込まれている(?) emotion と、

そして、styled-componentsをinstallしています。

ちなみに、Docだとemotion or styled-components どちらか片方だけで installすればOKなような記述でしたが、emotion入れなかったらエラーがでました・・・

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled @fontsource/roboto @mui/styled-engine-sc styled-components

Styled_Components用の型定義ファイルも別途、installが必要です。

# Styled_Components用の型定義ファイル
npm i --save-dev @types/styled-components

これで、Material UI と styled-components を使えるようになりました。

Material UIは、Reactアプリケーション用のオープンソースのUIフレームワークです。

GoogleのマテリアルデザインをベースにしたUIコンポーネントを提供しており、高品質で美しく使いやすいUIを簡単に導入することができます。

Material UIには、ボタン、テキストフィールド、モーダル、スニペットなど、多くのコンポーネントが用意されています。

これらのコンポーネントを使用することで、アプリケーションの開発を効率化することができます。

また、Material UIはレスポンシブデザインに対応しており、様々なデバイスで同じUIを実現することができます。

これにより、ユーザーがスマートフォンやタブレットからアプリケーションを使用する際にも、快適なUIを提供することができます。

Material UIの主なメリットをまとめると次のとおりです。

デザインの一貫性が保たれる。
- Material UIはマテリアルデザインに従って作られているため、UIの一貫性が保たれます。
- アプリケーション全体の見た目が統一され、UXが向上します。
UIコンポーネントが豊富にある。
- 多くのコンポーネントを簡単に利用することができ開発効率が上がります。
UIコンポーネントに、レスポンシブデザインがサポートされている。
コンポーネントの情報などドキュメントが充実している。
- Material UIにどんなコンポーネントがあるのかは、Documentを見ればすぐにわかります。
- Material-UI All Components
- Material Icons

styled-componentsとは、CSS in JSライブラリの1つです。

CSS in JSとは、JavaScriptのコードの中にCSSのスタイルを記述することを指します。

styled-componentsでは、JavaScriptのコード内でスタイルを定義し、それをReactコンポーネントに適用することができます。

また、CSSをJSオブジェクトの形で記述するJSXでのスタイリングや、他のタイプのCSS in JSとは違い、

styled-componentsでは、CSSのsyntax(文法)をほぼそのまま使ってスタイルを定義することができます。

そのため、通常のCSSを理解していれば、よりシンプルで直感的な記述ができます。

上記のメリットをまとめると次のようなものになります。

CSSファイルが不要になり、JSファイルにまとめて記述することができる。
- 管理するファイルが分散せずにまとまるのでメンテがしやすい(保守性が高い)。
コンポーネント単位でスタイリングを行うことができる。
- スタイリングがコンポーネントに関連付けられため、メンテがしやすい(保守性が高い)。
- 関連するコンポーネントだけのスタイルを読み込むので、レスポンスが速くなる。
CSSのsyntax(文法)をほぼそのまま使ってスタイルを定義することができる。
- CSSを理解していればより直感的に書ける。