Reactの初級レベルです。マテリアルデザインの一部を扱っています。
02023-09-22 第61回NearMe技術勉強会Kaito Asahi新入社員目線から学ぶエンジニアに必要なこと第3回：UIを作っていく~序章~（React初級レベル）
View Slide
1~Question~UI‧UXで気にした⽅が良いことって何でしょう...？UI=User Interface, UX = User Experience
2~Question~今まで出会った良いと感じたUI‧UXを教えてください！
3Example● https://www.pokemon.co.jp/ex/sv/ja/（ポケモンSV公式サイト）○ スクロールをするたびに、たたまれていた⼦コンテンツなどが表⽰される○ ⼦ページへ移動するカードに関しては、等間隔で整理されていて⾒やすい
4配置の重要性● メインとなるようなものに関しては独⽴して⼤きく● 各メニューは、なるべく均等な配置（重要度別に⼤きさを変えても良い）
5配置をするときに便利なコンポーネント~Grid~● を⽤いて、各要素を綺麗に配置することができる
6配置をするときに便利なコンポーネント~Grid~1. まずは、Gridコンポーネントを⽤いて、コンテナを作成するGrid container
7配置をするときに便利なコンポーネント~Grid~2. 各要素をGridコンテナ内のitemとして設定し、配置を調整合計で12の幅を持つ（デフォルト）x x x1.5 1.5
8配置をするときに便利なコンポーネント~Grid~合計で12の幅を持つ（デフォルト）x=3.0 1.5 1.5x=3.0 x=3.02. 各要素をGridコンテナ内のitemとして設定し、配置を調整
9配置をするときに便利なコンポーネント~Grid~● コードで書くとこんな感じです
10実際にコーディングしてみましょう1. NEXTプロジェクトを作る1-1. ターミナルで、好きな場所にプロジェクトを作成する※npxが無い場合には、以下のようにする（-gはグローバルインストール）$ npm install -g npx1-2. 色々と選択肢を聞かれるが、全部Enterでゴリ押し$ npx create-next-app@latest --ts .
11実際にコーディングしてみましょう2. 不要なものを削除する● package-lock.json● appディレクトリ（srcディレクトリ内）→ これらは、デフォルトで含まれるものですが、削除で⼤丈夫です。
12実際にコーディングしてみましょう3. 必要なファイル、ディレクトリを作成する3-1. pagesディレクトリの作成$ mkdir pages3-2. pagesディレクトリ内に、index.tsxファイルを作成する$ touch pages/index.tsxor$ echo “” >> pages/index.tsx
13実際にコーディングしてみましょう4. ここまでのツリー構造を確認する4-1. (Macだけ) treeコマンドを取得$ brew update$ brew install tree4-2. treeコマンドで、階層を出力$ tree -L 1.├── README.md├── next-env.d.ts├── next.config.js├── node_modules├── package.json├── pages├── public├── src└── tsconfig.json
14実際にコーディングしてみましょう5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する5-1. pages/index.tsxを開いて、まずは簡単なコードを記載する● pages/index.tsexport default function Welcome() {return 最初のページ}
15実際にコーディングしてみましょう5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する5-2. yarnを⽤いて、必要なパッケージをインストール$ yarn5-3. アプリのビルドを⾏う$ yarn run build5-4. アプリの起動（デフォルトポートは3000だが、変更したい場合は以下のように指定）$ yarn run start --port=3005
16実際にコーディングしてみましょう5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する5-5. ページの確認
17実際にコーディングしてみましょう6. スタイルコンポーネントを作成する6-1. material-uiをインストールする$ yarn add @mui/material @mui/styles @emotion/react \@emotion/styled
18実際にコーディングしてみましょう6. スタイルコンポーネントを作成する6-2. srcディレクトリ内に、stylesディレクトリを作成し、その中にmainStyles.tsを作成$ mkdir src/styles$ touch src/styles/mainStyles.ts
19実際にコーディングしてみましょう6. スタイルコンポーネントを作成する6-3. mainStyles.tsを好きなように編集● src/styles/mainStyles.tsexport const useMainStyles = makeStyles({centerlizedWithPadding: {padding: '1em',textAlign: 'center',}})
20実際にコーディングしてみましょう6. スタイルコンポーネントを作成する6-4. pages/index.tsxのコンポーネントを囲むようにして、スタイルを適⽤する● pages/index.tsximport { useMainStyles } from '@/styles/mainStyles'export default function Welcome() {const classes = useMainStyles()return (最初のページ)}
21実際にコーディングしてみましょう6. スタイルコンポーネントを作成する6-5. ページの確認
22実際にコーディングしてみましょう7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる7-1. pages/index.tsxにて、コンポーネントの下に、Gridコンテナを配置する● pages/index.tsximport { useMainStyles } from '@/styles/mainStyles'import { Grid } from '@mui/material'// …return ( //…最初のページ)}
23実際にコーディングしてみましょう7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる7-2. pages/index.tsxにて、Gridコンテナ内に、Gridアイテムを⼊れていく● pages/index.tsxあいう
24実際にコーディングしてみましょう7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる7-3. ページの確認
25実際にコーディングしてみましょう8. Cardコンポーネントを⽤いて、カードを配置してみる8-1. Cardコンポーネントとは：https://mui.com/material-ui/react-card/● テキストや画像などのついたカードが簡単に作成できるコンポーネント
26実際にコーディングしてみましょう8. Cardコンポーネントを⽤いて、カードを配置してみる8-2. pages/index.tsx内で、Cardコンポーネントを使ってみる● pages/index.tsximport { Card, Grid } from ‘@mui/material’…あ
27実際にコーディングしてみましょう8. Cardコンポーネントを⽤いて、カードを配置してみる8-3. ページの確認
28実際にコーディングしてみましょう8. Cardコンポーネントを⽤いて、カードを配置してみる8-4. 他の部分も同じようにコーディングして、ページの確認
29実際にコーディングしてみましょうExtra. Cardコンポーネントをほんの少しだけリッチにするEx-1. Cardコンポーネントを派⽣させる● src/components/extendedMui.tsxこれはまた後ほど...
30~Next~デザインとは？⼈間の特性について
31参考図書• MUI : https://mui.com/• UIデザイン 必携 : https://www.shoeisha.co.jp/book/detail/9784798169620
32Thank you
nearme_tech
nrslib
kasacchiful
uhyo
okuzawats
atinfinity
tsutsui
smt7174
ostk0069
doggy
mot_techtalk
masatoshiitoh
koic
kastner
kneath
yeseniaperezcruz
panda_program
chriscoyier
zakiyama
bcantrill
jonyablonski
marcduiker
sonatard
62gerente
quramy