こんにちは。以前Python/Djangoで作成された会議室予約システムのブログを作成しました。今回は前回のブログを参考にNext.jsフレームワークとSQLiteデータベースを使って、同等の会議室予約システムを構築します。GitHubにリポジトリを作成し、GitHub Codespaces（VS Codeベースのクラウド開発環境）上で開発環境を整え、OpenAIのコード生成AI「Codex」を活用してコーディングします。

最終的にアプリをローカル（WSL2環境）で動作確認しました。本記事では、初心者〜中級者向けに、環境準備から実装、動作確認までを丁寧に解説していきます。

Djangoフレームワークを使った会議室予約システムの作成

開発環境の準備

GitHubリポジトリ作成

まずGitHubで新しいリポジトリを作成します。

Codespacesのセットアップ

Codespacesを起動します。Codespacesはクラウド上のVS Code環境で、ローカルに開発環境を用意せずに開発が可能です。

Dev Containerの設定

VS Codeでコマンドパレット（Ctrl+Shift+P）を開き、「Add Dev Container Configuration Files」を選択し、「Node.js & JavaScript」を選択。バージョンはNode.js 22系を採用しました。

Next.js アプリケーションの初期化

Codespaces上でターミナルを開き、以下のコマンドでアプリを作成します。

    
npx create-next-app@latest . --typescript
    
  

アプリケーションの実装

OpoenAIのCodexを使用しました。

入力した内容は以下の通りです。

    
予約情報のデータベース管理: SQLiteのデータベースファイル（例: reservation.db）に予約情報を保存します。テーブル名は「room_reservation」とし、以下の項目を持たせます

会議室予約ID（予約を識別するID）
会議室ID（どの会議室かを表す番号）
利用者（予約したユーザー名）
開始日時（予約開始日時）
終了日時（予約終了日時）
削除フラグ（削除された予約かどうかを示すフラグ。今回は未使用で常に0）

予約フォーム: ユーザーが上記情報を入力して予約登録できるフォームを提供します。
予約一覧表示: 登録された予約を画面上にリスト表示し、会議室ごとの予約状況を24時間のタイムライン上に視覚化します（何時から何時まで予約されているかをバーで表示）。

Next.jsで作ってください。
    
  

動作確認

ローカル（WSL2）環境でも動かすには、GitHubにプッシュしたリポジトリをWSL2上でクローンし、`npm install`の後に`npm run dev`を実行してください。

以下のコマンドでローカルサーバを起動します：

    
npm run dev
    
  

まとめ

Next.jsとSQLiteを使って、Djangoで作られた会議室予約システムを再構築する方法を解説しました。GitHub CodespacesとCodexを活用することで、初心者でも開発を始めやすく、生産性も向上します。

本記事が、あなたのプロジェクトの第一歩となれば幸いです。