- ノーコードツールを使って、実際に動作するAI搭載アプリの開発を始めましょう
- ウェブアプリがブラウザストレージを使ってデータを保存する方法を学ぶ
- AIが思考の代わりではなく、思考のパートナーとなり得ることを理解する
- プロジェクトをGitHubに接続する方法を学び、コードが失われることがないようにしましょう
- GitHub Codespacesで構築された動作する創業者向けツールキットアプリ。以下を含む：
- フィードバック保管モジュールによる初期ステークホルダー入力の整理
- 問題定義に異論を唱え、第三の視点を提供する逆張りモジュール
- A GitHubリポジトリ にコードが保存される、あなたのFounder’s Toolkitプロジェクト
- 生徒は基本的なAIの概念を理解し、起業家精神を育む学習ユニット（AIリテラシーと起業家精神）においてAIツールを実践的に学んでいます。
- コーディングやプロンプトエンジニアリングの経験は不要です
探求から行動へ
これまでのカリキュラムでは、AIとは何か、そしてそれが世界をどう変えているかを探ってきました。また、最初の課題を友人や家族と共有し、彼らにこう尋ねた際には起業家精神を発揮しました：
- この問題は彼らに共感されるだろうか？
- 彼らはどの側面が最も重要だと考えているのか？
- どのような疑問や懸念が思い浮かびますか？
- この問題について、何が理解できていないのですか？
あなたは彼らに逆張り戦略を取るよう促し、そのフィードバックをメモした。
さあ、AIを活用する時が来ました。あなたには貴重な意見がありますが、おそらくメモやメッセージ、記憶の中に散らばっているでしょう。友人や家族は正直に話してくれるかもしれませんが、最も難しい質問についてはまだ遠慮しているかもしれません。
AIを思考のパートナーとして
思考のパートナーは、アイデアを探求し、より良い質問を投げかけ、見落としがちな点に気づく手助けをしてくれます。AIは驚くほどこの役割をこなせ、多くの成功企業は既にこの方法で活用しています。しかしAIを効果的に活用するには、その強みと限界を理解する必要があります。
最初の2つの技術ユニットでは、バイブコーディングを用いてAIを思考のパートナーとして活用する方法を学びます。 バイブコーディング とは、あなたが望むことを平易な言葉で説明すると、AIが自動的に機能を生成する手法です。本レッスンではGithub Copilotを用いたバイブコーディングで「Founder's Toolkit」アプリを構築します。これは自身のプロジェクト強化に役立つ可能性を秘めたアプリ です。
重要： 構築するAIツールは、人間のフィードバックを補完するものであり、置き換えるものではありません。既に実在の人々と対話済みであり、これは不可欠です。AIは第三の視点を提供し、収集した情報を理解する手助けとなります。
GitHubの始め方
このプログラム全体を通して、あなたは GitHub を使用し、そのストレージ機能を含む多くの機能を活用します。
コード管理という主な用途に加え、GitHubにはAIエージェント「GitHub Copilot」も搭載されています。 コパイロット やクラウドコーディングプラットフォーム Codespacesを提供しています。今回は Codespacesを使用します。これはブラウザ上で動作する開発環境です。Copilotに自然言語で構築したい内容を指示し、Codespaces内で生成されたコードを確認・理解・テストし、最終的にデプロイすることが可能です。
ここではそれらを説明できます：
- GitHub => プロジェクトのホーム コード版のGoogleドライブ
- Codespaces => Google ドキュメントのようなワークスペースですが、アプリ構築専用です
- コパイロット => あなたのアイデアを動作するコードに変えるAIコーディングパートナー
GitHubは製品開発の文脈において多くの課題を解決します。主に開発者がコードを保存・共有するプラットフォームですが、近年ではAIコーディングパートナーへと進化し、その使命の一部としてソフトウェア作成の民主化を推進しています。そのため、誰もが活用できるようAI機能への投資を強化し、制限の緩い無料プランを提供しています。
はじめに：
- GitHubアカウントをお持ちの場合は、これらの手順をスキップできます。お持ちでない場合は、github.com
- 「サインアップ」をクリックし、手順に従ってください（無料です。所要時間は約2分です）
- 定期的に確認するメールアドレスを使用し、プロフェッショナルなユーザー名を選択することをお勧めします。このユーザー名は、将来的に他の開発者と共同作業を行う際に、あなたがどのように表示されるかを決定するからです。
学校や大学に在籍している学生の方は、 GitHub Education の学生アカウントに登録してください。「Student Developer Pack」を利用すると、無料のGitHub Proアカウント、無制限のリポジトリ、さらに多くのCopilotクレジットが利用可能になります。また、サードパーティ製の無料開発ツールにもアクセスできるようになります。
フィードバックの保存
ユニット2：起業家精神のワークシートとインタビューのメモを準備しておいてください。
これらの活動では、開発環境を設定し、収集した入力を整理するためのフィードバック収集ツールを構築します。
アクティビティ1
開発環境を起動する
所要時間：15分
1. GitHubを開き、最初のリポジトリを作成する
A リポジトリ（または「レポ」） は、GitHub上におけるプロジェクトの中央拠点です。
- 「リポジトリを作成」または「新規 」をクリックして作成しましょう。
- リポジトリ名と説明を追加してください。
- ある 名前 「AIVA Founders Toolkit」のような名前を付けることができますが、一意である必要がありますので、ご自身で識別子を追加してください
- ある 説明については、AIVA Founder’s Toolkitアプリで十分です。
- 設定で以下を選択してください：
- 可視性 = プライベートに設定することで、リポジトリを閲覧できるのはあなただけになります
- Readme = Githubがドキュメント用にデフォルトファイルを自動生成する場合に有効
- .gitignoreファイルを追加 = Node
- ライセンスを追加 = MITライセンス
これらの詳細が何を意味するかは、後のユニットで説明します。もし何か見落としていても心配はいりません。後で手動で追加できます。
2. 新しいブランチを作成する
- リポジトリの左上にある「main」ブランチをクリックすると、利用可能なブランチの一覧が表示されます。
- 選択 「ブランチを表示」 を選択し、 新規ブランチを作成します。
- 新しいブランチに名前を付けます。これは純粋にあなた自身のためのものなので、任意の名前を付けることができますが、tech-unit-1のように識別しやすい名前を付けると便利です。
この手順は任意ですが、大規模な更新を行う際は毎回新しいブランチで作業することを強く推奨します。後続のユニットではベストプラクティスの詳細について説明します。
3. ブランチを選択し、Codespacesを開く
コードのバージョンを保存・保管するブランチを作成しました。次に、Codespacesを使用した開発環境でコーディングを開始します。
- 作成したばかりのブランチに移動します。これを行うには、[すべてのブランチを表示] ウィンドウでブランチ名をクリックします。
- 緑の 「コード」 ボタンをクリックし、 新しいコードスペースを作成します。
- GitHubが開発環境を作成するまでお待ちください
ブラウザが開き、Visual Studio Codeと見た目や動作が似ているコーディング開発ツールのウィンドウが表示されます。これが開発ワークスペースであり、ここでコーディングを開始します。
4. インターフェースを探索する
Codespacesが読み込まれると、多くのパネルがあることに気づくでしょう：
- ファイルエクスプローラー: プロジェクトファイル
- エディター: ファイルをプレビューおよび編集する場所
- ターミナル: コマンドを実行する場所
- Github Copilot: ここでAIに指示を出し、構築を支援してもらいます
- 上部パネル: メニューバーと検索機能付き
注意事項：
- コードは既にCodespacesに保存されています: 他のツールでは作業内容が失われる可能性がありますが、Codespacesで作成したものはすべて自動的に保存されます。いずれGitHub上のリポジトリブランチに変更をコミットする必要はありますが、Codespacesを閉じて再起動してもコードはそのまま残っています。
- 30日間アクティブでないコードスペースは削除されます。
- さらに多くの機能が存在します： 現時点ではこれらのタブやパネルを開く必要はありません。これらは開発プロセスの他のワークフローを表しており、後続のユニットで取り上げます。
Codespacesで開発環境の準備が整いましたので、10分以内に動作するアプリの作成を開始できます。
プロンプトエンジニアリングの基礎
この実際に動作するアプリを構築する際、AIを活用することになります。
重要な洞察は以下の通りです： AIの性能は、与える指示の質に依存する。
曖昧な指示を与えれば、曖昧な結果が返ってくる。具体的かつ構造化された指示を与えれば、有用で的を射た結果が得られる。
プロンプトエンジニアリング は、AIに有用で具体的な出力を生成させる指示を書く実践です。指示を改善すれば、アプリも改善されます。 AI指示を改善する手法は数多く存在し、これに関する書籍も無数に刊行されている。
しかし本質的には、ほとんどの技法は以下の要素を含む：
文脈設定
例えば
「私のアイデアについてフィードバックをください。」
文脈あり:
「私は初めての起業家として、学校給食における食品廃棄の問題を探っています。この問題を日常的に経験している生徒2人にインタビューしました。私のアイデアについてフィードバックをください。」
出力構造
例えば
「いくつかの課題を挙げてください。」
文脈あり:
「課題は正確に3つ挙げてください。各課題は20語以内の単文で記述してください。」
トーンコントロール
例えば
「私の考えのどこが問題か教えてくれ」
文脈あり:
「支援的なビジネスメンターとして行動してください。私のアイデアの弱点を指摘しつつ、それらに対処する方法を提案してください。」
アクティビティ2
フィードバックの蓄積体制を構築する
所要時間：30分
1. GitHubを開き、アクティビティ1で作成したCodespaceを開きます
すでに開いている場合は、この手順をスキップできます。そうでない場合は、
- GitHubにログインしてください。
- 左上のハンバーガーメニューをクリックし、ドロップダウンメニューから「Codespaces」を選択してください。
- Codespacesウィンドウが開いたら、GitHubがコードスペースに付けたランダムな名前をクリックして再度開きます。
2. AIに「フィードバックストレージ」を構築するよう指示する
チャットプロンプトで、以下の基本的なテキスト指示から始めてください。
これはGitHub Copilotに与えるプロンプトです。指示を受け取り、不足部分を補うための追加の仮定を行います。
右側のGitHub Copilotパネルのチャットプロンプトに表示されている通りに、正確にコピーして貼り付けてください。
起業家が私の大まかなビジネスアイデアについて2人のステークホルダーからフィードバックを集めるのを支援するシンプルなアプリを作成してください。
– タイトルは「AI Founder’s Toolkit」とする。
– ユーザーは解決しようとしている問題を入力し、その問題に関する2人からのフィードバックを入力する必要がある。
ヒント：
GitHub Copilotの最新モデルや機能をすべて把握することは不可能です。2025年1月7日現在、GitHubには様々なLLMモデルが存在しますが、モデル選択はデフォルトで「Copilot」に設 GitHub Copilotで利用可能な最新のモデルや機能をすべて把握することは不可能です。2025年1月7日現在、GitHubは様々なLLMモデルを提供していますが、モデル選択はデフォルトで「自動」に設定されています。これにより、ユーザーは自身にとって最も便利で、おそらく手元の特定のタスクに最も適したモデルを選択する柔軟性が与えられます。モデル選択を有効にして選択肢を持ち、好みのモデルを選択することをお勧めします。 モデル選択を有効化するには、「AI機能を使用」をクリックして利用規約に同意する必要があります。AI機能の利用自体は（ボタン表記が紛らわしいものの）必須ではありませんが、モデル選択を許可するにはこの同意が必須です。
3. AIによるアプリのビルド完了をお待ちください
コパイロットがアプリを生成し、進行状況を表示します。
当社の指示内容により、約1～2分かかる場合があります。コードがリアルタイムで記述される様子を確認できるため、AIモデルがソフトウェアエンジニア／起業家のように思考する方法を学べます。
AIモデルに平易な言葉で要求を伝えます。AIモデルは説明を読み取り、自動的にコードを生成します。これを「ノーコード開発」と呼ばれます。コードを書くのではなく、アプリを記述するからです。
AIは様々な仮定を行います。例えば、HTML、CSS、JavaScriptといった一般的なフレームワークを使用してウェブアプリケーションを構築することを選択します。また、指定していないスタイルの詳細（色、フォント、レイアウトの選択など）も自動的に補完します。コードを理解する必要はありません。動作を見守りながら、後で追加できる要素についてアイデアを得ていくだけでよいのです。
初めてこの操作を行う場合、ファイルの作成・編集・削除、あるいは特定のコマンドの実行を代行するといった権限の許可を求められることがあります。
重要なヒント：
今後の開発の進捗に伴い、制御が暴走するリスクを軽減するため、追加の制御機能が必要になる場合があります。そのため、最も安心できる設定を自由に試してみてください。プロの開発者は、編集のような簡単に元に戻せる単純なコマンドは許可しつつ、APIコストが高くなる可能性があるbashコマンドについてはより細かい制御を行うことが一般的です。これについては後続のユニットで詳しく説明します。
4. アプリをテストする
これはウェブアプリであるため、ウェブアプリを開くことを許可するかどうかを尋ねた可能性があります（下のスクリーンショット参照）。これは前の手順で有効にしておくべきものです。
コパイロットがアプリのコーディングを完了したら、以下の方法でテストを開始できます：
- 画面下部のターミナルパネルに「python3 -m http.server 8000」と入力してアプリを実行します。これがスターターアプリを実行する最も簡単な方法です。
- 新しいブラウザタブが開き、アプリが実行されます。
- 問題文を入力できます。
- 起業家マインドセットワークシートから、最初の友人や家族全員からのフィードバックを追加してください。
- フィードバックを保存するにはクリックしてください。
- 情報が出力領域に表示されていることを確認してください。
トラブルシューティング:
アプリが表示されない場合：
- Copilotに「アプリを実行するにはどうすればいいですか？」や「フォームが表示されない原因をデバッグして、特定された問題を解決する手助けをしてください」と尋ねることができますこれが私たちが言う AI支援デバッグ と呼び、後のユニットで学習します。
アプリが読み込まれない場合：
- ページを更新してみてください。それでも解決しない場合は、最初からやり直してください。
出力結果が期待したものと一致しない場合：
- 結構です。調整の仕方は後で覚えます。
5. プロンプトを洗練させる
当社がアプリ構築に使用したAIモデルは強力です。そのモデルが設定した前提条件により、意図しない結果が生じる可能性がありますが、その処理プロセスと生成された出力は、アプリのさらなる改良を通じて出力品質を向上させるための知見を提供します。
当社では、AIが情報を保存する前提で動作し、入力後にCSVファイルとして保存するオプションをユーザーに提供していました。お客様の場合、異なる結果が生成された可能性があります。しかし、望む結果を得るためには、指示をより詳細かつ正確に伝える必要があります。
以下のプロンプトをコピーして、Codespaces画面の右側にあるGithub Copilotパネルのチャットプロンプトに貼り付けてください。
プロンプトに1行追加して、指示をさらに明確にし、アプリをさらに良いものにしましょう！
起業家が私の大まかなビジネスアイデアについて2つのステークホルダーからフィードバックを集めるのに役立つこのアプリを改良する
アプリには以下が必要です：
– 上部のタイトル：「AI Founders Toolkit」
– サブタイトル：「私の問題についてフィードバックを集め始める」
– 問題を入力できるテキストエリア。ここで、私が解決したいビジネス上の課題を記述できます。
– 「ステークホルダー1」のセクション（以下のテキストエリアを含む）：
- この問題は彼らに共感されるだろうか？
- 彼らはどの側面が最も重要だと考えているのか？
- どのような疑問や懸念が思い浮かびますか？
- この問題について、何が理解できていないのですか？
– 「ステークホルダー2」用のセクション（同じ4つのテキストエリアを含む）
– 「問題とフィードバックを保存」と表示されたボタン
– 入力された問題と関係者から収集したフィードバックのみを含む出力領域
4. アプリを再度テストする
コパイロットがアプリの更新を完了したら、アプリを実行しているブラウザタブを更新して変更を確認できます。
アプリの実行中に問題が発生した場合や、出力結果が正しく表示されない場合は、コパイロットに解決の手助けを依頼してください。
6. 変更をコミットする
アプリを実行してテストし、出力結果に満足するまで繰り返してください。
Codespacesはコードを保存しますが、変更内容はGitHubリポジトリのブランチにコミットする必要があります。 コミット と プッシュ を行うことで、リポジトリへのコード変更がアップロードされます。プッシュ後はGitHubに永続的に保存され、追跡されます。
コミットしてプッシュするには：
- 左側のパネルでクリックします ソース管理 アイコンをクリックします。
- 以下に 変更 タブで、コミットメッセージを手動で追加するか、AIに作成させることができます
私たちにとって、AIは良いコミットメッセージを作成しました：
3. 「コミットするステージ済み変更はありません」というメッセージが表示される場合があります。その場合は、 はい をクリックしてコミットしてください。
4. クリック 変更を同期 をクリックして、CodepaceプラットフォームとGithubを同期します。
5. GitHubとリポジトリに戻り、ブランチを確認してファイルが表示されていることを確認してください。作成、変更、削除されたすべてのファイルが表示されるはずです。ただし例外があります（ヒント：.gitignoreファイルにリストされているファイル）。
この手順により、変更内容がブランチに確実に保存され、Codespace環境に問題が発生した場合でも作業内容が失われるリスクを軽減します。後の単元では、これらの「Git」コマンドについて学びます。
アプリが完成しました！
今やったことを、少しの間でも味わってみてください。
このフィードバックストレージは、収集したすべての情報を体系的に保管する場所を提供します。プログラムを通じて、ここに情報を追加し続けることになります。
注意事項：
- あなたはコードを一切書いていません。単に自分が望むことを説明しただけです。
- AIは、指定しなかった詳細（色、レイアウト、プレースホルダーテキストなど）を補完するために仮定を行いました。
私たちのケースでは、指示書に明記していなかった以下の項目が追加されました：
- 各テキスト入力欄の「プレースホルダーテキスト」
- 編集フィードバックボタン
- フィードバック送信後の成功メッセージ
あなたの出力結果は友人とは異なるかもしれませんし、新しいアプリを作成して同じプロンプトを追加しても異なる場合があります。それは問題ありません。AIはあなたの指示を解釈しデザイン上の選択を行います。もしその結果に納得できない場合は、いつでも変更を依頼するか、コード上で自ら変更を加えることができます。
データの保存
現在、アプリを更新するたびにすべてのデータが消えてしまいます。実用的なツールとしては不適切です。
次のアクティビティでは、 ローカルストレージ を追加し、アプリからより複雑なデータを保存できるようにします。
ローカルストレージは、ブラウザ上で作業中に送信されたデータを保護します。Codespacesをご利用の場合、コードは既にGitHub上で安全に保管されていますが、これからは入力したデータもブラウザ内に安全に保存されるため、いつでもアクセス可能です。
Webアプリケーションのデータ保存方法
ウェブアプリ（Google AI Studioが作成するアプリなど）を構築する場合、セキュリティ上の理由からファイルをユーザーのコンピューターに直接保存することはできません。代わりに、ウェブアプリケーションは ブラウザストレージという組み込み機能を利用します。これはウェブサイトがデータをブラウザ内にローカル保存することを可能にする機能です。
アプリにメモリを追加するには、いくつかの高レベルな事項を理解する必要があります：
- The WHAT: ブラウザストレージの種類
- The HOW: データはどのように保存用に書き込まれるのか
- The WHERE: データの保管場所
ローカルブラウザストレージとは何か？
ブラウザのストレージには主に2種類あります：
- ローカルストレージ: ブラウザを閉じてもデータは保存されたままになります
- セッションストレージ: ブラウザタブを閉じるとデータが消えます
創業者のためのツールキットでは、両方のオプションを使用します、 フィードバックがセッション間で持続します。
どのように機能するのですか？
ブラウザのストレージは、辞書のようにデータをキーと値のペアとして保存します。各データには名前（キー）と値があります。
例えば、こうだ：
- キー=> 問題
- 価値=> 「農家は農産物を売れない」
キーと値の両方がテキスト（文字列）でなければならず、JSONとして保存されます。 JSON（JavaScript Object Notation） は、人間とコンピュータの両方が読みやすいデータ表現のための標準形式です。
JSON構造全体がlocalStorageに単一の文字列値として保存され、さらにキーと値のペアがある場合はネストが継続されます。
例えば、2人からの問題とフィードバックを保存すると、次のようなJSON文字列が生成される可能性があります：
{
"problem": "Farmers from local rural communities can't sell their farming goods",
"feedback": [
{"person": "J Smith", "resonates": "Yes, sees it daily"},
{"person": "M Jones", "resonates": "Note sure it's a big issue"}
]
}
データはどこに保存されていますか？
ローカルストレージ はブラウザ内に存在し、コンピューター上のローカルファイルとは異なります。
実際にブラウザで確認できます。Chromeをブラウザとして使用して確認する方法は以下の通りです。
- 任意のサイトの任意の場所で右クリックし、 「要素を調査」 （またはF12キーを押す）
- クリックしてください 「アプリケーション」 タブをクリックしてください（Chromeの場合）
- 探す 「ローカルストレージ」」をサイドバーで探す
- クリックすると保存データが表示されます（まだ何も保存していない場合は空になる可能性があります）
制限事項：
ブラウザの保存データはデバイス間で同期されません。別のコンピューターに切り替えたり、ブラウザデータを消去したりすると、情報は失われます。後の単元では、この問題を解決するクラウドストレージについて学びます。
これは、コンピュータを変更したり、別のブラウザを使用したり、ページを更新して閲覧データを消去したりすると、保存した情報が失われることを意味します。後の単元では、データベースやクラウドストレージなど、より永続的な保存方法について学びます。
JSONは、ほとんどのアプリがデータを保存・共有する方法です。大規模言語モデル（LLM）もJSONファイルを非常に読み取り・解釈できます。これを今学ぶことで、次のような多くの機能の基盤を築くことになります：
- ユーザー設定の保存
- 作業中のデータを保存し、ユーザーがデータを失わないようにする
- デバイス間のデータ同期（後続のユニットにおいて）
- 外部サービスおよびAPIへの接続
アクティビティ3
ローカルストレージを追加
所要時間：20分
1. Github Codespacesを開く
Github.com にアクセスし、Codespaces に移動して、Founder’s Toolkit アプリの Codespaces を開いてください。
2. AIにローカルストレージの追加を指示する
このプロンプトをコパイロットのチャットセクション（右端のペインにあるはずです）にコピーして貼り付けてください。
問題を提出しフィードバックを送信した後、新しいレコードを作成し、すべてのデータをブラウザのローカルストレージに保存する。
– 問題と各フィードバック回答の項目を構造化された形式で含める。
– ユーザーが情報を保存した後、入力されたレコードは入力フォームの下に表示されるべきです
3. テストデータの永続性
AIがコードの追加を完了したら、問題とフィードバックを送信してテストを開始できます。
- 各ステークホルダーに対する問題点とフィードバックを入力してください
- クリックして問題を保存し、フィードバックを送信
- ページを更新してください（F5キーを押す、ブラウザの更新ボタンをクリックする、またはCodespacesのプレビューパネル上部右端にある再読み込みアプリボタンをクリックしてください）
- 送信したデータが表示されていることを確認してください
- 表示されない場合は、Copilotを使用して問題の原因を特定し、正常に動作するようにしてください。
コパイロットが実装した内容は、完了後に確認できるはずです。
私たちにとって、AIが追加したコードは以下のことを行いました：
- 更新しました script.js ファイルを更新しました
- フォーム入力内容を対応するキーを持つJSON形式の文字列に変換し、タイムスタンプを追加した
- ブラウザのローカルストレージに保存されたJSON
- アプリが読み込まれる際にデータを取得します
これを確認するには、上記の手順に従ってください (データはどこに保存されているのか) ブラウザのデベロッパーツールを開き、ローカルストレージを検査してください。以下は ローカルストレージ に表示される「feedback_records」キーの値です。
作成されたJSONのより見やすい表示です。
[
{
"problem": "Farmers in rural Chiapas, Mexico struggle to sell their farming products at fair prices",
"stakeholder1": {
"resonate": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"aspects": "Finding buyers who pay fairly and on time, not months later.",
"concerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missing": "Many farmers don't have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonate": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"aspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"concerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missing": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-07T23:08:35.579Z"
},
{
"problemStatement": "farmers selling their products",
"stakeholder1": {
"resonance": "Yes — my neighbors grow amazing coffee and honey but only sell to the same buyer who pays very little.",
"importantAspects": "Finding buyers who pay fairly and on time, not months later.",
"questionsConcerns": "How would farmers get their products to buyers because the roads here are difficult.",
"missingPoints": "Many farmers don’t have smartphones so how would they use an app?"
},
"stakeholder2": {
"resonance": "Absolutely. I see farmers walk hours to the market and come back with unsold vegetables.",
"importantAspects": "Knowing ahead of time if someone will actually buy, so the trip isn't wasted.",
"questionsConcerns": "Internet is unreliable here — sometimes no signal for days. Would an app still work?",
"missingPoints": "Trust and safety is everything. Here carrying cash can be dangerous."
},
"timestamp": "2026-01-03T19:27:37.272Z"
}
]
4. 変更をコミットする
- 左側のパネルでソース管理に移動します。
- 変更内容の説明を入力し、コミットボタンを押してこれらの変更をリポジトリにコミットします。
- 変更を同期する。
プロジェクトのユーザーフィードバックを入力・保存する方法ができました。今後のプロジェクト推進に役立つでしょう。今後のレッスンではこの「創業者ツールキット」アプリを拡張し、AIを活用した開発スキルをさらに習得していきます。
ブラウザのストレージ制限
ブラウザのローカルストレージについて理解すべき重要な点があります：
得意分野
- ページ更新間のデータを保存します
- 速くて簡単
- オフラインで動作する
- アカウント/ログイン不要
それが行わないこと
- クラウドへのバックアップやデバイス間の同期は行いません
- ブラウザのデータを消去すればクリアできます
- 同じブラウザ内でのみ動作します
リフレクション
あなたはかなりの時間を費やして、様々な情報を保存・統合する「創業者ツールキット」アプリをバイブコーディングで作成しました。以下に考えるべき質問をいくつか挙げます：
主要用語
- GitHub: コードの保存と共有のために始まったプラットフォーム。
- Codespaces: GitHubのプラットフォーム機能で、ブラウザ内でVS Codeを実行する開発環境を提供し、コードを実行できるようにします。
- GitHub Copilot: LLM（大規模言語モデル）を基盤とし、自然言語による記述に基づいてコードを生成するAIコーディングアシスタント
- リポジトリ (Repo): GitHub上のプロジェクト用フォルダで、すべてのコードファイルを含み、他の開発者と共同作業できる異なるブランチで構成されています。
- 創設者のツールキット: 技術ユニットを通じて生徒が構築するにつれて進化するアプリ
- バイブコーディング: 望むものを平易な言葉で説明し、AIにコードを生成させる手法。「ノーコード開発」とも呼ばれる
- ブラウザストレージ: サーバーを必要とせずに、ウェブアプリがブラウザ内にデータをローカル保存できる組み込み機能
- localStorage: ブラウザを閉じた後も残るブラウザストレージの一種。データを消去するまで保持されます
- sessionStorage:単一ページセッションの間だけ持続するブラウザストレージの一種。タブまたはブラウザウィンドウを閉じるとデータは消去される。
- JSON (JavaScript Object Notation): 人間とコンピュータの両方が読み取れるデータ整理のための標準形式。発音は「ジェイソン」。
- キーと値のペア: データを保存する方法の一つで、各データには名前（キー）と値が対応付けられる。フォルダのラベルのようなもの
- プロンプトエンジニアリング: AIが有用な出力を生成するのに役立つ、明確で具体的な指示を書く実践
- 非決定論的: AIは同じ入力に対して同一の出力を生成しない。各応答はわずかに異なる場合がある
その他のリソース
- プロンプティングを学ぶ: 無料の総合コース
- Googleのプロンプト設計ガイド: Google公式のヒント
- GitHub Copilot: Copilotの機能について詳しく学び、パワーユーザーになるためのベストプラクティスを含む
- Gitガイド：GitHubの使用方法とプロジェクト管理のためのgitコマンド実行に関するドキュメント
付録
プロンプトエンジニアリング
プロンプトエンジニアリングとは、AIモデルが正確で関連性の高い応答を生成するよう導く効果的なプロンプトを作成するプロセスである。
主にテキストベースのAIおよび自然言語処理（NLP）タスクで使用されます。
目標は、プロンプトを賢く作成することで、モデルが特定のユーザーニーズを満たす出力を生成できるようにすることです。
プロンプトとは何ですか？
- プロンプトとは、AIモデルに文脈と指示を与える短いテキストのことです。
- それらはモデルがユーザーの意図に合致する応答を生成するのを助ける。
良いプロンプトは
- 過剰な情報なしで明確なガイダンスを提供する。
- あまりにも一般的すぎたり、詳細すぎたりしないようにしましょう。
- ユーザーの目標と状況を明確にする。
プロンプトエンジニアリングが重要な理由とは？
- 具体的なプロンプトは、モデルのタスク要件に対する理解を向上させます。
- 望ましい結果に非常に近い出力を生み出す。
- より良いプロンプトは、より効果的な自然言語処理タスクと、将来のタスクに向けたより良く訓練されたモデルを意味します。
才能はあるが経験の浅いアシスタントに指示を出すように、望ましい結果を得るために明確で正確な指示を与える。
技法
プロンプトエンジニアリングは単なるプロンプト作成以上のものです。特定の目標に向けてLLMとの連携方法を調整するためのツール群の遊び場なのです。
レベル1：必須
- 具体的に
- 文脈を提供する
- 例を挙げてください
- ワンショットプロンプティング – 入力/出力の例を示してください。
- 例:
「テキスト: ジェーン・スミス（45歳）はロンドンのソフトウェア開発者です。
JSON: ‘name’: ‘Jane Smith’, ‘age’: 45, ‘role’: ‘Web Developer’, ‘city’: ‘London’
テキスト: John Doe, 29歳, パリ在住の学生。
JSON: [ここに新しい入力]
- 例:
- 少数の例を用いたプロンプティング – LLMがパターンを学習できるよう、いくつかの例を示す
- 複数の例が役立つような、より複雑なタスクに有用です
- ワンショットプロンプティング – 入力/出力の例を示してください。
- フォーマットを指定する
- 反復的に洗練する
レベル2：中級（必要な時に使用）
- 思考の連鎖 – LLMに推論過程や手順を示すよう要求する
- 役割の割り当て – 例：「あなたは専門家です…」
- ネガティブプロンプティング – 例：「含めないで…」
- 温度制御 – 例：創造性 vs 一貫性
レベル3：上級（オプション、後ほど）
- 自己一貫性 – 複数の出力を要求し、その後LLMに「最適な」出力を選択させる
- 思考の樹 – LLMに複数の推論の枝を探索させ、最終的な応答を決定させる
- 検索拡張生成（RAG） – LLMに外部情報を利用してより良い文脈を提供させる
プロンプティング手法の完全なリストは以下の通りです： https://www.ibm.com/think/topics/prompt-engineering-techniques
