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
nao-bt
February 24, 2018
Programming
1
1.1k
僕のフロントエンド奮闘記コンポーネントで、すったもんだ
We Are JavaScripters! @16th【初心者歓迎LT大会】の資料です。
https://wajs.connpass.com/event/78939/
nao-bt
February 24, 2018
Tweet
Share
More Decks by nao-bt
See All by nao-bt
そろそろWebpackと真剣に向き合ってみる
naotobt
9
5k
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
310
エラーって何種類あるの?
kajitack
5
290
VS Code Update for GitHub Copilot
74th
1
300
Using AI Tools Around Software Development
inouehi
0
1.3k
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
840
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
330
CursorはMCPを使った方が良いぞ
taigakono
1
170
Featured
See All Featured
Visualization
eitanlees
146
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Scaling GitHub
holman
459
140k
Docker and Python
trallard
44
3.4k
KATA
mclloyd
29
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Cult of Friendly URLs
andyhume
79
6.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Transcript
僕のフロントエンド奮闘記 コンポーネントで、すったもんだ Nao-bt
自己紹介 文系出身・プログラミング歴は約5年目。 サーバーもフロントもやる人。 ※できるとは言っていない。日々勉強中。 JSに関しては 前の会社でAngularJsの1.4系を業務で利用。 徐々にJSの面白みを感じ、個人的にフレームワークを中心に 勉強しはじめる。 いまの会社では レガシーでローカル開発環境のない基幹システムを
Vueを利用してリプレースしてます(主にフロント担当)。
今日は、コンポーネントで すったもんだした話。
JSフレームワークを使った開発を これから始める人に参考になれば・・・。
コンポーネント指向って? 画面をUIパーツごとに 分割して作り、組み合わせる。 パーツごとに作るから、 再利用しやすく 分業やテストがしやすい。
コンポーネント間のやりとり props down(親→子), events up(子→親)
親 子 親は子が どんなプロパティを受け取り どんなイベントを返すかを知っている。 子は親を知らなくてもいい。 コンポーネントの階層が深くなれば バケツリレーのようにしていく。
親は子を必ず知っているが、 子は親を知らなくてもいい。 再利用可能なコンポーネントの肝
JSフレームワークを使うと コンポーネント指向に基づく 開発ができる
でも どんなふうに どれくらいの細かさで コンポーネントって区切るんだ??
サーバーサイドのMVCみたいな 目安になるような分け方の 基準はないのかなぁ
そんなときに巡り合ったのが・・・
Atomic Design
コンポーネントの単位を5つの大きさに分けて作る考え方。 Atoms(原子) Molecules(分子) Organisms(有機体) Templates(テンプレート) Pages(ページ)
引用元:http://atomicdesign.bradfrost.com/chapter-2/
なんとなくよさげだ これでいってみよう。
Vuexも使ってみよう
Vuexを使うことで アプリの状態(データや storeとよばれることも)を コンポーネントから分離することができる。 親子関係のないコンポーネント間でも 状態の表示や変更が可能。 わざわざバケツリレーを書かなくてもよくなる。 Vuex公式サイトより、 Vuex を使った最も基本的なカウンターアプリの例
バケツリレーしなくていいなんて 素敵! 実装がはかどる!!
そう、このとき、 私は浮かれていました・・・。
バケツリレーの代わりにコンポーネント内に Vuex用の記載が増えていった。 ※実際のソースは見せれないので Vuex公式のサンプルより
どんなAction、Mutationがあるかを知らないと 成立しないコンポーネントを大量生産
Vuexと蜜結合で再利用できない
Atomic Designの振り返り ・これ再利用するかな?って場合が多々ある。 ・回数制限を設けて、既定の回数同じのを書いたら、 コンポーネント化するとかもありでは? ・初期は大変だろうけど、どんどん開発が進むにつ入れて楽になる。 ・一般ユーザー向けの場合は、見栄えとか重要だから 同じようなコンポーネントがたくさんできそう。
・Pagesコンポーネントの階層に Vuexをまとめて、そこから下の階層に バケツリレーすべきだった。 ・でも急いで実装しないといけない時は Vuexは助かる。(でも麻薬だと思う) Vuexとの組み合わせについての振り返り
よく考えて実装しないと 大変なことになる・・・。 他の人達がどんな コンポーネント管理してるか気になる! 懇親会で 教えてください・・・。