Zenn
🕌

ここ3年くらいの個人制作を振り返って2022年のVueを考える（超私見）

2021/12/28に公開
Vue.js
tech

2021年のVueは結構動きが大きかったので、スナップショット代わりにちょっと振り返りのまとめを書こうと思います。
後半は2022年はVueとどうやって付き合うのが良さそうか、超個人的な見解を書きます。

ここ何年かのVueを使った個人開発をおさらい

まずはここ何年かの個人制作からVueを使ってそうなものをリストアップして変遷を見てみます。ここ3年くらいのリポジトリから拾って並べたら、何となくVue3導入の歴史っぽくなりました。

なんか思ったほど作ってないけどそれは仕方ない。

2019.2 初代メザシアタック（ゲーム）

https://mezashiattack.firebaseapp.com

リポジトリ： https://github.com/yuneco/mezashi
解説： VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説

  • 開発環境: Vue CLI
  • 言語: JS
  • Vueのバージョン
    • vue: 2.5.22
    • vue-router: 3.0.1
    • vuex: 3.0.1
  • コンポーネントの書き方: Options API

Vue3が出てくる前に作ったもの。個人的にTypeScriptをほとんど知らなかったこともあるけど、世間的にもまだまだVueでTypeScriptを使うのは少数派だったように思う。

2019.12〜2020.2 Vue3で○×ゲーム（ゲーム・実験）

リポジトリ： https://github.com/yuneco/vue3-tic-tok-toe
記事： Vue.jsレベルを上げよう！○×ゲームを作ってTypeScript＆Vue3のCompositionAPIと仲良くなる

  • 開発環境: Webpack
  • 言語: TS
  • Vueのバージョン
    • vue: 3.0.0-alpha.4
  • コンポーネントの書き方: Composition API

2020年の初めにVue3のα版と、Webpackの設定やらのサンプルが出てきたので試した時のもの。かなり初期のものだけど、Composition APIの書き方自体はほとんど今と変わらないですね。

2020.2 2代目メザシアタック（ゲーム）

https://nekomzs2.web.app/

リポジトリ： https://github.com/yuneco/mezashi2
記事： VueとCSSとTypeScriptでシューティングゲーム「ネコメザシアタック2020」を作ったのでソースと解説

  • 開発環境: Vue CLI
  • 言語: TS3.7
  • Vueのバージョン
    • vue: 2.6.11
    • vue/composition-api: 0.3.4
  • コンポーネントの書き方: Composition API（Vue2系）

上の○×ゲームと同じ頃に作ったのにこっちはVue2系ですね。さすがにまだまとまった開発にVue3使うのは早すぎるって判断だったのかと思います。

でもComposition APIがくる流れはこの時点で感じてて、以後ほとんどOptions APIでは書いてない気がします。

2020.6 フルフルネコチャン（画像加工アプリ）

https://fulful.web.app/

リポジトリ： https://github.com/yuneco/fulful
記事： VueとSVGでGIFアニメ生成アプリ作ったのでソース全公開＆解説

  • 開発環境: Vue CLI
  • 言語: TS3.8
  • Vueのバージョン
    • vue: 2.6.11
    • vue-router: 3.1.6
    • vue/composition-api: 0.5.0
  • コンポーネントの書き方: Composition API（Vue2系）

微妙にバージョン上がってるけどほとんど同じですね。

この頃は「Vue3がくるぞ！」って話題にはなってたものの、はっきりとしたロードマップが示されずにモヤモヤしていた記憶。

2020.8 金魚を泳がせる（実験）

リポジトリ： https://github.com/yuneco/vite-kingyo
記事: Vue3のcomposition-apiで金魚を大量に泳がせたのでソースと解説

  • 開発環境: Vite 1.0rc
  • 言語: TS3.8
  • Vueのバージョン
    • vue: 3.0.0-rc.1
  • コンポーネントの書き方: Composition API

しばらく動向追ってなかったら、7月くらいにいきなり「Viteって何かすごいのができたらしい」って聞いて試してみたのがこれ。Vue3もRC版になってますね。Vite自体確かに凄かったけど、この頃はまだ「次世代のVueCLI」くらいの認識だったかも。

2020.12 お寿司をつまめるアプリ（クソアプリ）※electron

リポジトリ: https://github.com/yuneco/osushi-desktop
記事: Vue.jsと物理演算とElectronで仕事中にデスクトップでお寿司をつまめるようになったのでソースと解説【クソアプリ】

  • 開発環境: Vue CLI
  • 言語: TS3.9
  • Vueのバージョン
    • vue: 3.0.0
    • vue-router: 4.0.0-0
  • コンポーネントの書き方: Composition API

ようやくここでVue3の正式リリース版になりました。今考えるとVue CLIの対応も結構早いですね。α〜RC期間が結構長かったこともあるけど、特に違和感なくVue3に移った記憶。

2021.2 3代目メザシ（ゲーム）

https://nekomzs21.web.app/

リポジトリ: https://github.com/yuneco/mezashi21
記事: VueとPixi.JSでアクションゲーム『ネコメザシアタック』を開発して3年目なのでソースと解説

  • 開発環境: Vue CLI
  • 言語: TS3.9
  • Vueのバージョン
    • vue: 3.0.0
    • vue-router: 4.0.0-0
    • vuex: 4.0.0
  • コンポーネントの書き方: Composition API

