かつてVueに詳しかったひとに捧げる2021年末のVue

この記事は「[NEXTSCAPE Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nextscape)」の12日目の記事です。

かつてVueに詳しかった人に対して、知識のアップデートをサポートします。

# 🐣CLI
Vueのプロジェクトを新規作成する際、いちいちnpm initしたりgit initしたりnpm install vueしたりラジバンダリする輩はこの世に存在しません。
なんにせよコマンドをペチっと叩いて空のプロジェクトを作成することと思います。
テンプレート、スキャフォルディング、ボイラープレートとか呼ばれてるなにかをコマンドで生成しているはずです。

空のプロジェクト作成にはCLI（コマンドラインインターフェース）が必要であり、CLIの選択肢として[Vue CLI](https://cli.vuejs.org/)、あるいは[Nuxt.js](https://nuxtjs.org/ja/)が君臨していたことでしょう。
## Vite
いまは、そこんところのサポートをViteが担当してくれます。

https://vitejs.dev

* 読み方は「ヴィート」。
* GitHub上でVueに含まれてはいないが、Vueの作者であるEvan Youが立ち上げている。
* Vue以外ではReactやPreact、svelte等をサポートしている。
  * Vueは3系前提。
* HMRがめちゃ高速に動作する。開発サーバーの立ち上げも爆速。
  * ビルドの時間はそんなに変わらない。
  * tscによる型チェックを外せばビルドもそれなりに高速。
* Webpackに依存しない。
  * Rollupを利用している。
* Vueの最新仕様に対する追従が早い。
* SSR対応はいまのところexperimentarl。

使い心地も違和感ないです。詳しく解説しないので[スタートガイド](https://vitejs.dev/guide/)をチェキラ！
　⇒[日本語版スタートガイド](https://ja.vitejs.dev/guide/)

# 🐣Vue 3
新規のプロジェクトでVue2を使ってると石とか投げつけられます。なぜならVue3のほうが優れているからです。
ただし、Vue3に対応していない、または対応中のライブラリもポロポロあります。
Vue3の初回リリースは2020年9月19日ではありますが、メジャーバージョンアップによるコアAPIの変更ががあったため致し方ないでしょう。
例えばVuetifyはまだVue3対応版がAlphaであり、激痛です。

## templateタグ内でできるようになったこと
特にわかりやすいものだけ。

* ルートに複数の要素を配置可能。
  * [Fragments](https://v3.vuejs.org/guide/migration/fragments.html)
* [NULL合体演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)（Nullish coalescing operator）等を使用可能。
* v-forをtemplateにかませたとき、templateにだけkey設定すればOK。
* 非同期コンポーネントのロード中に別のものを見せておく。
  * [Suspense](https://v3.vuejs.org/guide/migration/suspense.html)

全量は公式のマイグレーションドキュメントを参照。

https://v3.vuejs.org/guide/migration/introduction.html

※左部メニューのDetails欄を特に。

## 記法
[vue-class-component](https://github.com/vuejs/vue-class-component)、[vue-property-decorator](https://github.com/vuejs/vue-class-component#vue-class-component)というライブラリに聞き覚えはないでしょうか。
それはもう誰しもがお世話になったことと存じますが、それらはいまや懐かしい響きを帯び始めています。
かと言って、あの受け入れがたい可読性を誇るバニラな記法を使っているわけでもありません。

まず、Vue3のリリースとともにVue Composition APIという記法（インターフェース）が導入されました。
※[Vue 2からも利用可能](https://github.com/vuejs/composition-api#readme)。

https://v3.ja.vuejs.org/guide/composition-api-introduction.html

私からしてみれば直感的で、イメージしやすく、動きの説明もしやすく、安全であると思えました。
諸手を挙げて「わーい」と喜び、朝まで飲み明かしました。
新時代の幕開けを感じ魂が震えたものですが、もうComposition APIですら少し古いです。

### script setup
ドキュメントを読んでください。

https://v3.vuejs.org/api/sfc-script-setup.html

これでもう決まりって感じがしてきませんでしょうか。
今までと比べて何がいいとか、いちいち説明しません。なぜなら否応もなく使うべきだからです。

懸案事項として、templateで使用したい変数等をscript側で絞ることができません。
script setupタグ直下で定義した変数、関数はすべてtemplateから触ることができます。
importした諸々も、リレーする必要なくtemplateで使用可能。
初学者が詰まりにくいと言えばそうですが、少し不満でもあります。

# 🐣状態管理
「Vuexに逃げるなデータ設計ちゃんとしろ」という前提はありつつ、常にちょっとだけ必要になるのがグローバル状態管理です。
選択肢が様々あります。

* Vuexは健在であり、[Vuex 4](https://next.vuex.vuejs.org/ja/index.html)がリリースされた。
  * [Vue Composition APIに対応](https://next.vuex.vuejs.org/ja/guide/composition-api.html)した。
* [Vuex 5のRFC](https://github.com/kiaking/rfcs/blob/vuex-5/active-rfcs/0000-vuex-5.md)が公開されている。
  * このRFCを読めば色々なことがほぼ理解できる。
* Vue composition APIによる自前ストア。
  * 書きっぷりが少し面倒。
* [Pinia](https://pinia.esm.dev/)というVue非公式ライブラリ。
  * デフォルトでタイプセーフ。
* [Appolo](https://apollo.vuejs.org/)
  * 人間の屑。

とりあえず何を選べばいいのかといえば…難しい状況です。

* ごく小さい規模であればComposition APIによって自前で状態管理を作りたいところだが、書き方が煩雑。
* Piniaは優秀だが、依存していいライブラリであるかいまいち確信が持てない状況。
* Vuexはインターフェース的にPiniaに遅れている。Vuex5を待ちたい。

最終的には好みです。

# 🐣CSS/UIフレームワーク
ユーティリティ志向でいえば[Tailwind CSS](https://tailwindcss.com/)がありましたが、より軽量で扱いやすいWindi CSSがリリースされています。Tailwind2.0と互換性があり、機能的に強力かつ高速です。

https://windicss.org/

⇒[Viteへの導入方法](https://windicss.org/integrations/vite.html)

主要メンテナにVue界隈でよく見るAnthony Fu氏がいるので、安心感もあります。

UIフレームワークで言えば、過去主流だったものはほぼ残っています。

* [Vuetify](https://next.vuetifyjs.com/ja/)
  * Vue 3に対応しているのは「Vuetify next」（Alpha版）
* [Element](https://element-plus.org/en-US/)
  * Vue 3に対応しているのは「Element plus」
* [ionic](https://ionicframework.com/)
  * 昨日[6.0.0](https://ionicframework.com/blog/announcing-the-ionic-framework-v6-beta/)がリリース。
* [Quasar Framework](https://quasar.dev/)

「UIフレームワーク名 + Vite」で検索すれば導入方法が見つかるはずです。
Ionicについてはv6からViteに公式対応されるようになったそうです。ちゃんと使ったことないのでわかりませんが。

## アイコン
[FontAwesome](https://fontawesome.com/)ならぬ[Material Design Icons](https://materialdesignicons.com/)ならぬIconifyを使ってください。

https://iconify.design/

⇒[Vueへの導入](https://docs.iconify.design/icon-components/vue/index.html)

全部のアイコンがここにあります。
※Vuetifyとの噛み合わせについて、試したことなし。

# 🐣Ajax
（Ajaxって今は死語だったりするんだろうか）

いまだに[axios](https://github.com/axios/axios)は健在。
ただ、今は[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)のラッパーライブラリを自分で書いてそれを使ったりしてます。
リポジトリパターン風なモジュールを作ろうとしたとき、自分でfetchをラップしたほうが早かったりしていました。

出来合いのFetch APIラッパーライブラリではkyというものがあったり。

https://github.com/sindresorhus/ky#readme

リトライとか自分で書きたくないというケースにおいてはkyが有用と思われます。

# 🐣VS Codeプラグイン
## Volar

VS CodeでVueの開発をするためには[Vetur](https://vuejs.github.io/vetur/)が言わば必須のVS Codeプラグインでしたが、Vue 3の開発においては今のところVolarを利用するべきです。

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

VeturはVue直下のプロジェクトではありましたが、なぜかメンテ状況が芳しくないプロジェクトでした。
今後どうなるか動向を追わなければなりませんが、Vue 3で開発をするのであれば今はVolarです。
template内での型エラーを吐いてくれるのがとても強いです。
※Veturと競合するので、Vue 3のワークスペースではVolarのみ有効化し、Vue 2のワークスペースではVeturのみ有効化したほうが良いです。

## VS Code ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

このあいだリリースされた[ESLint v8.0.0](https://eslint.org/blog/2021/10/eslint-v8.0.0-released)に既に対応しています。
ESLint v8はなかなかなアップデートをしてきたので、リリースノートを読むことを推奨します。
[Prettier](https://prettier.io/)はもはやあまり要らないかも？（諸説あり）

## Vite
https://marketplace.visualstudio.com/items?itemName=antfu.vite

不要といえば不要。

* エディタを起動した段階でdevサーバーを立ち上げてくれる。
* VS Codeだけでプレビュー可能。

## WindiCSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense

WindiCSSのインテリセンスを効かせてくれます。

# 🐣
以上をなんとなく把握しておけば、ナウくてヤングなVue生活を送ることができるでしょう。

React勢に負かされないよう、来年もVueで頑張っていきましょう。