プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのライフサイクルフックにおける学習ポイントについて紹介します。
この記事ではVue.jsのライフサイクルフックについて補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、Vue.jsのライフサイクルフックについて理解を深めていきましょう。
（Vue.jsはバージョンは3を用いています。サンプルコードで「vue@3.2.37」という部分でその指定を行っています）
前回の記事では、Vue.jsのバージョンを2系から3系に上げることをメインにまとめました。ライフサイクルフック1つ目の記事でしたが、もっぱら中身は、そのバージョンアップに伴うサンプルコード上の変更点をピックアップして見てゆきましたね。今回は、本題となるライフサイクルフックの記載を取り上げてゆきます。
動作を確認するために、HTML側のコードをまずは、一部修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お試しHTMLニャ</title>
</head>
<body>
<div id="app">
<!-- なにやら見慣れない属性がついているのニャ！ -->
<p ref="output">
現在のカウントは
<span>{{ count }}</span>
だニャ
</p>
<button @click="count++">クリックするとカウントが増えるニャ♪</button>
</div>
<script src="https://unpkg.com/vue@3.2.37"></script>
<script src="script.js"></script>
</body>
</html>
ここで用いているのは、Vue.jsのテンプレート参照のrefになります。この後、ライフサイクルフックでの動作を確認するにあたり、ライフサイクルフックのタイミングによってHTML側がどういう状況になっているのかを確認する目的で追加しています。
JavaScript側から、昔取り上げた、「document.querySelector」などのDOMアクセスで比較しても良かったのですが、せっかくなのでVue.jsの機能としてDOMにアクセスするテンプレート参照のrefを用いました。
今回は例として利用していますが、基本的には、バインドやイベント操作などで間接的にHTML側を操作することが大前提です。テンプレート参照のrefは、それらではどうしても操作ができないようなシーンの救済策として設けられています。
今回は学習用のサンプルコードとして用いていますので、上記の注意点を前提にしてもらえればと思います。
ライフサイクルフックは、ライフサイクルの種類ごとにメソッドが用意されているので、そのメソッドを定義し用いてゆくことになります。
比較として、createdだけですと、実行タイミングがイメージし辛いかと思いますので、追加でmountedというライフサイクルフックも追加した状態のJavaScript側の記載がこちらです。
Vue.createApp({
data() {
return {
count: 1
}
},
// これは前回のサンプルコードでもあったのニャ
// 前回は中身なしだったけれど、今回は、中身が記載されているニャ！
created() {
// createdのライフサイクルフックが呼ばれていることがわかるようにログを出しているのニャ
console.log("createdのライフサイクルフックニャ～")
// dataに定義されているcountを出力しているニャ
console.log(this.count)
// これが、テンプレート参照のrefのアクセス方法なのニャ？
// $が前について、$refになっているのニャ～
// その後、ドットで、HTML側で属性値に書いていた文字、outputがそのまま書いてあるのニャ！
console.log(this.$refs.output)
},
// ニャ！これはニューフェイスニャ～
// これもライフサイクルフックの一部なのニャ！
mounted() {
// mountedも同様ニャ！どちらが先に呼ばれているのかがきっとポイントなのニャ
// createdの下に書いてあるから、きっと、created→mountedの順番なのニャ？！
console.log("mountedのライフサイクルフックニャ～")
// created()と、まったく同じ記載があるニャ！きっと、比較用ニャ
console.log(this.count)
// ニャ？？！ここは、created()と少し違っているのニャ
// innerText、なんだかJavaScriptでDOMアクセスをした時に見かけたような文字が続いているニャ～
console.log(this.$refs.output.innerText)
}
}).mount('#app');
こちらを実行してみますと、まず、createdが呼び出されていることを確認できます。created時点で、dataに定義されているcountの値はバッチリ取得できていますね。
ただ、DOM側を確認する目的で書いてある、テンプレート参照のrefについては、「undefined」、未定義となっています。まだ、DOMは描画されていない状態で、createdが呼び出されていることを確認できますね。
そして、次に実行されているのがmountedであることも確認できます。
dataに定義されているcountへのアクセスは、created時点ですでにアクセス可能になっているため、問題なく取得できていますね。
違いは、テンプレート参照のrefでアクセスしているDOM要素（ここでは、メッセージを表示するp要素）になります。
今回のサンプルコードを一部変更し、mountedの「this.$refs.output.innerText」を「this.$refs.output」に変更した場合、p要素がコンソールログ上に出力されているのを確認できるでしょう。テンプレート参照のrefでは、DOMが描画されたあとは、JavaScriptのDOMオブジェクトとして該当するDOM要素を取得できるのですね。なので、サンプルコードの記載例では、そのDOMオブジェクトがもっている、要素内のテキストを取得するinnerTextを用いています。それによって「現在のカウントは1だニャ」という出力が確認できているのですね。
このサンプルコードでは、createdが実行され、その次にmountedが実行されていました。
実行タイミングは、ライフサイクルフックごとに異なってきますので、それらのタイミングを把握した上で、順序よく記載してゆくことも重要なポイントになります。
上記サンプルコードの猫弟子のコメントでも記載順については言及してありますね。今回取り上げたもの以外にも、ライフサイクルフックは複数用意されています。柔軟に処理制御が可能になり、ありがたいですね。それらのライフサイクルフックの詳細は、ぜひ、公式のリファレンスなどを参照し、理解を深めていって貰えればと思います。
どういう種類があるのかを外観でも確認しておきますと、引き出しを増やすことができます。そして自分自身が実現したい処理で用いる場合には、必要なタイミングのライフサイクルフックを順番を意識しながら追加してゆくという対応をとると良いでしょう。
Vue.jsのライフサイクルフックについてのポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。
Vue.jsについての記事として、ライフサイクルフックについて学びました。次回はコンポーネントについて記載してゆく予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
