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
110
新入社員目線から学ぶエンジニアに必要なこと 第3回:UIを作っていく~序章~(React初級レベル)
Reactの初級レベルです。マテリアルデザインの一部を扱っています。
NearMeの技術発表資料です
PRO
September 26, 2023
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
Rustで作る強化学習エージェント
nearme_tech
PRO
0
17
ビームサーチ
nearme_tech
PRO
0
25
WASM入門
nearme_tech
PRO
0
29
ESLintをもっと有効活用しよう
nearme_tech
PRO
0
19
リファクタリングのための第一歩
nearme_tech
PRO
0
61
ガウス過程回帰とベイズ最適化
nearme_tech
PRO
1
170
確率的プログラミング入門
nearme_tech
PRO
2
110
Observability and OpenTelemetry
nearme_tech
PRO
2
42
観察研究における因果推論
nearme_tech
PRO
1
150
Other Decks in Programming
See All in Programming
Formの複雑さに立ち向かう
bmthd
1
720
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Domain-Driven Transformation
hschwentner
2
1.9k
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Honoとフロントエンドの 型安全性について
yodaka
4
250
Unity Android XR入門
sakutama_11
0
140
sappoRo.R #12 初心者セッション
kosugitti
0
230
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Side Projects
sachag
452
42k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Site-Speed That Sticks
csswizardry
3
370
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Practical Orchestrator
shlominoach
186
10k
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