このページ
このガイドの背後にあるSkill：AI JavaScript Tutor。Claude、ChatGPT、Geminiを、レッスン1からブラウザのコンソールでJavaScriptを書かせるチューターに変えます - $19、一度の支払いで永久に利用できます。
JavaScript tutorを見る →JavaScript tutorとしてClaudeを使う価値がある理由は、ただ1つです。あなたが書いたコードを読み、メンタルモデルのどこが間違っているかを教えてくれるからです。ブラウザを見ることはできず、コンソールに何が出力されたかも分からず、あなたの代わりにページを操作することもできません。コードを実行し、返ってきた内容を貼り付けると、あなたが誤解していた点を逆算して見つけてくれます。そのループこそが学びを生みます。それ以外はすべて飾りです。
JavaScriptは、ほとんどの初学者向け言語よりも中途半端な理解を厳しく問いただします。壊れたコードでも何事もなく実行し、何も生成しないだけだからです。エラーも出力も手がかりもありません。あなたの思い込みを問いただすチューターは、ほかのほとんどの言語以上に、ここで価値を発揮します。
AI JavaScript tutorは、コースにはない何をしてくれるのでしょうか？
あなたに反応します。コースはあなたが存在する前に録画された教材を固定された順序で進むため、配列は問題なくても、何を指しているのかがまったく分かっていないことには気づけません。 これ を指しています。チューターファイルは課題に取り組ませ、あなたが書いたコードを読み取り、見つかった理解の穴に合わせて次の内容の順序を組み替えます。
AI JavaScript Tutorは、JavaScriptが実際に人々をつまずかせる順序に沿ってレッスンを進めます。値とスコープ、配列とmap、オブジェクトと分割代入、次にDOMとイベント、そして最後にpromiseとasync awaitです。最後の順序が重要です。DOMより先に非同期処理を学ぶと、状態について考えられるようになる前に時間について考えるよう求められるため、独学の学習者の多くが静かに学習を止めてしまいます。
JavaScriptで、実際に人々がつまずくのはどこでしょうか？
一貫して4か所で起こりますが、どれも構文の問題ではありません。
-
エラーではないundefined。
Cannot read properties of undefinedは誰もが早い段階で遭遇しますが、その原因がエラーメッセージに示された行にあることはほとんどありません。 - DOMの準備ができていない。スクリプトは実行されても、要素がまだ存在しないため、何も起こらず、エラーも表示されません。
-
非同期処理。コードが間違った順序で完了したり、値が届く前に読み取られたり、データがあるはずの場所に
Promise { <pending> }がログ出力されたりします。 - モデルなしのコピー。検索結果から動くコード片をコピーすれば今夜は解決しますが、何も学べないため、来週には同じバグが別の形で再発します。
1回の貼り付けだけで、ClaudeをJavaScript講師として設定するにはどうすればよいですか？
新しい会話を開き、どのページでもよいのでブラウザーのコンソールを開き、シラバスではなく配置確認から始めてください。最初の数週間はコンソールが適した教室です。ビルド手順もインストールも不要で、すぐにフィードバックが得られます。
あなたは私のJavaScript講師です。まだ何も教えないでください。
ブラウザーのコンソールで実行できる課題を1つ出してください。配列、関数、オブジェクトを1つずつ使う必要があり、15行未満で書けるものにしてください。正しい出力がどのようになるかも教えてください。
自分で書いて、コードと、エラーを含めてコンソールに正確に表示された内容の両方を貼り付けます。
次に、以下を示してください：
1. 私のコードから、私が理解していることが何か。
2. 後で最も大きな負担になる、1つの誤解。
3. 次に学ぶ6つのトピックを順番に示し、その順番にする理由を一文で説明してください。
課題を私の代わりに書かないでください。私が壊れたものを貼り付けたなら、それは動くものよりもあなたにとって役立ちます。
迷わずにAsyncを教えるにはどうすればよいですか？
Asyncは、構文として教えると理解がうまくいきません。 await 入力は簡単なのに、信じるのは難しいものです。コードの1行が一時停止している間も、ページの残りの部分は動き続けることを受け入れる必要があるからです。乗り越える方法は、実行する前に予測し、その後で比較することです。声に出して間違えること自体が学びになります。
予測を先に行い、説明から始めずに、[async/await、またはトピック]を教えてください。
1. 15行未満で、console.logを2つか3つ含むコード片を出してください。
2. 何も説明する前に、ログが表示される正確な順序と、それぞれに何が出力されるかを書いてもらってください。
3. 私の答えを待ってください。
4. その後で初めて実際の順序を教え、私が間違えた行がなぜ間違いなのかを具体的に説明してください。正しかった行は無視してください。
5. 別の角度から同じ思い込みを崩す、2つ目のコード片を出してください。
2つのコード片を連続して正しく予測できるまで、次のトピックに進まないでください。
講師は意図的にあなたのペースを落とします。JavaScriptを手助けなしで書けるようになったら、求めるものは逆です。フロントエンドとサーバー全体をまたいで、構成や、どのコースでも扱わない実際のプロジェクトの部分まで支えてくれる、動くアシスタントです。Maxはそのファイルで、19ドルの一回払いです。まず講師と学び、その後に切り替えましょう。
Maxを見る →レッスンも、実現したいものがあれば抽象的なものではなくなります。tutorと相性のよいプロジェクトファイルが2つあります。1つは、動作するチャットボットのサーバー側を扱い、ルート、キー、ストリーミングまで含むChatbot Builder for Node.js（$14.99）。もう1つは、同じプロジェクトのフロント側のインターフェースを扱うChatbot Builder for React（$14.99）です。どちらかをまずひどい出来で作り、それから作り直してください。これが、得られる学びとしては最も速い1週間になります。
修正済みファイルではなく、本当の診断を得るにはどうすればよいですか？
修正を求めれば修正されたコードが返ってきますが、この段階ではまさに間違った取引です。修正を明示的に禁止すれば、同じモデルが役立つようになります。
コードが期待どおりに動きません。コードと、コンソールに表示された内容を示します。
[PASTE CODE]
[PASTE CONSOLE OUTPUT]
ルール：修正済みコードは禁止、関数の書き直しも禁止です。
1. ブラウザがどの行を指摘しているか、そして実際に原因となっているのがどの行かを教えてください。
2. その時点で、特定の変数が何を保持していると考えているか、そしてその理由を尋ねてください。
3. 私の回答を待ってください。間違っていたら、答えを教えるのではなく、より範囲を絞った質問をしてください。
4. これを自分で確認できるように追加できたconsole.logを1つ、またはdebugger行を1行示してください。
最後に、この種類のバグ全体を防ぐ一般的な習慣を述べてください。
次に必要なJavaScript tutorファイルはどれですか？
常に最初はプレーンなJavaScriptから。フレームワークは、学ぼうとしているものを隠してしまいます。言語の基礎が固まったら、AI TypeScript Tutorが最短の次のステップです。すでに頭の中で管理していた型を明示しただけで、同じ言語だからです。その後は仕事に応じて分かれます。多くの求人で求められるコンポーネントモデルならAI React Tutor、企業向けで規約の多い職場ならAI Angular Tutor、本当の目的地がiPhoneアプリで、Webは寄り道だったならAI Swift Tutorです。AI Skill for JavaScriptはまったく別種のファイルです。これは、これを理解した後に使う実用的なアシスタントであって、教師ではありません。
どこで失敗しますか？
- ページを見ることはできません。DOMもネットワークタブも、レンダリング結果もありません。症状が視覚的なものなら、説明するかスクリーンショットを貼ってください。ソースだけから推測すると、でっち上げてしまうからです。
- 使用しているフレームワークのバージョンはわかりません。JavaScriptのツールは急速に変化するため、記憶されたAPIの詳細は気づかないうちに古くなります。バージョン固有の内容は、公式ドキュメントで確認してください。
- 早い段階でフレームワークも喜んで教えてしまいます。2週目にReactを頼めば、そのとおりにします。それを判断するのはこのSkillではなく、あなた自身です。
- コードを実行したかどうかは判断できません。タスクを飛ばして、うまくいったと言えば、あなたが何もしていなくてもレッスンは進み続けます。
- ビルドツール関連は最も弱い領域です。バンドラーの設定やモジュールエラーは、見ることのできないファイルに左右されるため、その部分ではより詳しく説明する必要があります。
- 練習するよう仕向けてくれるわけではありません。毎日20分のほうが日曜に5時間やるより効果的で、その習慣をファイルが強制することはありません。
上達する人と伸び悩む人を分ける習慣は、動くようになったコードを読み返すことです。Yuriはあなたが書いたものをレビューし、教師ではなく同僚のような口調で、何が壊れやすく、その理由は何かを伝えます。19ドル、1回払い。ファイルが100行を超えたあたりからすぐに役立ちます。
Yuriを見る →ファイルはどうやってインストールしますか？
このチューターはZIP内のSKILL.mdファイルです。ClaudeでCustomize → Skillsを開き、+ボタンを押して、Create skill、次にUpload a skillを選び、ZIPを指定します。オンにすればすぐ使えます。SkillsはFree、Pro、Max、Team、Enterpriseの各プランで利用できます。
唯一の本当の要件はコード実行です。Skillsメニューがグレー表示になっている場合は、Settings → Capabilitiesで有効にしてください。そこではcode execution and file creationとして表示されています。TeamとEnterpriseプランでは、Organization settingsでオーナーが管理しているため、組織全体でオフになっている場合はその人に確認してください。AnthropicはこれらすべてをSkillsのヘルプ記事で説明しています。
コード実行を有効にできない場合、またはChatGPTやGeminiを使っている場合も、同じファイルを使えます。ZIPを開き、SKILL.mdの内容をコピーして、Project、カスタムGPT、Gem、または通常のカスタム指示に貼り付けてください。動作は同じで、ツールを移行するときに再度貼り付けるだけです。
まとめ：
AI JavaScriptチューター（$19）で適切なレベル判定を受け、コンソールで学び、実行前に結果を予測する習慣を身につけましょう。言語の基礎が固まったら、AI TypeScriptチューターまたはAI Reactチューター（各$19）に進み、Node.js用チャットボットビルダー（$14.99）で実際に何かを作りましょう。すべてClaude、ChatGPT、Geminiで動作し、約2分でインストールでき、30日間の返金保証付きです。
AI JavaScriptチューター
1つのファイルを一度貼り付けるだけ。最初のレッスンからコンソールを使い、非同期処理の前にDOMを学び、修正コードを貼り付ける代わりに変数に何が入ると予想したかを尋ねるチューターです。サブスクリプション不要。
KissMySkillsは、Claude、ChatGPT、その他あらゆるAIチャット向けの2,000+個のAISkill、300+個のpromptパック、55個のエージェント、そして無料ツールを扱うマーケットプレイスです。