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
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
130
ToDoリストを作ってる話
uhck
0
96
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
uhck
1
890
LaravelでGraphQLやってみた
uhck
0
1.6k
Vueコンポーネントについて考えてみた
uhck
0
2.1k
「PWA」とこれからのウェブ
uhck
0
160
Nuxt.jsとNetlifyで はじめるJAMstack
uhck
1
1.1k
Other Decks in Technology
See All in Technology
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
140
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
OPENLOGI Company Profile
hr01
0
67k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
190
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
16k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
690
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Docker and Python
trallard
44
3.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How GitHub (no longer) Works
holman
314
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Facilitating Awesome Meetings
lara
54
6.4k
Done Done
chrislema
184
16k
Building an army of robots
kneath
306
45k
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