ChatGPTを使うと、JavaScriptのコード案を作り、エラーの原因を整理し、改善案を出してもらえます。ただし、最初に「どこで動かすコードか」を決めないと、正しいように見えても動かないコードになりがちです。
結論は、実行環境を選ぶ → 小さなコードを作る → テスト環境で確認するの順で進めることです。プログラミング全体の進め方は、ChatGPTでプログラミングを始める方法も参考にしてください。
JavaScriptを動かす場所は主に2つ
| 実行場所 | 向いている用途 | 初心者の試し方 |
|---|---|---|
| ブラウザー | ボタン操作、入力チェック、表示変更 | 自作テストページの開発者ツールで試す |
| Node.js | ファイル処理、データ変換、自動化 | テスト用.jsファイルをnode ファイル名.jsで実行 |
Node.jsはJavaScriptをブラウザー外で動かす実行環境です。ブラウザー用のdocumentは通常のNode.jsではそのまま使えません。まず実行場所・入力・出力・変更対象・禁止事項をまとめた「環境カード」を作りましょう。
実行場所：ブラウザー（自分で作ったテストページ）
入力：（ここに入力データを書く）
出力：（ここに期待する結果を書く）
変更対象：（ここに変更してよい要素を書く）
禁止事項：外部通信、Cookie操作、個人情報の使用はしないChatGPTでJavaScriptを作る5ステップ
1. 実行環境を選ぶ
「ブラウザーで動かす」か「Node.jsで動かす」かを最初に伝えます。バージョンが分かる場合は、それも添えましょう。
2. 入力・出力・変更対象を書く
何を受け取り、何を返し、画面のどこを変えるかを書きます。対象のidやclassも伝えると、セレクターの取り違えを減らせます。
3. 最小コードと説明を依頼する
目的を1つに絞り、初心者向けコメント、実行手順、変更場所も付けてもらいます。
あなたは初心者向けのJavaScript講師です。
実行場所：ブラウザーの自作テストページ
入力：id="name" の入力欄
出力：id="count" に現在の文字数を表示
変更対象：上記2要素だけ
禁止事項：外部通信、Cookie、localStorageは使わない
出力順：完成コード、実行手順、変更箇所、注意点OpenAI公式でも、依頼を明確かつ具体的にし、必要な文脈を渡して、結果を見ながら改善する方法が勧められています。
4. テスト環境で試す
公開中のサイトや管理画面ではなく、空のHTMLファイルやテスト用プロジェクトで試します。知らないコードを、銀行、決済、WordPress管理画面、個人情報を表示するページのコンソールへ貼り付けないでください。
5. 実際の結果を伝えて直す
「動きません」だけでなく、実際の結果、期待した結果、エラー、環境を伝えます。第三者視点で確認するなら、ChatGPTでコードレビューをする方法も役立ちます。
実行環境：（ここに環境を書く）
期待する結果：（ここに期待を書く）
実際の結果：（ここに結果を書く）
エラー：（ここにエラーを貼り付ける）
原因候補、確認手順、最小限の修正版の順で説明してください。実行前に確認する4項目
- 実行場所：ブラウザー用かNode.js用か
- 変更対象：どの要素、ファイル、データが変わるか
- 外部通信：fetchなどで外部へ送信していないか
- 元に戻せるか：バックアップやテストデータで試せるか
パッケージは配布元を確認せずにインストールしないでください。個人情報、APIキー、パスワードも依頼文やコードへ含めません。Node.jsでの処理はChatGPTでPythonコードを作る方法と比較し、外部連携はChatGPT APIの始め方も確認してください。
よくある失敗と直し方
document is not defined
ブラウザー用コードをNode.jsで実行している可能性があります。環境を伝え直しましょう。
ボタンを押しても反応しない
HTMLのidやclassとJavaScriptのセレクターが一致するか、HTML読込前に動いていないかを確認します。
修正するたびに別の場所が壊れる
最小の再現コードへ戻し、「変更してよい箇所」と「変更しない箇所」を分けます。
まとめ
ブラウザーかNode.jsかを選び、入出力と変更対象を伝え、最小コードをテスト環境で確認しましょう。実行場所、変更対象、外部通信、元に戻せるかの4点を確認すれば、失敗の影響を小さくできます。
コメント