未分類

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

2026.08.31

検索者の悩み

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

JavaScriptは、Webページに動きを付けるときなどに広く利用されているプログラミング言語です。例えば、ボタンを押したときに表示を変える、入力内容を確認する、画面上の数字を計算するといった処理を作れます。MDNのJavaScriptガイドでも、基本構文、条件分岐、ループ、関数、オブジェクトなど幅広い機能が解説されています。 (MDN Web Docs)

現在は、ChatGPTのようなAIに「こんな機能を作りたい」と伝えることで、JavaScriptコードの作成、修正、解説などを手伝ってもらえます。

先に結論

AIでJavaScriptを書くなら、「作りたいものを具体的に伝える → コードを作ってもらう → 内容を説明してもらう → 実際に動かす → エラーが出たらAIに修正を依頼する」という流れがおすすめです。

重要なのは、AIが作ったコードをそのままコピーして終わらせないことです。

「このコードの意味を初心者向けに説明して」「どこを変更すると文字が変わる？」などと聞きながら使うことで、JavaScriptの勉強にもなります。

OpenAIも、AIへの指示では目的や条件を具体的に伝え、最初の回答を確認しながら追加指示によって改善する方法を推奨しています。 (OpenAI Help Center)

超簡単な説明

例えばWebページに「ボタンを押したら『こんにちは』と表示する」という機能を追加したいとします。

AIに「JavaScriptを書いて」とだけ頼むよりも、「HTMLのボタンをクリックしたら、画面に『こんにちは』と表示する初心者向けJavaScriptを書いてください」と伝えます。

すると、AIは目的に合わせたコードを作りやすくなります。

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

プログラミングでも、プロンプトを具体的にするほど希望するコードに近づきやすくなります。 (OpenAI Help Center)

AIでJavaScriptを書く手順

1．作りたい機能を日本語で説明する

最初に、コードを書く前に「何を作りたいのか」を普通の日本語で整理します。

例えば、「ボタンを押したら背景色を変えたい」「入力された数字を合計したい」「現在時刻を画面に表示したい」などです。

初心者なら、AIに「できるだけ簡単なコードにしてください」「難しい書き方は避けてください」と追加すると理解しやすくなります。

2．HTMLとJavaScriptを分けて作ってもらう

WebページでJavaScriptを使う場合、HTMLと一緒に利用することが多くあります。

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

例えばAIには、「HTMLとJavaScriptを分けて表示してください。どこに貼ればいいかも説明してください」と頼みます。

コードだけではなく配置方法まで説明してもらうことで、初心者でも試しやすくなります。

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

AIがコードを作ったら、「1行ずつ初心者向けに説明してください」と質問します。

例えば次のようなコードがあったとします。

const button = document.querySelector("#button");

意味がわからなければ、そのままAIに「この1行は何をしていますか？」と聞けば構いません。

constは、値を入れて利用する名前を宣言するときに使うJavaScriptの書き方です。document.querySelector()は、Webページの中から指定した要素を探すための機能です。

わからない部分だけ聞くことで、AIをプログラミングの家庭教師のように利用できます。

4．実際にコードを動かす

AIが作ったJavaScriptは、必ず実際に動作確認します。

例えばブラウザ上でHTMLファイルを開き、ボタンを押して希望した動作になるか確認します。

JavaScript自体の基本的な書き方について不安があれば、MDNのJavaScriptガイドと照らし合わせると便利です。MDNでは変数、条件分岐、関数、ループ、エラー処理などが体系的に解説されています。 (MDN Web Docs)

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

コードを動かしたときにエラーが出ても、すぐ諦める必要はありません。

例えばAIに「次のJavaScriptでエラーが出ました。原因を初心者向けに説明して、修正版を書いてください」と依頼し、コードとエラーメッセージを渡します。

エラーメッセージとは、プログラムに問題が起きたときに表示される原因の手がかりです。

AIに相談するときは、「動きません」だけではなく、エラーメッセージや期待していた動作も一緒に伝えると原因を特定しやすくなります。

実例

例えば、「ボタンを押すと数字が1ずつ増えるページ」を作りたいとします。

AIには、「JavaScript初心者です。ボタンをクリックするたびに画面の数字が1ずつ増えるHTMLとJavaScriptを書いてください。できるだけ簡単にして、コードの意味も説明してください」と入力します。

AIがコードを作ったら、次に「数字を0に戻すリセットボタンも追加してください」と頼みます。

さらに、「数字が10になったら『達成！』と表示するようにしてください」と追加できます。

このように、最初から完成版を作ろうとせず、小さな機能を追加しながら作るのがAIを使ったプログラミングのコツです。

OpenAIのプロンプト作成ガイドでも、最初の回答から始め、結果を確認しながら条件や情報を追加して改善する方法が案内されています。 (OpenAI Help Center)

失敗・注意点

AIでJavaScriptを書くときに最も注意したいのは、AIが作ったコードが必ず正しいとは限らないことです。

存在しない機能を使ったコードを出したり、古い書き方を提案したり、条件によって正常に動かなかったりする可能性があります。

そのため、コードは必ず自分の環境で実行して確認しましょう。

また、「ログイン機能を全部作って」「パスワード管理システムを作って」のように、セキュリティが重要な機能をAIだけに任せるのも避けた方が安全です。

もう一つの失敗は、コードを理解せず大量に生成することです。エラーが起きたときに、どこを直せばよいかわからなくなります。

初心者のうちは、小さなコードを作り、理解してから次の機能を追加する方が学習しやすくなります。

FAQ

Q．JavaScriptを知らなくてもAIでコードを書けますか？

簡単なプログラムなら作れます。ただし、AIのコードを正しく修正したり、安全性を判断したりするためには、JavaScriptの基本を少しずつ学んだ方が便利です。

Q．AIに何と入力すればいいですか？

「JavaScriptを書いて」だけではなく、目的、初心者かどうか、使用環境、欲しい動作を伝えましょう。

例えば、「JavaScript初心者です。ブラウザで動く簡単な電卓を作ってください。HTMLとJavaScriptを分けて、各部分の意味も説明してください」という形です。

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

コード、エラーメッセージ、期待する動作をまとめてAIに渡します。

「このコードではボタンを押しても反応しません。原因を調べて、変更した部分も説明してください」と聞くと修正しやすくなります。

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

使えます。「今日は変数だけ教えて」「if文の練習問題を3問出して」「私のコードの間違いを答えを言わずヒントだけ出して」など、学習相手として利用できます。

次にやること

最初は、小さなJavaScriptを1つ作ってみましょう。

AIに、**「JavaScript初心者です。ボタンを押すと『こんにちは』と表示される簡単なWebページを作ってください。HTMLとJavaScriptを分け、それぞれのコードを初心者向けに説明してください」**と入力します。

完成したら、「背景色を変えたい」「文字を大きくしたい」「ボタンをもう1つ追加したい」と少しずつ改造してみてください。

AIでJavaScriptを書くときに大切なのは、生成する → 動かす → 理解する → 修正するという流れです。

AIに全部書いてもらうだけではなく、「なぜこのコードで動くのか」を質問しながら使えば、JavaScriptを覚えるための強力な学習ツールにもなります。