こんにちは。Spookies歴3か月のエンジニア、鈴木です。
この度、Nuxt.jsで作られていた弊社のコーポレートサイトをNext.jsに移植しました。
新年一発目の技術ブログは、本件についてまとめようと思います。
リプレイスに至った経緯
Reactのポートフォリオがない
Spookiesでは、今までJavaScriptフレームワークにvue.jsが採択されがちでした。
もちろんReactの経験値がゼロだったわけではなく、最近に入って一部の小さなプロジェクトや業務等で利用されることはあったようなのですが、ナレッジ量的に無難な選択肢としてVue.jsやNuxt.jsが使われてきた経緯があるようです。
しかし、Spookiesの新たな挑戦の一つとして、VueだけでなくReactも大々的に取り扱うという目標ができました。 とはいえ、大々的に取り扱うにはまず実績があるべき。
一番手っ取り早く、自社のReactの実力を表現する方法はないか。
そうだ、まずはコーポレートサイトをReactベースにしてしまおう。
僕のスプーキーズチュートリアル
この仕事、スプーキーズにおける僕の初仕事でした。
この社内プロジェクトでスプーキーズのプロジェクト運営になれて、 以降のプロジェクトでエンジニアとしてアサインできるようになる必要がありました。
社内で完結する業務で水合わせってワケです。
リプレイスのキモ
NuxtとNextjsみたいな超有名フレームワーク間の移行なんて、ドキュメントがネットに無限に転がっており、具体的にやり方を今更書いてもしゃーないのでキモだけ書きます。
アーキテクチャの変更点
従来はNuxtでSSGした静的サイトをGithub Pagesでホストするという構成でした。
この部分をNextjsのSSGに置き換えたので、そのほかのインフラに大きな変更はありません。 RouterにはPage RouterではなくApp Routerを使いました。
nuxtからの移行作業という点だけで言えばPage Routerの方がやりやすくはあったのですが、 今後はAppRouterを扱う案件が増加すると思われることと、 Page Routerが将来的に破棄されるんじゃないかという漠然とした不安もあったため、上司と相談の上App Routerを採用することになりました。
GithubCopilotを使おう
Github Copilotを使いましょう。
単純な移植ならGithub Copilotは優秀です。 VS CodeのCopilot Chatに貼り付け、「これをnextjsに移行してください」と書くだけです。 これだけで、作業の七〜八割を終わらせてくれます。
残り生成ミスによるエラーの修正等ですが、これも大体Copilotに修正させることができます。 人間はCtrlとCとTabとクリックさえ押せればいいのです。
こういった、やりたいことが明確に定義されているが知識理解を要する単純作業は、我々人類はAIにかてっこないです。
感想
結局、Next.jsが良いか、Nuxt.jsが良いか
今回の移行では、スプーキーズの戦略的意図があったためNuxt.jsではなくNext.jsが選択されましたが、この戦略的意図がなければ、Next.jsとNuxtどちらが良いのでしょうか。
コーポレートサイトというプロジェクト単体で考えればNext.jsにこだわる必要はなく、Nuxt.jsで十分でしょう。
ただ、個人的な意見を述べると、社内の技術スタックをReactに統一するメリットは、Nuxt.jsやVue.jsの迅速な開発というメリットよりも大きいと考えます。 Vue.jsだと苦戦するけどReactであれば容易に対応できる実装というのは、やはり多数あるように感じるためです。
仮にコーポレートサイトのようなVue.jsで十分なプロジェクトであったとしても、ブログ・プレスリリース機能をつけてSSGするだとか、絞り込みや検索機能を持たせたうえでSSGするだとか、そういったちょっと捻った実装をする場合はReactのほうがわかりやすく書けるように僕は思います。
また、今回は使いませんでしたがNext.jsにはISRという機能があるので、SSGとSSRのいいとこ取りができるのもコーポレートサイトにNext.jsを利用するメリットです。
AIの使い方と未来
タイトルにもあるように、この仕事でやりたいロジックが明確なコーディングであればほぼGithubCopilotに任せられることを肌で感じました。
ただ、最終的に生み出したコードに責任を持つのが人間であることは、どれだけAIが進歩しても変わらないでしょう。
「プログラマーはいらなくなる。が、エンジニアという職業は必要であり続ける。」
「だからこそ、エンジニアのキャリアや成長の仕方が大きく変わる」
というのが、僕のAIとの初仕事の感想でした。
