株式会社ジェイテックジャパン CTOの高丘 @tomohisaです。最近はClaude Codeで作りたいものが多すぎてアップアップしています。
僕の住んでいるアメリカのカリフォルニアは、6月中旬から8月中旬まで学校は夏休みです。子どもたちが余裕ができたらプログラミングを学びたいと数ヶ月前から言っていて、今だったらAIコーディングから始めるかなと考えていたのですが、いよいよ休みで子どもたちが暇そうにしているので、プログラミングの勉強を始めることにしました。
背景として、娘たちは日本でいうと小学校6年生と高校1年生が終わった学年になります。
本当はプログラミングの基礎からしっかり教えたいという気持ちもあるのですが、せっかくなのでこんなことがすぐできるんだ、プログラミングを使ったものづくりが楽しいと感じてほしいということを考えて、バイブコーディング（雰囲気で、実際のコードを細かく見ずに、できたものを評価する）を採用しようと決めました。これで少しでも楽しいと思ってもらえたら良いなという計画です。
実際にClaude Codeが出て、僕自身も基本のアーキテクチャに関してできたコードは見ていますが、すべてを細かく見ているかというと、そうでもありません。現時点でこれだけのコーディング力があるので、子どもたちが数年後に本格的に仕事で使う時には、今以上にLLMの性能が上がっている場合、細かな実装方法を知るよりも、いろんなものを作った経験の方が大事だろうなと思ったというのもあります。
そのため、実際に教える内容も、AIコーディングで必要なものに絞って行いました。
授業1：プログラミングの紹介とバイブコーディング課題を決める
プログラミングとは入力から出力を計算する作業の繰り返しであることを簡単に教えました。
そしてAIコーディングで作るものはまず簡単なものから始めないといけないことを話しました。なので最初に作るものは、以下の制約にしようと話しました。
- 3Dを使わない（3Dを使うと内容のコントロールが難しくなるため）
- ネットワーク通信を使わない（通信をすると複雑になる）
- 複数のページの遷移を必要としない、1ページでできるもの
話していくにあたり、テトリス風のものとか、4目並べとか、タスク管理とかが話題になりましたが、ちょうど下の子が小学校の卒業祝いでいろんなギフトカードとかお金とかもらっていたので、それをカウントするものを作るのはどうかというのを話しました。子どもたちも気に入りました。それで、以下のプロセスでアプリの内容を考えるように話しました。
- 紙に書いたりしてアプリの全体像を考える。
- それを文章でどのように表現するかを考える。
宿題：自分でコーディングプロンプトを考える
最初の授業が水曜日の昼だったのですが、金曜日に次の授業を行うので、それまでにプロンプトをまとめるようにしました。嬉しかったのは最初の水曜日の夜から、2人がデザインを自主的にスタートしていたということでした。
特に下の子は、自動的に計算することをどのように表現できるかとか、このレイアウトをどのように文章で表せるかなど、自主的に聞いてきました。
アーキテクチャを考える（先生として）
シンプルなHTML、CSSでいいかなとも思ったのですが、効率的な方法、デプロイが簡単にできる方法は何だろうというところまで考えて、claudeに相談してみました。すると、デプロイと将来バックエンド的なものを含めるかもしれないことを考えて、Next.jsでデプロイをVercelにするのが良いのではないかと勧めてくれました。プロンプトは以下のもので、このプロンプトの下に自分で書いたプロンプトを合わせて使うことができるものです。
Create a modern, responsive static website using Next.js with static site generation and shadcn/ui components.
Technical Requirements:
- Next.js with SSG (Static Site Generation) optimized for Vercel deployment
- shadcn/ui component library with Tailwind CSS
- TypeScript for type safety
- Responsive design with mobile-first approach
- Dark/light mode toggle
- SEO optimized with proper meta tags
- Fast loading performance
- WCAG accessibility compliance
- Clean, modern aesthetic with smooth animations
Deployment Setup:
- Configure for Vercel deployment (include vercel.json if needed)
- Optimize build output for static hosting
- Set up proper environment variables structure
- Include deployment-ready package.json scripts
Setup Instructions:
- Initialize shadcn/ui with essential components (Button, Card, Navigation, Form, Dialog)
- Configure Tailwind CSS with custom design tokens
- Implement proper semantic HTML structure
- Add hover effects and micro-interactions
- Ensure cross-browser compatibility
- Prepare architecture for future backend integration
Code Quality:
- Well-commented, maintainable code
- Proper component organization
- Optimized images and assets
- Error handling and loading states
--- FEATURE REQUEST BELOW ---
授業2：バイブコーディングを行う
PCのセットアップ
- GitHubアカウント作成
- GitHub Desktopのインストール
- Visual Studio Codeのインストール
- GitHubのWeb画面からリポジトリを作成
- GitHubのWeb画面からOpen in GitHub Desktopを使ってCloneする
- GitHub DesktopからVS Codeを開く
ここまでできたところで決断が。Agent Codingをどのアプリで行うかです。最初はGitHub Copilotの無料版でどれだけできるかやってみようかと考えていたのですが、無料版のセットアップにつまづいたのと、最初から精度が高いものが使えた方がいいだろうと思い、Claude Codeに切り替えました。
ですので、ここで僕のPCを使っているので、以下の作業を僕自身で行いました。
- nodeのインストール
- claude codeのインストール、初期設定
- ターミナルの設定
さすがにこの辺りはターミナル経験のない非プログラマには面倒かなと思います。
実際のAIコーディング
ここまでで1時間くらいかかり、子どもたちも飽き気味でした。
やっと設定ができたところで、VS Codeでプロジェクトフォルダを作って、ターミナルを開いて、claudeを実行しました。そこで僕の作ったプロンプトと子どもたちが書いたプロンプトをミックスして実行を開始しました。claude codeがフェーズを8つくらいに分けて作業をしているのを見て、子どもたちも感心しているようでした。
15分くらいでしょうか？第一弾ができて、僕らであれば簡単に実行できるのですが、子どもたちの場合はそうはいきません。ターミナルを立ち上げてnpm run devを実行してあげたい気を抑えて、claude codeにアプリを起動させるように頼ませました。なんとか実行ができ、最初からほぼ完成されたサイトを見て、子どもたちも喜んでいました。デザイン的なことも子どもたちは考えて、sparkleとかpastelとかglitterなど入っていたので、いい感じの可愛いサイトとなっていました。
その後、プログラムの修正ですが、細かな調整をプロンプトでできることを伝えて、試してみたところ、文字が読みにくい部分などの調整は簡単に行うことができました。
Vercelでのデプロイの設定・実行
Vercelのデプロイ方法は僕もやったことがなかったので、claudeに聞きながら行ったのですが、実際には以下のように簡単に行えました。
- 現在のコードを、VS CodeのコミットタブからStaging Changesに追加してコミット、SyncしてGitHubにあげる
- VercelのアカウントをGitHubログインで作成
- Vercel側で新規プロジェクトをGitHubから作成を選択
- デプロイを待つ
ここでVercel側で必要ファイルがなくてエラーが出ました。でもそのエラーメッセージをclaude codeに渡したら問題を見つけて修正してくれました。
なので
- 修正コードを、VS CodeのコミットタブからStaging Changesに追加してコミット、SyncしてGitHubにあげる
するとVercel側のビルドが成功して、リリースが成功しました！
このサイトがシンプルなバイブコーディングでできるのは嬉しいですね。上の子は修正中で、まだ完成していないですがまた完成したらここに貼りたいと思います。
これから教えたいこと
プログラマというより、アプリデザイナー養成のようにはなっていますが、最初はこの方針で後いくつかアプリを作ってAIコーディングに慣れてから、もっと複雑なものが作れるように教えていきたいと思います。
これからAIの能力が上がっていくので、コンセプトを形にする経験をまずは得ていくといいのではないかと思います。
教育プロセスでの気づき
子どもたちの創造性とデザイン感覚
実際に子どもたちが書いたプロンプトには、sparkle、pastel、glitterなどの装飾系のキーワードがたくさん含まれていました。大人が考えるシンプルなUIとは違って、子どもたちが本当に使いたいと思うデザインはこういうものなんだなと改めて実感しました。
モチベーション管理の難しさ
今回のプロジェクトでは、下の子の方がいい感じのサイトができあがったため、上の子のモチベーションが一時的に下がるという場面がありました。まだデプロイまで完了していないのも、本人が「これだとまだあげたくない」と言っているからです。
個人のペースを尊重しながら、それぞれが満足できるレベルまで完成させることの重要性を感じました。競争ではなく、個々の達成感を大切にする必要があります。
プロンプト修正の自主性
最初はプロンプトの修正方法を指示していましたが、すぐに子どもたち自身が「こうしたい」「ああしたい」と自分でプロンプトを考えて修正するようになりました。これは予想以上に早い段階で自主性が芽生えた良い兆候だと思います。
継続的な学習の課題
ここまでではまだまだスキルを身につけたとは言えませんが、これを継続していけば、プログラマというよりはアプリデザイナーとしてのスキルをまず高めていけそうです。
最大のハードルは継続性だと考えています。今回のように明確な用途（卒業パーティでもらったお金の計算）があると熱意も高まりますが、次回以降も同様のモチベーションを維持できるかが鍵となります。
Vercelの簡単さに驚き
実は僕自身もVercelでのデプロイは初めてでしたが、その簡単さには驚きました。GitHubアカウントでのログイン、リポジトリ選択、自動デプロイという流れがこれほどスムーズにできるとは思いませんでした。子どもたちにとっても、自分が作ったものが実際にインターネット上で動いているという実感を得られるのは大きな達成感につながります。
また新たに作ったものなどを紹介できればと思います！
Discussion