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
83
【輪読会】基礎から学ぶ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
900
Introduce ActiveSupport methods
ise_tang
1
1.8k
iCARE の Dev チームが 目指すところと日々の開発/What iCARE Dev team aim for and daily development
ise_tang
0
1.3k
Other Decks in Technology
See All in Technology
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
390
Agile PBL at New Grads Trainings
kawaguti
PRO
1
420
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
400
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
440
AWSで始める実践Dagster入門
kitagawaz
1
610
20250913_JAWS_sysad_kobe
takuyay0ne
2
190
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
170
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
400
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Designing for humans not robots
tammielis
253
25k
Writing Fast Ruby
sferik
628
62k
Navigating Team Friction
lara
189
15k
Into the Great Unknown - MozCon
thekraken
40
2k
Fireside Chat
paigeccino
39
3.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Rails Girls Zürich Keynote
gr2m
95
14k
It's Worth the Effort
3n
187
28k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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