2025年の技術ブログ開発ふりかえり

Cover Image for 2025年の技術ブログ開発ふりかえり
monotalkのプロフィール画像
monotalk

2025年2月に以前作成していた、SPA (TypeScript + React) + Django (wagtail)の構成から、Blog Starter Kit ベースにした構成に移行しました。
以前やっていたような形で少しずつブログに機能追加を考えていましたが、生成AIでのコーディング機能が充実していったタイミングだったので、そのドッグフーディングも兼ねる形で生成AIベースでの開発で機能を追加していくことにしました。
※あまり意識はしていなかったが自然とそうなっていった。
この記事では、2025年にブログに追加した機能や生成AIを使った個人での技術ブログ開発のふりかえりを記載します。

このブログに追加した機能について

以下、productionブランチにマージしたプルリクエストの情報をベースに、月別で何をしたかGitHub Copilot Agentにまとめてもらいました。
まとめる際は以下のような手順を踏みました。

  1. ghコマンドでpull requestの情報をJSONファイルで取得 
    gh pr list --state all --limit 1000 --json \
number,title,url,state,author,isDraft,createdAt,updatedAt,closedAt,mergedAt,labels,assignees \
> production-prs-2025-basic.json
  2. 1の情報を元に、GitHub Copilot Agentで月ごとの変更サマリーをレポート出力。
  3. ところどころ月毎のサマリーで拾えていない部分があったので、個別にGitHub Copilot Agentに指示を出して結果を取得。
  4. レポートの内容を見ながら、内容を修正。

まとめた内容は以下になります。

🔍 総括（要約）

2025年は前半にワークフローやテスト基盤（GitHub Actions、Vitest、Playwright/VRT、アクセシビリティテスト）を強化し、中盤にTOCやSEO、OG画像、コメント機能などでUXを改善、年末にOWASP ZAP対策やCSP監視、Node.jsのアップグレードでセキュリティと運用を強化しました。

🗓 月別ハイライト（ピックアップ）

2025-02 — SEO基盤の整備 🔍

  • 注目点: Next.js移行直後にSEO基盤を整備。robots.txtとsitemap.xmlの動的生成を実装しました。

  • 追加機能:

    • robots.ts: 検索エンジンクローラー制御とサイトマップ案内
    • sitemap.ts: XMLサイトマップの動的生成（全記事・タグページ対応）

2025-03 — 自動化と同期の強化 🤖

  • 注目点: NotionのDBとGitHub Repositoryを同期するGitHub Actionを作成。

  • 追加機能:

    • ページング機能の実装（記事一覧のページネーション対応）
    • Notionエクスポート/同期の改善
    • 自動PRの導入・ワークフロー整備（依存更新・自動生成）
    • 小規模なバグ修正・ドキュメント整備

2025-04 — 機能修正とアクセシビリティ対応 🔧

  • 注目点: 機能修正やアクセシビリティ対応に注力した月。Notion同期や自動PRも多く、品質改善と自動化の基盤が整いました。

  • 追加機能:

    • タグ機能の実装（タグ一覧ページと個別タグページを追加）
    • アクセシビリティ改善・レイアウト/フォーム調整
    • Notion同期機能の改善と自動PRの整理
    • 依存更新やビルド最適化（SWC等）の準備作業

2025-05 — スタイル刷新と基盤整備 🎯

  • 注目点: globals.css のリファクターやビルド最適化、CIの整備で開発体験と性能を改善しました。

  • 追加機能:

    • globals.cssの大幅改修（テーマ変数・タイポ改良）
    • プラットフォーム別SWCの導入およびNode関連の調整
    • サイトマップにタグページを追加（SEO向上）

2025-06 — 機能追加とワークフローの改善 ⚙️

  • 注目点: TOC追加、SEO（JSON-LD, メタデータ）強化、AIを活用したブログレビューの導入。

  • 追加機能:

    • TableOfContentsコンポーネントを追加（目次のアクセシビリティ強化）
    • AIを使ったブログレビューワークフロー導入（品質担保と工数削減）
    • SEO（構造化データ、多言語メタ）強化

  • 補足: AIレビュー用ワークフローやLLM用データ生成を導入し、レビュープロセスの自動化や翻訳・リリースノート生成の品質向上を図りました。

