はじめに
仕事でVite + Vue 3なアプリケーションを触るようになったので、素振りがてら個人のプロフィールサイトをその技術スタックで作ってみることに。
なお去年はNext.jsで同じことをやった。
blog.m6a.jp
Vite
結局これがなんなのかよくわかっていない。公式サイトによると「現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツール」とのこと。バイトと読んでしまいがちだがヴィートと読むらしい。
Vue専用ではなく、NuxtやらReactやらも選べるようだ。
npm create vite@latestしてやればあとはvueだのtypescriptだの選んでいい感じにプロジェクトのボイラープレートが完成する。
npm run devで開発サーバーを立ち上げれば、コードを書いていくだけで良い。
Vue 3
ReactやVueなんかのライブラリは生で使わずに、Next.jsやらNuxt.jsやらのフレームワークと合わせて使いたい派だったが、仕事で触っているものはVue 3をそのまま使っていたので合わせることに。
Vueは全然追いかけていなかったのだけど、Vue 2までは微妙だったTypeScriptのサポートや、いろんなコードが一つのファイル内でとっ散らかってしまうのが3では解消されているらしい。
Vue 2を全然知らないのと、Reactもそんなに得意ではないのであてにならない感想だが、<script setup>にゴニョゴニョロジックを書いて、そこで定義した変数を<template>で参照できたり、<style scoped>でそのファイル内だけに適用できるCSSを書けたり、という書き方をデフォルトで推奨してそうな感じは結構好きだった。
仲良くなれそうな気がする。
UIフレームワーク
2022年になって多少マシになってきたようなのだが、Vue 3に対応しているものが少ない印象だった。
Next.jsで使っていたChakra UIのVue 3対応版はまだまだalpha版、なんとなく聞いたことのあるVuetifyもalpha版……。
なんとなく聞いたことのあるElementUIのVue 3対応版とのことで、Element Plusというのを採用した。
element-plus.org
Chakra UIのときは、使いたいComponentをimportしてJSXに書いていく感じだったのだが、Element Plusは <el-container> やら <el-link> をimportもせずいきなり使えるので逆に違和感があった。（もちろん、main.tsというエントリポイント的なファイルで app.use(ElementPlus) するのだが）
正直この辺はよくわかってない。alphaだろうがなんだろうがチャレンジすべきと言われればそうだし、いやでも仕事の技術の素振りだからここでチャレンジしたいわけじゃないんだ、という言い訳だけしておく。
デプロイ
Next.jsのときと同様、Vercelを使った。
GitHubリポジトリを連携して、設定画面からViteを選べば終わり。
その他
/profile というURLを / にリダイレクトするのにvue-routerを使ったが、こいつをVercel上で使うには下記の参考記事の通り、ルートオブジェクトの指定を手動でしてやる必要があるようだった。Next.jsのときに躓かなかったのはVercelがよしなにやってくれていたからなのだろうな。
scrapbox.io
所感
出来たのはこれ。
m6a.jp
Vue文化圏のものは公式のガイドが丁寧でかつ日本語ドキュメントが豊富で良いなーと思った。
開発の体験もなかなか良い。ただこれはViteのおかげなのか、Vue 3のおかげなのか、はたまたVercelのおかげなのか。
一方で、ちょっと外れたことをやりたい時に出てくるWeb上の記事がReact前提だったりすることもあり、巣のJS力というかNode.js力というかが求められそうな感じがしている。
とりあえず今日はトップページ作っただけなのでまたこれから作品一覧ページとか諸事情で削った最新ブログエントリComponentとかを作り込んでいきたい。
