Vueスペシャリスト講義録：Vue.js + NuxtJS入門

今回は、6月にタビアンが行ったVue.jsワークショップにて、Webアプリ制作の前段として、社長の難波が行ったレクチャーの記録を公開します！

ワークショップの概要はこちら：
2021年6月5日開催
【週末でやりきる！】Vue.js徹底マスターワークショップ #1
https://tabianco.connpass.com/event/214142/

コンパクトに情報をまとめているので、これからVue.jsを学習しようとしている方に参考になると思います。

新しい時代の Vue 3

・現時点では、Vue 2 を選択しよう

Vue3 が2020年9月にリリースされました（ https://v3.vuejs.org/ ）が、各種ライブラリは Vue2 にしか対応していません。そのため、プロダクトを作る時は Vue2 一択という状況です。今後ライブラリがアップデートされたら、 Vue3 に移行するという選択でよいと思います。

・Vue 2 + Composition API はアリ

Vue3 で新しく導入されたコンポーネントの書き方が、Composition API（ https://v3.vuejs.org/guide/composition-api-introduction.html ）というものです。こちらがVue2 に移植されているので、Vue 2 + Composition API で学習を始めるのはアリです。

ベテラン vue-cli とルーキー Vite

・Vue 2 なら vue-cli

デフォルトのビルドツールですが、 Webpack ベースで、設定に癖があります（ vue.config.js ）。ただし、後述する NuxtJS も Webpack ベースですが、コミュニティがメンテナンスしてくれているので設定をほぼする必要がありません。

・Vue 3 で学習用途なら Vite

Vue.js 開発者の Evan You 氏が、 Webpack の置き換え版として作ったビルドツールです。Webpack はビルドが遅いため、Evan氏がしびれを切らしたのでしょうね。React や Svelte などにも対応しており、何よりビルドが速い・ Webpack の設定で悩まなくて済むというのが特徴です。

vue-router, Vuex, そして NuxtJS

・vue-routerとVuex

コンポーネントをどんどん作っていくと、ページを作って画面遷移させたくなりますよね。その場合、 vue-router がページ遷移を、Vuex が状態管理を簡単に行ってくれます。ただ、これらを手動で入れたり、Webpack の設定をするのはなかなか苦労します。

・だから、 NuxtJS

NuxtJS は、煩雑な Webpack の設定、Vuex、app.vue、フォルダ構造を全て整えてくれています。つまり、アプリを作るための基本構造を作ってくれているので、自分でセットアップする手間が省けます。また、コミュニティからモジュールがたくさん提供されていて、 Nuxt Component（コンポーネントを自動で読み込み）や Nuxt Content（Markdownなどのドキュメントを自動読み込み）などのモジュールも活用できます（ https://modules.nuxtjs.org/ ）。

TypeScript と Composition API

・TypeScript を導入していきたい場合

Composition API に移行することをおすすめします。理由としては、以下の2つがあります。

• Class API は Vue 3 で廃止される（ https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components ）
• Options API も引き続き使えるが、 defineComponent で囲っておく必要がある（ https://v3.vuejs.org/guide/typescript-support.html#using-with-options-api ）

Nuxt Content で CMS っぽく

・Nuxt Content とは

NuxtJS で Markdown や YAML ファイルなどを読み込むモジュールです。Git ベースのヘッドレス CMS として使えること、そして content フォルダを作って、ファイルを置くだけで読み込めるようになるという特徴があります。ブログサイトや情報サイトを作るときに使えます。

Node v16 と fibers

・Nodeのバージョンアップに注意

最後に、環境設定の注意点です。最近リリースされた Node v16 は LTS ですが、内部的に大きな変更がありました。JavaScript を実行している V8 エンジン（Google Chrome と共通）がアップデートされたのですが、詳しくは公式サイトを参照してください（ https://nodejs.org/en/blog/release/v16.0.0/ ）。

・エラーの原因はfibersかも？

fibersは、非同期処理を、同期処理で書けるようにする V8 エンジンのプラグインです。今回の V8 エンジンのアップデート（Node v16へのアップデート）で動作しなくなった＆使えなくなったので、Node のバージョン違いでエラーが出るようになった場合は fibers を疑ってみてください。

解説に添付しているソースから分かるように、タビアンでは「一次ソースに当たること」を徹底しています。

ブログ記事や Qiita は間違っているかもしれない、もしくは 古くなっているかもしれないというリスクを念頭に、公式の API ドキュメントや GitHub の READMEを必ず読んだ上で技術を使っています。

タビアンでは、エンジニアリングの歴史や原理原則を大事にしているエンジニアさんをお待ちしてます！