ChatGPTと二人三脚しながら昔の掲示板風サイトを作った話

はじめに

先日、友人との話していたらWebサイトを簡単に作れないか相談を受けました。
友人は非エンジニアなのですが、TRPGをする上で世界観の作り込みとしてWebサイトを用意したいとのことでした。
どこかのサービスを使えないかとのことでしたが、色々要件を聞いたところ、いっそ作ったほうが早いんじゃないかと結論に至りました

あくまで情報を見せる場として欲しく、閲覧専用で、書き込み機能は不要とのこと。

それだけならHTML+CSS+JavaScriptで作れるのではないか…。
サーバー不要なら、以前にも触ったことのあるGitHub Pagesが活用できるのではないか…！

1から作ってもよかったのですが、雑談している最中に画面が見せられたら面白いという発想の元、ChatGPTと協力し開発を進めることにしました。

本記事では、その開発の過程や技術的なポイントをまとめます。

ChatGPTに依頼した要件のまとめ

友人の要望をもとに、以下のような方針を決めました。

• GitHub Pagesのみで動作（サーバー不要）
• 昔の掲示板風サイト
• JSONを使ってスレッドデータを管理 (友人が情報を書くときにHTMLを直接変更せずともすむように)
• スレッドの一覧表示
  • GitHub上の "data" フォルダ配下すべての JSON を自動取得
  • スレッド一覧データ（indexファイル）は作らず、すべてのスレッドを読み込む方式
  • スレッドごとのタイトル・最新3投稿を表示し、スレッド詳細ページへリンク
• スレッド詳細表示
  • スレッドをクリックすると、そのスレッドの全投稿を表示するページに遷移
  • 投稿機能は不要（読み取り専用）**
• CSSは外部ファイル化し、Bootstrapなどの利用可 (デザインをいじるときに楽をしたかった)

設計の具体的な部分をChatGPTに相談しながら決めていきました。

ChatGPTとのやり取り

開発を進める中で、ChatGPTとは以下の流れでやり取りを行いました。

⏳ 1. 最初の相談

「GitHub Pagesで完結する掲示板風のサイトを作りたい」と相談。
要件として、JSONで投稿を管理し、スレッド一覧のデータを作らず、自動でスレッドデータを読み込む方式を希望。
デザインの方向性も指示。
この時点では、まだ具体的なレイアウトや構成は決まっていなかった。

🔍 2. 掲示板の基本構造を作成

HTML・CSS・JavaScriptを使って

• JSONのデータを読み込む仕組み
• スレッドのタイトル一覧を表示する仕組み
• 最新の投稿を3件ずつ表示する機能
  を実装。

また、JSONのcontentで改行を反映できるようにしてほしい という要望を追加し、
replace(/\n/g, '<br>') を適用して対応。

🎨 3. デザイン調整

サイトのデザインを調整。
この段階で「スレッドの表示方法」についても試行錯誤しながら、見やすいレイアウトを調整。
bootstrapも活用し、簡易的ながらレスポンシブ対応も実装。

⚙️ 4. 各実装内容の調整

細かい実装や要件を詰め、改めて調整。
シナリオ用のギミックについても実装したが、ネタバレになる可能性があるため本記事では詳細割愛。

📜 5. GitHubでの運用方法を整理

「この掲示板は非エンジニア以外の人が運用できるようにしたい」

という希望があったため、初心者でも簡単にセットアップできるように、

• Download ZIP を使ってローカルに保存
• JSONの差し替え方法
• ブランチ作成とGitHub Pagesの公開
  をまとめた手順書となるReadmeの作成、調整。

技術的なポイント

画面デザインや全体のコードは、内容からTRPGのネタバレになるといけないので、割愛します。
ですが、折角なので、実装内容を一部抜粋紹介します。

JSONによるスレッドデータ管理

スレッドデータはGitHub Pages上にJSONファイルとして保存し、クライアント側のJavaScriptで読み込む設計にしました。

JSONの形式は以下のようにしました。

{
  "title": "スレッドタイトル",
  "posts": [
    {
      "user": "名無し",
      "date": "2025-03-11",
      "content": "最初の投稿です。"
    },
    {
      "user": "名無し",
      "date": "2025-03-12",
      "content": "2つ目の投稿です。"
    }
  ]
}

1ファイル1スレッドにした理由は、管理のしやすさから選びました。

JSONファイルの自動読み込み

data フォルダに 1.json, 2.json, 3.json... という形式でスレッドデータを格納し、JavaScriptで自動的に読み込むようにしました。

async function loadThreads() {
    let threadContainer = document.getElementById("threads");
    let index = 1;
    while (true) {
        try {
            let response = await fetch(`data/${index}.json`);
            if (!response.ok) break;
            let thread = await response.json();
            displayThread(thread);
            index++;
        } catch (e) {
            break;
        }
    }
}

要件にも書いた通り、スレッドの一覧表示時には全部のjsonファイルの中身を見ることになりますが、
50もスレッドを作ることはなく、各スレッド内のコメント量も多くないとのことなので、この方法を選びました。
単純な作りを目指したため、表示する際にはdateの中身を確認してソートするといったことはしていません。
入っているデータを指定されたデザインに沿って表示するのみです。
この方法なら、一覧表示用のjsonを作る必要もなくなります。

まとめ

ChatGPTと一緒に開発することで、思考の整理がしやすく、効率的に掲示板を作ることができました。
特に、技術的なアイデアをもらいながら設計を決めるのは楽しいプロセスでした。

プッシュログを見ると、大体
　最初の掲示板としてのたたき台を作るのに30分、
　デザイン・javascriptの調整で3時間、
　Readme追加で20分ぐらい、かかっているようでした。

途中モンハンで遊んでいた記憶もあります。
RTAじゃないですが、正確に時間を測って作ればよかったですね…。
次回似たような開発をするときの反省にしたいと思います。

都度GitHub Pagesで開発状況を伝えながら実装していたのですが、
最初のたたき台が30分ほどでできたこともあり、
「雑談している最中に画面が見せられたら面白い」という目論見がうまくいって良かったです

GitHub Pagesは大変便利なので、また何かあれば作りたいと思います。