前回のエントリーからの続き。
tznex.hatenablog.com
Vue.jsとの出会い
2019年かな？ フロアは違うが同じ勤務先で働いている後輩がVue.js（以下、Vue）で開発しているという話を聞いた。興味があったので早速勉強してみることにした。
私を知る人なら今さら理由は言うまでもないだろうが、2016年夏から静岡県沼津市を頻繁に訪れるようになり、景色もたくさん撮影しホームページのコンテンツとなるだけのネタが揃っていた。そこで沼津の風景写真を公開する新コーナーを立ち上げることを決めるが、既存のAngularJSでは物足りないと思っていたのでVueで構築することにした。
さすがにAngularJSから一気に機能を移植するのはまだ無理だったので、Vueの試験導入とことわりを入れて沼津の風景写真コーナーを公開した。やはり沼津は私にとっての原動力となっているのだ。更にたどればあの作品…ということになる。
次第にVueの知識が増え、AngularJSからVueへ移行する体制が整ったこと、AngularJSはすでにAngularと別物のフレームワークへ生まれ変わり時代遅れになっていたことから、2020年末までに鉄道、バスのコーナーをVueへ完全移行する。郵便局めぐりのコーナーに関しては検索機能が実装されておりVueへの移行に見極めが必要だったため、2022年3月9日の更新まではAngularJSで存続する（その後ハンバーガーメニューを設置する関係でVueとAngularJSのハイブリッドになっていた）。せっかく組んだAngularJSを一気に葬り去るのは忍びない気持ちがあったかもしれない（笑）
ハンバーガーメニューの導入
2020年12月より、それまで9年間いたプロジェクトを離れて新しいプロジェクトへ異動する。当初はC#によるWinFormの開発だったが、Web案件の経験を買われ2021年10月よりWebシステムの開発チームにコンバートされる（これがいろんな意味でその後の運命を左右する）。
その時にハンバーガーメニューを作成したので、そこで得た知識を基にVueで使えるようにし、2021年10月13日の更新ですべてのページにハンバーガーメニューを設置した。これによってどの階層であってもページ間の移動が2回以内のクリック（タップ）で可能になった。タブレットのみの試験導入に留まってはいるが、レスポンシブ対応もこのときに覚えた知識を取り入れている。なぜレスポンシブ対応がタブレットのみなのかと言えば、私が使えれば事足りるから（笑）
なおWeb案件に関してはもともと3ヶ月間のショートリリーフだったので、2022年1月からは再びC#の仕事に戻る。
Vueへ完全移行！
最後までAngularJSで残っていた郵便局めぐりのコーナーについても検索機能をVueに移行できる確認ができたことから、前述の通り2022年3月9日の更新でVueに移行した。これによってAngularJSは全廃され、すべてのページがVue（2系）に統一された。
Vue3の導入
すべてのページをVueに統一して完結、ではない。この時点でのVueのバージョンは2だが、2022年2月7日以降は3がデフォルトバージョンになるとVue作者のEvan You氏が宣言していたため、Vue3に関しても無視するわけにはいかなかった。
実は2020年12月より参画したプロジェクトはおそらくWeb案件で一悶着あった影響でリーダーに嫌われたからだろうけど、2022年3月で外れることになる。表向きは予算の都合だが、悪く言えば「戦力外通告」。1年ちょっとの短い間だったな。あばよと。これは機会があれば別のエントリーで書こうと思っている。4月からはなんと、2020年11月までいた勤務先に出戻りする。前出の後輩がいた現場で、彼が3月で退職することになりその後任として仕事をいただけたのである。Vueの案件にも携わり、普段から触っていたおかげでなんら困ることはなかった。
この頃ようやくVue3に本腰を入れて取り組み、確か沼津の風景写真コーナーで試験導入。他のページにも展開して検証した結果、リンク集に実装しているページ内リンクがVue3で動かないという問題があったもののすぐに解決でき、他は問題ないことが確認できたので一気にVue3へ完全移行し現在に至る。
流行り廃りの激しいJavaScriptフレームワークだが、まだまだVueは第一線で活躍してくれそうなのでさらに知識を深め、サイトのブラッシュアップを図っていきたいと考えている。
（完）
