クライアントだけで社内システムを作ろうとして爆死した話

Posted at 2025-07-06

〜HTML/JavaScript単体でできること・できないこと〜

🚀 はじめに

生成AI（ChatGPT）を活用しながら、
「クライアントサイド（ブラウザ）だけで簡単な社内ポータルを作ろう」
とPoCをやってみました。

「AIにコード書かせりゃ何でもイケるだろ」と楽観していたら、
クライアントサイドだけでは超えられない壁にいくつもぶつかりました。

ChatGPTにHTML/CSS/JavaScriptを生成させてポータル画面を実装
JavaScript（+CSS）を使って：
- ローカルでテキストファイルを読み込み
- 単一ファイル内のキーワード検索とハイライト
- 該当箇所のクリックコピー
社内にはファイルサーバはあるものの、
クライアント単体で「直接ファイル操作や全社共有」できないかを検証。

単一ファイル内のキーワード検索
- HTMLに埋め込んだテキストデータをCSS+JavaScript（DOM操作）で検索＆ハイライト。
- fetch は使わず、ブラウザ内で完結。
該当箇所をクリックすると文字列をクリップボードにコピー
- navigator.clipboard.writeText を使用して即コピペ。
ページ内容の一時的な変更（自分だけ）
- DOMを書き換えることでブラウザ上で表示を変更することは可能。
- ただしこれは自分のブラウザだけの話であり、他のユーザーには一切反映されない。

クライアントだけでできるのは、

「自分のブラウザで一時的に見た目や内容を変える」
組織で使う仕組みは結局、
- サーバ（API・DB・ファイルサーバ管理バッチ）でデータを一元管理し、
- クライアントは画面表示と操作だけ
  という役割分担が不可欠。
理屈では分かってたけど、実際にPoCを動かしてエラーを見て初めて腹落ちした。

まずは Power Automate を最大限活用。
クライアント単体で不可能だった

シンプルかつ現場適用が早いので最優先。
ネットワーク越しにSaaSやファイルサーバを繋ぎ、
規模や複雑さが増しても耐えられるか検証します。

次に、

「Python未経験の自分が、生成AIだけでPaizaスキルチェックランクをどこまで上げられるか」
に挑戦。

これは単なるPython学習ではなく、

この実験で得たスキルを使い、
Power Automateで煩雑・非効率だった処理をPython+APIで置き換えるフェーズへ。

AIが書いたコードを自分で咀嚼しメンテしながら、
本格的にサーバ処理・API構築へ進みます。

そして最終的には、
DB連携・帳票・ネットワーク処理をクラウドに載せ、
全社的に使えるシステムへスケールアップする構想。

クライアントは画面と操作に専念し、
データはクラウドで一元管理する形を目指します。

次はPower AutomateとPythonでファイルサーバを繋ぎ込むPoCに挑戦予定。
「AIがどこまで自動化を代行できるか」を試しつつ進めます。

同じように

「AIで何でもできるはず！」
と鼻息荒く突っ込んでる人の参考になれば嬉しいです。

（執筆者：@re_Beginner）