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の技術発表資料です
Rust 並列強化学習
nearme_tech
PRO
0
18
並列で⽣成AIにコーディングをやらせる
nearme_tech
PRO
1
78
希望休勤務を考慮したシフト作成
nearme_tech
PRO
0
25
Hub Labeling による高速経路探索
nearme_tech
PRO
0
80
Build an AI agent with Mastra
nearme_tech
PRO
0
73
Rustで強化学習アルゴリズムを実装する vol3
nearme_tech
PRO
0
38
Webアプリケーションにおけるクラスの設計再入門
nearme_tech
PRO
1
91
AIエージェント for 予約フォーム
nearme_tech
PRO
2
160
ULID生成速度を40倍にしたった
nearme_tech
PRO
2
58
Other Decks in Programming
See All in Programming
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
300
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
820
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
コーディングエージェント概観(2025/07)
itsuki_t88
0
440
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
Reactの歴史を振り返る
tutinoko
1
140
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
How GitHub (no longer) Works
holman
314
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Being A Developer After 40
akosma
90
590k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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