# Material-UIを学ぶ

<p class="description">Material-UIは初めてですか？ 何から始めればいいのかは簡単に分かります。 このガイドを読めばすぐに開始できます。 何から始めればいいのかは簡単に分かります。 このガイドを読めばすぐに開始できます。</p>

Developers come to Material-UI from different backgrounds and with different learning styles. Whether you prefer a more theoretical or practical approach, we hope you’ll find this section helpful. 馴染みのないテクノロジーのようにMaterial-UIには学習曲線があります。 練習とある程度の忍耐力があれば、すぐに慣れると思います。 練習とある程度の忍耐力があれば、すぐに慣れると思います。 練習とある程度の忍耐力があれば、すぐに慣れると思います。 練習とある程度の忍耐力があれば、すぐに慣れると思います。 練習とある程度の忍耐力があれば、すぐに慣れると思います。

## 最初の例

[使い方ページ](/getting-started/usage/#quick-start)ではMaterial-UIの小さな例とライブエディタがあります。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。 [使い方ページ](/getting-started/usage/#quick-start)ではMaterial-UIの小さな例とライブエディタがあります。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。 Material-UIについて何も知らなかったとしても、コードを書き換えてどのように作用するか確認してみてください。

## サンプルプロジェクト

ReactでWebサイトを開発してデプロイする為に必要なインフラを提供する[いくつかのサンプルプロジェクト](/getting-started/example-projects/)があります。

## テンプレート

アプリを作り始めるのに役立つ[基本的なテンプレート](/getting-started/templates/)を用意しています。

## 推奨する資料

Material-UIを初めて学ぶときは、公式のドキュメントよりもサードパーティのブログ記事や本、動画のコースの方が役に立つかもしれません。 以下はオススメの資料です。中には無料で利用できるものもあります。 以下はオススメの資料です。中には無料で利用できるものもあります。 以下はオススメの資料です。中には無料で利用できるものもあります。 以下はオススメの資料です。中には無料で利用できるものもあります。

### Gratuit

- **Introduction to Material-UI**: a series of videos covering all the important Material-UI components. 
  - 📹 [動画](https://www.youtube.com/watch?v=pHclLuRolzE&list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr)
- **Customize Material-UI for your project**: a look at how you can customize Material-UI to align with your company identity (design system) and products 
  - 📹 [動画](https://www.youtube.com/watch?v=bDkB3LoQKxs)
- **Meet Material-UI—あなたのお気に入りの新しいユーザインタフェースライブラリ**: Material-UIのいくつかの重要な概念をカバーしながら、Todo MVCの構築を案内するブログ投稿。 
  - 📝 [ブログ記事](https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c)
- **Learn React & Material-UI**: Material-UIの重要なコンポーネントの全てをカバーするシリーズの動画です。 
  - 📹 [動画](https://www.youtube.com/watch?v=xm4LX5fJKZ8&list=PLcCp4mjO-z98WAu4sd0eVha1g-NMfzHZk)
- **Getting Started With Material-UI For React**: シンプルなカードのリストの構築の手引きとなるブログ記事です。 
  - 📝 [The blog post](https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555)
  - 📹 [The video](https://www.youtube.com/watch?v=PWadEeOuv5o)
- **Getting Started With Material-UI For React**: 単純なカードリストの作成方法を説明しているブログ投稿です。 
  - 📝 [ブログ記事](https://alligator.io/react/material-ui/)

### 有料

- **Implement high fidelity designs**: Bridge the gap between Design & Development. Break down detailed designs and bring them to life with Material-UI and React.
  
  - 💻[コース](https://click.linksynergy.com/deeplink?id=IVuPfk1F/Ow&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fimplement-high-fidelity-designs-with-material-ui-and-reactjs%2F)
- **Apply Google Material Design**: This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using Material-UI and React.
  
  - 📹[コースの予告編を見る](https://www.youtube.com/watch?v=hhZ6yFvCWho)
  - 💻[コース](https://bonsaiilabs.com/courseDetail/material-ui-with-react)
- **Cookbook**: Material-UIを使用したReactアプリケーションにMaterial Designの原則を実装することで、現代的なアプリケーションを構築します。
  
  - 📘 [書籍](https://www.amazon.com/gp/product/1789615224/)

[![cookbook](/static/blog/material-ui-v4-is-out/cookbook.png)](https://www.amazon.com/gp/product/1789615224/)

- **Builder Book**: Modern JavaScriptスタックとMaterial-UIを使用して、フルスタックのJavaScript Webアプリケーションを最初から構築する方法を説明します。 
  - 📘 [書籍](https://builderbook.org/book)