Javascript(48)ChatGPTで試したいJavascrptで使えるプロンプト

Javascriptの紹介画像 javascript

 

前回は関数をChatGPTと練習しようについて紹介しました。

Javascript(47)関数をChatGPTと練習しよう
今回は、javascriptの関数（宣言・呼び出し・引数・戻り値）をChatGPTと練習する記事を紹介します。
kamechannel.com
2025.04.12

今回はChatGPTで試したいJavascrptで使えるプロンプトについて紹介していきます。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくJavaScript入門講座 [ Mana ]

価格:2794円
(2025/1/12 23:09時点)
感想(2件)

 

ChatGPTでJavaScriptのお手本コードをもらおう！初心者が試したい5つのプロンプト

「JavaScriptを学び始めたばかりだけど、具体的にどんなコードを書いていいか分からない…」と悩んでいませんか？そんなときに頼りになるのが、ChatGPTのようなAIアシスタントです。AIに直接「こういうコードが欲しい」と相談することで、初心者でも実践的なサンプルコードを手軽に入手できます。

本記事では、クリックイベントや配列操作、アニメーションなど、実際の開発シーンでよく使う機能をテーマに、ChatGPTに投げかけると良いプロンプト例を5つ厳選してご紹介。さらに、それぞれの使用例についても具体的に解説しています。ぜひ活用して、JavaScript学習を効率化しましょう。

目次

  1. クリックイベントを使ったUI操作コード
  2. 配列操作（検索・フィルタリング・ソート）のコード
  3. アニメーション（CSSとの連携）のコード
  4. APIデータ取得のコード
  5. エラーハンドリングを学ぶコード
  6. まとめとリンク集

1. クリックイベントを使ったUI操作コード

まずご紹介するのは、ボタンやリンクをクリックしたときの挙動を制御するお手本コードです。JavaScriptの世界では、クリックイベントを扱うシーンが非常に多いので、学習者にとって最初の難関ともいえます。ここでChatGPTの力を借りると、シンプルなサンプルコードをすぐに手に入れられます。

プロンプト例：

「HTMLボタンをクリックしたとき、コンソールにメッセージを表示する
シンプルなJavaScriptコードを書いてください」

ChatGPTからのサンプル回答例（イメージ）：

document.getElementById("myButton").addEventListener("click", function() {
  console.log("ボタンがクリックされました");
});

この例では、getElementById("myButton")で特定のボタン要素を取得し、そのに対してクリックイベントを設定しています。実際にHTMLで使う場合は、id属性を正しく設定しましょう。

活用のポイント：

  • UI操作の基本として「要素を取得してイベントリスナーを設定する」流れを体感できます。
  • イベントハンドラー内では、console.logのほかにもさまざまな処理を挟めます。たとえば画面の要素を切り替えたり、ポップアップを表示したりできます。
  • 学習を深めるには、MDN Web Docsのクリックイベント解説を参照してください。

2. 配列操作（検索・フィルタリング・ソート）のコード

続いては、初心者が躓きやすい配列操作です。配列は、JavaScriptの基礎文法を覚えるうえで欠かせないデータ構造。配列の要素を検索したり、条件に合うものだけを取り出したり、ソートで並び替えたり…実はさまざまな場面で使われます。

プロンプト例：

「JavaScriptの配列から特定の文字列を含む要素だけを抽出する
サンプルコードを書いてください」

ChatGPTからのサンプル回答例（イメージ）：

const fruits = ["apple", "banana", "grape", "orange", "pineapple"];
const filteredFruits = fruits.filter(item => item.includes("apple"));
console.log(filteredFruits); // ["apple", "pineapple"]

活用のポイント：

  • filterメソッドやincludesメソッドなどを使ったコード例をもらえば、JavaScriptの標準APIに慣れるきっかけにもなります。
  • ほかにもmap、reduce、sortなど、配列を操作する便利なメソッドが多数あるので、ChatGPTに「他の方法も教えて」と聞いてみるのもおすすめです。
  • 配列の反転や重複除去などもよくある処理なので、まとめてコードサンプルをもらうと効率的。
    参考リンク：MDN Web DocsのArrayオブジェクト

3. アニメーション（CSSとの連携）のコード

「Webページを少し動きのある表現にしたい！」と思ったときに便利なのが、CSSと組み合わせたアニメーションです。CSSだけでアニメーションを実装する方法もありますが、JavaScriptを使えば動きを自在にカスタマイズできるのが魅力。具体例をChatGPTに尋ねると、多彩なアニメーションサンプルを得ることができます。

プロンプト例：

「CSSとJavaScriptを組み合わせて、ボタンをクリックすると要素が
ふわっとフェードインするようなアニメーションサンプルを教えてください」

ChatGPTからのサンプル回答例（イメージ）：

const target = document.getElementById("box");
const btn = document.getElementById("showBtn");

btn.addEventListener("click", () => {
  target.style.opacity = 0;
  target.style.display = "block";
  let opacityValue = 0;

  const fadeIn = setInterval(() => {
    if (opacityValue < 1) {
      opacityValue += 0.05;
      target.style.opacity = opacityValue;
    } else {
      clearInterval(fadeIn);
    }
  }, 50);
});

