本文へスキップ
Tech
#AI

Vibe Codingではなく、Guru-Aided Coding

Guru-Aided Codingとは、GPTをただのコード生成ツールとして使うのではなく、思考を深める“デジタルメンターとして活用する学習スタイルです。 コードをそのまま使うのではなく、疑問を持ち、構造を理解し、自分の言葉で書き直すことで、スキルとしてしっかり身につけていきます。

· 7分

📌 一言で言うと？

Guru-Aided Codingとは、GPTをただのコード生成ツールとして使うのではなく、**思考を深める“デジタルメンター”**として活用する学習スタイルです。
コードをそのまま使うのではなく、疑問を持ち、構造を理解し、自分の言葉で書き直すことで、スキルとしてしっかり身につけていきます。

🙋 なぜ「Guru」なの？

たしかにGPTは便利です。コードも一瞬で書いてくれます。
でも、それをそのままコピペするだけでは、知識として定着しません。

ここでの「Guru（グル）」は、単なる先生ではなく、
気づきを与え、考えるきっかけをくれる存在を意味しています。
いわば“デジタルな師匠”のような立ち位置です。

だからこそ、この学習スタイルを **「Guru-Aided（師匠と一緒に学ぶ）」**と呼んでいます。

🧠 Guru-Aided Codingって何？

「GPTに頼る。でも、鵜呑みにはしない。
一行ずつ理由を考え、自分の手で書き直す。」

この考え方は、以下の3つのステップで回していくループです：

  1. Prompt（きっかけ）：まずはGPTにコードを書いてもらう
  2. Taught（学び）：そのコードについて「なぜこう書いたのか？」と質問する
  3. Learn（定着）：自分なりにコードを見直し、書き直す

🔁 開発×学習ループ：Prompt → Taught → Learn

ステップ やること 学びの意味
Prompt GPTにまず実装してもらう 詰まらずに素早く始められる
Taught 「なぜこの書き方？」と構造や意図を聞いてみる 背景や選択肢を理解できる
Learn 実際に書き直して、自分の言葉でまとめる “自分のコード”として身につく

💣 実例：ユーザー入力を innerHTML で表示する

Step 1️⃣ Prompt — 「たぶんこれでいいよね？」と思っても…

GPTにこう聞いてみます：

「ユーザーのコメントを画面に表示するJavaScript関数を書いてください。」

GPTはこう返してくれました：

function renderComment(input) {
  const container = document.getElementById('comment-box');
  container.innerHTML = `<p>${input}</p>`;
}

一見、問題なさそうに見えます。
「へぇ〜、こうやって表示すればいいのか」と思うかもしれません。

でも、ここでちょっと立ち止まってみましょう。

  • なぜ innerHTML を使っているんだろう？
  • <script>タグとか入れたらどうなるんだろう？
  • 本当にこれ、安全なの？

そう思えたなら、それがまさに「Guru-Aided」のスタート地点です。

Step 2️⃣ Taught — GPTに「これって本当に大丈夫？」と聞いてみる

「このコードって、安全面で問題ないですか？」
「ユーザー入力をそのまま入れるのって大丈夫なんでしょうか？」

すると、GPTはこう教えてくれます：

「innerHTML に直接ユーザー入力を入れると、
<script>や<img onerror=...>などを使ったXSS攻撃のリスクがあります。
表示するだけなら、textContent や DOM操作で安全に出力するのがベストです。」

この瞬間、単に「動けばOK」だった思考が変わります。

  • 「なるほど、ブラウザってただの文字じゃなくHTMLとして解釈するんだ…」
  • 「安全に表示するって、ちゃんと考えないといけないんだな」
  • 「innerHTML を使うときは、今後ちゃんと疑う癖をつけよう」

Step 3️⃣ Learn — 安全な方法に書き直してみる

GPTのアドバイスを参考に、自分でコードを書き直してみます：

function renderComment(input) {
  const container = document.getElementById('comment-box');
  container.textContent = '';
  const p = document.createElement('p');
  p.textContent = input;
  container.appendChild(p);
}

この方法なら、<script> や <img> などのタグが入っていても、ただの「文字」として表示されます。
コードの意味を理解した上で、安全性を考慮して実装できるようになったわけです。

そして、こんなふうに思えるかもしれません。

「最初は意味もわからず動くコードを信じてたけど、今ならなぜ危険なのか説明できる」
「今度は『XSSを防ぎつつユーザー入力を安全に表示するには？』って聞いてみようかな」
→ こうして、次のループへ進んでいくわけです。

🧾 ループのまとめ

ステージ 具体例 得られる気づき
Prompt GPTが innerHTML で実装 一見良さそうでも、不安がよぎる
Taught 「これ安全ですか？」と聞いてみる → XSSという概念を知る セキュリティ意識が芽生える
Learn textContent による書き直し 安全性と実装力の“自分化”に成功する

💡 Guru-Aided Coding のメリット

価値 説明
スピード GPTの力を借りてすぐ手を動かせる
理解 「なぜ？」を掘り下げることで構造を深く理解できる
成長 質問力・設計力・安全性への視点が自然と磨かれる
自己化 GPTのコードを「写す」ではなく「理解して自分で書き直す」姿勢が身につく

❌ コピペ開発 vs ✅ Guru-Aided Coding

観点 単なるコピペ Guru-Aided 方式
GPTの扱い方 自動生成マシン 質問相手・思考の伴走者
自分の役割 指示待ち・受け身 主体的に考える学習者
得られるもの 動くコードだけ 思考力・設計力・応用力

🎯 最後に

Guru-Aided Codingは「とにかく動けばOK」から一歩踏み出すためのマインドセットです。

  • いきなり完璧なコードが書けなくても大丈夫。
  • たったひとつ、**「このコード、本当にこれでいいのかな？」**という問いからすべてが始まります。

そしてこのループを何度も回していくことで、
GPTと一緒に、自分自身の思考力・判断力・設計力を育てていけるようになるはずです。

💬 次回GPTにコードをお願いするときは、
ただ「Thanks, it works」ではなく、
「なぜこの書き方？」
「他の方法はある？」
「どんなリスクを考慮してる？」
そう聞いてみてください。

それが、Guru-Aidedな開発者としての第一歩です。

0コメント
7分