〜AIがあんたの開発パートナーになる時代やで〜

僕が関西に移住してはや15年が経ちました。あっという間でした。。なんとなく思うのですが、関西弁ってインパクトあって頭に残りますよね。標準語で綺麗に書くのも良いですが、今回は関西弁を駆使して記事を書いていきます！（この部分は関西弁ではないですが笑）

では、本文どぞ！

「プログラミングって難しそうやなぁ…」「自分にはムリちゃうか？」って思ってへん？
せやけど、今の時代はちゃうんやで。AIが横で教えてくれる時代や。

しかも無料で使えるVSコード（Visual Studio Code）と、AIがコードを考えてくれるGitHub Copilot（コパイロット）を使えば、ほんまに初心者でもWebサイトもアプリも作れるんや。
この記事では、むずかしい言葉ナシで、AIと一緒に「作る楽しさ」を感じてもらえるように、関西弁でやさし〜く説明していくで。

Contents

1 1. むずかしいこと抜きでいこか
2 2. VSコードってなんやねん？
- 2.1 2-1. なんで初心者におすすめなん？
- 2.2 2-2. 他のツールと比べたらこんな感じやで
3 3. CopilotってどんなAIやねん？
4 4. VSコード×Copilotでできること一覧
5 5. 実践①：AIでカフェのサイト作ってみよ！
6 6. 実践②：アプリ開発にも挑戦してみよ
7 7. ChatGPTとCopilot、どう使い分けたらええ？
8 8. よくあるトラブルと解決法や！
9 9. Copilotでスキルアップ＆副業にも挑戦！
10 10. Copilotを使いこなすコツ
11 11. これからの時代、AIと一緒に作るねん
12 12. まとめやで
13 13. 今すぐ始めよか！
- 13.1 🌟 ほな、今日から一緒に作ろや！

1. むずかしいこと抜きでいこか

正直なところ、最初は「英語ばっかりやし、意味わからん！」って思う人がほとんどや。
でもな、Copilotは“あんたの頭の中”を読み取ってコードにしてくれるAIやねん。

「ボタン押したらメッセージ出るようにして」って書くだけで、コードを自動で出してくれる。
せやから覚えるより、しゃべる（書く）だけ。気楽にいこな。

2. VSコードってなんやねん？

VSコード（Visual Studio Code）はマイクロソフトが作った無料の最強エディタやで。
めっちゃ軽いし、パソコンさえあればすぐ始められる。しかも日本語にもできるから安心や。

2-1. なんで初心者におすすめなん？

💡 無料で使える！ 何回落としてもタダ！
⚙️ 軽くて早い！ ノートPCでもサクサク動く
🧩 拡張機能が多い！ AI・プレビュー・色つけまで一発追加

つまり、「これから始めたい！」って人にぴったりなんや。

2-2. 他のツールと比べたらこんな感じやで

ツール	特徴	初心者ポイント
VSコード	無料・軽い・なんでもできる	困ったらググれば誰かが助けてくれる
Dreamweaver	Adobe製やけど高い	お金かかるけど見た目で作れる
Sublime Text	速いけど英語多め	慣れるまではハードル高め

3. CopilotってどんなAIやねん？

GitHub Copilotは、AIがあんたの代わりにコードを書いてくれる“開発の相棒”やで。
コメントに「こんなことしたい」って書くだけで、AIがコードをパッと出してくれるんや。

// ボタン押したらメッセージ出るようにしてや
document.querySelector('button').addEventListener('click', () => {
  alert('やったな！AIプログラミングの第一歩や！');
});

これ、ほんまに1行コメント書くだけでAIが全部考えてくれる。
最初見たとき「うそやろ？」って思ったわ（笑）

4. VSコード×Copilotでできること一覧

分野	できること	むずかしさ	使い道
Webサイト制作	HTML/CSS自動補完	★☆☆	お店・美容室のHP
アプリ開発	React / Next.jsなど	★★☆	予約・スタッフ管理
Python開発	FlaskやFastAPI	★★☆	AIツール・チャット機能
デザイン	TailwindCSSで装飾	★☆☆	かわいいLP制作
エラー直し	AIが修正案を出す	★☆☆	つまずいても怖くない！

5. 実践①：AIでカフェのサイト作ってみよ！

せっかくやし、AIに「おしゃれなカフェのホームページ作って」ってお願いしてみよか。
やることはたった3つやで👇

フォルダ作って index.html を作る
VSコードで開く
コメントで「カフェのHP作って」って書く

たとえばこんな感じ👇

<!-- おしゃれなカフェのトップページ作って。メニューとアクセス、ベージュ系で。 -->

これだけでAIがHTMLとCSSを全部出してくれる！
ほんまに一瞬で「サイトの形」になるからびっくりするで。

あとは「もうちょい可愛くして」「スマホで見やすく」って書いたらAIが修正してくれる。
まるで、横に優秀なデザイナーがおるみたいな感覚やな。

6. 実践②：アプリ開発にも挑戦してみよ

次は、ちょっとステップアップして従業員登録アプリを作ってみよか。
言葉だけ聞くとむずかしそうやけど、AIがほとんどやってくれるから安心してな。

まずはこれをターミナルに打つだけ👇

npx create-next-app staff-form
cd staff-form
npm run dev

ほんで、page.tsx にこう書くんや👇

// 名前とメールを登録するフォーム作って。
// 未入力チェックも入れてや。

すると、Copilotがちゃんとフォームと送信処理を作ってくれる。
あとは「TailwindCSSでおしゃれにして」って言うだけで、ええ感じにしてくれるで。

7. ChatGPTとCopilot、どう使い分けたらええ？

やりたいこと	使うAI	理由
設計とか全体の流れ考えたい	ChatGPT	構成を整理してくれる
コードを実際に書きたい	Copilot	手を動かすのが得意
動かない理由を知りたい	ChatGPT	日本語で説明してくれる