Future Tech Blog
フューチャー技術ブログ
Programmingカテゴリ

WEB+DB PRESS Vol.120 最新Vue.js3入門を読んで

はじめに

こんにちは、Technology Innovation Group所属の久保です。

私はフロントエンドエンジニアとして約1年くらいVue2でのフロントエンド開発を行っています。そんなVue3を全く触ったことにのないエンジニアが読んだ「WEB+DB PRESS Vol.120」に掲載されている「最新Vue.js 3入門」の記事感想文となります。

とても面白く良い雑誌なので是非定期購入をおすすめします。

執筆陣

執筆陣に当社の太田がいたのが縁で、折角なので感想をブログで書こうとなった背景です。

  • 石井輝亜 グローバル・ブレイン(株)
  • 太田洋介 フューチャー(株)

本記事のターゲット層

「最新Vue.js 3入門」と謳っている通りVueの知識0でも読める記事となっています。

もちろんVue2、Vue3の知識があっても楽しめる記事だと思います。

本書の目次

本書では5つの章で構成されており約30ページながらVueの歴史からVue2、Vue3でのTodoアプリケーション製作など、かなり濃厚な内容となっています。

章立ては以下の通りです。

1.Vue.js入門… 歴史、特徴、開発環境の構築
2.Vue.jsの基本的な使い方…Todoリストアプリケーションを作って学ぶ
3.Vue.コンポーネントの基本的な使い方…簡単な記述で使用できる部品を作る
4.Vue.js 3 の新機能…新しいコンポーネントの書き方、柔軟なテンプレート、Vue2からの移行
5.Vue.jsの公式プラグイン…ルーティング、ステート管理、リンタ、テスト、デバッグ

概要

1章

  • Vueの歴史
  • Vueの特徴
    • HTMLベースでの制御について
    • コンポーネントによる構成
  • 環境構築
    • VScode
    • Vite

2章

  • ToDoリスト実装
    • 要件定義
  • リスト表示部の実装
    • 単一項目の表示
    • 複数項目の表示
  • 入力フォームとボタンの実装
    • 入力フォーム実装
    • ボタン実装
    • 入力フォームとボタンの連動
  • 操作機能の実装
    • ステータス毎の表示切り替え
    • フィルタ機能実装
  • 装飾
    • styleブロックの書き方
    • クラスのバインディング方法

3章

  • コンポーネント
    • 2章で実装したアプリケーションのコンポーネント化
    • コンポーネントの登録方法
  • コンポーネントを使用するための定義
    • props/emit
    • slot
    • provide/inject
  • スコープ付きCSS
  • transition を使用したアニメーション
    • transition コンポーネント
    • transition-group コンポーネント

4章

  • Composition API
    • Options API(Vue2)
    • Reactivity API(Vue3)
    • Reactivity APIの基本的な使い方
    • Reactivity APIを使用した開発の特徴
    • 使用可能なライブラリの紹介
  • teleport コンポーネント
    • 基本的な使い方
  • Fragments
    • 基本的な使い方
  • emits オプション
    • 基本的な使い方
  • Vue 2からVue 3へのマイグレーション
    • 移行対象の機能
    • マイグレーションツールの紹介

5章

  • Vue Router
    • インストール
    • URLに対応するコンポーネント設定
    • Vue Routerの有効化
    • ページ遷移
  • Vuex
    • インストール
    • ストアの作成
    • Vuexの有効化
    • ストアの参照方法
    • ステートの更新
  • 他の公式プラグイン
    • 環境構築、拡張機能
    • リンタ、テスト、デバッグ
    • フレームワーク

感想

約30ページながらVueの歴史や特徴、開発環境の構築からToDOアプリケーション実装、Vue3のプラグイン紹介までがかなり濃厚な内容となっています。また本書はコーディングしながら読み進める構成となっており楽しみながら読める内容だとと思います。

1章ではVueの環境構築からHello worldやv-if、コンポーネントの構成など書いてます。ページが少ないながら環境構築までしっかりと書いてあるのは初心者にとってありがたいと思いました。

2章ではVue2でのToDoアプリケーションの実装方法が書いてあります。

要件定義から始まるのはさすがITコンサルタント！ と思いました。またしっかりとソースコードも乗っておりHTML,JS,CSSも満遍なく勉強ができる内容で本記事のターゲット層に書いたとおりVueの知識0でもアプリケーションが作れます。

3章では2章で実装したものをコンポーネント単位（部品単位）での分け方の紹介となっています。

別コンポーネントへのデータの渡し方、アニメーション効果の実装方法などが記載されています。このデータの渡し方が1パターンでなく（props/emit、slot、provide/inject）の複数のパターンで紹介しており、パターン毎のメリット、デメリットなど詳細に記載してありかなり勉強になりました。

4章では今まで2-3章で実装したアプリケーションをVue3への移行方法、実装方法が書いてあります。

2-3章で実装したVue2のコードと比較しVue3での実装例が数パターン紹介されています。

またVue2ではなかった新機能も紹介されています。
以下一例の引用します。

<template>
Vue3の新機能である &lt;teleport&gt;
<teleport to= "body">
  ページ内の任意の箇所にテレポーテーションできます。
</teleport>
を試しましょう
</template>

上記のコードを実行すると以下のような表示になります

Vue3の新機能である を試しましょう
ページ内の任意の箇所にテレポーテーションできます。

このように <teleport>のコンテンツがコンポーネントの中から別の場所に表示されるようになります。

この機能を活用することでVue2では大変だったモーダルウィンドウなどのZ-indexの表示問題を回避できるようになります（詳しくは本を読んでみましょう）

このような機能を知るとVue3すげー!やってみたい!という気持ちが奮い立ちます。またVue2からVue3へのマイグレーションツールの紹介もあります。Vue2で実装経験のある人には有益な情報だと思います。

5章では4章のVue3で実装したアプリケーションで使わなったもので代表的なプラグインが紹介されています。まだRC版ですがVue2でアプリケーションを実装したことあるにも人は馴染み深いプラグインも多くあります。今後の正式版リリースがたのしみですね。

まとめ

ターゲット層にも書きましたが知識0でもVue2では実装経験あるがVue3は使ったことない人でも楽しめる記事だと思います。

私も手を動かしながらVue2との違いを楽しみながら読んでいたらあっという間に30ページ読み切っていました。特に3章では勉強になることも多く内容の濃い記事となっていました。

もちろんこの記事だけでなく他も面白い記事が沢山あるのでこれは買いですね!