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
【輪読会】基礎から学ぶVue.js【渋谷】 CH.5
Search
ise_tang
November 28, 2018
Technology
0
80
【輪読会】基礎から学ぶVue.js【渋谷】 CH.5
ise_tang
November 28, 2018
Tweet
Share
More Decks by ise_tang
See All by ise_tang
Should write test codes while application codes
ise_tang
0
420
Introduce ActiveSupport methods
ise_tang
1
1.7k
iCARE の Dev チームが 目指すところと日々の開発/What iCARE Dev team aim for and daily development
ise_tang
0
1.2k
Other Decks in Technology
See All in Technology
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
260
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.5k
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
0
420
Cracking the KubeCon CfP
inductor
2
250
Building Dashboards as a Hobby
egmc
0
240
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
290
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
3
920
反実仮想機械学習とは何か
usaito
PRO
12
4.8k
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
220
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
570
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Become a Pro
speakerdeck
PRO
11
4.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Into the Great Unknown - MozCon
thekraken
10
1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Ruby is Unlike a Banana
tanoku
96
10k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Transcript
【輪読会】基礎から学ぶVue.js【渋谷】 Ch.5 「コンポーネントで UI 部品を作る」
基礎から学ぶ Vue.js amazon: http://amzn.asia/d/gIfPDHo サポートサイト:https://cr-vue.mio3io.com/
コンポーネント
コンポーネントとは • コンポーネント -> 部品 • Vue.js では機能を持つUI部品をコンポーネントとする ◦ 以下の2つを一緒に管理する
▪ テンプレート ▪ JavaScript のロジック • 再利用をできるようにしておくと便利 ◦ 修正漏れが減る ◦ ex)リストの中のリストアイテムをコンポーネント化しておけばリストに修正があった時に修正箇所が 減る リスト リストアイテム リストアイテム リストアイテム リストアイテムの一つ を変更するだけで他 の部分にも適応され る リスト リストアイテム リストアイテム リストアイテム
コンポーネントの定義 • Vue.component を使うとグローバルに定義できて他からも利用できる ◦ グローバルに定義した例 • ローカルへの登録もすることができる ◦ ローカル登録の例
• コンポーネントのオプション ◦ 今までと同じように定義できる ▪ methods ▪ data • ただし data はオブジェクトを返す関数でなければいけない ▪ filter ▪ … ◦ 例 • ルート要素は単一でなければならない ◦ 例
コンポーネント間の通信
コンポーネント間の通信 • それぞれのコンポーネントはスコープが区切られている ◦ 意図せず他の機能に影響を与えないため • コンポーネント間でデータのやりとりをする方法は3つ ◦ 親子間でpropsとカスタムイベントを使ったやりとり ◦
イベントバスをつかう ◦ Vuexを使う ▪ これはCh8で。
親子コンポーネント • コンポーネントで別のコンポーネントを使うと親子関係になる ◦ https://codepen.io/issei126/pen/oQdKoj • ルートコンポーネントを「親コンポーネント」ということもある
親子間のデータフロー • 親から子 ◦ 属性で渡して、propsで受け取る • 子から親 ◦ カスタムイベントを使って送る 親
子 value=’hoge’ props: value $emit(‘eventName’, data) foo(data)
親から子へのデータのわたし方 • 親は「属性」として渡す • 子は「props」で受け取る ◦ https://codepen.io/issei126/pen/jQKGoE
子コンポーネントへの属性付与 • props として受け取る指定をしていない属性は親コンポーネントで指定したもので 上書きされる ◦ 複数していできるものはマージされる ◦ バグの元になりそうなので頭にいれておいたほうがいいかも ◦
https://codepen.io/issei126/pen/qQKVBp
コンポーネントのリストレンダリング • コンポーネントに対して v-for を使うことができる • https://codepen.io/issei126/pen/mQKqea
propsで受け取ったデータの書き換え • props で受け取ったデータは勝手に書き換えてはいけない ◦ 警告が出る例 • 子のコンポーネントの中で書き換えて使いたい場合 ◦ 算出プロパティを使う
◦ https://codepen.io/issei126/pen/rQKYJY • 親のデータを書き換えたい場合 ◦ $emit を使って親にイベントを伝える (後述 • 配列/オブジェクトをprops渡す時には注意 ◦ 参照渡しなので親も書き換わってしまう ▪ https://codepen.io/issei126/pen/gQKXdO ◦ とにかく子で書き換えるのはやめましょう
propsの受け取りデータ型の指定 • props に受け取りデータ型を指定するのが推奨されている • 指定したもの以外が渡されると警告が出る ◦ エラー原因の特定の助けになる ◦ https://codepen.io/issei126/pen/oQyoOO
• データ型以外にもデフォルト値や必須項目などを指定できる ◦ https://codepen.io/issei126/pen/rQKpBK
子から親 • 子から $emit を使いイベントを発火させる ◦ https://codepen.io/issei126/pen/gQKoLw • データを渡すこともできる ◦
https://codepen.io/issei126/pen/oQypwN
親の持つデータの操作 • 子から emit でデータを渡す→親では渡されたデータを元にメソッド内で変更 • https://codepen.io/issei126/pen/bQKaYo
ネイティブイベントの発火 • onclick などのイベントを発火したいときは .native をつける ◦ つけないと emit で明示的に発火させないといけない
◦ https://codepen.io/issei126/pen/WYydJM
非親子コンポーネント • 親子関係ではないコンポーネント間は props をつかってのデータ渡しができない • Vue インスタンスをイベントバスとして利用する ◦ データを保持するインスタンス
• 複雑になケースではVuexを使うほうがいいかも • https://codepen.io/issei126/pen/mQjoRG
子コンポーネントを参照する • 参照される側には ref 属性、参照する側では $refs でコンポーネントを参照できる • https://codepen.io/issei126/pen/dQjLMr
スロット
スロットを使ったコンポーネントのカスタマイズ • 「スロット」は親となるコンポーネント側から、子コンポーネントのテンプレートの一部 を差し込む機能 • 親から子のテンプレートを変更したりするためにつかう • https://codepen.io/issei126/pen/aQjxyQ
名前付きスロット 名前をつけることで複数のスロットを使うことができる https://codepen.io/issei126/pen/eQjoKj
スコープつきスロット slot-scope を使うと子コンポーネントからデータを受け取ることができる https://codepen.io/issei126/pen/MzBdGM
双方向データバインディング • 「props で渡す」「$emitでイベントとして親に渡す」ではなく双方向でバインドするこ とができる • v-model を使う ◦ https://codepen.io/issei126/pen/vQzMEv
• 受け渡す値をカスタマイズすることもできる ◦ https://codepen.io/issei126/pen/RqYOjX
sync による双方向データバインディング • sync を使うことで一つのコンポーネントに複数の属性を同期させることができる • 他と同じ $emit でイベントを発火する必要がある •
https://codepen.io/issei126/pen/wQEZxW
テンプレート定義
テンプレートの書き方 • template オプション ◦ 単一ファイルコンポーネントを使用しない場合に推奨されている • inline-template ◦ inline-template
属性があるとき内側にある時、それをテンプレートとして使う ◦ 推奨されていない • text/x-template + セレクタ ◦ 学習やコードのシェアには役立ちそうだけど、推奨されてない • 描画関数 ◦ HTMLベースのテンプレートはオブジェクト構造に分解され、 JSの関数にコンパイルされる ◦ これを描画関数という ◦ その描画関数を直接使う ◦ この本の詳細な説明はされていない https://codepen.io/issei126/pen/dQqEyb
注意点 • コンポーネントの命名規則 ◦ 文字と文字はハイフンでつなぐ「ケバブケース」にする必要がある ◦ OK ▪ <my-component></my-component> ◦
NG ▪ <myComponent></myComponent> ▪ <my_component>/my_component> • HTMLの包含可能な要素のルール ◦ <table>, <select> などは内部に持てる要素が制限される ◦ 自前のコンポーネントを入れ込みたいときは is 属性をつける ◦ 公式ドキュメント ◦ あんまり参考にならない例w ▪ https://codepen.io/issei126/pen/NELVOz
その他の機能やオプション
関数型コンポーネント • 状態とインスタンスを持たないコンポーネントをつくることができる ◦ functional オプションをつける ◦ dataはもてないけど、propsはつかえる • メリット
◦ パフォーマンスがたかい ▪ ライフサイクルや監視が行われないため • 注意点 ◦ VueDevToolに表示されない • https://codepen.io/issei126/pen/rQZEKM
動的コンポーネント is 属性を使うことで複数のコンポーネントを切り替えることができる https://codepen.io/issei126/pen/OaoeBq
mixin • 共通処理を登録するために使う • mixinとコンポーネントで定義が重複している場合 ◦ data などのオプション ▪ コンポーネントの定義が優先
◦ created などのフック関数 ▪ ミックスインのフックからすべて呼び出される • https://codepen.io/issei126/pen/YROobO
keep-alive • 通常 v-if や動的コンポーネントなどの切り替えではインスタンスが破棄され、状態 が初期化してしまう • keep-alive を使うと非描画になっていても状態を維持できる •
keep-alive で追加されるライフサイクルフック ◦ activated: keep-alive を適用したコンポーネントが活性化した時 ◦ deactivate: keep-alive を適用したコンポーネントが非活性化した時 • https://codepen.io/issei126/pen/MzqNKp