更新日: 2022年8月23日
公開日: 2022年8月18日

Ne:Code道場～ライフサイクルフックの巻①（メインはVue.jsバージョンアップ）～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのライフサイクルフックにおける学習ポイントについて紹介します。

はじめに
Vueのバージョンが3になると何が変わるのニャ
JavaScript側はHTMLよりも変更が多いのニャ？
createdというのが定義されているニャ！
最後に

はじめに

この記事ではVue.jsのライフサイクルフックについて補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、Vue.jsのライフサイクルフックについて理解を深めていきましょう。
ただ、今回のライフサイクルフック第1回は、事前に記載していた通り、Vue.jsのバージョンを「2.6.0」から、「3.2.37（2022夏時点の最新バージョン。以降はこのバージョンに固定します）」に上げてのサンプルコードとなっています。
なので、ライフサイクルフックの第1回の内容は、ライフサイクルフック自体は触りのみで、メインはバージョンアップに伴う、Vue.jsの書き方の違いを取り上げてゆきます。
（ライフサイクルフックよりも前の記事のVue.jsの3系との比較は、当初の予定通り、最後にまとめて取り上げてゆきたいと思います）

Vueのバージョンが3になると何が変わるのニャ

前回の記事では、Vue.jsのイベント引数について取り上げ、その記事でイベント関連の記載は一区切りとなりました。今回からは心機一転、ライフサイクルフックについて取り上げてゆきます。
心機一転と書きましたが、イベントと仕組み的にはとてもよく似ています。異なる部分はイベントは自分でどのイベントの監視を組み込み（例：HTMLのボタンに@click追加　等）、それをイベント処理として書いていましたが（例：JavaScript側にmethodsとして制御処理の追加　等）、ライフサイクルフックの場合は、監視のステップは不要で、Vue.jsが監視してくれているのを、こちらは処理として記載すれば良いだけ、というものになります。
　
ただ、この記事から、予告通り、Vue.jsのバージョンを3にあげたいと思いますので、まずは、Vue.jsを3に上げたことからの違いから見てゆきましょう。
　
比較的変更が少ないHTML側から確認していきます。以前記載したボタンクリックによるカウントアップのシンプルなコードになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <!-- ニャ！ここは2系と変わらずニャ！ -->
  <!-- Vue.jsを用いたい範囲に、id="app"としてアクセスできるようにしているのニャ～ -->
  <div id="app">
    <p>
      現在のカウントは
      <!-- ニャ！ここも2系と変わらずニャ！ -->
      <!-- {{}} を用いて、JavaScript側で定義している変数を表示しているのニャ -->
      <span>{{ count }}</span>
      だニャ
    </p>
    <!-- ニャ！ここも2系と変わらずニャ！ -->
    <!-- @clickでcountの値を1づつ増やしているニャ -->
    <button @click="count++">クリックするとカウントが増えるニャ♪</button>
  </div>
  <!-- ニャ！！ここは流石に違うのニャ！！！ -->
  <!-- ただ、CDNを読み込んでいるというのは同じニャ♪ -->
  <!-- そして、違いも、CDNのバージョンが違っているだけなのニャ。。！ -->
  <!-- なので、HTML側、ほとんど違い無いのを確認したニャ！ -->
  <script src="https://unpkg.com/vue@3.2.37"></script>
  <script src="script.js"></script>
</body>
</html>

猫弟子のコメントにもありますが、昔のコードとほとんど違いが無いことを確認出来るでしょう。違っているのはVue.jsのバージョン部分のみで、CDNとして読み込んでいるscirptタグのsrc属性の値のみ変わっているのが確認できますね。昔取り上げたv-modelの修飾子と比較しつつ確認しましたね。
それ以外は、Vue.jsを適用する範囲に何かしらの目印をつける目的で、全体を括っているdivにid属性が設定されていることや、「{{count}}」でcount変数の値を表示していること、ボタンクリック時の書き方など、前回のサンプルコードから変えてはいません。
大きな変更が少なく、一安心ですね。　
　
ただ、JavaScript側は少し変更箇所が多いです。猫弟子と一緒に確認してゆきましょう。

JavaScript側はHTMLよりも変更が多いのニャ？

猫弟子のコメントは順番に表示しながら確認してゆきます。まずは、Vueの宣言部分の記載についてコメントを付与した状態のものになります。