2021年になったけどまだVue CLI使ってますね...。今考えるともうちょっと早くViteに切り替えてもよかったかもしれない。多分あんまり使ったことのないVuexとかも使いたくて、環境構築の手間を省きたかったのかと思う。

仕事ではぼちぼちこの辺りからViteに切り替えてました。

2021.7 petite-vueのジャンプゲーム（ゲーム・実験）

リポジトリ: https://github.com/yuneco/petite-vue-example-game
記事: ゲームを作ってpetite-vueを完全に理解する

  • 開発環境: なし
  • 言語: JS（ネイティブES Modules）
  • Vueのバージョン
    • petite-vue 0.2.2

ここで唐突にpetite-vueが出てきます。多分とりあえず試してみたかったんだと思う。

こういうコンセプトは好きだし、いざというとき（既存ページにちょっだけリアクティビティを差し込みたい）には使える技術だけど、これ使ってアプリ作りたいかっていうと、まあいいかなぁ...って印象。好きなんだけどね。Vite + TSが楽すぎるのがいけない。

なお、petite-vueの網羅的な入門は@ojklabさんの文系大学生のためのpetite-vue入門を参照されるのか良いです。凄い。

2021.10 miracle-pencil（お絵描きアプリ）

リポジトリ: https://github.com/yuneco/miracle-pencil

  • 開発環境: Vite 2.6
  • 言語: TS4.4
  • Vueのバージョン
    • vue: 3.2.16
    • pinia: 2.0.0
  • コンポーネントの書き方: Composition API + Script setup

今作ってるアプリ。Canvasを使ったコアのお絵かきモジュールはピュアTSで書いて、VueはUIをつけるためだけに使う感じ。

しばらく個人でちゃんとしたの作ってなかったからバージョンも結構飛んでるけど、意外にもスムーズに導入できた気がする。下でも書くけど、色々曲折はあったもののいい感じの構成に落ち着いたのかなーって印象です。

2022年のVueの書き方

自分の作ったものをみてると、新しいものはとりあえず触りつつ、ちゃんと作りたい気持ちがある時は結構保守的だなーって印象。それでも仕事で使うよりは半年くらい先行してる気がするので、個人で色々触ってみるのは大切です。

2022年の個人的なおすすめの構成

新しくVueで何かを始めるなら、まずこんな感じかなぁ...っていうリストです

  • Vue3はもう普通に使える。使った方が良い
  • Viteももう普通に使える。使った方が良い
    • npm init vue@3もいいと思う。これも入るのはVite
  • Composition API + Script setupも普通に使える。でも使うかどうかは好みでいいと思う
    • TypeScript使わないなら従来のOptions APIでもいいと思う
  • TypeScriptは使った方がいい。Composition API使うなら実質必須
  • 状態管理関連はもうしばらく動きがありそう
    • 今まで馴染みがある or Flux的に管理したいならVuex
    • ライトな使い方でいいならPinia
    • そもそもグローバルストアに懐疑的なら標準のCompositionやprovide/injectionで

VuexとPiniaは統合されるのかな？だったら違いは徐々になくなるはず。

おすすめ構成がハマらないケース

多分2021年にVue2からなかなか動けなかった人はこの辺りなのかと。まだちょっと課題多そうなイメージ（あんまり知らない）

  • Nuxt使ってる → ぼちぼち動き出てきたみたいなので情報収集しつつ
  • UIライブラリ使ってる → なかなか大変そう。。特に移行
  • ビルドをWebpackで色々頑張ってる → Vite + Rollupで頑張るのは辛いのでWebpackのままの方が幸せかも

2022年のVueの歩き方（超私見）

基本的には「身軽にして気軽に新しい環境に移れる」状態が理想

  • Nuxtは本当に必要か考えて、必要ならじっくり付き合う
    • 「あった方がいいかも」くらいで導入すると後が辛い。特に個人開発
    • とはいえSSRとかOGPとか考えると現状ちゃんとしたプロダクトでは必須...かなぁ
    • SSGでいいならVue Press / Vite Pressとかも選択肢
  • UIライブラリ/コンポーネントライブラリは本当に必要か考えて導入を
    • このあたりが原因でVue3系に移行できないプロジェクト多そう
    • 新バージョン出ても破壊的変更があったりするので簡単ではない
    • UI周りのライブラリはそもそも導入することが性能影響大なので、気安く導入するべきではない

Vueオワコン説に対する個人的見解

※ 一応仕事ではReactも使ってるけど、個人的にはVueが楽だと思ってる人の意見です。他のフレームワークと優劣つける意図はないです

  • 2021年後半は「Script Setup最高」勢と「もうReactでよくね？」勢がわりと二分した印象
  • 周辺ライブラリに依存せず、Vite+Vueでシンプルに開発する層には開発体験がものすごくよくなった
  • 逆にVue本体の変化の速さに対する周辺エコシステムの動きの鈍さに不安を感じた層がVueを手放した感じ
  • 開発環境のViteはReactでも普通に使われるようになってきているので、開発者的には相互に行き来しやすくなってきている（気持ち的に）

→ Vite+Vueのコア部分はいい感じに落ち着いてきたけど、周辺ライブラリに対する不安は多分すぐには変わらない
→ プロジェクトの属性や規模感でVueとReactをうまく使い分れられれば幸せになれるかも

まとめ

Vue周りの2020〜2021年は色々紆余曲折あったけど、ようやくいい感じに未来が見えてきたと思います。Nuxtとか各種ライブラリはこれからの部分もあるけど、2022年も気軽に付き合っていけるといいですね😊

Discussion