この記事はシリーズ構成となっており▶️マークが現在の記事となります
プロローグ
AIは「新人」であり「Web開発」である - 成果を最大化する生成AIとの付き合い方
第1部 僕がAIを最高の相棒にするまで：ブログ運営改善プロジェクト全記録
第2部 PMP資格の学習教材を、AIを相棒にしてゼロから作り上げる
第3部 AIを相棒にしたシステム開発プロジェクト全記録
【第1回】AIとの「壁打ち」が、曖昧な要求を「勝てる仕様書」に変えるまで
【第2回】ゼロから始めるWebアプリ設計：AIと一緒にモダンなAWSアーキテクチャを描く
【第3回】AIにコードを書かせる前に人間がすべきこと：高品質な成果物を生む「設計書」の作り方
【第4回】巨大なタスクを分解する技術：AIに「開発ロードマップ」を作らせてプロジェクト全体を見通す
【第5回】ログイン機能のセキュリティと利便性、その最適なバランス
▶️【第6回】開発プロセスにおけるAIとの協働：ログイン機能設計のケーススタディ
【第7回】認証管理の弱点とボトルネック：AIは「見えないリスク」をどう可視化する
【第8回】1つの対話から無限のコンテンツを：AIとの開発プロセスを新人研修資料やインフォグラフィックに変える方法
今回のテーマ: 実践・応用
前回の記事はこちら：https://axis.migalo.co.jp/column/k032
①はじめに
この連載「AIを相棒にしたシステム開発プロジェクト全記録」は、AIを単なるツールとしてではなく、思考のパートナーとして活用し、プロジェクトを遂行するプロセスを追体験するものです。
第5回では、Webアプリケーションのログイン機能における「セキュリティ」と「利便性」のトレードオフを、AIとの壁打ちを通じて分析しました。今回はその議論を経て固まった要件を元に、具体的な 「ログイン機能設計」 をAIと二人三脚で進めていくケーススタディをご紹介します。
この記事を読むことで、あなたは以下のことを学ぶことができます。
・AIを活用した、効率的なシステム設計の進め方
・複雑な認証フローをAIに整理させ、視覚化する方法
・開発者や非開発者への説明に役立つドキュメントを、AIに作成させる方法
②課題・目的：複雑な認証フローの可視化
ログイン機能の要件が固まった後、次のステップは「設計」です。特に、多要素認証（MFA）やSSOといった要素が加わると、認証フローは非常に複雑になります。
・ユーザーはどの画面からどの画面へ遷移するのか？
・各ステップでどのような処理がバックエンドで動くのか？
・エラーが発生した場合はどうなるのか？
これらの疑問を解消し、開発者やプロジェクト関係者が共通の認識を持つためには、認証フローをフローチャートとして可視化することが非常に重要です。
そこで私は、AIに以下のプロンプト（指示）を与え、フローチャートの作成を依頼しました。
③AIへの具体的な指示（プロンプト）
Webアプリケーションにおけるユーザー認証フローを、以下の条件でフローチャート形式で作成してください。
【条件】
・ユーザーは「ユーザー名」と「パスワード」を入力してログインする
・パスワード認証に成功したら、事前に設定された「認証アプリ（TOTP）」による多要素認証（MFA）を行う
・MFAに成功したら、ログイン完了
・パスワード認証とMFA認証のそれぞれで、認証失敗時のフローを明記する
・フローチャートはMermaid記法で記述してください
④AIの応答と結果
AIは私のプロンプトに対し、即座にMermaid記法でフローチャートを生成しました。
graph TD
A[ユーザー] --> B[ログイン画面];
B --> C{ユーザー名とパスワードを入力};
C --> D{パスワード認証};
D -- 成功 --> E[MFA認証画面へ遷移];
D -- 失敗 --> F[パスワードが間違っています];
F --> G{3回失敗したか？};
G -- Yes --> H[アカウントを1分間ロック];
G -- No --> B;
E --> I{認証アプリのコードを入力};
I --> J{MFA認証};
J -- 成功 --> K[ログイン完了];
J -- 失敗 --> L[MFAコードが間違っています];
L --> E;このフローチャートは、非常に論理的で分かりやすく、私の意図を正確に反映していました。しかし、私はさらにこの設計を深掘りしたいと考えました。特に、このフローを非開発者（プロジェクトマネージャーやデザイナーなど）にも理解できるように、より詳細な解説を追加したいと思いました。
そこで私は、以下のプロンプトを追加しました。
今作成したフローチャートについて、各ステップの詳細な解説を加えてください。特に、ユーザーがどのような操作を行い、システムが裏側でどのような処理を行っているかを、非技術者にも分かりやすく説明してください。
⑤AIの応答と考察
AIは、フローチャートの各ステップ（AからL）を丁寧に解説してくれました。
・ステップA → B: ユーザーの操作
ユーザーはブラウザでアプリケーションのURLにアクセスします。
システムは、ログインを要求する画面（ログインフォーム）を表示します。
・ステップC → D: パスワード認証
ユーザーが入力したユーザー名とパスワードをシステムに送信します。
システムは、受け取ったパスワードをハッシュ化し、データベースに保存されたハッシュ値と比較します。
成功した場合: 認証成功と判断し、次のステップへ進みます。
失敗した場合: 「パスワードが間違っています」というエラーメッセージを表示します。
...（すべてのステップについて解説が続く）
この解説は、開発チーム内での認識合わせはもちろんのこと、プロジェクト関係者全員への説明資料としてもそのまま利用できるほど質の高いものでした。私は、AIとの対話を通じて、単にコードを生成するだけでなく、プロジェクトの「知的資産」となるドキュメントも生み出せることを再認識しました。
⑥考察・ポイント
今回のAIとの協働から、以下の重要な学びを得ました。
・AIは「ドキュメントジェネレーター」: フローチャート、技術解説、企画書など、複雑な情報を構造化し、目的に応じた形式でドキュメント化する能力に長けています。特に、技術者と非技術者の橋渡しとなるような資料作成にその力を発揮します。
・対話が思考を深める: 私は当初、フローチャートだけで満足するつもりでした。しかし、「非開発者にも分かりやすく」という追加のプロンプトを与えたことで、AIはより深いレベルで私の意図を理解し、フローチャートを補完する詳細な解説まで提供してくれました。対話の質が、成果物の質を大きく左右します。
・効率的な設計プロセス: 複雑なフローを人間がゼロから設計・ドキュメント化するには、多くの時間と労力が必要です。AIに初期のドラフトを作成させ、それをレビュー・修正していく「AIファースト」なアプローチを取ることで、設計プロセスを大幅に効率化できます。
あなたのプロジェクトで試すには あなたのプロジェクトの複雑な業務フローや、ユーザーの操作手順を、箇条書きでAIに説明してみましょう。そして、「このプロセスを、Mermaid記法でフローチャートにしてください。
また、各ステップの処理内容を非技術者にも分かるように解説してください」と依頼してみてください。AIが、チームの共通認識を作るための強力なドキュメントを生成してくれます。
⑦ まとめと次回予告
今回は、AIにログイン機能のフローチャートと詳細な技術解説を作成させ、複雑な認証設計を効率的に進めるプロセスを解説しました。AIは単なるコードジェネレーターではなく、システム設計の質の高いパートナーになり得ます。
AIとの対話を通じて、複雑な認証フローを可視化し、関係者全員が共通認識を持つための設計ドキュメントを効率的に作成できました。しかし、どれだけ完璧に見える設計図でも、そこには必ず「見えないリスク」が潜んでいます。
次回は、この設計図をAIに再度レビューさせ、認証管理の弱点とボトルネック、「見えないリスク」をどう可視化するかについて深掘りします。お楽しみに。
