inflearn logo
知識共有
inflearn logo

基礎概念から実践的な制作まで、しっかり理解して取り組むAIバイブコーディング

AIコーディングを行う際、AIに何をさせるかを決め、AIが適切に実行したかを確認するには、結局ソフトウェアに関する知識が必要です。ウェブサイトの構築に欠かせないソフトウェアの基礎概念を学び、これらの概念をもとにAIを活用してウェブサイトを制作してみましょう。企業向け講座およびAIソロプレナー・クラブで受講生からよく寄せられる質問をもとに講座を構成しました。

18名 が受講中です。

難易度 入門

受講期間 24か月

HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
vercel
vercel
supabase
supabase
HTML/CSS
HTML/CSS
JavaScript
JavaScript
React
React
vercel
vercel
supabase
supabase

受講後に得られること

  • 自分だけのウェブサイトをすぐにインターネット上で公開できます。モチベーション維持のため、比較的早い段階でデプロイを進めます。

  • 「やってくれ」→クリック、「やってくれ」→クリックのサイクルではなく、具体的にAIの成果物を検証し、方向性を指示できるようになります。

  • バックエンド機能を組み込んで、より多機能なウェブサイトを作ることができます。

  • MCPではなく直接制御して、データ消失の心配を減らしましょう

なぜこの講義を受けるべきですか?

バイブコーディングをやってみたことはありますか?
もしかして、こんな経験はありませんか?

下書きを作るとき

カチッ〜
(それっぽいUIを見ながら)
'お〜、自動でうまく作ってくれるね'

そのまま進めながら

'なぜ自分が思ったとおりにならないんだろう?'
'どこから変えればいいんだろう?'
'AIに何と説明すればいいんだろう?'

なぜこのようなことが起こるのでしょうか?


コーディングはAIが行いますが、判断は人がしなければなりません。

進めるうちに複雑に絡み合うばかりで、きちんと完成しない理由は明らかです。

AIが毎回作業するたびに何をしたのか判断できなかったためです。

ファイルが次々と生成されても、その内容が分からなければ、AIがきちんと仕事をしたのかどうか判断する方法がありません。

ケニアの起業家を対象としたAI導入後のグループ別成果

MetaではAI移行後、機能開発は36%増加したものの
問題の対応時間は70%増加

ハーバード大学がケニアの起業家を対象にAIビジネスメンタリングを提供した実験がありました。

次のような結果が出ました

  • 従来の高成果グループ:AIの使用により事業成果が約15%以上改善

  • 従来の低成果グループ:AIの使用により事業成果が約8~10%悪化

AIをむやみに使ったからといって、結果が自動的についてくるわけではありません。その分野に関する判断の知識があってこそ、初めて成果が出ます。

AIバイブコーディングも同様です。

SW用語や背景知識を知っていてこそ、AIに適切な指示を出し、成果物を完成度の高いものに仕上げることができます。


受講生からの質問は、ほとんどがコンピュータサイエンスに関するものでした。

いくつかのAIバイブコーディング講座を行う中で、多くの質問を受けました。

  • 質問のほとんどはAIに関する質問ではなく、コンピュータプログラミングに関する質問でした。


  • 受講生がつまずいていたのは、SWの必須概念を知らないことが原因である場合が多くありました。



お伝えすることは明確です。

  • バイブコーディングに必要なSW概念と適用方法を身につけます。

  • 時間が経っても、AIが進化しても変わらない概念について学びます。

  • 皆さんお忙しいですよね?不要なステップは省き、本当に必要な知識だけを効率的に学びます。

この講義が特別な理由は何ですか?

変わらない基礎概念から

Webページの構成要素であるHTML/CSS/JavaScriptからReact、NextJS
バックエンド活用のためのAPIとDatabaseまで

AIモデルがどれほど発展しても
変わることのないSWの基礎概念から理解していきます

クライアント?サーバー?ローカルサーバー?リモートサーバー?
混乱しやすい概念をすべて整理し、

何かをインストールする場合でも
なぜそれをインストールする必要があるのか、すべてお伝えします

学んだ後、すぐに適用してみる実習パート

概念だけを身につけても意味がないですよね?
実習を通して、概念がどのように活用されるのかを学びます
AIが間違った方向に実装しているときにブレーキをかけ、正しい方向に作業するよう指示する方法を学べます。

Codexで素早くモックアップ画像を埋めて
ウェブページのレイアウトを確認し、

データベースのスキーマ設計を一緒に検討しながら
実践感覚を身につけましょう

