PORTFOLIO

目的・背景

ハッカソンに出場した際、私は「チームメンバーのスキルを把握するまでに時間がかかる」という課題を感じました。
また、ChatGPTなど生成AIの進化により、GitHubのリポジトリを読み解きながら実装や学習を行うスタイルが、以前よりも取りやすくなってきたとも実感しました。

そこで私は、「リポジトリを共有し、質問や議論ができるWebアプリ」を開発しました。
このアプリでは、チーム開発におけるスキル共有の円滑化と、学習者同士が技術知識を共有し合える環境の実現を目指して制作しました。

アプリの名前は 「CodeBridge（コードブリッジ）」 です。
その由来は、“プログラミング（コード）を通じて、人と人とをつなぐ架け橋になりたい” という想いから名付けました。

使用した技術

  • フロントエンド：React
  • バックエンド：REST Framework、Express.js
  • データベース：SQLite（Django側）、MongoDB（Express/Socket側）
  • リアルタイム通信：Socket.io（Express）
  • 認証：JWT（JSON Web Token）
  • AIモデル：PyTorch（BERTによる文章分類）
git hubリポジトリ

このアプリはフロントエンド・バックエンド・リアルタイム通信の3層構成で開発しています。
それぞれの役割に応じて、以下のように技術を分けて使用しました。

React（フロントエンド）

ユーザーの操作画面（UI）や各機能のページ遷移を実装しました。
デモ動画で表示しているすべての画面は、このReactアプリで構築しています。

Reactのリポジトリはこちらから

Django REST Framework（バックエンドAPI）

ユーザー管理、ルーム管理、リポジトリ投稿、メッセージの保存、AI検索機能など、主要なデータ管理APIを担当しています。

Djangoのリポジトリはこちらから

Express.js（リアルタイム通信＋通知管理）

Socket.ioを利用したリアルタイムメッセージ機能と、未読通知の送受信処理を担うバックエンドです。
MongoDBと連携し、ユーザーとリポジトリごとの通知情報を管理しています。

Expressのリポジトリはこちらから

機能の紹介

このアプリには、開発時に感じた課題に対応するため、以下の機能を実装しています。
各機能の説明とあわせて、画面のデモやスクリーンショットも掲載しています。

ユーザー認証（JWT）

アカウント作成・ログイン機能は、トークンベースで実装しました。
JWT（JSON Web Token）を用いることで、フロントエンドとバックエンド間で安全に認証情報をやり取りし、ログイン状態を維持できるようにしています。

<工夫した点>

  • アカウント作成が成功した直後に、自動的にログイン処理を行うことで、スムーズなUXを目指しました。
  • トークンの有効期限が切れた状態で、バックエンドへのリクエスト（ルームログインやリポジトリ一覧取得、カテゴリ検索など）を行おうとした場合、
    クッキーに保存されたトークンを削除し、自動的にログアウト処理を実行する仕組みを実装しました。

これにより、ユーザーに不要な混乱を与えず、セキュリティと利便性を両立させた認証を目指しました。

説明のためのデモ動画として、下記のアカウントを作成します。

  • メールアドレス：kimikou-blog@gmail.com
  • ユーザー名：kimikoublog
  • パスワード：kimikoublog

デモ動画には載せていませんが、他の機能の説明のため下記のアカウントも作成しました。

  • メールアドレス：code-bridge@gmail.com
  • ユーザー名：コードブリッジ
  • パスワード：codebridge
ルーム機能

ルーム名とパスワードを入力することで、新しいルームを作成したり、既存のルームに参加できます。
ハッカソンやチーム開発のようなグループ単位での情報共有を想定した設計です。

<工夫した点>

  • ルーム作成が成功した直後に、自動的にログイン処理を行うことで、スムーズなUXを目指しました。

説明のためのデモ動画として、下記のルームを作成します。

  • ルーム名：コードブリッジ
  • パスワード：codebridge

デモ動画には載せていませんが、他の機能の説明のため下記のアカウントも作成しました。

  • ルーム名：Python勉強会
  • パスワード：pythonstudy
リポジトリ登録・カテゴリ分け

GitHubリポジトリのURL、タイトル、概要、デモ動画をリポジトリデータとして登録できます。カテゴリを複数選択して紐づけることで、目的別に絞り込み表示も可能です。

メッセージ投稿

リポジトリを詳細表示すると、そのリポジトリに対する質問や議論などのメッセージを投稿することができます。
開発者同士がリポジトリごとに意見交換を行えるチャットのような場を提供しています。

<工夫した点>

  • メッセージの投稿には Socket.io を使用し、他のユーザーにもリアルタイムで共有されるように実装しました。
  • 投稿されたメッセージは、他のユーザーに「未読」として通知が届くようにしています。
  • 「未読通知」もSocket通信によってリアルタイムで反映されるため、即時性のあるやり取りが可能です。
  • さらに、他のユーザーがすでにそのリポジトリの詳細画面を開いている場合は、未読通知を送らない仕組みを導入し、不要な通知を減らす工夫をしました。
お気に入り

リポジトリを「お気に入り」に追加・解除することができます。
追加したリポジトリは、専用の「お気に入りページ」で確認でき、そこからメッセージのやり取りも可能です。

<工夫した点>

  • お気に入りページでは、入室しているルームに関係なく、他のルームで追加したお気に入りデータも一覧表示できるようにしました。
  • お気に入りに登録したリポジトリのメッセージや通知は、リアルタイムで受信と送信ができるようにしました。
  • この工夫により、複数ルームに参加しているユーザーでも、重要なリポジトリを常に追いやすくなることで、利便性の向上をめざしました。

<追加デモ>

お気に入りにリポジトリデータを追加した場合の、メッセージや通知の送信と受信についての動作のデモ動画です。

BETA版：AI検索機能

「作りたいアプリの概要文」を自然文で入力すると、類似するリポジトリをAIが自動で提案してくれる機能です。
現在は、事前に用意した5つのクラスに分類するシンプルな分類タスクとして構成しています。

<今後の展望と改良点>

現在の学習データは量が少なく、各クラスで 語尾のスタイル（敬語／ため口）に偏り があるため、
語尾や動詞を統一するなどテキストの正規化を進めながら、データセットの質を改善していく予定です。

今後は学習データを増やし、一定の精度が出せた段階で クラス数の拡張 も行っていきたいと考えています。
また、現在学習中の強化学習を活かし、ユーザーからのフィードバックを元にBERTの分類精度を向上させる深層強化学習の導入も検討中です。

<デモ動画>