2025-07 — テスト基盤とユーザー体験改善 🛠

  • 注目点: テスト周りの刷新（Vitestへ移行）、Disqusコメント導入、画像最適化等でUXと品質を底上げ。

  • 追加機能:

    • VitestとPlaywright/VRTの導入（自動テストの強化）
    • Disqusコメント導入・Lighthouse CI追加（インタラクションと可視化）

  • 補足: Playwrightを用いたビジュアル回帰テストをCIに組み込み、レイアウトの意図しない変化を自動的に検出できるようになりました。視覚的回帰の早期検出により、リリース品質の安定化に寄与しています。

2025-08 — ナビゲーション強化 🧭

  • 注目点: 記事詳細ページに前後記事へのナビゲーション機能を追加。ユーザーの記事回遊を促進。

  • 追加機能:

    • 記事前後ナビゲーション（next/previous）の実装
    • レスポンシブデザイン・ダークモード対応
    • アクセシビリティ配慮（ARIA属性、キーボード操作対応）

2025-11 — コンテンツとアクセシビリティ整備 ✍️

  • 注目点: OG画像差し替え、レイアウト/TOCの改善、ドキュメント整理。見た目とアクセシビリティを両立。
  • 追加機能:
    • 公開記事のOG画像更新（SNSでの見映え向上）
    • TOCとレイアウトのリファクター（可読性・アクセシビリティ改善）

2025-12 — セキュリティと運用の強化 ✅

  • 注目点: OWASP ZAPの対策（CSP監視含む）、ブログ統計ページ追加、Node.jsアップグレード。年末の本番リリースでセキュリティと運用の土台を固めました。

  • 追加機能:

    • OWASP ZAP対策・CSP監視の導入（セキュリティと可視化の強化）
    • ブログの統計情報の取得、表示用のページ追加/stats
    • Node.js v22へのアップグレードとMermaid.js対応（ビルド環境と埋め込み図の対応）
    • Playwright E2E/VRT導入とCIの改善（VRTによる回帰検知の強化）

  • 補足: OWASP ZAPの警告対応のため、CSP監視を導入し、セキュリティヘッダーの強化と継続的な検知運用を実現しました。

📊 月別サマリー（数値）

月別傾向:

  • 2025-03 (47 PRs): Notion同期や自動PRが多数（自動化が主体）
  • 2025-04 (93 PRs): 機能修正やアクセシビリティ対応が集中、Notion/automated PRも多い
  • 2025-05 (27 PRs): グローバルCSSの大幅改修やリリース系の作業
  • 2025-06 (63 PRs): AI関連ワークフロー（AIレビュー等）・アクセシビリティ・テスト基盤強化
  • 2025-07 (31 PRs): PWA/コメント/画像最適化・テスト改善
  • 2025-08 (9 PRs): 記事前後ナビゲーション（next/previous）実装、Notionエクスポート
  • 2025-09 (3 PRs): Notionエクスポート
  • 2025-10 (4 PRs): LLM用データ生成やナビゲーション改善
  • 2025-11 (22 PRs): OG/画像最適化、依存更新、UI改善
  • 2025-12 (19 PRs): セキュリティ対応（Next.jsのCVE修正、OWASP ZAP/CSP監視）、VRT/CI、Nodeアップグレード

ラベル別PR分布（上位7件）

上位ラベル分析:

  • feature (63件): 新機能追加時に付与するラベル
  • Blog article creation (45件): ブログ記事の作成時につけるラベル
  • release (44件): 定期的なリリース管理を実施
  • automated pr / notion-sync (各43件): Notionへ保存した文書エクスポート時に付与するラベル
  • documentation (41件): ドキュメント作成時につけるラベル
  • ai-agent (30件): GitHub Copilot Issue Agentが付与するラベル

🔁 Blog Starter Kit（2025-02-23）との比較

以前、Next.jsのBlog Starter Kitが初心者の学習に良いと思う | blog.monotalk.xyz - 日々の書き込み | Monotalk Blog で記事を公開していますが、その記事で列挙していた機能に対する実装状況を生成AIにまとめてもらいました。

1. ナビゲーション

機能 状態 実装内容
ナビゲーションバー ✅ 実装済 レイアウト・ナビゲーション改善を実施。記事前後リンク（next/previous）も追加。
ページング ✅ 実装済 記事一覧のページネーション機能を実装。アクセシビリティ対応済み（ARIA属性、キーボード操作）。

