はじめに
こんにちは!SAKURUGのテックブログ運営とともに、高校生インターンチェリスタを運営しているTokiです。
「プログラミング?全然分からない...」そんな高校生が、たった4時間でオリジナルのWebアプリを開発し、実際にインターネット上に公開するまでを達成!
2025年8月6日(水)に実施した「1day高校生インターンチェリスタ!エンジニアコンテンツ-バイブコーディング」の全貌をお伝えします。AIを相棒にした新時代の開発手法「バイブコーディング」で、参加者全員が自分のアイディアを形にすることができました!
この記事を読んで欲しい人
- インターンに興味がある高校生 - 実際に手を動かして職業体験したい人
- エンジニア職種に興味がある学生 - IT業界の実情を知りたい人
- AIツールを使ってみたい学生 - 最新技術で何ができるか体験したい人
- 高校生向けインターンを企画中の企業担当者様
当日のスケジュール詳細
13:00 - 13:30:ウェルカム&スキルチェック
- 参加者の自己紹介とプログラミング経験の確認
- 「作りたいもの」の簡単なヒアリング
- 今日の目標設定
- 事前課題確認
13:30 - 13:45:AIブレインストーミング
ここがポイント! AIを「開発パートナー」として活用
- ChatGPTやClaude と対話しながらアイデアを具体化
- 技術的実現可能性をAIと一緒に検討
- 4時間で作れる現実的な機能に絞り込み
13:45 - 14:00:開発環境の構築
- Node.js、React、Next.js のセットアップ
- プロジェクトの初期化
- 全員の環境が整うまでサポート
14:00 - 14:30:Vercelデプロイ体験
- GitHubとの連携設定
- ワンクリックデプロイを体験
- 自分のWebアプリのURLを取得
14:30 - 15:00:Cursor完全攻略講座
- 自然言語での指示方法
- エラー解決のAI活用テクニック
- コード生成→修正→改善のサイクル
15:00 - 16:30:集中開発タイム
バイブコーディング実践!
- 「ログイン機能を追加して」→ 瞬時にコード生成
- 「もっとおしゃれなデザインにして」→ スタイル自動調整
- 「スマホ対応にして」→ レスポンシブ対応完了
16:30 - 17:00:成果発表&キャリアトーク
- 参加者全員による作品プレゼン
- 現役エンジニアによるフィードバック
- IT業界の実情と将来性について
バイブコーディングって何?
Vibe Coding = 感覚的プログラミング
従来のコーディング:
1. 要求を理解
2. 設計を考える
3. コードを書く
4. デバッグする
5. テストする
バイブコーディング:
1. 「こんな感じにしたい」とAIに伝える
2. AIがコードを生成
3. 動作確認して修正点をAIに伝える
4. 完成!
実際の指示例
参加者の指示: 「お天気アプリを作りたい。今日の天気を表示して、雨だったら傘のアイコンを出してほしい」
AIの応答: 天気API連携、条件分岐、アイコン表示まで含む完全なReactコンポーネントを生成
使用技術スタック
メインフレームワーク
- React 19
- Next.js 15 - フルスタックReactフレームワーク
- TypeScript - 型安全性でバグを防止
開発環境
- Cursor - AI統合開発エディタ
- Git/GitHub - バージョン管理
- Vercel - 瞬時デプロイメント
学習できるスキル
- モダンWeb開発の全体像
- AI活用開発手法
- クラウドデプロイメント
- チーム開発の基礎
参加することで得られるもの
即戦力スキル
- ポートフォリオ作品
- 実際に動くWebアプリの開発経験
未来への投資
- AI時代のエンジニアリング手法
- IT業界への理解促進
ネットワーキング
事前準備
- Googleアカウント - AIサービス利用のため
- Git・GitHub アカウント - コード管理・デプロイ用
- Cursor - 公式サイトからダウンロード
次回開催情報
次回予定:2025年冬・2026年春
- 定員:8名(先着順)
- 参加費:無料
- 対象:高校生(プログラミング経験問わず)
- 場所:SAKURUG オフィス(東京都内)or オンライン(Google Meet)
最後に
「高校生にはまだ早い」「難しそう」そんな不安は不要です。AIという最強の相棒がいれば、誰でもエンジニアになれる時代が来ています。
あなたのアイデアを形にしてみませんか? 次回のチェリスタでお会いできることを楽しみにしています!