🏷️

ZennのPublicationの技術スタックを可視化して検索できるサイトを作りました

に公開
2025/12/29
テーマ「2025年の最も大きなチャレンジ」
Next.js
Zenn
Vercel
個人開発
Supabase
tech

ZennのPublicationの技術スタックを可視化して検索できるサイトを作りました。
https://zenn-publication-techstack.vercel.app/

作った理由

ZennのPublication一覧ページには、各Publicationの記事数しか表示されていません。そのため、どのような技術が使われているかを確認するには、各Publicationの詳細ページを見る必要があります。

技術スタックを参考にして企業を探すことはよくあると思うので、それをZennのPublicationに対して簡単にできるようにしてみました。

また、技術スタックだけでなく、各種統計データやリモートワークに関する記事があるかどうかなども可視化しています。

構成

処理の流れ

  1. Cloud Run JobsでZennを定期的にスクレイピング[1]して、集計したデータをSupabaseのDBに保存する
  2. VercelのDeploy hookをトリガーする
  3. 保存したデータを使って、SSGでVercelでデプロイが実行される

使用した技術

SaaS

  • Vercel
    • Next.jsのSSGを使用する想定だったので、Next.jsとの相性を考慮して採用
    • 後述のTurborepoを導入することで、モノレポも自動で判定して設定不要でビルド可能
  • Supabase
    • PostgreSQLのみを利用
    • クライアントからの接続はないので、単に使いやすそうという観点で採用
    • Supabase CLIが用意されており、開発環境がout of the boxで利用できて好印象
  • Cloud Run Jobs
    • 長時間の実行となるので[2]、タイムアウトを長く設定できるという観点で採用
    • コンテナイメージの保存にArtifact Registryを利用
    • 機密情報をSecret Managerから参照
    • Cloud Schedulerで定期実行[3]

ライブラリやツール

フロントエンド

  • Next.js
    • 現状のデファクトスタンダード[4]
  • shadcn/ui (TailwindCSS)
    • 過去に使用したことがあるため採用
  • Lucide React
    • アイコンの表示
  • twemoji
    • アイコンの表示
  • React-Select
    • 複数トピックの検索のために採用
  • nivo
    • Tech記事とIdea記事の円グラフの描画に利用
    • Canvasを利用した描画
  • Motion
    • リストの更新時のアニメーションに利用

ジョブ

使用言語はTypeScript(Node.js)でフロントエンドと統一しています。

  • Cheerio
    • スクレイピング用

共通

  • pnpm
    • 高速
    • 最近はデファクトスタンダードになっている印象
  • Drizzle
    • シンプル
    • 以前に利用したこともあるので採用
  • Vitest
    • 新規プロジェクトなので採用
  • Biome
    • 設定が楽
    • 少なくとも個人開発で使う分には問題なし
  • Turborepo
    • 主にVercelでのデプロイ時のビルドをするために採用
    • モノレポにすることで、DBのスキーマをフロントエンドとジョブの両方から参照する

その他

  • GitHub Copilot
    • Gemini 3 Pro をChatで使用
    • 通常の実装補助だけでなく、hooksやコンポーネントへのリファクタリングや苦手なUIの調整にも利用[5]

工夫した点

トピックの表記ゆれへの対応

Zennで使われているトピックの表記ゆれを吸収して、同じトピックとして扱うようにしています。

  1. 表示名がCase違い: typescriptとTypeScriptなど
  2. 同じ表示名に対して異なる識別名: 表示名がGo、識別名がgo、golangなど

思ったよりも処理が面倒だったのですが、テストコードを書き、AIの力を借りることで、比較的素早く実装することができたように思います。

jsonb型の利用

内部実装的な観点になりますが、PostgreSQLのjsonb型のカラムを利用して、トピック周りの処理をシンプルにしました。基本的には利用しないのですが、今回のような集計用のデータに使うのはよさそうでした。

今後の展望

実は、QiitaのOrganizationの情報も一緒に載せたかったのですが、

という状況であり、残念ながら現状は実現できませんでした。

QiitaのGitHub Discussionで要望は出しているので、Organization一覧が取得できるようになった場合は対応しようと思っています。

おわりに

機能の要望や不具合の報告などあれば、問い合わせしてもらえると喜びます。

脚注

  1. 利用規約やrobots.txtを確認してスクレイピングが禁止されていないことは確認済みです ↩︎

  2. サーバに負荷をかけないようにインターバルを設けるためです ↩︎

  3. 月1-2回程度の想定です ↩︎

  4. といいつつ、実は食わず嫌いしており、これまで使用経験はありません ↩︎

  5. いわゆるvibe coding的な使い方もしています ↩︎

Discussion