// ニャ！まずは、Vueの最初の記載から変わっているのニャ。。！
// 2系の時には、「new Vue({})」って書いていたニャ～。。！
Vue.createApp({
  data() {
    return { 
      count: 1 
    }
  },
  created() {
  }
}).mount('#app');
// ↑ニャ？！HTMLのどの範囲にVue.jsを適用するかの記載も変わっているニャ
// 2系の時には、new Vueの中に、「el: "#app"」って書いていたニャ。。！
// でも、どの範囲にの部分は、同じ「#app」だニャ
// バージョンが上がっても、CSSのセレクタの記載でどの範囲を指定可能なのニャ～

コメントが上と下に書いてあるのを確認できますね。上の宣言部分の記載がそもそも変わっており、また、末尾に、HTMLのどの範囲にVue.jsを適用するかが追加されていますね。
書き方の差異はありますが、Vueの宣言をしつつ、どこに適用するのかを設定するという部分は同じ様に実施されているのを確認できます。
　
次に、data部分の変更に関してです。

Vue.createApp({
  // 同じように見せかけて、ちょっと違うdataニャ！
  // 2系の時はオブジェクトのように書いていたニャ。「data: {}」だったニャ
  // 今回はreturnもついて、メソッドのようになっているニャ！
  // でも、returnしているもの自体に注目すると、dataの中身の書き方はは同じなのニャ♪
  data() {
    return { 
      count: 1 
    }
  },
  created() {
  }
}).mount('#app');

もともとのdataの書き方はオブジェクトのプロパティのようでしたが、今回は丸カッコがついて、メソッドのようですね。実は、Vue.jsのcomponent（コンポーネント）の定義では、このメソッドのようなdataの定義をします。componentを取り上げる前に、Vue.jsの3系入りをしましたので、簡単に補足しました。componentについての記事を記載する際に、もう少し深掘りの説明をできればと思います。
　
「メソッドのようになっている」という視点でみてみますと、returnの記載もしっくりくるかと思います。メソッドの返り値として定義されているのですね。
その返り値の中身がオブジェクトの定義になっています。猫弟子の言うように、この部分は以前の書き方と同じであることを確認出来るでしょう。

createdというのが定義されているニャ！

ライフサイクルフックその①ではありますが、今回の記事ではVue.jsを3系にしたことの違いをメインにし、ライフサイクルフックの補足は触りのみとします。
改めて、ライフサイクルフックの一つ、createdメソッドのコメント部分を取り上げます。

Vue.createApp({
  data() {
    return { 
      count: 1 
    }
  },
  created() {
    // 今回は、Vue3にしたことの補足がメインになるニャ
    // なので、ライフサイクルフック自体のお話は次回以降取り上げてゆくニャ～
    // ここに書いてあるのは、ライフサイクルフックの1つ、createdニャ！
    // 仔細は次回に譲るとして、ここでは、このように書いていることでエラーが起きていないことを確認できれば十分ニャ♪
    // Vueの文法として、ライフサイクルフックは、そのライフサイクルごとにメソッドを書くことが可能なのニャ～
  }
}).mount('#app');

ライフサイクルフック、Vue.jsのライフサイクルごとに、フックして、特定のタイミングで処理を実行してゆく場合に、ライフサイクルの種類ごとにメソッドが用意されているので、そのメソッドを定義し用いてゆくことになります。
今回からVue.jsの3系にしていますが、ライフサイクルフックのこの記載は、Vue.jsの2系でも全く同様になります。
各ライフサイクルごとに、画面上に要素が配置済みか、まだ未配置かなどのタイミングの違いがでてきますので、その点を考慮しながら用いてゆくと、とても便利に制御してゆくことが可能です。次回の記事ではその点を確認していきましょう。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

最後に

Vue.jsのライフサイクルフック、改め、Vue.jsの3系変更について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

2系から3系にあげた結果、シンプルな記載ではHTML側の変更はほぼ無いことを確認したニャ
1. ニャ～
JavaScript側は3系にしたことでの変更が多く確認できたニャ
1. ベースとして、Vueのインスタンスを定義する部分が大きく変わっていたニャ。でも、やろうとしていることは同じだというのが確認できたニャ～
2. data部分も地味に変わっていたニャ。でも、Vue.js2系でcomponentを作るときには、このVue.js3系の記載と全く同じになるのニャ。componentの記事の際に、その点も補足するニャ
ライフサイクルフックとしてcreatedの定義を見てみたニャ
1. Vue.jsがレンダリングする際の任意のタイミングに処理を挟み込めるライフサイクルフックはとても便利ニャ。次回以降の記事でその点を確認してゆくニャ～

Vue.jsについての記事として、Vue.jsの3系変更を踏まえつつ、ライフサイクルフックについて学びました。次回はライフサイクルフック自体にフォーカスを当て記載してゆく予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。