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
フロントエンドの設計で大事なこと
Search
Daichi Sunagawa
November 16, 2023
Programming
0
25
フロントエンドの設計で大事なこと
Daichi Sunagawa
November 16, 2023
Tweet
Share
More Decks by Daichi Sunagawa
See All by Daichi Sunagawa
10分でわかるNext.js14
sngw0113
0
64
React と Next.js について
sngw0113
0
16
フロント開発でよく使われるライブラリの紹介
sngw0113
0
11
モダンJavaScript入門
sngw0113
0
16
【React入門】絶対に躓かない Reactワークショップ #3
sngw0113
0
6
【React入門】絶対に躓かない Reactワークショップ #2
sngw0113
0
9
【React入門】絶対に躓かない Reactワークショップ #1.pdf
sngw0113
0
33
Other Decks in Programming
See All in Programming
Open AI APIを使う前に知っておきたいアカウントTier の話
akki_megane
0
130
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
17
2.4k
Productivity is Messing Around and Having Fun
hollycummins
1
180
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
510
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
110
freeeのエンジニアが 就活で出そうな コーディングテストを 解説してみる
freee
1
170
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
120
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
Deep Dive into React Stream/Serialize
mugi_uno
4
860
WebGLで始める コンピュータグラフィックス入門
heller77
0
370
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
740
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
21
4k
It's Worth the Effort
3n
180
27k
A Philosophy of Restraint
colly
197
16k
Visualization
eitanlees
137
14k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Into the Great Unknown - MozCon
thekraken
15
1.1k
In The Pink: A Labor of Love
frogandcode
138
21k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Product Roadmaps are Hard
iamctodd
45
9.8k
Six Lessons from altMBA
skipperchong
22
3k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Transcript
砂川 大地 フロントエンドの 設計で大事なこと フロント勉強会
D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun
D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun
D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun 見た目と振る舞い 「ユーザーアイコン」と「メニュー表示」
D S 設計にあたって重要な考え方1 関心の分離 UIとビジネスロジック 「商品一覧」と「商品を取得する処理」 Amazun 見た目と振る舞い 「ユーザーアイコン」と「メニュー表示」
UIとビジネスロジックの分離 Before After 商品一覧の例 DS Amazun
見た目と振る舞いの分離 Before After アカウントメニューの例 D S プロフィール変更 メールアドレス変更 ログアウト
設計にあたって重要な考え方2 依存の方向性 関心を分離したとはいえ、どこかでそれらを接続する必要がある 依存関係をシンプルに保つ必要がある
設計にあたって重要な考え方2 依存の方向性 関心を分離したとはいえ、どこかでそれらを接続する必要がある 依存関係をシンプルに保つ必要がある レイヤードアーキテクチャ
アトミックデザイン
アトミックデザイン Molecules は Atoms に依存してもよいが、Organisms には依存しない
設計にあたって重要な考え方2 悪い例 `AccountMenu`コンポーネントに合わせて、 `handleMenuOpen`というpropsを用意する D S
Container/Presentationalパターン Container データがユーザーにどのように表示されるかを管 理するコンポーネント。 Presentational 何のデータがユーザーに表示されるかを管理する コンポーネント。
Container/Presentational パターン 「犬のデータ」を「ギャラリーで表示する」
Container/Presentational パターン Container層 Presentational層 バックエンド Container層だけがバックエンドに依存する 例)PagesコンポーネントをContainer層とし、 データの取得はPagesコンポーネントでのみ行う
他にも気になる方はこちらがおすすめです