ReactJS - Material UI: 基礎者のガイド

こんにちは、将来のReact開発者たち！ReactJSとMaterial UIの世界へのエキサイティングな旅にお連れします。コンピュータサイエンスを多年間教えてきた者として、このチュートリアルの終わりまでに、これらの強力なツールをしっかりと理解するだろうと保証します。それでは、始めましょう！

Material UIとは？

コードを書く前に、Material UIが何かを理解しましょう。家を建てることを考えてみてください。全てのレンガ、ドア、窓をからだで作るか、もしくは pré製のコンポーネントを使うかの選択肢があります。Material UIは、Reactアプリケーションに使える美しい、 pré製のコンポーネントが詰まった倉庫のようです。GoogleのMaterial Designに基づいており、機能的でありながらも視覚的に魅力的です。

インストール

それでは、手を汚しましょう！まず、Material UIをインストールします。以前に何かをインストールしたことがないとしても、心配しないでください - 各ステップをガイドします。

1. ターミナルを開いてください（怖くないですよ、コンピュータとテキストベースで話すだけです）。
2. プロジェクトディレクトリに移動します（cd your-project-nameを使用します）。
3. 次のコマンドを実行します：

npm install @material-ui/core

このコマンドは、npm（Nodeパッケージマネージャ）にMaterial UIをインストールするよう指示します。図書館の司書に特定の本を持ってくるよう依頼するようなものです。

ワークイングサンプル

Material UIをインストールしたので、簡単な例を作成して動作を確認しましょう。ヘッダー、テキスト、ボタンがある基本的なページを作成します。

まず、srcフォルダに新しいファイルMaterialUIExample.jsを作成し、以下のコードをコピー＆ペーストします：

import React from 'react';
import { Button, Typography, AppBar, Toolbar } from '@material-ui/core';

function MaterialUIExample() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography variant="h6">
私の最初のMaterial UIアプリ
</Typography>
</Toolbar>
</AppBar>
<Typography variant="body1" style={{ margin: '20px' }}>
私のMaterial UI例にようこそ！
</Typography>
<Button variant="contained" color="primary" style={{ margin: '20px' }}>
クリックしてね！
</Button>
</div>
);
}

export default MaterialUIExample;

これを分解すると：

1. 必要なコンポーネントをMaterial UIからインポートします。これは、Reactにどのツールが必要か伝えるようなものです。

2. MaterialUIExampleという関数を作成します。Reactでは、コンポーネントはJSX（HTMLに似た特別なシンタックス）を返す関数です。

3. 関数内でJSXを返します：

• <AppBar>はトップナビゲーションバーを作成します。
• <Typography>はテキスト表示に使用されます。ヘッダーテキストと本文テキストの両方に使用されます。
• <Button>はクリック可能なボタンを作成します。

4. styleプロップを使ってインラインスタイルを追加します。これは、要素に直接CSSを追加するようなものです。

5. 最後に、コンポーネントをエクスポートして、アプリの他の部分で使用できるようにします。

これが動作するように、メインのApp.jsファイルでこのコンポーネントをインポートして使用します：

import React from 'react';
import MaterialUIExample from './MaterialUIExample';

function App() {
return (
<div>
<MaterialUIExample />
</div>
);
}

export default App;

それで、ヘッダー、テキスト、ボタンがMaterial UIでスタイルされたページが表示されるはずです。

Material UIコンポーネント

Material UIは多くのコンポーネントを提供しています。以下は一般的に使用されるものの表です：

コンポーネント	説明
Button	クリック可能なボタンを作成します
Typography	テキスト表示に使用されます
AppBar	トップナビゲーションバーを作成します
TextField	テキスト入力に使用されます
Card	コンテンツコンテナを作成します
Grid	レスポンシブレイアウトに使用されます
Icon	アイコンを表示します
Menu	ドロップダウンメニューを作成します
Dialog	モーダルダイアログを作成します
Snackbar	短い通知に使用されます

これらのコンポーネントは、必要に応じてカスタマイズできます。例えば、ボタンの色を変更する方法是：

<Button color="secondary" variant="contained">
サブカラーボタン
</Button>

または、Typographyのサイズを変更する方法：

<Typography variant="h1">
これは非常に大きな見出しです
</Typography>

結論

おめでとうございます！ReactとMaterial UIの世界への最初の一歩を踏み出しました。インストール、ワーキングサンプルの作成、利用可能なコンポーネントのいくつかを紹介しました。

コードを学ぶことは新しい言語を学ぶのと同じです。時間と練習が必要ですが、書いたコードの每一行ごとにスキルが向上しています。実験を恐れず、間違えを犯し、最も重要なのは、楽しむことです！

私が教えた年間、無数の学生が完全な初心者から自信のある開発者に変わってきました。あなたもその道を歩んでいます。codingを続け、学び続け、すぐにMaterial UIで素晴らしいReactアプリケーションを作成できるようになるでしょう。

ハッピーコーディング、次のレッスンでお会いしましょう！

Credits: Image by storyset