AI駆動趣味開発講座【まとめ】— 講座一覧
本講座は、プログラミング言語やコードを一切読まない・書かないことを前提に、生成AIとの対話だけで「自分や身の回りの人のためのオリジナルWebアプリ」を作る趣味開発の入門講座です。
【極めて重要な注意点：本手法は「個人の趣味開発」限定です】
本講座で提唱する「コードを読まずにAIに任せる」アプローチは、あくまで個人の趣味・プライベートな範囲でのものづくりに限定したものです。
業務・実務の開発において、コードの中身やセキュリティを理解・検証しないままAI生成コードを放置することは、極めて不誠実であり、重大な事故や情報漏えいを引き起こす無責任な行為です。 プロフェッショナルとしての実務開発では、必ずコードの挙動を理解・レビューした上でAIを活用してください。
講座構成
本講座は以下の三部構成で進めていきます。
- 第一部：Vue.js によるモバイルWebアプリ開発（ローカル編）
- 第二部：Git / GitHub 管理と Vercel によるホスティング公開編
- 第三部：生成AI（API）機能の組み込み編
講座一覧
第一部：Vue.js によるモバイルWebアプリ開発（ローカル編）
| 講 | タイトル | 内容 |
|---|---|---|
| 第一講 | Node.jsの環境準備とVue.jsによるモバイルWebアプリの立ち上げ | AI駆動趣味開発の心構え、VS Code・Node.js・拡張機能（Cline/Antigravity）導入、Vue.js初期表示、Wi-Fi経由でスマホ実機からローカルサーバー体感 |
| 第二講 | AI対話によるアプリ構築とバイブコーディング実践 | npm init vue による土台生成、Cline（Plan/Actモード）との対話、Vuetify採用によるデザイン崩れ防止、モバイルWebアプリの自動構築、自然言語による機能追加、バイブコーディングの反復改善 |
第二部：Git / GitHub 管理と Vercel によるホスティング公開編
| 講 | タイトル | 内容 |
|---|---|---|
| 第三講 | Git・GitHubの基礎理解とWindows・SSH環境セットアップ | なぜAI開発でGitが必須なのか？バージョン管理システムの仕組み、GitとGitHubの違い、3つの領域（作業ディレクトリ・ステージ・リポジトリ）、WindowsへのGit導入と初期設定、GitHubアカウント作成とSSH接続疎通テスト |
| 第四講 | GitHubリポジトリ作成からローカルへのクローン・VS Code操作実践（Push & Pull） | GitHub上での空リポジトリ（demo）作成、作業フォルダー（test）でのgit clone、ファイル作成（test.py）、ステージング・コミット・プッシュ（Push）、Web画面での編集とVS Codeでのプル（Pull）同期、手元プロジェクトのGit連携コラム |
| 第五講 | Vercelによる無料Web公開・自動デプロイ実践とスマホアプリ化 | クラウドプラットフォーム（Vercel）の導入、GitHub連携と初回デプロイ、本番URLの世界公開、スマホホーム画面追加によるアドレスバーなし全画面化、PWAの選択肢、Push時のCI/CD自動更新、IP制限の注意点 |
第三部：生成AI（API）機能の組み込み編
| 講 | タイトル | 内容 |
|---|---|---|
| 第六講 | Google AI StudioでGemini APIを取得してアプリに知能を組み込む | Google AI Studioによる無料Gemini APIキー取得、Vercel Functions（api/）による安全なサーバーレス中継、.envと.gitignore管理、AI（Cline/Antigravity）への自然言語オーダー、Vercel環境変数連携とスマホ実機体験 |
この講座で学べること
【第一部】Vue.js によるモバイルWebアプリ開発（ローカル編）
- 第一講 … コードを読まない「AI駆動趣味開発」の全体像、VS Code や Node.js の環境構築、相棒となるAIツールの準備、そして同じWi-Fiを通じて「パソコンがサーバーになりスマホ実機で動く仕組み」を体感します。
- 第二講 … Vue.jsプロジェクトの初期生成から、AI（Cline）への自然言語によるアプリ作成オーダー、Vuetifyを活用したモバイルUI構築、機能追加の実装、そしてバイブコーディングによる反復改善サイクルを学びます。
【第二部】Git / GitHub 管理と Vercel によるホスティング公開編
- 第三講 … コードが読めないからこそ必須となる「絶対の安全装置」Gitの仕組み。バージョン管理の本質、GitとGitHubの違い、3つの領域（作業ディレクトリ・ステージ・リポジトリ）、Windowsへのインストール、初期設定（ユーザー名・メアド・SSHキー生成）、GitHubアカウント作成と公開鍵の登録・疎通確認まで完了し、次回のクラウド連携へ向けた安全な基盤を固めます。
- 第四講 … クラウド（GitHub）と手元のPCを実際につなぐハンズオン。サンドボックス（テスト用環境）として空のリポジトリ（demo）を作成し、VS Codeでフォルダー（test）を開いてクローン。ファイルの作成から初回コミット・プッシュ（Push）、さらにGitHub Web画面上での編集と手元への同期（Pull）まで、Gitの双方向同期サイクルを習得します。
- 第五講 … Vercelと連携して世界中へWebアプリを即時無料公開！Git Pushで本番サイトが即座に自動更新される感動（CI/CD）を体感し、スマホのホーム画面追加によるアドレスバー非表示のネイティブアプリ化プロ技やPWAの選択肢、IP制限の防御策まで学びます。
【第三部】生成AI（API）機能の組み込み編
-
第六講 … アプリに「思考する頭脳」を吹き込む実践！Google AI Studioでクレジットカード不要の無料Gemini APIキーを発行。Vercel Functions（
api/ディレクトリ）を活用してブラウザに秘密鍵を渡さないプロ仕様の安全設計を習得し、AIへの指示だけでVueアプリへGeminiを組み込んで世界へ公開します。
🎉 全六講完走、お疲れ様でした！
第一部のVue.jsローカル開発から、第二部のGit/GitHub・Vercel世界公開、そして第三部のGoogle AI Studio（Gemini API）とVercel Functionsによる知能の組み込みまで、コードを読まない「AI駆動趣味開発」の全必須サイクルを完全制覇しました。
あなたの手から生まれた世界でひとつのオリジナルアプリを、ぜひ自由に育てていってください！
次のステップへ！おすすめの本格学習講座
「コードを読まない開発」で動く楽しさを知った後は、ぜひ 「中身の仕組みを理解する本格的な学び」 にも挑戦してみてください！コードやAIの理解を通して鍛えられる「論理的思考力」は、どんな職種・仕事においても人生で一番役に立つ一生の武器になります。
- 🤖 人工知能概論【まとめ】— 講座一覧
AIを単に使う側から、機械学習・深層学習・LLM・RAGなどの理論と仕組みを本質から理解する全17講のAIリテラシー講座。 - 💻 DRF × Vue.js 実践講座【まとめ】— 講座一覧
Python（Django REST Framework）とVue 3（TypeScript）を使い、コードを一行一行理解しながらフルスタックWebアプリを構築する実践講座。
各講へのフィードバックや応援があれば、いいね（LGTM）やストック、コメント等で応援してもらえると筆者の大変励みになります！