Slide 1

Slide 1 text

揮発性の高い コンポーネントを作る話 揮発性の高いコンポーネントに作る話 Chiaki Uehira https://uhck.in

Slide 2

Slide 2 text

揮発性の高いコンポーネントに作る話 合同会社ピクセルグラムの代表。大阪を中心にウェブの プログラマー・デザイナーとして活動しています。解 析・改善を含めた制作を得意としています。 Chiaki Uehira Programmer / Designer https://uhck.in https://pixelgram.jp https://twitter.com/_uhck

Slide 3

Slide 3 text

揮発性の高いコンポーネントに作る話 ダイアログのような、一時的にそのときだけ必要になるもの を揮発性の高いUI・コンポーネントっていうみたいです。ほ かにも、ツールチップとかポップアップとかもそう。 揮発性の高い コンポーネントとは

Slide 4

Slide 4 text

揮発性の高いコンポーネントに作る話 事前にダイアログのコンポーネントを仕込んでv‑ifで切り替 えてるパターン。 管理画面など、ロジックが複雑な画面になるとテンプレート の中にダイアログのコンポーネントがずらずら並んでくる。 よくある実装

Slide 5

Slide 5 text

揮発性の高いコンポーネントに作る話 グローバルメソッドでダイアログを呼び出したい。ダイアロ グを閉じるとPromiseが返ってくるようにしたい。 揮発性の高いコンポーネントはコンポーネントツリーに常駐 してる必要はなく、必要になったら動的に追加され、役目を 終えると削除される。 理想

Slide 6

Slide 6 text

揮発性の高いコンポーネントに作る話 1. メンテナンスの性の向上。 2. テンプレートの中を軽くする。 3. Stateやローカルdataの圧迫させない。 Element UIのNotice系は同じような実装になっている。 なぜそうするのか

Slide 7

Slide 7 text

揮発性の高いコンポーネントに作る話 実装方法 グローバルメソッド

Slide 8

Slide 8 text

揮発性の高いコンポーネントに作る話 実装方法 コンポーネント

Slide 9

Slide 9 text

揮発性の高いコンポーネントに作る話 実装方法 呼び出し

Slide 10

Slide 10 text

揮発性の高いコンポーネントに作る話 https://github.com/in‑the‑box/vue‑dialog DEMO

Slide 11

Slide 11 text

揮発性の高いコンポーネントに作る話 1. テンプレートの中身が複雑化しない 2. 関数でどこからでも呼び出せる 3. Promiseでかえってくるのでその後の処理も楽になる まとめ

Slide 12

Slide 12 text

揮発性の高いコンポーネントに作る話 ご静聴 ありがとうございました。

Slide 13

Slide 13 text

No content