言葉で指示するだけで、コーディングする体験を提供します。初心者向けですので、本格的なコーディングに必要な諸々のことは思い切って省略し、雰囲気を楽しんでもらうことを目指します。誰でもコーディングできる時代になったことを自分の体験として実感してもらうことが目的です。
2025/6/23 実施
Visual Studio Codeのインストール:Windowsの場合、macOSの場合
Extensionsのインストール(左図):①Extensionsのアイコンをクリック;②Extensionをサーチ;以上の手順で次のExtensionsをインストール
Python (Microsoft):Pythonのコーディングに必要
GitHub Copilot (GitHub):AIに支援してもらうため
Live Share (Microsoft):他の人との共同作業用
↑ここで、GitHubアカウントかMicrosoftアカウントが必要
「File」をクリック
「Open Folder...」をクリック
「Windows (C:)」をクリック
「ユーザー」をダブルクリック
「自分のユーザー名」をダブルクリック
「新しいフォルダー」をクリック
フォルダー名は半角で「pong」と入力(この演習で作るピンポンゲームは英語でpongと言います)
「フォルダーの選択」をクリック
「フォルダ中のファイルの作者を信頼するか」と尋ねられたら「Yes」をクリック
上部のCopilotアイコンをクリックすると現れる右側のカラムでチャット開始
モードはとりあえずAskモードのままで。モデルもとりあえずGPT-4.1のままで。
「Ask Copilot」の部分をクリックして、入力開始
入力内容は何でもよいが、この演習では、まず次の依頼を入力(下記をコピー&ペーストすると便利;コピー&ペーストのショートカットキーは、Windowsでは「Ctrl + C」(コピー)と「Ctrl + V」(ペースト);Macでは「Command + C」と「Command + V」)
pygameを使って、できるだけシンプルなピンポンゲームをPythonで作って下さい。初心者の最初の一歩にするので1ファイルで作って下さい。チャットの応答や、プログラム中のコメントは日本語にして下さい。
Enterキーを押すか、送信(紙飛行機)アイコンをクリックして送信
(音声でチャットしたい場合は、Micアイコンを押すと、'VS Code Speech' extensionをインストールする必要があるというメッセージが出るので、インストールボダンを押す(日本語で話すためには、更に設定が必要らしいので、後回し))
コードセルにマウスオンする(マウスカーソルを持ってくる)と、右上部にアイコンが現れるので、一番左のアイコン(コードの更新)をクリック
選択肢が現れるので、青地の方の選択肢(提示された名前で新しくファイルを作って開く)をクリック
エディタ画面にファイルが表示され、メニューが現れるので、「Keep」をクリックして、提案されたコードの更新(初回は、新しく作られたコード)を受け入れ(複数個所の更新が提案された場合は、個所ごとに受け入れるかどうかを選択できる)
表示された「Create Workspace...」ボタンをクリック
ワークスペースの親フォルダの選択画面が現れるので、親フォルダにするpongフォルダ(図中の2の赤丸部分)をクリック
フォルダー名に「pong」と表示されたのを確認
「親フォルダとして選択する」ボタンをクリック
エクスプローラアイコンをクリック
新たに作られたフォルダ名をクリックして展開
表示されたPythonプログラムのファイル名をクリック
プログラムがエディタ画面に表示される
他のファイルもある場合はそれもクリックして目を通しておく(写真は、README.mdを読むと、pygameライブラリのインストールが必要だと分かるという例)
上部の3点メニューをクリック
「Terminal」をクリック
「New Terminal」をクリック
下部にTerminalが開く
Terminalで pip install pygame と入力してEnterキーを押す(←コピー&ペーストできます)
実行ボタン(再生アイコン)を押して実行
やりたいことや不具合(例:ボールが表示されない)をチャットで伝える(左図はチャット入力後に、入力内容が履歴ウィンドウに表示された状態を示す;この例では「動きを滑らかにして」と依頼)
提案されたコードセルにマウスオンして、左端の更新アイコンをクリック
更新案がエディタ画面に表示される。赤地のコードを削除して、緑地のコードを挿入するという提案であることを示す。「2 of 2」は、全部で2つある更新個所のうち、2つ目が表示されていることを示す。全部受け入れる場合は「Keep」をクリック
方法その1:
ターミナルに実行時エラーが表示されたら、表示をコピー&ペーストしてChat画面でCopilotに伝えると、修正法を提案してくれる。(たいていの場合、他に書き加えなくても、単にコピー&ペーストするだけでOK;エラーメッセージだけでなく、入力したコマンドも一緒にコピー&ペースト)
その後は、「希望を伝えて修正してもらう」のステップ2以降と同じ。
方法その2:
チャット入力欄の「@」アイコンをクリック
「@workspace /fix」をクリックすると、バグの修正を提案してくれるはず。
その後は、「希望を伝えて修正してもらう」のステップ2以降と同じ。
何を頼んでもいいのですが、参考までにいくつか例を挙げておきます
片方のプレーヤをAI にする
AIが失敗もするようにする
【一気にゲームの質が上がるのでお勧め】効果音(打球音)を入れる;ネット上での効果音の見つけ方もAIに尋ねると教えてくれる
得点を表示
ボールの初速をランダム化
ダブルスにする
ボールを2つにする
【上級】音声でラケットを操作
【上級】ジェスチャーでラケットを操作
【上級】強化学習でラケットを動かす
Visual Studio CodeでLive Share Extensionをインストール
サインイン
「Live Share」をクリックし、クリップボードにコピーされた招待リンクを共同したい相手にSNSなどで伝える
詳しくは、ここを参照
コーディングに興味が沸いた人へ:ある程度自分の力もつけると、さらにできることが広がります(上図)。自分にできることの少し外側しかAIには依頼できないからです。自分の力をつける方法(その1)は、次のような感じのシステムインストラクション(または、プロンプトの最初に書く指示)を使うことです。
system instruction:
あなたは、ユーザ(Pythonプログラミングの初心者)の学習をサポートするAIアシスタントです。
あなたの目的は、ユーザに単に完成したコードを提供するのではなく、対話を通じてユーザー自身の理解を深め、コード作成のプロセスを学ばせることです。
以下のガイドラインに従って対話を進めてください。
いきなり完成コードは提示しない: ユーザの依頼に対して、一度に全てのコードを提示するのではなく、段階的にコードを作成するよう促します。
分解を促す: 複雑な課題を小さなステップに分解することを提案します。「まずは〇〇するコードを書いてみましょう」「次に、〇〇するにはどうすれば良いか考えてみましょう」のように、具体的なステップを提案し、ユーザに考えさせます。
ヒントを与える: ユーザが詰まっているようであれば、直接的な答えではなく、関連するPythonの構文やライブラリの使い方に関するヒントを提供します。
ユーザの考えを引き出す: ユーザに具体的なコードのアイデアや、これまでに学んだ知識をどのように応用できるかを質問します。「これまでのコードで、〇〇のデータはどのように扱われていましたか?」のように、ユーザに考えを整理させます。
コードの修正を支援する: ユーザが書いたコードにエラーがある場合、エラーメッセージを読み解き、どこを修正すれば良いか、具体的な修正方法をユーザに考えさせながら示唆します。「このエラーメッセージは何を意味していると思いますか?」、「この部分の書き方は、以前学んだ〇〇のやり方と似ていませんか?」のように誘導します。
ユーザのコードを受け入れ、改善を提案する: ユーザが考えたコードが良い方向であればそれを肯定し、さらに効率的・一般的な書き方があれば、その改善点を提案します。
日本語で対話する: 全てのやり取りは日本語で行います。
必要に応じてコードスニペットを提供する: ユーザが次のステップに進むために、部分的なコードや、特定の機能を実現するための簡単なコード例を提示することがあります。しかし、それはあくまでも「ヒント」としてであり、ユーザが自分で完成させることを促します。
ユーザの理解度を確認する: ある程度コードが完成してきたら、「この部分のコードは何をしていますか?」のように、ユーザが書いた(または共同で作成した)コードの意味を理解しているか確認します。
自分の力をつける方法(その2)は、次のような感じのシステムインストラクション(または、プロンプトの最初に書く指示)を使って、クイズを出題してもらうことです。
system instruction:
ユーザはプログラミング初心者です。あなたの役割は、ユーザのコーディング依頼に応じる際、ユーザがプログラミングを習得できるようにすることです。ユーザのコーディング依頼に対してコードを生成する場合、生成するコードの内容に応じて、「コードの書き方に関してユーザは何が分かってないかを自覚させるクイズ(小問)」を日本語で出題して下さい。さらに、ユーザからのクイズの解答に応じて日本語でフィードバックして下さい。
Colabのコードセル内でコード生成を依頼する場合やGeminiとのチャットでコード生成を依頼する場合でも、そのコードセルよりも上の位置に、上のようなテキストセル、または、次のようなテキストセルを置いておくと、同様の効果があります。
system instruction:
ユーザはプログラミング初心者です。あなたの役割は、ユーザのコーディング依頼に応じる際、ユーザがプログラミングを習得できるようにすることです。ユーザのコーディング依頼に対してコードを生成する場合、依頼されたコードの実行後に、「ユーザに提示するコードの書き方に関してユーザは何が分かってないかを自覚させるクイズ(小問)」を日本語で出題するコードを生成して下さい。ユーザからのクイズの解答に応じて日本語でフィードバックするコードも追加して下さい。