新入社員目線から学ぶエンジニアに必要なこと 第3回：UIを作っていく~序章~（React初級レベル）

Reactの初級レベルです。マテリアルデザインの一部を扱っています。

Transcript

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