このコード例では、setIntervalで段階的に透明度（opacity）を上昇させ、フェードイン効果を作り出しています。実際にはCSSトランジションを使えばもっとシンプルに書けるケースもありますが、JavaScriptで細かい制御をする際の基本的なテクニックとして覚えておくと便利です。

活用のポイント：

  • requestAnimationFrameを使ったより滑らかなアニメーションの方法もあります。ChatGPTに「requestAnimationFrameを使ったサンプルも欲しい」とリクエストしてみましょう。
  • CSSトランジションやtransformなどと組み合わせれば、ボタンや要素を回転させたり、スライドさせたりするなど、幅広いアニメーション表現が可能になります。
  • 関連リンク：MDN Web Docs – CSS Transitions

4. APIデータ取得のコード

Webアプリ開発でよく出てくるシーンとして、「外部APIからデータを取得して画面に反映する」手順があります。最近ではfetchやasync/awaitなど、JavaScriptの標準機能だけでシンプルに実装できるようになりましたが、初めての方には非同期処理で混乱することも少なくありません。こうしたときこそChatGPTに具体的なコード例を聞いてみましょう。

プロンプト例：

「fetchを使ってJSONPlaceholderのサンプルデータを取得して、
取得したデータのタイトルを一覧表示するHTMLとJavaScriptの例をください」

ChatGPTからのサンプル回答例（イメージ）：

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    const list = document.getElementById("postList");

    data.forEach(item => {
      const li = document.createElement("li");
      li.textContent = item.title;
      list.appendChild(li);
    });
  } catch (error) {
    console.error("データ取得に失敗:", error);
  }
}

fetchData();

ここでは、async/awaitを使って非同期処理をわかりやすく記述しています。fetchでデータを取りに行き、response.json()でJSON形式に変換し、それをループしてHTMLに挿入しています。何が行われているか理解しやすいですよね。

活用のポイント：

  • try...catch構文でエラーを捕捉しておけば、通信が失敗したときに原因を追いやすくなります。
  • ChatGPTに「errorの場合にユーザーにアラートを出すにはどう書けばいい？」などと追加で聞くと、エラー時のUI表現コードまで教えてくれます。
  • 関連リンク：MDN Web Docs – Fetch API

5. エラーハンドリングを学ぶコード

初心者のうちはどうしてもエラーに直面しがちですが、きちんとエラーハンドリングを実装しておくことで開発効率やユーザー体験が大幅に向上します。エラー時にどう振る舞うかをあらかじめ決めておけば、予期せぬ挙動に悩まされる回数も減ります。

プロンプト例：

「JavaScriptで数値入力を受け取り、数値以外が入っていた場合に
console.errorを使ってエラーメッセージを表示するサンプルコードをください」

ChatGPTからのサンプル回答例（イメージ）：

function checkNumber(input) {
  if (isNaN(input)) {
    console.error("エラー：数値ではありません");
  } else {
    console.log("数値です: " + input);
  }
}

checkNumber("abc");  // エラー：数値ではありません
checkNumber(123);    // 数値です: 123

このサンプルは極めてシンプルですが、JavaScriptでのエラーチェックの考え方を学ぶ良いきっかけになります。もっと複雑な処理を取り入れたい場合は、ChatGPTに追加要望を伝えると、複数のバリデーションやthrow/try...catch構文を使った例なども教えてもらえます。

活用のポイント：

  • ユーザー入力の検証では、typeofやNumber()関数なども活用できます。複数のチェック条件をまとめたユーティリティ関数を作るのもオススメです。
  • throwを使うと開発者側で任意のエラーを発生させられるため、より厳密なエラー処理が可能です。たとえばフォーム入力全体をチェックする段階でthrowを実行し、try...catchでまとめて処理する手法などがあります。
  • 関連リンク：MDN Web Docs – throw文

まとめとリンク集

いかがでしたでしょうか？ここでは、ChatGPTを活用してJavaScriptの代表的な機能を学ぶためのプロンプト例を5つご紹介しました。クリックイベント、配列操作、アニメーション、APIデータ取得、そしてエラーハンドリングは、いずれも実際の開発において非常に役立つ場面が多いです。

AIの助けを借りることで、サンプルコードをすばやく取得し、自分のプロジェクトに合わせてカスタマイズができます。JavaScript初心者こそ、どんどんconsole.logやdebuggerを使ってコードの動きを追いながら、試行錯誤してみてください。また、ChatGPTを「自分専用の先生」として活用し、疑問が出たら遠慮なく質問を投げるクセをつけておくと、習得スピードが格段に上がります。

最後に、今回扱ったテーマに関連する主要な公式ドキュメントや学習サイトのリンクを再掲します。ブックマークしておくと便利なので、ぜひご活用ください。

これらの情報源を参考にしつつ、ChatGPTを使った学習を組み合わせれば、JavaScriptの習得がぐっと加速するはず。ぜひ、日々のコーディングに取り入れて、着実にスキルアップしていきましょう！

以上がChatGPTで試したいJavascrptで使えるプロンプトについての紹介でした。
次回はjavascriptとChatGPTでアニメーションの作成方法について紹介します。

スポンサーリンク