ブログサイト「notebook」のリニューアル手順
旧ブログサイト「sketchbook」は、2024年8月8日を以ちまして「notebook」としてリニューアルしました。WordPress から Next.js への移行に伴い、ヘッドレスCMS化を実現し、従来の環境より柔軟性やパフォーマンスの向上につながる結果となりました。
本開発に至った経緯としては、Next.js の理解を深めるにはどうすればよいか考えた時、本サイトのリニューアルがちょうどよい環境であったことが大きな動機となります。本サイトの目的の一つに「自分自身の考察のために設けた Webサイト」を掲げており、リニューアルを通して Next.js に触れることはその一環と考えます。
本記事では、本開発におけるプロジェクトの全体的な流れについて触れていきます。
プロジェクトの全体像
開発工程
- リニューアル計画
- 事前準備（情報収集／技術選定／環境構築）
- Next.js最適化（ルーティング／ページ設計／データ移行／型エラーの処理／各種ページ再現）
- HTML・CSS再構築（各種ページ再再現）
- システム開発（ブログ機能／メールフォーム）
- テスト（単体テスト／結合テスト／E2Eテスト／ビジュアルリグレッションテスト）
- CSSモジュール導入
- Vercelデプロイ（Webhook／SEO対策／メール設定／パフォーマンス改善／CI自動テスト）
- チェック（コードチェック／デザインチェック／システムチェック）
- マニュアル作成
技術選定
- Next.js（App Router／SSR／React Server Components）
- TypeScript （静的解析）
- CSS modules（Sass対応）
- Zod（microCMS／Conform）
- microCMS （Web API）
- Conform（Server Actions）
- Jest（単体テスト／結合テスト）
- Playwright（E2Eテスト／スクリーンショット）
- reg-suit（ビジュアルリグレッションテスト）
プロジェクトの流れ
リニューアル計画と事前準備の要諦
本リニューアルでは、事前に各種技術の学習期間を設け、ハンズオンで検証した後に、プロジェクトの開始に至っております。計画においては簡易な計画書を作成し、全体の構想をメモに書き留め、プロジェクト進行を管理できる仕組みを整えます。その中でも、現在・過去・未来を管理できる仕組みは特に重要と考えています。
事前準備として情報収集は必須ですが、本開発ではこの段階で不足している情報に気付き、一旦プロジェクトを停止し再度学習期間に入っています。プロジェクト再開後に技術選定に入りますが、本開発では可能な限り、当初において比較的新しい技術に触れることを目標としていたため、「App Router」や「Server Actions」を採用することを決めていました。これらを踏まえ開発環境を構築し、本プロジェクトは本格的に開始となります。
Next.js への最適化と HTML・CSS の再構築
まずは Next.js の環境にて、旧サイトの見た目を再現することから始まります。大まかにページ構成別にデータを移行し、表示を確認し、エラーや表示崩れが発生していたら修正するという流れで、ページが問題無く表示するまで行います。このようにすることで、まずは表層上の大まかな問題をクリアしていきます。WordPress からの移行ということもあり、Next.js に適合したコード展開が必要となり、同時にリントや TypeScript による静的解析も行われるため、ページの表示のみに徹することで多くの問題が解決するからです。
大まかに各々のページの再現が完了したら、HTML と CSS を再構築することで、Next.js の仕組みにさらに順応させていきます。デザインやコードのリニューアルはこのタイミングで行います。一度、ページの再現が完了しているため、再構築後に問題が生じていないか確認しながら進めていくことができます。始めは、コンポーネントの粒度を決めることに難儀したことを覚えています。ここまでで、システム実装前の基盤が整います。
システム開発とテストの進め方
続いてシステム開発に入りますが、全体的に AI駆動開発で進める形となりました。ここで言う AI駆動開発とは、単に AI にコードの下地やたたき台を作成してもらい、修正指示を出しながら、繰り返し研ぎ澄ましていく流れを指します。知識や経験の乏しい身からして、この恩恵はとても大きなものです。おそらくですが、AI を活用することで、実力よりも数年先の技術力を身に付けているような感覚を覚えました。本来は、下から知識や経験を積み上げて、時間を掛けなければ判断できない領域を、始めから上から下を見下ろせる状態で物事を考えることができてしまうからです。まずその問題のゴールが見えるということは、無数に拡がる可能性を絞ることを可能とします。そのため、結果からその理由を考えることができ、効率良く問題と向き合うことができたように思います。不明瞭な領域に対し、点と点を結び、そこから考察を深めさせてくれたのが、本作業における AI のイメージです。ただし、指示の出し方を誤ると、見当違いな結果を導いてしまい、堂々巡りに時間を費やしてしまうことは多々ありました。開発の内容は主にブログ機能周りで、microCMS からのデータ展開が主な作業となりました。
システム開発の後はテストに入りますが、ここで一旦作業を止め、改めて書籍による学習に入ります。テストの実装も基本的には開発の時と同じく、AI駆動開発の方法で進めていきます。結果として、開発までに費やした時間と同じくらい、テストの実装には時間を費やすこととなりました。敢えて、必要以上のテストを実施している自覚はありますが、本開発の主旨を踏まえ、量をこなすことを選んだ形です。当初、そこまで時間が掛かることを想定していなかったため、テストに対する認識が甘かったことを反省しています。
CSSモジュール実装のタイミング
ここまでの作業では、スタイル面に関してグローバルCSS 一枚でデザインを表現し開発を進めてきました。まずは、Next.js の仕組みの理解およびシステム開発に専念したかったことが理由です。今回、CSSモジュールを採用したのですが、プロジェクトでの実装は初めてであり、同時進行で進めてしまうと混乱することが予想されたためです。 また、テスト実装後に CSSモジュールの実装を行うのは、テストの恩恵を体験したかったことが挙げられます。つまり、システム面の複雑さの回避と、テスト検証を踏まえたタイミングとしました。
実際に CSSモジュールの実装時に、何度もテストの有り難さを実感する結果となりました。クラス名の大幅な改修が発生したため、それに伴うシステム面への影響や、CSS のコードを修正することで伴う意図せぬスタイル面への影響を拾い上げることができました。何度もテストで確認しながら進めることにより、本来であれば気付かなかった問題も、安全に着実に事を進めることができました。
デプロイとその後の細かいタスク処理
この段階で、全体的に実装作業は落ち着き、Vercel によるデプロイの工程に至ります。デプロイ自体は、事前に環境変数の登録や除外ファイル等の細かい設定は必要ですが、基本的には GitHub連携による CD の仕組みにより、難なく動的にセットアップが完了します。
デプロイ後は、非常に多くのタスクをこなす日々が続きました。microCMS の Webhook の登録や、Googleサーチコンソールや Googleアナリティクス4 などの設定、Vercel におけるメール設定、パフォーマンス改善、CI自動テストの実施、Webアプリケーション全般的なチェック、マニュアル作成やその他諸々多岐に渡ります。GitHub の CI自動テストやマニュアルの作成では、多くの時間や労力の掛かる要素を備えており、当初の見積もりが甘かったポイントです。デプロイが落ち着いたら終わりではなく、デプロイ後にやらなければならないことが非常に多いことを実感しました。
まとめ
このように各工程を経て、ブログサイト「notebook」は成り立っています。本リニューアル開発全般的に言えることが、まず初めに、完成形となる枠組みのようなものを用意して、そこから実作業に入るというスタイルに徹していることです。そうすることで、方向性を確認しながら安全に改修作業を進めていくことができます。開発工程の順番には意味があり、そのプロジェクトがどのようなことを目的としているかで、作業の進め方にも影響を及ぼすものだと感じました。本開発のようにリニューアルを伴う場合は、如何に安全に確実に作業を進めていけるかは重要なポイントだと思います。
ここまで、本開発におけるプロジェクトの大まかな流れについて触れてきました。この記事を最後までお読みいただき、ありがとうございました。本記事に関するご意見やご感想がございましたら、どうぞお気軽にお知らせください。皆様のご意見を参考に、今後の改善に努めてまいります。