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.1k
揮発性の高いコンポーネントを作る話
Chiaki Uehira
March 20, 2019
Tweet
Share
More Decks by Chiaki Uehira
See All by Chiaki Uehira
個人と組織から考える自由な働き方について
uhck
0
90
ToDoリストを作ってる話
uhck
0
68
Nuxt.js + Firebaseで (最高の)ToDoリストを作った話
uhck
1
800
LaravelでGraphQLやってみた
uhck
0
1.5k
Vueコンポーネントについて考えてみた
uhck
0
1.9k
「PWA」とこれからのウェブ
uhck
0
120
Nuxt.jsとNetlifyで はじめるJAMstack
uhck
1
910
Other Decks in Technology
See All in Technology
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Into the Great Unknown - MozCon
thekraken
20
1.3k
The Pragmatic Product Professional
lauravandoore
29
6.1k
GraphQLとの向き合い方2022年版
quramy
36
13k
Ruby is Unlike a Banana
tanoku
96
10k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
In The Pink: A Labor of Love
frogandcode
139
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Code Review Best Practice
trishagee
58
16k
Speed Design
sergeychernyshev
9
270
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
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