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
84
【輪読会】基礎から学ぶ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
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
290
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
230
Trust as Infrastructure
bcantrill
1
360
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
530
データエンジニアがこの先生きのこるには...?
10xinc
0
470
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
220
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
620
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
110
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
GitHub's CSS Performance
jonrohan
1032
460k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Gamification - CAS2011
davidbonilla
81
5.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Visualization
eitanlees
148
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
119
6.4k
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