学習スタジオは PC でご利用ください
お手数ですが、画面の大きい PC 環境（または横向きタブレット）から
`/learning-studio` にアクセスしてください。
より快適に学習いただけます
学習スタジオβ版
インタラクティブな学習プラットフォームで、
バイブコーディングを学びましょう。
おすすめ導線
Level 0 から始める開発者向けの学習パス
バイブコーディング入門3 コース|合計 33分
無料学習スタジオUIの使い方
学習スタジオの画面操作方法を学びます。スライドの送り方、シミュレータの表示切替、スライドの縮小表示など、快適に学習を進めるためのUI機能を紹介します。
無料【チャット型】AIコーディング入門
ChatGPT / Gemini / Claude のような会話型AIだけを使って、簡単なWebページを作ります。要件の伝え方→コード生成→貼り付け→修正依頼の流れと、効果的なプロンプトの型を学びます。
無料【IDE統合】AIコーディング入門
エディタ統合型AI（Cursor / Antigravity / VS Code AI 拡張 など）を使って、自己紹介ページを作りながら「IDE内でAIに依頼→差分反映→動作確認→修正指示」の一連の流れを学びます。
AIと作るフロントエンドの基礎4 コース|合計 1時間40分
無料HTML/CSS/JavaScriptの基礎
AIが書いたコードを読み解けるようになるための、HTML / CSS / JavaScript の最低限の基礎を学びます。
無料LP制作コース
HTML / CSSを使ってランディングページを作成します。HTML/CSSの仕組みを理解する、レスポンシブデザインの基礎
Pro診断アプリ制作
JavaScriptを使って診断メーカーを作成します。初めてのJavaScript、if文/for文を使った条件分岐、イベントハンドリングの基礎を学びます。
ProTODOアプリ制作
JavaScript / localStorageを使ってTODOアプリを作成します。JavaScriptとは何か、DOM操作、localStorageでのデータ保存
AIと理解するWebの仕組み（サーバー / API / 開発環境）15 コース|合計 4時間18分
メインコース
Proクライアント・サーバー入門
普段使っているWebサイトの裏側で何が起きているのか？クライアントとサーバーの役割、HTTPリクエスト・レスポンスの仕組み、APIの基本概念を学びます。
ProWeb API活用コース
REST API / JSON / fetchを使ってニュース取得アプリを作成します。REST APIの使い方、JSONデータの扱い、fetch APIによる非同期通信
Pro自作APIサーバー入門
Node.js / Expressを使ってメモ保存APIを作成します。Node.jsの基本、Expressフレームワーク、APIエンドポイントの作成
Proフロント × API連携アプリ
API連携を使って投稿アプリを作成します。フロント・バックエンドの連携、CRUD操作、非同期処理の実践
ProAPIデプロイ入門
サーバー公開を使って公開APIを作成します。クラウドサービスへのデプロイ、環境変数の設定、APIの公開方法
ProGit / GitHub入門
Git / GitHub を使って、自分の作ったコードをバージョン管理しつつ世界に公開します。Git管理の基礎、コミット履歴、リモートリポジトリ、ブランチを学びます。
基礎知識
JSON・データ形式入門
JSON / CSV / データ構造を使ってデータ形式の理解を作成します。JSONとは何か、オブジェクトと配列の構造、CSV・XMLとの違い、APIレスポンスの読み方
デバッグ入門
DevTools / console.logを使ってデバッグスキルの習得を作成します。エラーメッセージの読み方、console.logでの値の確認、ブラウザDevToolsの使い方、よくあるエラーパターン
Linux / CLI
Linux/ターミナルとは
ターミナル / シェルを使ってターミナル操作の理解を作成します。ターミナルとは何か、GUIとCLIの違い、シェルの役割、なぜ開発でターミナルを使うのか
無料Linuxコマンド入門
cd / ls / mkdir / touch / rm を使ってプロジェクト環境を作成します。Linuxコマンドの基礎、ファイル・ディレクトリの作成と削除、パスの仕組みを学びます。
開発ツール
ProローカルCLIツール制作
CLIツールを使ってファイル整理自動化ツールを作成します。CLIツールの作成、ファイル操作の自動化、実用的なスクリプト開発
環境構築 - Node.js編
Node.js / npmを使ってNode.js開発環境を作成します。Node.jsのインストール、npmの使い方、package.jsonの役割、ローカル開発環境の構築手順
GAS
Proスプレッドシート自動化
GASを使ってデータ集計・整形ツールを作成します。GAS（Google Apps Script）の使い方、スプレッドシートの読み書き、トリガー・定期実行の基礎、データの集計・整形
ProGASメール自動送信コース
GAS / Gmail APIを使ってメール自動送信ツールを作成します。Gmail APIの利用、テンプレートメールの送信、条件に応じた一斉送信、送信ログの記録
Pro週次レポート作成コース
GAS / Google Docs / スプレッドシートを使ってレポート自動作成ツールを作成します。スプレッドシートデータからGoogle Docsへの反映、テンプレート文書の生成、週次レポートの自動作成、PDF出力
バイブコーディングでWebアプリを作る8 コース|合計 2時間
メインコース
Proフォーム送信アプリ制作
POST通信を使って問い合わせフォームを作成します。POST通信の仕組み、フォームの作成、サーバー側でのデータ受信
ProDB連携アプリ制作
Firebase / Supabaseを使ってメモ保存アプリを作成します。データベースの基本概念、Firebase/Supabaseの使い方、CRUD操作の実装
Pro認証付きアプリ制作
ログイン認証を使ってログイン付きアプリを作成します。ログイン認証の仕組み、セッション管理、セキュリティの基礎
基礎知識
データベースとは
DB概念 / SQL基礎を使ってデータベースの理解を作成します。データベースとは何か、リレーショナルDBとNoSQLの違い、テーブル・レコード・カラムの概念、基本的なSQLクエリ
Pro認証の仕組み
会社のセキュリティゲートを例に、ログイン・セッション・認可など認証の基本的な仕組みを理解します。コードは書かず、概念の理解に集中するコースです。
セキュリティ基礎
Webセキュリティを使ってセキュリティの基礎知識を作成します。XSS・CSRF・SQLインジェクションとは、HTTPS通信の仕組み、入力バリデーションの重要性、セキュリティヘッダー
テスト入門
テストの基礎概念を使ってテストの基礎知識を作成します。なぜテストが必要か、単体テスト・結合テスト・E2Eテストの違い、テスト駆動開発の考え方、AIを使ったテスト作成
TypeScript入門
TypeScriptを使ってTypeScriptの基礎知識を作成します。TypeScriptとは何か、型の基本（string/number/boolean）、interfaceとtype、JavaScriptとの違いとメリット
バイブコーディングでAIアプリを作る3 コース|合計 1時間
ProAI文章生成ツール制作
LLM APIを使って文章生成ツールを作成します。LLM APIの使い方、プロンプトエンジニアリング、AI連携アプリの開発
Pro画像生成ツール制作
画像生成APIを使って画像生成UIを作成します。画像生成APIの使い方、非同期処理、画像の表示と保存
ProAIチャットアプリ制作
Chat APIを使ってチャットアプリを作成します。Chat APIの使い方、会話履歴の管理、ストリーミング応答の実装
バイブコーディングで業務を自動化する3 コース|合計 1時間
ProWebスクレイピングツール制作
データ取得を使って価格監視ツールを作成します。Webスクレイピングの基礎、HTML解析、データ抽出と保存
ProAI議事録生成ツール
音声→要約を使って議事録生成ツールを作成します。音声認識API、テキスト要約、実務で使えるAIツールの開発
ProAI秘書制作コース
Bot / Automationを使ってSlack / LINE AI秘書を作成します。チャットボットの開発、Slack/LINE API連携、自動化の実践