2. SEOと解析

機能 状態 実装内容
Google Analyticsの導入 ✅ 実装済 GTM（Google Tag Manager）は導入済み、GA4の連携は実施したが、GA4側の設定は最低限
Google Search Consoleの導入 ✅ 実装済 設定は行ったが、記事内での明示的な運用報告は限定的
Sitemap.xmlの生成 ✅ 実装済 サイトマップ生成を実装
robots.txtの生成 ✅ 実装済 robots.tsを実装し、検索エンジンクローラー制御とサイトマップ案内を実施
ファビコンの変更 ✅ 実装済 デフォルトから差し替え済
RSSフィードの生成 ✅ 実装済 RSSフィード生成を実装

3. ユーザーインタラクション

機能 状態 実装内容
コメント機能 ✅ 実装済 Disqusを導入し、記事へのコメント投稿が可能
ソーシャルシェアボタン ❌ 未実装 記事単位でのSNSシェアボタンは未実装
問い合わせフォーム ❌ 未実装 問い合わせフォーム機能は未実装

4. コンテンツ管理

機能 状態 実装内容
カテゴリー ❌ 未実装 記事のカテゴリー分類機能は未実装
タグ ✅ 実装済 2025年4月にタグ機能を実装。タグ一覧ページと個別タグページの両方を追加し、関連APIとコンポーネントも整備
人気記事の一覧 ✅ 実装済 人気記事表示機能を実装。統計ページ（/stats）でも可視化
タグクラウド ⚠️ 限定的対応 タグの使用頻度を視覚的に表示できるようにはしたが、タグクラウドの作成は実施していない
コンテンツレコメンド ✅ 実装済 コンテンツベースの関連記事レコメンド機能を実装。

5. パフォーマンスと最適化

機能 状態 実装内容
画像最適化 ✅ 実装済 next-export-optimize-imagesによる画像最適化を実施。
LightHouseのスコア改善 ✅ 実装済 Lighthouse CIを導入し、継続的なスコア監視・改善を実施。

6. 収益化

機能 状態 実装内容
Google Adsenseの導入 ❌ 未実装 広告による収益化は検討のみで未実装。

7. PWA対応

機能 状態 実装内容
ホーム画面にアイコンを追加 ✅ 実装済 PWA対応を実施。ホーム画面へのインストールが可能。
Web Pushの実装 ❌ 未実装 Web Push通知機能は未実装。

8. 当初想定はしていなかったが、機能追加した部分

以下は、元記事では想定していなかったのですが、2025年に実装した機能になります。

  • セキュリティ強化: OWASP ZAP対策、CSP監視。
  • テスト基盤の整備: Vitest移行、Playwright/VRT導入
  • AI活用ワークフロー: AIブログレビュー、LLM用データ生成（llms-full.txt）、リリースノートの翻訳支援など、AI活用による開発効率化
  • データ可視化: ブログ統計ページ（/stats）の追加により、記事の投稿状況を可視化

総評

実装済み: 21項目中 15項目（約71%）
一部実装: 1項目（約5%）
未実装: 5項目（約24%）

Next.jsのBlog Starter Kitが初心者の学習に良いと思う | blog.monotalk.xyz - 日々の書き込み | Monotalk Blog 公開時は想定していなかったのですが、生成AIの活用によりおおむねの機能は追加できたと考えています。
今後は、バックエンド側の実装も必要になる機能の追加なども検討したいと思います。Netlifyの無料枠でも、Netlify DB | Netlify Docs などが利用できそうなので、今後試してみたいと考えています。

2025年の技術ブログ開発のふりかえり

2025年の技術ブログ開発のふりかえりになります。プラス&デルタ形式で記載します。
主に生成AIの活用に関することが多くなりました。

良かったこと「✨」

「✨」生成AIの利活用で開発スピードが大分早くなった

