Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
揮発性の高いコンポーネントを作る話
Search
Chiaki Uehira
March 20, 2019
Technology
0
4.3k
揮発性の高いコンポーネントを作る話
Chiaki Uehira
March 20, 2019
Tweet
Share
More Decks by Chiaki Uehira
See All by Chiaki Uehira
個人と組織から考える自由な働き方について
uhck
0
150
ToDoリストを作ってる話
uhck
0
110
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
uhck
1
930
LaravelでGraphQLやってみた
uhck
0
1.7k
Vueコンポーネントについて考えてみた
uhck
0
2.1k
「PWA」とこれからのウェブ
uhck
0
170
Nuxt.jsとNetlifyで はじめるJAMstack
uhck
1
1.1k
Other Decks in Technology
See All in Technology
Next.js 16の新機能 Cache Components について
sutetotanuki
0
170
【開発を止めるな】機能追加と並行して進めるアーキテクチャ改善/Keep Shipping: Architecture Improvements Without Pausing Dev
bitkey
PRO
1
120
Connection-based OAuthから学ぶOAuth for AI Agents
flatt_security
0
350
AWSに革命を起こすかもしれない新サービス・アップデートについてのお話
yama3133
0
500
SQLだけでマイグレーションしたい!
makki_d
0
1.2k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.9k
AWSインフルエンサーへの道 / load of AWS Influencer
whisaiyo
0
210
株式会社ビザスク_AI__Engineering_Summit_Tokyo_2025_登壇資料.pdf
eikohashiba
1
110
AI駆動開発ライフサイクル(AI-DLC)の始め方
ryansbcho79
0
150
AWS re:Invent 2025~初参加の成果と学び~
kubomasataka
0
180
なぜ あなたはそんなに re:Invent に行くのか?
miu_crescent
PRO
0
200
Strands AgentsとNova 2 SonicでS2Sを実践してみた
yama3133
1
1.8k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
680
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Embracing the Ebb and Flow
colly
88
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.3k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
190
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
140
How to Think Like a Performance Engineer
csswizardry
28
2.4k
Writing Fast Ruby
sferik
630
62k
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
94
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
揮発性の高い コンポーネントを作る話 揮発性の高いコンポーネントに作る話 Chiaki Uehira https://uhck.in
揮発性の高いコンポーネントに作る話 合同会社ピクセルグラムの代表。大阪を中心にウェブの プログラマー・デザイナーとして活動しています。解 析・改善を含めた制作を得意としています。 Chiaki Uehira Programmer / Designer https://uhck.in
https://pixelgram.jp https://twitter.com/_uhck
揮発性の高いコンポーネントに作る話 ダイアログのような、一時的にそのときだけ必要になるもの を揮発性の高いUI・コンポーネントっていうみたいです。ほ かにも、ツールチップとかポップアップとかもそう。 揮発性の高い コンポーネントとは
揮発性の高いコンポーネントに作る話 事前にダイアログのコンポーネントを仕込んでv‑ifで切り替 えてるパターン。 管理画面など、ロジックが複雑な画面になるとテンプレート の中にダイアログのコンポーネントがずらずら並んでくる。 よくある実装
揮発性の高いコンポーネントに作る話 グローバルメソッドでダイアログを呼び出したい。ダイアロ グを閉じるとPromiseが返ってくるようにしたい。 揮発性の高いコンポーネントはコンポーネントツリーに常駐 してる必要はなく、必要になったら動的に追加され、役目を 終えると削除される。 理想
揮発性の高いコンポーネントに作る話 1. メンテナンスの性の向上。 2. テンプレートの中を軽くする。 3. Stateやローカルdataの圧迫させない。 Element UIのNotice系は同じような実装になっている。 なぜそうするのか
揮発性の高いコンポーネントに作る話 実装方法 グローバルメソッド
揮発性の高いコンポーネントに作る話 実装方法 コンポーネント
揮発性の高いコンポーネントに作る話 実装方法 呼び出し
揮発性の高いコンポーネントに作る話 https://github.com/in‑the‑box/vue‑dialog DEMO
揮発性の高いコンポーネントに作る話 1. テンプレートの中身が複雑化しない 2. 関数でどこからでも呼び出せる 3. Promiseでかえってくるのでその後の処理も楽になる まとめ
揮発性の高いコンポーネントに作る話 ご静聴 ありがとうございました。
None