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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
160
ToDoリストを作ってる話
uhck
0
120
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
uhck
1
940
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
入社1ヶ月でデータパイプライン講座を作った話
waiwai2111
1
210
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
41k
しろおびセキュリティへ ようこそ
log0417
0
260
茨城の思い出を振り返る ~CDKのセキュリティを添えて~ / 20260201 Mitsutoshi Matsuo
shift_evolve
PRO
1
120
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
1
130
Amazon Bedrock AgentCore EvaluationsでAIエージェントを評価してみよう!
yuu551
0
210
3分でわかる!新機能 AWS Transform custom
sato4mi
1
320
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3.8k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
67k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
AWS Devops Agent ~ 自動調査とSlack統合をやってみた! ~
kubomasataka
3
330
Featured
See All Featured
A better future with KSS
kneath
240
18k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
430
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
170
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
820
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
310
エンジニアに許された特別な時間の終わり
watany
106
230k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
The browser strikes back
jonoalderson
0
350
The Curious Case for Waylosing
cassininazir
0
230
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