以前とは考えられないくらいに、機能追加のスピードが早くなっていると感じます。 アイデアをIssue登録して、平日の業務後や休日に機能追加を行っています。生成AIがなかった状況と比較すると、2〜3倍のスピードが出ているように思います。
生成AIがコード生成している間の待ち時間に家事をしたり、YouTubeを見たりしているということが増えました。 2018年に買ったMacで現状作業しているので、マシンスペックの問題でコーディング期間が長くなっているのかなとも思います。
個人的にGitHub Copilot コーディング エージェントについて - GitHub ドキュメント が衝撃的でこの機能が一時期GitHub Copilot Pro+のみで先行で利用できたので、Pro+プランに切り替えて利用をしていました。
※今は通常のProプランでも利用可能で、ダウングレードしています。
ブログの機能開発に加えて、今まではできていなかったドキュメントの作成も、ほぼ自動生成できるので機能追加とともにまめに実施できたかなと考えています。

「✨」SSG限定ではあるが、Next.jsの機能群の学習ができた

SSG限定ではありますが、App RouterのNext.jsの機能群は理解できたので、当初目的のキャッチアップはある程度できたように思います。
SSR前提だとできるが、SSGの場合にできないこと。その際に代替機能があるなどを調査して進めることができました。

「✨」GA4やGTM、Google Search Consoleの機能のキャッチアップができた

ブログ開発を通じて、GA4やGTM、Google Search Consoleの機能の学び直しする機会を得ました。
3〜4年くらいあまり操作していなかったので、基本的な操作方法の再習得ができたと考えています。

改善が必要なこと「⚠️」

「⚠️」生成AIでの開発プロセスが現状かなり手探りの状態

VS Codeで開発作業は進めていましたが、2025年はAI関連の機能追加がめまぐるしく、Askモードに始まり、Editモード、Agentモード、Planモードが機能として追加されました。
また、github/spec-kit: 💫 Toolkit to help you get started with Spec-Driven Development や、oraios/serena: A powerful coding agent toolkit providing semantic retrieval and editing capabilities (MCP server & other integrations) などのツールがリリースされました。MCPサーバー群のリリースも数多くありました。その結果、「何のツールを使ってどのように開発を進めれば良いか分からない」という状態になったと感じています。
今のところ以下のようなスタイルに落ち着いていますが、今後の進化でこの辺りは変わってくると考えています。

  • 前提作業
    • copilot-instructions.mdの作成
    • serenaのインストール
    • GitHub MCP Serverのインストール
  • 開発作業の手順（簡単なもの）
    1. 機能追加やBug FixのIssueを書く
    2. Web検索機能のある、生成AIで最新情報を入手して、Issueの内容をブラッシュアップ
    3. 2の内容をGitHub Copilot Agentに読み込ませて、実装
  • 開発作業の手順（複雑なもの）
    1. 機能追加やBug FixのIssueを書く
    2. Web検索機能のある、生成AIで最新情報を入手して、Issueの内容をブラッシュアップ
    3. 2の内容をGitHub Copilot Planモードに読み込ませる
    4. Planモードで質問に回答をして、実装

「⚠️」CI/CDが遅い

ブログの画像最適化のために、dc7290/next-export-optimize-images: Optimize images at build time with Next.js. を利用していますが、この画像最適化のためジョブの実行時間がそれなりになっていて、ストレスです。
記事の公開時やプレビュー確認の時以外に動作しないようにするだったり、差分でビルドできるようにするなどの工夫が必要かなと思っています。

「⚠️」生成AIによるコードレビューのやめ時が難しい

actions/ai-inferenceを使ったGitHub ActionsによるAIコードレビュー自動化 | blog.monotalk.xyz - 日々の書き込み | Monotalk Blog で書いているようなGitHub Actionでコードレビューを実施していますが、コードレビュー後のやめ時が難しいです。 指摘が尽きるということがないので、今のところ1〜2回の修正で対応を終了するようにしていますが、GitHub Actionではなく手元で実装をしているAgentとは別コンテキストのAgentを立ち上げてレビューするでも良いのかなと思っていたりもしています。

「⚠️」ブログ以外の個人開発にも生成AIを活用したい

過去に開発したツール類の開発メンテナンスにも生成AIを活用できればと考えています。
GAS claspの古いプロジェクトなどのアップグレードを生成AIで実施しようとしたのですがうまく移行できず諦めており、その辺りの再チャレンジを実施したいと思っています。

ブログの機能開発のふりかえりは以上です。
2026年はブログの記事自体の公開もコンスタントに実施できればと思います。
本年度も皆さんよろしくお願いいたします。

コメント