• AIコーディングことはじめ|ChatGPT・GitHub Copilot・VS Codeの使い方をまとめて解説

    AIコーディングことはじめ|ChatGPT・GitHub Copilot・VS Codeの使い方をまとめて解説

    ChatGPT・GitHub Copilot・VS Codeを最短で使い始める設定まとめ

    「AIでコード書いてみたいけど、

    何をどう設定すればいいか分からない…」

    この記事では👇

    最低限の設定だけ

    迷わず進める

    すぐコードを書き始められる

    をゴールに、

    ChatGPT・GitHub Copilot・VS Codeの初期設定をまとめます 👍


    🥇 STEP1:ChatGPTの最低限設定(まずここ)

    まずは ChatGPT単体でOK

    アカウントがあれば、すぐ使えます。

    ただし、データに関しては注意が必要。

    はじめにあなたの個人的なデータが学習されないように設定することをオススメします。

    ✅ やること①:「すべての人のためにモデルを改善する」をオフにする

    設定 → データコントロール

    👉 すべての人のためにモデルを改善する」OFF

    ↓ macアプリ

    ↓ブラウザ版

    💡 これで

    • 入力内容が学習に使われない
    • 気軽にコードを貼れる

    ※仕事で使う人は特にON/OFFを理解しておくと安心。


    ✅ やること②:まずはこれだけ試す

    プロンプト例👇(コピペOK)

    javascriptで、ブラウザだけで動くゲーム作って

    👉 コードが出る(長いんで省略します)

    すべてのコードが生成されるまでは数分かかると思うのでしばらくお待ち下さい。

    出力が終わったら、index.htmlなど名前のファイルをつくりコピー。

    このファイルをブラウザで開いてみてください。

    👉 ブラウザで表示

    こんな感じでゲームができてます

    コピペで動くぐらいの完成度です。そこそこ動くコードが生成されてますね。

    もちろんタイミングによって生成されるゲームの内容は違うと思います。

    ただ、このぐらいの完成度のプログラムを数行のプロンプトで生成できるって・・・。すごいですよね。

    でも、ちょっと待ってください。

    LLMがプログラムを生成できることはわかったと思いますが、実際の開発でどう使うか?はまだピンときてない方もいると思います。

    次はもっと実践で使えるツールを紹介します。


    🥈 STEP2:GitHub Copilotを使う準備

    前述のChatGPTみたいなことを、今度はGitHub Copilotでやらせてみます。✍️

    なんでわざわざ Github Copliot を使うかというと VS Codeと連携しやすいからです。

    ここではまずはGithub Copilotの設定を説明します。

    ✅ やること①:GitHubアカウントを用意

    • https://github.com/
    • 無料でOK

    ✅ やること②:Copilotを有効化

    • GitHub → 右上のアイコンをクリック → Copilot Settings
    • とりあえず試すだけなら Free で十分です。

    ちなみに僕はGitHub Copilot Proを使ってます。

    ちなみに、こちらも個人的なコードや情報を学習されないように設定をしておくことをオススメしますので、プライバシーの設定を少し補足します。



    ① Suggestions matching public code

    GitHub上の 公開リポジトリに似たコードを提案して良いかどうか?

    仕事で使っていてライセンス違反にならないように注意したい場合は「Blocked」の方が良いですが、個人利用であれば「Allowed」でいい気がします。



    ② Allow GitHub to use my data for product improvements

    製品改善のためにデータを使ってよいか?お好みでどうぞ。



    ③ Allow GitHub to use my data for AI model training

    あなたのコードをAIモデル学習に使ってよいかどうか?

    特に業務コードを扱う場合は、この設定は必ず Disabled を確認しましょう。

    その他の細かい設定は後回しで大丈夫です。


    🥉 STEP3:VS Codeと連携(AIの作業場)

    ✅ やること①:VS Codeをインストール(まだの方)

    • https://code.visualstudio.com/
    • Windows / Mac / Linux 対応

    ✅ やること②:最低限の拡張機能だけ入れる

    🔹 GitHub Copilot

    拡張機能検索で👇

    GitHub Copilot

    → Install

    🔹 GitHub Copilot Chat(あれば)

    GitHub Copilot Chat

    👉 VS Code内で

    • チャットで質問
    • コードの説明
    • 修正案の提案

    ができるようになります。


    ✅ やること③:VS Codeと連携の設定

    • VS Code右下 or 画面案内に従ってログイン
    • GitHubアカウントでOK

    そうしたらGitHub → 右上のアイコンをクリック → Copilot Settingsのページから

    「Copilot in you IDE」をクリックして設定を開始します。

    そうしたら説明のページが開くのでそのページの「Open in Visual Studio Code」のボタンをクリック。

    ブラウザの確認が入ります。僕の場合はChromeの例です。

    この画面はVisul Studio Codeの画面です。こちらでも確認があります。

    はい。Visual Studio Codeの右側のBuild with Agent と表示されるチャット画面が出ていれば設定成功です。

    上記のウインドウが表示されていなかったら。Visual Studio Codeの画面上部のプルダウンから「チャットを開く」をクリックすれば表示されます。

    では早速AIコーディング始めていきましょう。


    ✨ ここまでで何ができる?

    これで、最低限の設定が終わりました。

    さっそく AIコーディングのはじめの一歩を勧めましょう!

    「おお…」ってなる瞬間です 😄

    まずは先程のVS Codeの右側のチャットウインドウに以下を入力。

    Pythonで"Hello World"と出力するプログラムを書いてください。

    僕の場合は、こんな感じの出力になりました。

    「保持」ボタンを押して確定させます。

    Copilot Chat でコードを実行してみる 😄


    じゃあ実行もさせてみましょう。

    こんな感じで確認してくるので「Allow」をクリック。

    仮想環境も作成してくれて無事に実行されました。

    ヤッター!!!

    ここまで来るとコーディングが楽になるイメージが湧いてくると思います。

    さらに、もう一歩だけ実際のコーディングに近づけてみたいと思います。

    ✨ せっかくここまで準備できたので、もう少しだけ試してみましょう。

    実際のコーディングをすごく単純にしたような例で、AIコーディングを体感してみます。

    やりたいことは以下。

    • “Hello World”と出力する部分を関数にする。
    • 関数は任意の文字列を受け取ってprintするように
    • 引数が指定されなかったら既定値で”Hello World”を出力
    • 関数はファイルも分ける
    • この関数に対するテストを作成
    • テストも実行

    プロンプトはこんな感じ

    "Hello World"と出力する部分を関数にして、別ファイルにしてください。
    関数は任意の文字列を受け取ってprintするように書き換えてください。
    引数が指定されなかったら既定値で"Hello World"という文字列を使ってください。
    また、その関数のテストコードも作成して、テストの実行をして動作確認してください。


    プロンプトを渡すとしばらくして、LLMがコードを書き換え始めます。

    僕の場合は、以下の関数を作って greet.pyというファイルに外出しにしてくれました。

    def print_message(message="Hello World"):
        """
        任意の文字列を受け取って出力する関数
        
        Args:
            message (str): 出力する文字列。既定値は"Hello World"
        """
        print(message)


    メイン関数から呼び出すようになってます。

    from greet import print_message
    
    print_message()
    

    テストコードはこんな感じ

    ちゃんと既定値のテストも入ってます。

    (長いので省略・・・)

    最終的に以下の確認画面が表示されるので、「Allow」で許可すると

    
    
    
    
    

    テスト実行して結果も報告してくれました。

    やりました!!!

    ここまでくると、コーディングが楽になりそうなイメージがついたと思います。

    もちろん、今回の例はわかりやすいように、すごくシンプルな例です。

    プロンプトをもっと細かく書くことによって、もっと複雑なプログラムを書かせることも可能ですし、

    既存のプログラムの改修をさせることも可能です。

    また、READMEなどを読ませて、チームのコーディングルールやテストルールに則って実装させることも可能です。

    これで、AIコーディングをしたことがなかったかたも、メリットを感じていただけたのではないでしょうか?

    ✅ 注意点:AIコーディングやっちゃだめなこと

    ※ AIが生成したコードは、そのまま信用せず、必ず自分で一度は目を通しましょう。

    確かに、AIにどんどんコーディングさせて動作確認だけするバイブコーディングという手法もあるにはあるんですが・・・。

    あくまでもエンジニアがAIを使ってコーディングを楽にするのであって、AIに振り回されないために、ちゃんとコードの中身は理解して使いましょう。


    ⏱️ 所要時間まとめ

    • ChatGPT設定:5分
    • GitHub Copilot準備:10分
    • VS Code設定:15分

    👉 30分あればAIコーディング開始 🚀


    🎯 まとめ

    • 最初は ChatGPT+VS Code+Copilot だけ
    • 細かい設定は後回しでOK
    • 「まず動かす」が一番大事

    次のステップとしておすすめ👇

    • ChatGPTに良い質問をするコツ
    • Copilotに変なコードを書かせない方法
    • 「AIを信用しすぎない」チェックポイント

    今回は「AIコーディングことはじめ」ということで、たぶん一番シンプルな使い方の説明をしました。

    上記のGithub Copilot + VS Codeの環境は、今後のより高度な使い方の基礎になっていくものですので、普段の開発環境としてぜひ採用していただけたらと思います。

    これからもAIコーディングやLLMに関する情報やティップスを記事にしていきたいと思ってます。

    それでは、また。

  • ブログはじめました – 自分の手で学ぶ、生成AIの記録

    ブログはじめました – 自分の手で学ぶ、生成AIの記録

    こんにちは。
    このブログ TENMILLI GENAI LOG は、生成AIのことを「ちゃんと試して」「ちゃんと考えて」学んでいく記録としてスタートしました。



    なぜブログを書こうと思ったのか

    ChatGPTを初めて使ったとき、「これはすごい」と思ったのと同時に、
    「これは、ただ眺めてるだけじゃ何も身につかないな」とも感じました。

    SNSには情報があふれていて、「これが便利」「あれができる」みたいな話も多い。
    でも、それを自分で手を動かしてみて、何が起きたかを言葉にすることの方がずっと大事だと思ったんです。



    生成AIとの距離感

    ぼくは20年以上エンジニアをやっていて、クラウドもWebアプリも扱ってきました。
    でも、生成AIの分野はまったくの「今から」組。

    このブログでは、そんな「これから始めるエンジニア」の視点で、
    ・どんなツールがあるのか
    ・実際にどれを使ってみたか
    ・うまくいったこと、うまくいかなかったこと
    などを、包み隠さず記録していきます。



    んな記事を書いていく予定です

    カテゴリとしては、今のところこんな感じで考えています:
    • ChatGPTやClaudeなど、LLMの使い方と比較
    • OpenAI APIやLangChainなど、開発視点の実験
    • 「プロンプト工夫してみた」系の実用Tips
    • 自動化や業務効率化、副業に使えるか?の検討
    • そして、うまくいかないことも含めた試行錯誤の記録



    最後に

    このブログは、自分の学びを残していくためのログであり、
    それがどこかで誰かの役に立ったらうれしい、という気持ちで書いています。

    派手な発信ではないけれど、ちゃんと試したことしか書かないブログとして、
    地に足のついた発信をしていけたらと思っています。
    
    
    
    
    

    TENMILLI GENAI LOG

    生成AIを使って、考えて、試す。

    手を動かしながら学んでいく記録。