$30 off During Our Annual Pro Sale. View Details »

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

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

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

More Decks by NearMeの技術発表資料です

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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















    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. 20
    実際にコーディングしてみましょう
    6. スタイルコンポーネントを作成する
    6-4. pages/index.tsxのコンポーネントを囲むようにして、スタイルを適⽤する
    ● pages/index.tsx
    import { useMainStyles } from '@/styles/mainStyles'
    export default function Welcome() {
    const classes = useMainStyles()
    return (

    最初のページ

    )
    }

    View Slide

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

    View Slide

  23. 22
    実際にコーディングしてみましょう
    7. コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる
    7-1. pages/index.tsxにて、コンポーネントの下に、Gridコンテナを配置する
    ● pages/index.tsx
    import { useMainStyles } from '@/styles/mainStyles'
    import { Grid } from '@mui/material'
    // …
    return ( //…

    最初のページ


    )
    }

    View Slide

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















    View Slide

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

    View Slide

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

    View Slide

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






    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. 32
    Thank you

    View Slide