はじめに
今回は、普段開発する際に書いているコードは、ちゃんと中身を理解してかけているかという点を振り返るために記事を投稿します。使用言語は"Vue.js"です。
ここで振り返りを行う目的は、
・なんとなく書いていたコードをきちんと理解すること
・今後エラーが発生した際に、自分の力で対応できるようになること
になります。
※実際のコードで説明します
と記載がある部分は後ほど記事を修正する予定です。
目次
本記事の目次になります
1.Vueのライフサイクル
2.コンポーネントの構図・仕組
3.propsと$emit
4.グリッドkeyの役割
5.DOM直接参照($refs)
6.v-slot
7.Vuex
###1. Vueのライフサイクル
各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかの ライフサイクルフック(lifecycle hooks) と呼ばれる関数を実行します。
それぞれの関数の流れを示した図と一覧は以下の通り。
-Vue.js公式ドキュメントから引用
| ライフサイクル | タイミング | 備考 |
|---|---|---|
| beforeCreate | インスタンスは生成されたがデータが初期化される前 | - |
| created | インスタンスが生成され､且つデータが初期化された後 | - |
| beforeMount | インスタンスが DOM 要素にマウントされる前 | - |
| mounted | インスタンスが DOM 要素にマウントされた後 | コンポーネントがHTML要素の一員として画面に描画されている状態。 DOM にアクセス可能ということ |
| beforeUpdate | データは更新されたが DOM に適用される前 | - |
| updated | データが更新され､且つ DOM に適用された後 | 値の変更タイミングで DOM を自動的に更新し、再描画する |
| beforeDestroy | Vue インスタンスが破壊される前 | v-if,v-forなどのインスタンスが表示されなくなるタイミングで呼ばれる |
| destroyed | Vue インスタンスが破壊された後 | - |
以下参考
###2. コンポーネントの構図・仕組
コンポーネントは、Vue.js の強力な機能の一つである。機能を持つUI部品ごとにテンプレートとJavaScriptを一つのセットにして、他の部品とは切り離した開発及び管理ができるようにする仕組み・機能。
自身が使ってみて感じたメリットを記載します。
自身が感じたメリット ...
①. 単一ファイルコンポーネント※で開発できるため、管理し易い
このファイルは何をするものかがわかりやすい
※単一ファイルコンポーネント ... HTML, CSS, JavaScriptを1ファイルにまとめて書くこと
②. 記述量が多くなった場合でもに複雑に感じにくい
どこでイベントを呼ぶ、メソッドを書く、といったことを記述する場所がはっきりわかれていから
以下はアプリケーションがネストされたコンポーネントのツリーイメージ図
-Vue.js 公式ドキュメントから引用
###3. propsと$emit
以下の定義で整理する。また整理した図も引用する。
| 属性 | 定義 |
|---|---|
| props | 親から子へのデータの受け渡し |
| $emit | 子から親へのイベントの通知 |
※実際のコードで説明します
-こちらの記事から引用（https://www.hypertextcandy.com/vuejs-components-introduction-communication-between-components）
####[補足]プロパティを使用した子コンポーネントへのデータの受け渡し
-Vue.js 公式ドキュメントから引用
"""
表示する特定のコンテンツなどのデータをコンポーネントに渡すことができない限り、そのコンポーネントは役に立たないということです。プロパティはここで役立ちます。
プロパティはコンポーネントに登録できるカスタム属性です。値がプロパティ属性に渡されると、そのコンポーネントインスタンスのプロパティになります。ブログ投稿コンポーネントにタイトルを渡すには、props オプションを使用して、このコンポーネントが受け入れるプロパティのリストにそれを含めることができます:
"""
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
https://jp.vuejs.org/v2/guide/components.html
###4. グリッドのkeyの役割
グリッドの Key の役割とは...
要素の識別と効率的な描画処理を可能とするもの
Keyを指定する場合としない場合で、グリッドに対して操作した場合以下のような違いが起きる。
| Key ある場合 | Key がない場合 |
|---|---|
| 消滅した key の DOM が削除されるだけ | 要素の文字が変更されたと解釈し、 順番の変わった要素を全て更新してしまう |
※実際のコードで説明します
###5. DOM直接参照($refs)
そもそも ref 属性とは...
分散されたネーム・レゾリューションを容易に行ったり、複数のサーバーに渡って検索を行ったりするために使用される属性を指す。
参照するサーバー内で指定する項目に出現します。ref 属性の値は、参照されるサーバー内で保持されている項目を指します。
言い換えると ...
取得したいコンポーネントのタグ内に、ref属性を付与することでマーキングし、実際にref 属性でマーキングしたコンポーネントを取得することができる。
以下参考
###6. v-slot
v-slotとは ...
親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能
※実際のコードで説明します
以下参考
###7. Vuex
※Vue.js 公式ドキュメントより概要をおさらいし、実際のコードで説明
Vuex ... Vue.js アプリケーションのための 状態管理パターン + ライブラリ
以下はVuexの全体像を表した図
-Vue.js 公式ドキュメントから引用
※実際のコードで説明します
まとめ
なんとなくイメージしているコードを、ちゃんと理解することは、エラーが出た際にも何が原因かを自力で追えるようになると思います。今回記事にできなかった分も追加していく予定です。