はじめに
このチュートリアルではMaterial UIのシンプルなボタンを実装します💡
⬇︎完成イメージは以下の通りです⬇︎
1. フォルダを作る
cd desktop
mkdir myapp
cd myapp
-
cd desktopはdesktopに移動しています。 -
mkdir myappはmyappというディレクトリを作っています。 -
cd myappは作成したmyappに移動しています。
2. Next.jsをインストールする
npx create-next-app sample-app
-
sample-appというアプリ名でReactを立ち上げる - いくつか質問されますが、全てYesでOKです。
npm run devで動作確認ができます。
3. IDEを立ち上げる
cd sample-app
cursor .
-
cd sample-appは作成したsample-appに移動しています。 -
cursor .はCursorをこのフォルダで立ち上げるコマンドです。code .などお好きなIDEのコマンドで大丈夫です。
4. Reactプロジェクトを開く
.
├── app
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
├── README.md
└── tsconfig.json
開いた時点でこのようなディレクトリ構成になっていると思います。
5. ライブラリをダウンロードする
npm install @mui/joy @emotion/react @emotion/styled
コマンドを入力してライブラリをダウンロードします。
このMaterial UIはモダンでページが作りやすくて、公式ドキュメントも分かりやすいのでおすすめです。今回はJoy UI (@mui/joy)を使います。
Material UIのUIセット
- Material UI (GoogleのMaterial Design準拠)
- Joy UI (軽量で柔軟なデザインシステム)
- Base UI (低レベルコンポーネント)
6. ボタンを実装する
import Button from "@mui/joy/Button"
export default function ButtonUsage() {
return <Button variant="solid">Hello World</Button>;
}
1行目
export default funtion ButtonUsage() {
解説
-
関数コンポーネントというReactの基本的な書き方 -
ButtonUsageという名前で画面に配置できる部品を作っている。 -
export defaultは「この部品を他のファイルでも使えるようにするよ」という宣言
つまり、
「ButtonUsageという名前のReactコンポーネントを作り始めます」
という命令
2行目
return <Button variant="solid">Hello World</Button>
解説
-
returnは「このコンポーネントは最終的にこれを画面に表示します」という意味。 -
<Button>はMUI（UIライブラリ)のボタン部品を呼び出している。 -
variant="solidはボタンのデザイン指定。 -
"Hello World"はボタンに表示される文字
つまり、
「画面にはsolidデザインのボタンを1つ表示し、その中に"Hello World"と書く」
という命令
機能
ButtonUsageというReactコンポーネントを作成し、"Hello World"と表示されるMUIのボタンを1つ返すコード。
7. 画面の中央に配置する
import { Button } from '@mui/joy';
import Box from '@mui/joy/Box';
export default function ButtonUsage() {
return (
<Box
sx={{
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Button variant="solid">Hello World</Button>
</Box>
);
}
6行目
<Box
sx={{
height: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
解説
-
BoxはMaterial-UI Joyのコンテナ。<div>のような役割でスタイルを適用できる。<div>の完全上位互換と言っても差し支えないでしょう。 -
height: 100vhは「このコンテナの高さを画面全体の高さに設定している」 -
display: flexはFlexboxレイアウトを有効化している -
justifyContent: 'center'は横方向の中央揃え -
alignItems: 'center'は縦方向の中央揃え
機能
このBoxの中身を画面の真ん中に表示させる。
まとめ
みなさんどうでしたか？
- Reactのコンポーネントは「画面の部品」のこと。
-
function ButtonUsage()のように関数として作るのが今の主流。 - returnの中に書いた
<Button>...</Button>が実際に画面に表示される。 -
variant="solid"のように、HTMLタグに似ているけど実際はJSX (JavaScriptの拡張書法)
Reactの良いところは
「HTMLのように見えるコードを書くだけで、動的にUIが作れる」
ところだと思います。
みなさんも是非、良いReactのライブラリがあったら教えてくださいね。
また次回もお楽しみに〜👋
⬇︎ソースコードはこちらから⬇︎
https://github.com/yutanagano2000/button_tutorial