※Next.jsとQiita APIについては他記事でたくさん説明があるため、この記事では説明しません。
TL;DR
今回は、Next.jsを使ってランキングサイトを開発した経験をシェアしたいと思います。
Qiita APIを利用して記事のランキングを表示するサイトを作成しました。現時点での完成品が👇こちらです。
⛳ これをやった目的とゴール
Next.jsの基本的な使い方を学んだ方がQiita APIを利用してデータを取得し、Webページに表示する方法を学ぶことです。
最新の人気記事をリアルタイムで表示するランキングページを作成することを目指しました。
🔧 必要なツールとライブラリ
- Node.js
- Next.js
- axios（APIリクエスト用）
💻 プロジェクトのセットアップ
参考資料にあるとおり、yoshiishunichi/qiita-api-nextjs のリポジトリのソースを参考にしました。
なので、git pullして yarn install、yarn dev することで準備しました。
開発したリポジトリ
📝 実装方法
pages/ranking.tsx ファイルを作成してAPIからデータを取得する部分を実装しますが、
基本的には生成AIのツールを活用して実装を進める形で実装しました。
🤖 実際に利用した生成AIツール
-
Azure OpenAI Service – 高度な言語モデル | Microsoft Azure
- このサービスを利用して社内で開発、構築されたボットを利用
-
Create - free-to-use AI app builder
- 作りたいUIの画像をアップロードしたり、テキストで指示を与えることで画面を生成し、生成されたCodeも提供してくれます
-
GitHub Copilot · Your AI pair programmer
- バグ修正やコード説明してもらうときに利用しました。テストコードとかも作ればよかったなー 🤔
💦 ハマったところや困ったところ
生成AIで作られたコードもやはり完璧なものではなく、ところどころ修正が必要になり、Github Copilotさんに頼りました💦
大まかにはChatGPTやその他の生成AIでコードを書き、細かい修正やステップをふんでのブラッシュアップはGithub Copilotさんが良かったかなという印象🤔
簡易なランキングUIなら生成されますが、デザインがだめで何度も「かっこいいランキングサイト」とか「かわいいランキングサイト」などでググった💦
ランキングサイトって意外とかっこよかったり、動きがあって楽しくなるようなものないんですね💦
つまんないただの一覧で表現してるサイト多かった印象💦（良いサイト知ってたら教えて下さい🙏）
🤔 参考資料
-
yoshiishunichi/qiita-api-nextjs
- Forkさせていただいて中身を参考にしました。ありがとうございます🙇♀