Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新入社員目線から学ぶエンジニアに必要なこと 第3回:UIを作っていく~序章~(React初級...
Search
NearMeの技術発表資料です
PRO
September 26, 2023
Programming
0
120
新入社員目線から学ぶエンジニアに必要なこと 第3回:UIを作っていく~序章~(React初級レベル)
Reactの初級レベルです。マテリアルデザインの一部を扱っています。
NearMeの技術発表資料です
PRO
September 26, 2023
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
希望休勤務を考慮したシフト作成
nearme_tech
PRO
0
20
Hub Labeling による高速経路探索
nearme_tech
PRO
0
54
Build an AI agent with Mastra
nearme_tech
PRO
0
68
Rustで強化学習アルゴリズムを実装する vol3
nearme_tech
PRO
0
33
Webアプリケーションにおけるクラスの設計再入門
nearme_tech
PRO
1
73
AIエージェント for 予約フォーム
nearme_tech
PRO
2
140
ULID生成速度を40倍にしたった
nearme_tech
PRO
2
51
Amazon AuroraとMongoDBの アーキテクチャを比較してみたら 結構違った件について
nearme_tech
PRO
0
24
GitHub Custom Actionのレシピ
nearme_tech
PRO
0
16
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
110
ニーリーにおけるプロダクトエンジニア
nealle
0
580
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
PicoRuby on Rails
makicamel
2
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
570
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
200
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Team operations that are not burdened by SRE
kazatohiei
1
260
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
694
190k
GraphQLとの向き合い方2022年版
quramy
48
14k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Music & Morning Musume
bryan
46
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Become a Pro
speakerdeck
PRO
28
5.4k
How GitHub (no longer) Works
holman
314
140k
Gamification - CAS2011
davidbonilla
81
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
0 2023-09-22 第61回NearMe技術勉強会 Kaito Asahi 新入社員目線から学ぶエンジニアに必要なこと 第3回:UIを作っていく~序章~(React初級レベル)
1 ~Question~ UI‧UXで気にした⽅が良いことって何でしょう...? UI=User Interface, UX = User Experience
2 ~Question~ 今まで出会った良いと感じたUI‧UXを教えてください!
3 Example • https://www.pokemon.co.jp/ex/sv/ja/(ポケモンSV公式サイト) ◦ スクロールをするたびに、たたまれていた⼦コンテンツなどが表⽰される ◦ ⼦ページへ移動するカードに関しては、等間隔で整理されていて⾒やすい
4 配置の重要性 • メインとなるようなものに関しては独⽴して⼤きく • 各メニューは、なるべく均等な配置(重要度別に⼤きさを変えても良い)
5 配置をするときに便利なコンポーネント~Grid~ • <Grid></Grid>を⽤いて、各要素を綺麗に配置することができる
6 配置をするときに便利なコンポーネント~Grid~ 1. まずは、Gridコンポーネントを⽤いて、コンテナを作成する Grid container
7 配置をするときに便利なコンポーネント~Grid~ 2. 各要素をGridコンテナ内のitemとして設定し、配置を調整 合計で12の幅を持つ(デフォルト) x x x 1.5 1.5
8 配置をするときに便利なコンポーネント~Grid~ 合計で12の幅を持つ(デフォルト) x=3.0 1.5 1.5 x=3.0 x=3.0 2. 各要素をGridコンテナ内のitemとして設定し、配置を調整
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>
10 実際にコーディングしてみましょう 1. NEXTプロジェクトを作る 1-1. ターミナルで、好きな場所にプロジェクトを作成する ※npxが無い場合には、以下のようにする(-gはグローバルインストール) $ npm install
-g npx 1-2. 色々と選択肢を聞かれるが、全部Enterでゴリ押し $ npx create-next-app@latest --ts .
11 実際にコーディングしてみましょう 2. 不要なものを削除する • package-lock.json • appディレクトリ(srcディレクトリ内) → これらは、デフォルトで含まれるものですが、削除で⼤丈夫です。
12 実際にコーディングしてみましょう 3. 必要なファイル、ディレクトリを作成する 3-1. pagesディレクトリの作成 $ mkdir pages 3-2.
pagesディレクトリ内に、index.tsxファイルを作成する $ touch pages/index.tsx or $ echo “” >> pages/index.tsx
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
14 実際にコーディングしてみましょう 5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する 5-1. pages/index.tsxを開いて、まずは簡単なコードを記載する • pages/index.ts export default
function Welcome() { return <h1>最初のページ</h1> }
15 実際にコーディングしてみましょう 5. pagesディレクトリの、index.tsxを編集し、実際にページを表⽰する 5-2. yarnを⽤いて、必要なパッケージをインストール $ yarn 5-3. アプリのビルドを⾏う
$ yarn run build 5-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.ts export const
useMainStyles = makeStyles({ centerlizedWithPadding: { padding: '1em', textAlign: 'center', } })
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> ) }
21 実際にコーディングしてみましょう 6. スタイルコンポーネントを作成する 6-5. ページの確認
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> ) }
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>
24 実際にコーディングしてみましょう 7. <Grid>コンポーネントを⽤いて、テキストを等間隔で綺麗に配置してみる 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.tsx import {
Card, Grid } from ‘@mui/material’ … <Grid item={true} xs={3}> <Card style={{ backgroundColor: '#000000', color: '#FFFFFF' }}> <h1>あ</h1> </Card> </Grid>
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
32 Thank you