こんにちは！ひさふるです。
今回、QiitaのAPIを活用してみるをテーマに、Qiitaでの活動をポートフォリオとして公開できるサービスを開発してみました！
やっていることは非常に簡単ですが、Qiita APIを活用してVibe Codingする良い練習になり、開発はとても楽しかったです。
訂正とお詫び
初期段階では、"自己紹介"タグの付いた記事が自動的に紹介される機能が実装されていました。
しかし、Qiitaの投稿ガイドラインでは自己紹介記事の投稿は推奨されていないとのご指摘がありましたため、現在は機能を削除済みです。
ガイドライン違反を助長するような状態で公開してしまったこと、お詫び申し上げます。
また、この件に関しては@nkay様にご指摘いただきました。ありがとうございました。
開発の動機
最初にこのアプリを作ろうと思ったキッカケは、QiitaのAPIを見つけたことでした。
せっかくQiitaという素晴らしいサービスがあり、そのデータを活用できるAPIがあるのだから、もっと様々な使い方ができるのでは？とも思ったのが最初の動機です。
QiitaのAPIを使ったサービスは今までもいくつか存在しており、技術書のランキング付けをしているテック・ブック・ランクはその代表例と言えるでしょう。
今回は、使えるデータを素直に使ってみることを目標とし、皆様のQiitaでの日々の活動をポートフォリオとして公開したり、最近の活動をダッシュボードとして確認できるアプリを作ってみることにしました。
Qiita APIを使って簡単なアプリケーションを作ってみる！
注意事項
Qiita APIに関して、APIで提供されている範囲でアプリを開発し公開することに関しては問題ないとされていますが、広告等で商用利用することに関してはNGと明記されています。
今回開発したアプリも利用規約を遵守し、広告を含む一切の収益化は行っておりません。
もしそれ以外で利用規約に抵触するような部分がありましたら瞬時に公開停止等の措置を取りますので、万が一問題点等ありましたらご連絡いただけますと幸いです。
また、Qiita APIはレート制限が存在し、アクセスが集中した場合にはアプリケーションが正しく動作しな場合がございます。
加えてアプリは個人で開発・運営しており、予告なく変更や終了する場合があります。
ご了承ください。
本アプリは一切の収益化を行っておりません
Mintfolio：アプリ概要
今回作成したアプリはコチラ。
このアプリは、簡易ポートフォリオ機能とダッシュボード機能という2つの機能を備えています。
簡易ポートフォリオ機能
まずは、メインの簡易ポートフォリオ機能。
https://www.mintfolio.tokyo/{qiita_user_name}という形式でアクセスすることで、そのユーザーのポートフォリオが表示されます。
イメージとしては、LinkTreeやBento.meのようなアプリに近いです。
表示されるデータはQiita内で設定されている情報をAPIを通じて取得しています。
X(Twitter)やGitHub、個人のWebサイトへのリンクは全てQiita内で設定・連携されているものです。
加えて、Qiita内でピックアップ記事として設定したページも抜粋されてリンクが表示されるようになっています。
スマホ表示やライトモード/ダークモードにも対応。即席でポートフォリオが必要な際はぜひご活用ください！
| ライトモード | ダークモード |
|---|---|
 |
 |
Qiitaを利用しているだけで自動的にポートフォリオが完成！
ダッシュボード機能
続いて、ダッシュボード機能です。
こちらは
https://www.mintfolio.tokyo/dashboard/{qiita_user_name}にアクセスすると閲覧できます。
このページでは直近の投稿に関するデータを閲覧できます。
月別投稿数の推移や、自分の得意なタグなどが閲覧できるので、今までの活動の振り返りに最適です。
今までの投稿と、そのインパクトを可視化！
使用技術等
開発はNext.jsで行い、Vercelにデプロイしています。
フロントエンドではTailwindを使い、特にUIライブラリは使用していません。
開発はCursor(GPT-5)+Claude Codeで行っています。GPT-5発表後の試用期間で使えたのがタイミング的に良かったです。
開発方法はほぼVibe Codingです。
Vibe Codingに対しては賛否両論あると思いますが、今回は以下のような理由からVibe Codingでも十分通用するだろうと判断しました。
- Qiita API的に実装できる機能的な限界が見えており、更にQiita APIの規約的に収益化できないため、もともと最低限の実装に留める予定だった(要は簡単な機能しか実装しない予定だった)
- データはQiita APIから全て取得するため個人情報は保持しない(セキュリティ的な懸念点が少ない)
- Next.jsを利用し、管理する必要があるのはQiita APIのAPIキーのみであるため、セキュリティ設定で注意すべき点が比較的少ない
一方で、自分が知らないうちに一部機能が共通コンポーネント化されており、変更の指示が意図しない部分まで及んでしまったこともあり、このあたりはVibe Codingで注意すべき点だと思いました。
作ってみた正直な感想
正直、ただのQiitaのサードパーティクライアントだろと言われればあんまり言い返せないです、ハイ...
ダッシュボードはともかく、ポートフォリオ機能はQiitaのマイページのUIを調整し並び替えただけっちゃだけですので...
とはいえ、そのUI/UXにこだわり、表示する情報を取捨選択し見せ方を工夫することで、ポートフォリオとしての機能にブラッシュアップすることには成功したと思っています。
正直、Qiitaを中心に活動している方は、ポートフォリオを作るために必要な情報はQiita内だけでほぼ揃っていると思うんですよね。
そんな方々が、労力をかけずにポートフォリオを作成できたら良いなと思って開発したのが今回のアプリです。
もしまだ自分のポートフォリオやサイトが無いという方は、このアプリのリンクをXのプロフィールなどに設定してみてはいかがでしょうか？
おわりに
今回は個人開発でQiita APIを活用したWebアプリケーションを作成してみました。
情報自体はQiita内でも閲覧できますが、それをポートフォリオ形式にまとめることで、今までのQiitaでの活動をそのまま人に紹介できるという独自の強みが生まれたと思っています。
Vibe Codingを活かす良い機会にもなり、個人的には非常に楽しく開発できました。
この機能、公式で実装いただいても良いんですよQiitaさん！！
以上、最後までお読みいただきありがとうございました🙇