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
80
新入社員目線から学ぶエンジニアに必要なこと 第3回:UIを作っていく~序章~(React初級レベル)
Reactの初級レベルです。マテリアルデザインの一部を扱っています。
NearMeの技術発表資料です
PRO
September 26, 2023
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
2つの曲線を比較する方法ってあるの? 〜フレシェ距離を試してみた〜 with Python
nearme_tech
PRO
1
18
Constrained K-means Clustering (クラスタサイズの制限をしたK-means法) を調べてみた
nearme_tech
PRO
0
16
VRPの近傍操作SWAP*について調べてみた
nearme_tech
PRO
1
49
新人エンジニアが読んでためになった本
nearme_tech
PRO
2
21
Object–relational mapping and query builder battle 1: Intro to Prisma
nearme_tech
PRO
1
29
深層学習モデルの最適化 -Deep Learning Tuning Playbookを読む-
nearme_tech
PRO
1
52
機械学習を支える連続最適化
nearme_tech
PRO
1
44
サードパーティクッキーの終焉と Topics APIによる代替の可能性
nearme_tech
PRO
1
81
ONNXハンズオン
nearme_tech
PRO
2
28
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Terraformテスト入門
msato
0
540
CSC307 Lecture 07
javiergs
PRO
0
220
CSC307 Lecture 14
javiergs
PRO
0
220
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
Introduction to GitOps
hwchiu
0
110
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Trial
cairolibrary720
1
130
Featured
See All Featured
Happy Clients
brianwarren
94
6.6k
Unsuck your backbone
ammeep
666
57k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
The Language of Interfaces
destraynor
151
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Statistics for Hackers
jakevdp
792
220k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Faster Mobile Websites
deanohume
303
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Web Components: a chance to create the future
zenorocha
307
41k
A Philosophy of Restraint
colly
200
16k
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