こんにちは！
LIFULLエンジニアの吉永です。
本日は最近あまり関わらなくなったのであまりキャッチアップできていなかったフロントエンド開発技術についてインプットした内容を備忘録として記載していきます。
本記事の概要
私自身、jQueryを用いたフロントエンド開発はなんとなく実装イメージが湧くのですが、Vue.jsで同じことを実現しようとすると都度検索してということが多いので、jQueryとVue.jsで同じことを実現する際のコードの対比を記していこうと思います。
なので、対象読者はjQuery経験者でこれからVue.jsに入門しようとしている人となります。
また、私自身jQuery経験者ではありますが、ベストプラクティスを知っているかと言われると自信がないので、有識者の方から見たらおかしな実装になっている箇所も多々あるかと思いますし、Vue.jsに関しては初心者なので、もっとひどいかもしれません・・・ツッコミどころ満載な内容になってしまっているかもしれませんが、ご容赦くださいませ。
なお、Vue.jsに関しては現在個人的に学習中の教材がバージョン2系になっているので、2系でのコードになっています。
2系と3系では結構変わっているという噂は聞いているのですが、ひとまず教材を読破するまでは教材ベースのバージョンで進めていき、後々3系についてはキャッチアップしようと思ってます。
筆者のフロントエンドスキルと知識について
- HTML/CSS/JSについては基礎的な部分は習得済みで、PSD/AI/XDなどのデザイン原本ファイルを元にしたWebページのコーディングは概ねできる。
- JSに関してはjQueryを用いたフロントエンド開発を数年前に経験済みで、当時はBootstrap+jQueryの組み合わせで制作していた。
- Angularはメジャーバージョンが2から4に上がる際に当時関わっていたプロジェクトにて仕様変更部分が既存プロジェクトにどんな影響があるか？どのような改修が必要か？などをレポートにまとめたことがあるが、2017年頃の話なのでまったく記憶にない。
- React/Vue.jsもプライベートで簡単なチュートリアルはやってみたが、業務で使うことがなかったので、まったく継続しなかったので、こちらもほとんど記憶にない。
本記事を執筆した理由
- 上記で記載したように、jQueryを使ってフロントエンド開発を行っていたので、最近のモダンなフロントエンド技術のキャッチアップができていないので、キャッチアップした内容をアウトプットすることで継続させたいから。
- 業務では主にバックエンド開発を行っているが、LINEアプリでWebページを表示させる際に使用するLIFFについて開発に携わったり、コードレビューに参加したりすることが機会として増えてきたから。
- 私の所属しているチームではフロントエンド開発にNuxt.jsを採用しているので、まずはNuxt.jsの根幹を成すVue.jsの基礎から体系だって学びなおそうと思ったから。
Hello World
See the Pen Hello World by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
もはやコードにすべきか迷うくらいの初歩ですが、何にしてもまずはHello Worldからということで、作ってみました。
Vue.jsでは対象となるエレメントをVueオブジェクトのelプロパティでセレクタ指定して紐づけています。
そうして紐づけたVueオブジェクトにdataプロパティにmessageというプロパティを宣言し、値にローカル変数のhelloを割り当てて初期化しています。
html側ではマスタッシュ構文と呼ばれる構文でVueオブジェクトのdataプロパティ内のmessageを参照して画面に出力しています。
データバインディング v-bind
See the Pen データバインディング v-bind by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
続いてinputタグのvalue属性へのデータバインディングです。
先ほどのpタグ内への単純な出力ではマスタッシュ構文を用いましたが、value属性の場合は少し書き方が変わります。
v-bindというディレクティブを使用して、inputタグのvalue属性にバインディングしています。
また、valueの内容にはマスタッシュ構文ではなくVueオブジェクトのプロパティ名そのものを使用する必要があります。
表示・非表示制御 v-if
See the Pen 表示・非表示制御 by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
次は条件に応じてエレメントの表示・非表示を制御する例です。
html側でv-ifというディレクティブを用いると、評価対象のプロパティがtrueなら表示、falseなら非表示という制御ができます。
なおv-ifでfalseの場合にはエレメント自体が削除されます。
表示・非表示制御 v-show
See the Pen 表示・非表示制御 v-show by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
対して、v-showでは対象のエレメントはDOM上に残り、CSSのdisplayにて非表示にしています。
頻繁に表示非表示を切り替えるなどの際にはv-show、ページ読み込み時のみに表示するか非表示にするかを決めて以降は制御されないようなものはv-ifなどの使い分けをすると良さそうです。
反復処理 v-for
See the Pen 反復処理 v-for by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
次はリスト表示などのように複数データを反復処理にて出力する例です。
v-forというディレクティブを使用し、使い方は良くあるforeachのような形で、v-for="{リストから取り出した単一のデータ} in {リストデータ}"のようにして記述します。そしてマスタッシュ構文では取り出した単一のデータを記述します。
イベント処理 v-on
See the Pen ボタンクリック v-on by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
最後にイベント処理で、その中でも最も使用頻度が高いであろう、ボタンクリック時の実装です。
個人的にはこの部分がjQueryから乗り換える際に一番メリットを感じられる部分かなと思っていて、jQueryのコードは規約を厳しくしておかないと、様々な個所にイベントハンドラ処理が実装されてしまい、このエレメントに対するイベント処理ってどこに実装されてるんだ？とか、実装してあるであろう個所を直しても謎の力が作用して何故か上書きされてしまう、などの辛みを覚えた方は多いのではないかと思います。
Vue.jsではVueオブジェクトと紐づけられたコード内にmethodsというプロパティにイベントハンドラを実装し、v-onディレクティブでボタンクリック時に呼び出す関数をhtml側で定義しています。
このようにすることで、html側からJS側への風通しも良くなり、jQueryに比べると格段にメンテナンスがしやすくなっているのではないかなと思っています。
最後に
いかがでしたでしょうか？
Vue.jsとjQueryを対比させて、jQuery経験者がVue.jsに入門する際の参考になればと思い本記事を執筆しました。
今回は初回の記事なので、基本中の基本とも言える部分に留まっており申し訳ないのですが、私と同じようなバックエンド寄りの開発者の方の参考になれば幸いです。
次回のテーマは未定ですが、またある程度インプット出来たら、アウトプットできればと思っています。
最終的にはNuxt.jsまで・・・(上手くまとまるかな・・・)
それではまた次の記事でお会いしましょう！