Kon's DX Lab - Case Study

Day 6 | Next.js×Supabaseで、「わからない技術用語」をちょっとラクに整理してみた実験記録

Published on 2025-04-07

🔬 Case Study Summary
Problem

(ここに課題を記述)

Result

(ここに具体的な成果を記述)


Tech & Process

(ここに採用技術とプロセスを記述) コードを詳しく見る »

こんにちは、こんです。

今回は「業務中に出てきた “わからない技術用語” をもっとラクに整理できないかな?」と思って、Next.js × Supabase × ChatGPT を組み合わせたアプリを作ってみた実験記録を残しておきます。
ぼく自身も専門家ではないので、ChatGPTやネット検索を頼りに、できる範囲で進めてみました。


実験のきっかけ:学びが積み重ならないモヤモヤ

こんなこと、起きていませんか?

  • 新しい用語に出会っても、すぐ忘れてしまう

  • 調べたことを後から検索できない

  • 同じことを何度もChatGPTに聞いている気がする

「なんとかしたいな」と思って、試してみることにしました。


作ってみたもの(システムの概要)

今回はこんな仕組みを作ってみました:

  • ✅ わからない言葉を入力するだけで、ChatGPTが定義・活用事例・コード例まで自動生成

  • ✅ 自動的にタグ分類・カテゴリ分類(親カテゴリ10種)を実行

  • ✅ 投稿一覧からカテゴリ別・タグ別に検索可能(検索フォーム付き)

  • ✅ 各カードには「追加質問」や「実際にやってみた記録」をチャット形式で追記可能(進化するカード)

コードは基本的に書かず、SupabaseのDB設計と、ChatGPTとのやりとりで構成しました。


実感したメリット

使ってみて感じた「これは良かったな〜」という点です:

1. 「調べた内容」が“ナレッジ”として残せる

ただ検索するだけでなく、再利用できる形で保存できるのが◎

2. 自分の知識の進化が“見える化”される

あとから「前に自分が何に困ってたか」が可視化されて、自分自身の成長ログにもなります。

3. 他の人の“わからなかった”に共感できる

タグや検索機能を通じて、他の人のつまずきや気づきにも触れられる仕組みを想定しています。


実際の画面イメージ

  • 【投稿画面】:入力欄+ボタンだけのシンプルなUI(わからない内容だけでOK)

  • 【カード一覧画面】:カテゴリ・タグバッジ付きで表示。クリックでフィルタ可能

  • 【カード検索画面】:タグやカテゴリで検索!


アップデート予定:カードの「進化」と「共有」機能を強化します!

今回は基礎的な仕組みを構築しましたが、以下のアップデートを予定しています:

  • ステップ4(ユーザーによる「やってみた記録」機能の追加)

  • ステップ5(カードごとの「追加質問スレッド」UIの強化)

  • ステップ6(人気カード・共感数ランキングなど、コミュニティ的な可視化)

他にもまだまだアイデアあります…!「ナレッジカードが進化する」「他の人の“わからない”に共感できる」仕組みを強化していきます!


まとめ:まずは小さく試してみるのがいい

今回の実験は、「自分のための業務ナレッジ整理」をテーマにしたものです。
100点じゃなくても、「ラクになった!」がひとつでもあれば大成功。
ひとつずつ“わからない”を味方にしていけたらいいなと思っています。
それでは、また次の実験で!🦊