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

この記事は「NEXTSCAPE Advent Calendar 2021」の12日目の記事です。

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

🐣CLI

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

空のプロジェクト作成にはCLI（コマンドラインインターフェース）が必要であり、CLIの選択肢としてVue CLI、あるいはNuxt.jsが君臨していたことでしょう。

Vite

いまは、そこんところのサポートをViteが担当してくれます。

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

使い心地も違和感ないです。詳しく解説しないのでスタートガイドをチェキラ！
　⇒日本語版スタートガイド

🐣Vue 3

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

templateタグ内でできるようになったこと

特にわかりやすいものだけ。

• ルートに複数の要素を配置可能。
  • Fragments
• NULL合体演算子（Nullish coalescing operator）等を使用可能。
• v-forをtemplateにかませたとき、templateにだけkey設定すればOK。
• 非同期コンポーネントのロード中に別のものを見せておく。
  • Suspense

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

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

記法

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

まず、Vue3のリリースとともにVue Composition APIという記法（インターフェース）が導入されました。
※Vue 2からも利用可能。

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

script setup

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

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

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

🐣状態管理

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

• Vuexは健在であり、Vuex 4がリリースされた。
  • Vue Composition APIに対応した。
• Vuex 5のRFCが公開されている。
  • このRFCを読めば色々なことがほぼ理解できる。
• Vue composition APIによる自前ストア。
  • 書きっぷりが少し面倒。
• PiniaというVue非公式ライブラリ。
  • デフォルトでタイプセーフ。
• Appolo
  • 人間の屑。

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

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

最終的には好みです。

🐣CSS/UIフレームワーク

ユーティリティ志向でいえばTailwind CSSがありましたが、より軽量で扱いやすいWindi CSSがリリースされています。Tailwind2.0と互換性があり、機能的に強力かつ高速です。

⇒Viteへの導入方法

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

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

• Vuetify
  • Vue 3に対応しているのは「Vuetify next」（Alpha版）
• Element
  • Vue 3に対応しているのは「Element plus」
• ionic
  • 昨日6.0.0がリリース。
• Quasar Framework

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

アイコン

FontAwesomeならぬMaterial Design IconsならぬIconifyを使ってください。

⇒Vueへの導入

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

🐣Ajax

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

いまだにaxiosは健在。
ただ、今はFetch APIのラッパーライブラリを自分で書いてそれを使ったりしてます。
リポジトリパターン風なモジュールを作ろうとしたとき、自分でfetchをラップしたほうが早かったりしていました。

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

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

🐣VS Codeプラグイン

Volar

VS CodeでVueの開発をするためにはVeturが言わば必須のVS Codeプラグインでしたが、Vue 3の開発においては今のところVolarを利用するべきです。

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

VS Code ESLint

このあいだリリースされたESLint v8.0.0に既に対応しています。
ESLint v8はなかなかなアップデートをしてきたので、リリースノートを読むことを推奨します。
Prettierはもはやあまり要らないかも？（諸説あり）

Vite

不要といえば不要。

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

WindiCSS IntelliSense

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

🐣

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

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