未分類

AIでJavaScriptを書く方法｜初心者でもコードを作成・修正する手順

2026.08.31

検索者の悩み

「JavaScriptを勉強したいけれど、何から書けばいいかわからない」「ChatGPTなどのAIにJavaScriptを書いてもらえると聞いたけれど、本当に使えるの？」「AIが作ったコードをそのまま使っても大丈夫？」と疑問に思う人も多いでしょう。

JavaScriptは、Webページに動きを付けるときによく使われるプログラミング言語です。ボタンを押したときに文章を表示したり、入力された数字を計算したり、Webページの内容を変更したりできます。

現在はAIに「こんな機能を作りたい」と日本語で伝えることで、JavaScriptのコードを作ってもらえます。ただし、AIに全部任せるのではなく、コードを作る → 動作確認する → 意味を理解する → 必要なら修正するという使い方が重要です。

MDNのJavaScriptガイドでも、変数、条件分岐、繰り返し、関数、エラー処理など、JavaScriptの基本的な仕組みが体系的に解説されています。 (MDN Web Docs)

先に結論

AIでJavaScriptを書くなら、作りたい機能を具体的に伝える → コードを作ってもらう → コードの意味を説明してもらう → 実際に動かす → エラーや改善点をAIに伝えるという流れがおすすめです。

例えば、「JavaScriptを書いてください」とだけ頼むより、「Webページのボタンをクリックすると『こんにちは』と表示されるJavaScriptを、初心者向けに書いてください」と伝える方が希望に近いコードになります。

OpenAIも、AIへの指示では必要な背景や条件を具体的に伝え、最初の回答を確認しながら指示を修正していく方法を推奨しています。 (OpenAI Help Center)

超簡単な説明

AIを使ったJavaScript作成は、「日本語をプログラムに翻訳してもらう」と考えるとわかりやすいでしょう。

例えば、「ボタンを押したら数字を1増やしたい」という希望があるとします。JavaScriptの書き方を知らなくても、AIにそのまま伝えればコードを提案してもらえます。

AIへの質問や指示をプロンプトと呼びます。プロンプトとは、AIに何をしてほしいのかを伝える入力内容のことです。

AIでプログラミングするときは、関数名や難しい専門用語を知らなくても構いません。最初は「何をしたいのか」を日本語で説明できれば十分です。

AIでJavaScriptを書く手順

1．作りたい機能を日本語で整理する

最初に、どんな動きを作りたいのかを考えます。

例えば、「ボタンを押したら文字を変えたい」「2つの数字を入力すると合計を表示したい」「現在時刻を表示したい」といった内容です。

AIには、「JavaScript初心者です。できるだけ簡単なコードを使ってください」と伝えると、複雑すぎる書き方を避けやすくなります。

2．使用環境もAIに伝える

JavaScriptはWebブラウザだけでなく、さまざまな環境で利用されています。

初心者がWebページを作るのであれば、「ブラウザ上で動くJavaScriptです」と伝えておくとよいでしょう。

HTMLも必要なら、「HTMLとJavaScriptを両方書いてください。それぞれ分けて表示してください」と依頼できます。

HTMLとは、Webページの見出しや文章、ボタンなどの構造を作るための言語です。

3．AIにコードを書いてもらう

例えば、次のように頼みます。

「JavaScript初心者です。ボタンをクリックすると、画面に『こんにちは』と表示されるHTMLとJavaScriptを書いてください。できるだけ簡単にしてください。」

このように、目的・使用環境・難易度をセットで伝えるのがポイントです。

OpenAIのプロンプト作成ガイドでも、目的、背景、希望する出力形式などを具体的に指定することが良い回答につながると説明されています。 (OpenAI Help Center)

4．コードの意味を説明してもらう

AIがコードを書いたら、そのままコピーして終わりにしないことが大切です。

例えば、document.querySelector()というコードが出てきて意味がわからなければ、「document.querySelectorとは何ですか？初心者向けに説明してください」と聞きます。

document.querySelector()とは、Webページの中から指定した要素を探すためのJavaScriptの機能です。

さらに、「このコードを1行ずつ説明してください」と頼めば、AIをプログラミングの家庭教師のように使えます。

5．実際に動かして確認する

AIからコードを受け取ったら、必ず実際に動かしましょう。

HTMLファイルにJavaScriptを追加してブラウザで開き、ボタンを押すなどして期待した動作になるか確認します。

