はじめに
お疲れ様です。
今回の個人開発では、Qiita APIとMicroCMS を連携し、Qiitaと社内の技術記事を自動収集・一覧表示できるテックブログを構築しました。
アプリ概要
トップページでは、Qiita と MicroCMS の記事をカードUIで一覧表示しています。
「もっと見る」ボタンを押すと、個人記事・ブログ記事それぞれの一覧ページへ遷移できます。
記事カードをクリックすると、Qiita の記事ページまたはブログ詳細ページへ移動し、そのまま記事を読むことができます。
また今回作成したアプリでは、Next.js（Turbopack + TypeScript）・TailwindCSS ・DaisyUI・MicroCMS・Qiita API を使用し、Qiita記事の自動取得、MicroCMS記事の取得、カードUIによる一覧表示、ブログ詳細ページ、CI/CD（GitHub Actions）、Firebase / Vercel への自動デプロイまで実装しています。
使用技術
| 分類 | 内容 |
|---|---|
| フロントエンド | Next.js(Turbopack)+TypeScript |
| UI | tailwindCSS + DaisyUI |
| データ取得 | Qiita API / MicroCMS API |
| サーバー処理 | React Handler / API Routes |
| デプロイ | Firebase Hosting |
| CI/CD | Jest + React Testing Library |
| 自動化 | Makefile (dev / test / deploy) |
開発で苦労したポイントと解決策
Qiita と MicroCMS のデータ構造を統一するのが大変だった
Qiita と MicroCMS では取得できるデータの形式や項目名が大きく異なり、
そのままでは共通のUIコンポーネントで扱えませんでした。
例 Qiita のデータ
{
"title": "React入門",
"created_at": "2024-01-02",
"url": "https://qiita.com/xxx/items/abc123"
}
例 MicroCMS のデータ
{
"id": "blog01",
"title": "Next.jsでブログ構築",
"publishedAt": "2024-02-10",
"thumbnail": { "url": "https://..." }
}
日付の形式、URL、サムネイルなどがバラバラなので、フロント側で統一して扱うのが非常に難しい構造 になっていました。
そこで以下のように、記事をフロントへ返す前に、API Route 側で 同じ形 に整形しました。
return {
title: item.title,
thumbnail: item.thumbnail?.url || DEFAULT_IMAGE,
date: item.publishedAt || item.created_at,
url: item.url || `/blogs/${item.id}`,
};
DaisyUI と TailwindCSS でカードUIを統一するのが難しかった
Qiita と MicroCMS はサムネイルの有無や画像サイズが異なるため、
カードの高さやレイアウトが簡単に崩れてしまいました。
また、レスポンシブ対応やgridの調整も必要で、見た目を揃えつつ、どの記事でも破綻しないカードデザインを作る のが意外と大変でした。
学び・成長したポイント
API 設計・データ整形の理解が深まった
API Route でデータ取得 → 整形 → 返却の流れを理解できた。
Next.js のサーバーサイド処理を実践レベルで理解できた
Route Handler・環境変数・非同期処理など、Next.js の「サーバー機能」を使いこなす経験を得ました。
特に、外部APIの呼び出しや、JSONレスポンスの設計など、本番開発でも必須になる知識を実践的に習得できたと考えています。
おわりに
Qiita・MicroCMS・Next.js・CI/CD と、非常に多くの技術が絡む開発でしたが、
MVPを細かく分けて進めたことで迷わず実装できました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼
https://projisou.jp