まずは素早くデプロイする方法からお伝えします。周りの人に作ったものを自慢してみましょう。

  • 継続的に学習するためには、モチベーションが重要だと分かっています。

  • 作ったものを他の人に見せびらかしたいですよね?最初の段階から、すぐにデプロイ方法をお教えします。

  • デプロイには気を配ることが多いですが、難しい概念は抜きにして、成果物を出すことに集中しましょう。

  • Vercel CLIやSupabase CLIの方式は使用しません。すべてをAIに自動処理させると、セキュリティリスクやデータ消失のリスクが高まります。

  • 基礎的な段階から理解しながら、すべてをAIに委任するのではなく、自分でコントロールできるようにします。


本講義はFAQをもとに制作されました。

  • オフライン講義およびオンライン講義で受講生から寄せられた質問を集め、データ化しました。

  • 質問データがそのままカリキュラムの基盤となりました。

  • 難しすぎる概念はNo!不要な概念もNo!

  • Webサイト構築に本当に必要な概念だけをしっかり学べます。


オフライン講義の受講生たちの質問をもとに作られた講義

온라인세션

オンライン教育受講生の質問

オンラインライブ講義とコミュニティ掲示板を通じた質問…

質問タイプのデータ化

質問の種類をデータ化し、受講生が最も頻繁につまずく箇所を把握しました。

Claude CodeとCodexの両方を活用します。

最近登場したCodex Astraは圧倒的な性能を見せています。

このようにClaude CodeとCodexは互いに競い合いながら進化しています。

Claude Codeだけを活用する多くの講義とは異なり、本講義では両方を活用します。

AIの進化のスピードは非常に速いため、今後どのLLMが先行するかを予測するのは困難です。

1つのAIモデルだけに適応せず、いつでも別のLLMへ移行できるように柔軟な使い方を身につけることをおすすめします!

Claude Codeの活用

Codexの活用

この講義は今後も継続的にアップデートされる予定です!

AIの進歩は非常に速いです。現在活用しているAIモデルとそれに伴う活用方法が、6か月後には古くなっている可能性もあります。

講義内容のほとんどはAIの発展に影響されない概念を中心にお伝えしますが、実習では最新のAIモデルを活用した内容をご紹介できるよう、継続的にアップデートしていく予定です。

今後もさまざまな実習コンテンツを追加・更新していく予定です。

今一度ご購入いただければ、今後のアップデートも追加料金なしで受講できます

こんな方におすすめです

コーディング経験はないものの、AIでバイブコーディングをしてみたい方

バイブコーディングをしたことはあるものの、何かを理解して行っている感じがしない方

AIに流されず、作業の方向性を明確に指示したい方

  • この講義は初心者向けの講義です。何も知らない方でもついてこられるように、インストールから一つずつ丁寧に説明します。

  • きちんと作るために知っておくべき概念は、それほど多くありません。必須の概念を身につけて、自分のプロジェクトをコントロールし、AIに指示してみましょう

  • 基礎概念をしっかり身につけていれば、どの作業段階からでも引き続き作業を進められます。

受講後は

  • 私たちが目にするウェブサイトが何で構成されているのかが分かります。

  • 自分で作ったウェブサイトをすぐにインターネット上へ公開できます。これまでの講義では、受講生全員が公開に成功しています。

  • 曖昧な用語の定義を明確に把握できます。AIにより明確な指示を出せるようになります。

  • 自分で作ったウェブサイトでリアルタイムのリードを受け取れるように設定できます。

  • 外部APIおよびデータベースの活用方法を学び、ウェブサイトの機能をより多彩にすることができます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • バイブコーディングで何かを作ってみたものの、何も分からないままやっているように感じる方

  • 以前バイブコーディングの講義を受けたものの、基礎知識がなく、優れたシステム設計に対する適切な判断基準を持っていない方

  • コーディングはAIに任せるとしても、自分が作ったウェブサービスの責任と管理権限は自分自身で完全に持ちたい方

  • バイブコーディングで作った成果物に満足できず、さらにアップグレードしてみたいのに、AIにいくら指示しても改善されないと感じている方

  • バイブコーディングを初めてやってみたい方

前提知識、
必要でしょうか?

  • 基本的なコンピューター文書およびExcel作成経験

  • インターネット利用経験

こんにちは
dotshefです。

キャリア認証

- サムスン電子グローバル技術センター エンジニア

- ログブラック バックエンドエンジニア

- SK mySUNI AI教育ファシリテーター

- エンジェル投資協会 江南区予備創業者教育アシスタント講師

- AIソロプレナー・クラブ ビルダートラック講師

もっと見る

カリキュラム

全体

103件 ∙ (13時間 17分)

講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

似ている講座

同じ分野の他の講座を見てみましょう!

新規会員登録で25%OFF

¥9,402

25%

¥12,532