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
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
MobileActOsaka_250704.pdf
akaitadaaki
0
120
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
ビギナーであり続ける/beginning
ikuodanaka
3
750
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Code Review Best Practice
trishagee
69
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
A better future with KSS
kneath
238
17k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Side Projects
sachag
455
42k
Unsuck your backbone
ammeep
671
58k
Typedesign – Prime Four
hannesfritz
42
2.7k
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