ようやくolcarのNuxt3アップデートverをリリース出来た。今回は時間捻出などいろいろ工夫した点もあるので備忘録として
期間
コミット開始の3/14から7/28までの4ヶ月半。実際ほNuxt3の勉強もしたので約5ヶ月掛かってる。Nuxt2のサポート切れに間に合わんかった😭
時間の取り方
仕事も忙しく、子どもの寝かせ付けは交代でやっているので時間が取れなさすぎて1日30分〜1時間を週3ぐらいで開発した。さらに4月からジム行き始め、子供が寝た22時すぎから週3ぐらいでジムに行くので開発に集中出来ていない。ただ時間がないからと言って1時間以上はやらず、きっちりやめるということを徹底した。結果的に体壊さずにすんだ。
やり方
Nuxt Bridgeを挟まず、一からリプレイスした。設計やライブラリなど見直したかったのでNuxt Bridgeだと逆に効率悪いと思ってやめた。アプリケーションの規模によるが、大規模であればNuxt Bridgeを挟んだ早くなる気がする。ただ、ほぼ違うフレームワークになったぐらいの認識なので一からやり直す方が無難。これはVueオワコンになるなと改めて実感した
Nuxt3リリースかバージョンアップまで一年以上空けた
リリース直後はVue3の評判が死ぬほど悪く、破壊的変更がヤバすぎたので使ってるライブラリのVue3対応が軒並み遅れてた。実際にVuetifyやNuxt Seo周りが全然ダメだったので周辺ライブラリが落ち着いた半年後ぐらいに始めるのがベストだと判断した。Vue3.2から3.3まで2年以上空けており、しばらく待ったのは大正解すぎた。また去年はDBをplanetscaleに変えたり、playwrightで自動化を進めてたので単純に時間がなかった
新たなライブラリ
今回Nuxt2時代と変えたライブラリが以下
- bun
- tailwindcss
- dexie→localstorage
- Edge
yarnからbunへ。早いという点とNuxtのドキュメントにpnpmとbunがあったのでbunを使ってみるかーぐらいの感覚。デプロイまでのリードタイムは早くなったんじゃないかな。tailwindcssはユーティリティクラスの集合体なので感動は無かったが、eslintが効くのと名前を考え必要がないのが開発体験としては最高だった。dexieはindexDBのライブラリだが、要件としてはlocalstorageで充分なのでシンプルなlocalstorageにした。ただ、localstorageはただの文字列なのでindexDB使った方が結果的によかったかもしれない。最後はまさかのEdge。今使ってるmacbookがきびしい感じになってしまい、chromeが唸るようになったのでEdgeに変更したらかなり改善した。パフォーマンスの最適化がchromeよりはるかに良い。chromiumベースなので使いごごちも変わらないし言うことなしだった。chromiumはgithub落ちるのでやめた
composables良い
Nuxt3のメリットといえば確実にこれ。ステートとロジックを共通で使えるのはシンプルに強いし、下手にグローバルステートを使う理由も無くなったので今はほとんどグローバルステート使ってない。
苦戦
- Vuetify&Tailwind CSS
Vuetify v2では使えてた機能が使えなくなったり、tailwindcssとVuetifyのユーティリティクラスが競合すると言った絶妙にやり辛い部分があった。Vuetifyにユーティリティクラスをoffにするオプションが用意されてるが、offにするとVuetifyコンポーネントのスタイルが崩れるのでtailwind側にprefixをつける対応した。
- Vite
一番喰らったのはrequire。以下のようなコンテンツ系は全部markdownで書いていてrequireが使えなくなってしまったのでNuxtのserverでファイルを読み込むようにした。importではSSRに対応出来なかったので地味に頭を悩ませたところ。またプロキシも地味に悩んだ
最後に
Nuxt2はasyncDataなどのSSRの取り扱いが結構だるかったので、そこら辺は意識せずに開発出来るようになったことは素晴らしい。domのref周りを心配してたがdefineExposeで参照を明示的に指定出来たりなどよりさらに良くなった。propsの型周りだけ絶妙にTypescriptじゃない感じがどうにかならんものかと思ってるが別にいいでしょう。ソースコードは環境変数とか非公開にしたから一応公開してる👇
