💻 プログラミング学習AI家庭教師

コーディング中のエラーをリアルタイムで検出し、解決策を提示。 個人の理解度に合わせた練習問題の自動生成、コードレビュー機能でより良い書き方を段階的に指導。 プロジェクト型学習で実践的なスキルを効率的に習得できるWindows版学習ツール

エラー検出

リアルタイムでエラーを検出し解決策提示

個別練習問題

理解度に合わせた問題を自動生成

コードレビュー

より良い書き方を段階的に指導

プロジェクト学習

実践的なスキルを効率的に習得

対応言語・フレームワーク

🟨 JavaScript 🐍 Python ☕ Java 🔷 TypeScript ⚛️ React 🟢 Node.js
💻 プログラミング学習AI家庭教師 - [Todo App プロジェクト]
ファイル 編集 表示 プロジェクト AI家庭教師 ヘルプ

プロジェクトエクスプローラー

TodoApp/
src/
index.js
app.js
todo.js
styles/
main.css
index.html
package.json

学習進捗

JavaScript基礎 85%
DOM操作 70%
イベント処理 60%
app.js - 編集中
1  // Todoアプリケーションのメインファイル
2  class TodoApp {
3    constructor() {
4      this.todos = [];
5      this.init();
6    }
7    
8    init() {
9      const addButton = document.getElementByID('add-btn');
10     addButton.addEventListener('click', this.addTodo);
11   }
12   
13   addTodo() {
14     const input = document.getElementById('todo-input');
15     const text = input.value;
16     
17     if (text == '') {  // AI提案: === を使用
18       alert('Todoを入力してください');
19       return;
20     }
21     
22     this.todos.push({
23       id: Date.now(),
24       text: text,
25       completed: false
26     });
27     
28     this.render();
29   }
30 }
❌ エラー検出
getElementByID は間違いです。正しくは getElementById です。
クリックして自動修正 →
問題
app.js:9 getElementByID は定義されていません。getElementById を使用してください。
⚠️ app.js:17 厳密等価演算子(===)の使用を推奨します。
💡 app.js:10 this のコンテキストが失われる可能性があります。アロー関数または bind() の使用を検討してください。
🤖 AI家庭教師
AI家庭教師
こんにちは!TodoAppの開発を始めましたね。9行目にタイプミスを発見しました。 JavaScriptでは大文字小文字が区別されるので注意が必要です。
あなた
なぜこのエラーが起きるんですか?
AI家庭教師
良い質問です!このエラーは以下の理由で発生します:
📚 解説
  1. JavaScriptは大文字・小文字を区別します
  2. 正しいメソッド名は getElementById
  3. ID ではなく Id です
💡 ヒント
10行目で this のコンテキストが失われる可能性があります。 アロー関数を使うか、bind() メソッドを使用しましょう。
🎯 おすすめの練習問題
DOM要素の取得 初級

getElementByIdの正しい使い方を練習

イベントリスナーとthis 中級

thisコンテキストの理解を深める

行 17, 列 15 JavaScript UTF-8 エラー: 1 警告: 2 学習時間: 45分

📝 コードレビュー結果

✅ 良い点
  • • クラスベースの設計を採用している
  • • Todoアイテムに一意のIDを付与している
  • • 入力値の検証を行っている
💡 改善提案
  • == の代わりに === を使用する
  • • イベントハンドラーで this のバインディングを確実にする
  • • エラーハンドリングを追加する
  • • 入力フィールドをクリアする処理を追加する
📊 コード品質スコア
78/100
総合スコア
A
保守性
B+
ベストプラクティス

🎯 プロジェクト学習パス

Todo アプリケーション開発

基本的なCRUD操作とDOM操作を学ぶ

65%
完了
ステップ1: プロジェクト設定
HTML構造とJavaScriptファイルの準備
ステップ2: Todoクラスの作成
基本的なクラス構造の実装
3
ステップ3: 追加機能の実装
Todoアイテムの追加機能(現在作業中)
4
ステップ4: 表示機能の実装
Todoリストの表示とDOM操作
5
ステップ5: 編集・削除機能
CRUD操作の完成
次の学習目標

イベントハンドリングとthisコンテキストの理解