2022年8月18日Ne:Code道場~ライフサイクルフックの巻1(メインはVue.jsバージョンアップ)~プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのライフサイクルフックにおける学習ポイントについて紹介します。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。目次はじめに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のイベント引数について取り上げ、その記事でイベント関連の記載は一区切りとなりました。今回からは心機一転、ライフサイクルフックについて取り上げてゆきます。心機一転と書きましたが、イベントと仕組み的にはとてもよく似ています。等)、ライフサイクルフックの場合は、監視のステップは不要で、Vue.jsが監視してくれているのを、こちらは処理として記載すれば良いだけ、というものになります。この記事から、予告通り、Vue.jsのバージョンを3にあげたいと思いますので、まずは、Vue.jsを3に上げたことからの違いから見てゆきましょう。比較的変更が少ないHTML側から確認していきます。以前記載したボタンクリックによるカウントアップのシンプルなコードになります。違いも、CDNのバージョンが違っているだけなのニャ。src="script.js"></script></body></html>猫弟子のコメントにもありますが、昔のコードとほとんど違いが無いことを確認出来るでしょう。違っているのはVue.jsのバージョン部分のみで、CDNとして読み込んでいるscirptタグのsrc属性の値のみ変わっているのが確認できますね。昔取り上げたv-modelの修飾子と比較しつつ確認しましたね。それ以外は、Vue.jsを適用する範囲に何かしらの目印をつける目的で、全体を括っているdivにid属性が設定されていることや、「{{count}}」でcount変数の値を表示していること、ボタンクリック時の書き方など、前回のサンプルコードから変えてはいません。大きな変更が少なく、一安心ですね。JavaScript側は少し変更箇所が多いです。猫弟子と一緒に確認してゆきましょう。年齢の壁を超え、30代未経験から自社開発企業エンジニアへ転職ぜひ今後のキャリア設計の参考にしてみてください!JavaScript側はHTMLよりも変更が多いのニャ?猫弟子のコメントは順番に表示しながら確認してゆきます。Vueの宣言部分の記載についてコメントを付与した状態のものになります。ニャ!まずは、Vueの最初の記載から変わっているのニャ。Vue({})」って書いていたニャ~。"#app"」って書いていたニャ。バージョンが上がっても、CSSのセレクタの記載でどの範囲を指定可能なのニャ~コメントが上と下に書いてあるのを確認できますね。上の宣言部分の記載がそもそも変わっており、また、末尾に、HTMLのどの範囲にVue.jsを適用するかが追加されていますね。書き方の差異はありますが、Vueの宣言をしつつ、どこに適用するのかを設定するという部分は同じ様に実施されているのを確認できます。次に、data部分の変更に関してです。2系の時はオブジェクトのように書いていたニャ。}}).mount('#app');もともとのdataの書き方はオブジェクトのプロパティのようでしたが、今回は丸カッコがついて、メソッドのようですね。実は、Vue.jsのcomponent(コンポーネント)の定義では、このメソッドのようなdataの定義をします。componentを取り上げる前に、Vue.jsの3系入りをしましたので、簡単に補足しました。componentについての記事を記載する際に、もう少し深掘りの説明をできればと思います。「メソッドのようになっている」という視点でみてみますと、returnの記載もしっくりくるかと思います。メソッドの返り値として定義されているのですね。その返り値の中身がオブジェクトの定義になっています。猫弟子の言うように、この部分は以前の書き方と同じであることを確認出来るでしょう。createdというのが定義されているニャ!ライフサイクルフックその1ではありますが、今回の記事ではVue.jsを3系にしたことの違いをメインにし、ライフサイクルフックの補足は触りのみとします。ライフサイクルフックの一つ、createdメソッドのコメント部分を取り上げます。}}).mount('#app');ライフサイクルフック、Vue.jsのライフサイクルごとに、フックして、特定のタイミングで処理を実行してゆく場合に、ライフサイクルの種類ごとにメソッドが用意されているので、そのメソッドを定義し用いてゆくことになります。今回からVue.jsの3系にしていますが、ライフサイクルフックのこの記載は、Vue.jsの2系でも全く同様になります。各ライフサイクルごとに、画面上に要素が配置済みか、まだ未配置かなどのタイミングの違いがでてきますので、その点を考慮しながら用いてゆくと、とても便利に制御してゆくことが可能です。次回の記事ではその点を確認していきましょう。Web系エンジニアを目指すなら当メディアを運営しているCodeCampでは、マンツーマンで現役エンジニアからプログラミングコースを提供しています。このコースの特徴はバックからフロントまでエンジニアとしての基礎スキルを着実に獲得できるプログラミング未経験から転職・フリーランスへ挑戦できる実際にWebサービスを開発するのでポートフォリオとしても使用できる\Webサイト担当者としてのスキルが身に付く/無料カウンセリングはこちら最後にVue.jsのライフサイクルフック、改め、Vue.jsの3系変更について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。2系から3系にあげた結果、シンプルな記載ではHTML側の変更はほぼ無いことを確認したニャニャ~JavaScript側は3系にしたことでの変更が多く確認できたニャベースとして、Vueのインスタンスを定義する部分が大きく変わっていたニャ。やろうとしていることは同じだというのが確認できたニャ~data部分も地味に変わっていたニャ。Vue.js2系でcomponentを作るときには、このVue.js3系の記載と全く同じになるのニャ。componentの記事の際に、その点も補足するニャライフサイクルフックとしてcreatedの定義を見てみたニャVue.jsがレンダリングする際の任意のタイミングに処理を挟み込めるライフサイクルフックはとても便利ニャ。次回以降の記事でその点を確認してゆくニャ~Vue.jsについての記事として、Vue.jsの3系変更を踏まえつつ、ライフサイクルフックについて学びました。次回はライフサイクルフック自体にフォーカスを当て記載してゆく予定です。見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。Ltd.CodeCampusテクノロジーの「学ぶ・働く」を知るメディアプログラミングWEBデザインテクノロジーアプリ開発ビジネススキルキャリア学習ガイドtwitterLINE。