Tweet
Tweet

Slide 1

Slide 1 text

0 2023-09-22 第61回NearMe技術勉強会 Kaito Asahi 新入社員目線から学ぶエンジニアに必要なこと 第3回：UIを作っていく~序章~（React初級レベル）

Slide 2

Slide 2 text

1 ~Question~ UI‧UXで気にした⽅が良いことって何でしょう...？ UI=User Interface, UX = User Experience

Slide 3

Slide 3 text

2 ~Question~ 今まで出会った良いと感じたUI‧UXを教えてください！

Slide 4

Slide 4 text

3 Example ● https://www.pokemon.co.jp/ex/sv/ja/（ポケモンSV公式サイト） ○ スクロールをするたびに、たたまれていた⼦コンテンツなどが表⽰される ○ ⼦ページへ移動するカードに関しては、等間隔で整理されていて⾒やすい

Slide 5

Slide 5 text

4 配置の重要性 ● メインとなるようなものに関しては独⽴して⼤きく ● 各メニューは、なるべく均等な配置（重要度別に⼤きさを変えても良い）

Slide 6

Slide 6 text

5 配置をするときに便利なコンポーネント~Grid~ ● を⽤いて、各要素を綺麗に配置することができる

Slide 7

Slide 7 text

6 配置をするときに便利なコンポーネント~Grid~ 1. まずは、Gridコンポーネントを⽤いて、コンテナを作成する Grid container

Slide 8

Slide 8 text

7 配置をするときに便利なコンポーネント~Grid~ 2. 各要素をGridコンテナ内のitemとして設定し、配置を調整 合計で12の幅を持つ（デフォルト） x x x 1.5 1.5

Slide 9

Slide 9 text

8 配置をするときに便利なコンポーネント~Grid~ 合計で12の幅を持つ（デフォルト） x=3.0 1.5 1.5 x=3.0 x=3.0 2. 各要素をGridコンテナ内のitemとして設定し、配置を調整

Slide 10

Slide 10 text

9 配置をするときに便利なコンポーネント~Grid~ ● コードで書くとこんな感じです

Slide 11

Slide 11 text

10 実際にコーディングしてみましょう 1. NEXTプロジェクトを作る 1-1. ターミナルで、好きな場所にプロジェクトを作成する ※npxが無い場合には、以下のようにする（-gはグローバルインストール） $ npm install -g npx 1-2. 色々と選択肢を聞かれるが、全部Enterでゴリ押し $ npx create-next-app@latest --ts .

Slide 12

Slide 12 text

11 実際にコーディングしてみましょう 2. 不要なものを削除する ● package-lock.json ● appディレクトリ（srcディレクトリ内） → これらは、デフォルトで含まれるものですが、削除で⼤丈夫です。

Slide 13

Slide 13 text

12 実際にコーディングしてみましょう 3. 必要なファイル、ディレクトリを作成する 3-1. pagesディレクトリの作成 $ mkdir pages 3-2. pagesディレクトリ内に、index.tsxファイルを作成する $ touch pages/index.tsx or $ echo “” >> pages/index.tsx

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

14 実際にコーディングしてみましょう 5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する 5-1. pages/index.tsxを開いて、まずは簡単なコードを記載する ● pages/index.ts export default function Welcome() { return

最初のページ

}

Slide 16

Slide 16 text

15 実際にコーディングしてみましょう 5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する 5-2. yarnを⽤いて、必要なパッケージをインストール $ yarn 5-3. アプリのビルドを⾏う $ yarn run build 5-4. アプリの起動（デフォルトポートは3000だが、変更したい場合は以下のように指定） $ yarn run start --port=3005

Slide 17

Slide 17 text

16 実際にコーディングしてみましょう 5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する 5-5. ページの確認

Slide 18

Slide 18 text

17 実際にコーディングしてみましょう 6. スタイルコンポーネントを作成する 6-1. material-uiをインストールする $ yarn add @mui/material @mui/styles @emotion/react \ @emotion/styled

Slide 19

Slide 19 text

18 実際にコーディングしてみましょう 6. スタイルコンポーネントを作成する 6-2. srcディレクトリ内に、stylesディレクトリを作成し、その中にmainStyles.tsを作成 $ mkdir src/styles $ touch src/styles/mainStyles.ts

Slide 20

Slide 20 text

19 実際にコーディングしてみましょう 6. スタイルコンポーネントを作成する 6-3. mainStyles.tsを好きなように編集 ● src/styles/mainStyles.ts export const useMainStyles = makeStyles({ centerlizedWithPadding: { padding: '1em', textAlign: 'center', } })

Slide 21

Slide 21 text

20 実際にコーディングしてみましょう 6. スタイルコンポーネントを作成する 6-4. pages/index.tsxの

コンポーネントを囲むようにして、スタイルを適⽤する ● pages/index.tsx import { useMainStyles } from '@/styles/mainStyles' export default function Welcome() { const classes = useMainStyles() return (

最初のページ

) }

Slide 22

Slide 22 text

21 実際にコーディングしてみましょう 6. スタイルコンポーネントを作成する 6-5. ページの確認

Slide 23

Slide 23 text

22 実際にコーディングしてみましょう 7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる 7-1. pages/index.tsxにて、

コンポーネントの下に、Gridコンテナを配置する ● pages/index.tsx import { useMainStyles } from '@/styles/mainStyles' import { Grid } from '@mui/material' // … return ( //…

最初のページ

) }

Slide 24

Slide 24 text

23 実際にコーディングしてみましょう 7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる 7-2. pages/index.tsxにて、Gridコンテナ内に、Gridアイテムを⼊れていく ● pages/index.tsx

あ

い

う

Slide 25

Slide 25 text

24 実際にコーディングしてみましょう 7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる 7-3. ページの確認

Slide 26

Slide 26 text

25 実際にコーディングしてみましょう 8. Cardコンポーネントを⽤いて、カードを配置してみる 8-1. Cardコンポーネントとは：https://mui.com/material-ui/react-card/ ● テキストや画像などのついたカードが簡単に作成できるコンポーネント

Slide 27

Slide 27 text

26 実際にコーディングしてみましょう 8. Cardコンポーネントを⽤いて、カードを配置してみる 8-2. pages/index.tsx内で、Cardコンポーネントを使ってみる ● pages/index.tsx import { Card, Grid } from ‘@mui/material’ …

あ

Slide 28

Slide 28 text

27 実際にコーディングしてみましょう 8. Cardコンポーネントを⽤いて、カードを配置してみる 8-3. ページの確認

Slide 29

Slide 29 text

28 実際にコーディングしてみましょう 8. Cardコンポーネントを⽤いて、カードを配置してみる 8-4. 他の部分も同じようにコーディングして、ページの確認

Slide 30

Slide 30 text

29 実際にコーディングしてみましょう Extra. Cardコンポーネントをほんの少しだけリッチにする Ex-1. Cardコンポーネントを派⽣させる ● src/components/extendedMui.tsx これはまた後ほど...

Slide 31

Slide 31 text

30 ~Next~ デザインとは？⼈間の特性について

Slide 32

Slide 32 text

31 参考図書 • MUI : https://mui.com/ • UIデザイン 必携 : https://www.shoeisha.co.jp/book/detail/9784798169620

Slide 33

Slide 33 text

32 Thank you