MDNにも、実際にJavaScriptを書きながら数値当てゲームを作成する初心者向けチュートリアルがあります。読むだけではなく、コードを書いて試すことで仕組みを理解しやすくなります。 (MDN Web Docs)

6．エラーをAIに修正してもらう

JavaScriptを実行すると、エラーが表示されることがあります。

エラーとは、プログラムが正しく処理できなかったことを示す情報です。

AIには、「動きません」だけではなく、「このコードを実行すると○○というエラーが表示されます。本来はボタンを押すと数字が増えるようにしたいです」と伝えます。

コード、エラーメッセージ、期待する動作の3つをまとめて渡すと、原因を調べてもらいやすくなります。

実例

例えば、「ボタンをクリックするたびに数字が1増えるWebページ」を作るとします。

最初にAIへ、「JavaScript初心者です。最初は0と表示され、ボタンをクリックするたびに数字が1増えるWebページを作ってください。HTMLとJavaScriptを分けて説明してください」と頼みます。

完成して正常に動いたら、「0に戻すリセットボタンを追加してください」と依頼します。

さらに、「10になったら『達成しました』と表示してください」「20以上には増えないようにしてください」と条件を追加できます。

このように、小さな機能を作ってから一つずつ追加する方法がおすすめです。

最初から電卓やゲームなどの大きなプログラムを丸ごと作らせるより、どのコードが何をしているのか理解しやすくなります。

失敗・注意点

最も注意したいのは、AIが作ったJavaScriptが必ず正しいとは限らないことです。

コードの文法自体は正しくても、自分が希望した動作になっていない場合があります。また、存在しない機能や適切ではない方法を提案する可能性もあります。

そのため、AIが出したコードは必ず自分の環境で動作確認しましょう。

もう一つの失敗は、コードの意味を理解しないまま大量に追加することです。プログラムが大きくなった後にエラーが起きると、どこに問題があるのかわかりにくくなります。

初心者なら、10行程度の小さなコードから試す → 動作確認する → 次の機能を追加するという進め方が安全です。

ログイン、個人情報、決済などセキュリティが重要な機能についても、AIが生成したコードだけを頼りに公開しないようにしましょう。

FAQ

Q．JavaScriptをまったく知らなくてもAIで書けますか？

簡単なコードなら作れます。

ただし、自分でコードを修正したりエラーを見つけたりするには、変数、条件分岐、関数などの基本を少しずつ学ぶことをおすすめします。MDNのJavaScript入門では、基礎から順番に学習できます。 (MDN Web Docs)

Q．AIにどう頼めばいいですか？

目的を具体的に伝えることが重要です。

「JavaScriptを書いて」より、「ボタンをクリックすると背景色が変わるJavaScriptを書いてください。初心者向けにコードの意味も説明してください」という頼み方がおすすめです。

Q．AIが作ったコードが動かない場合はどうすればいいですか？

現在のコード、表示されたエラーメッセージ、本来どのように動いてほしいのかをAIに伝えましょう。

「変更する場所だけ示してください」と追加すると、どこを修正したのかわかりやすくなります。

Q．AIをJavaScriptの勉強にも使えますか？

使えます。

「JavaScriptの変数を初心者向けに説明して」「if文の練習問題を3問作って」「私のコードの間違いを答えではなくヒントで教えて」といった使い方ができます。

Q．AIだけでWebサイトを作れますか？

HTML、CSS、JavaScriptなどのコード作成をAIに手伝ってもらうことはできます。

ただし、正常に動くか、スマートフォンでも使えるか、セキュリティ上の問題がないかなど、最終的な確認は人間が行う必要があります。

次にやること

まずAIに、「JavaScript初心者です。ボタンをクリックすると『こんにちは』と表示される簡単なWebページを作ってください。HTMLとJavaScriptを分けて、コードを1行ずつ説明してください」と入力してみましょう。

正常に動いたら、「文字を消すボタンも追加してください」「クリックした回数を表示してください」など、一つずつ機能を追加します。

AIでJavaScriptを書くときに大切なのは、日本語で目的を伝える → コードを生成する → 実際に動かす → 意味を理解する → 修正するという流れです。

JavaScriptの命令をすべて暗記してからAIを使う必要はありません。AIにコード作成を手伝ってもらいながら、「なぜこのコードで動くのか」を一つずつ理解していけば、プログラミングそのものを学ぶためにも活用できます。