コピペで使える！初心者向けJavaScript実用サンプル集

JavaScriptを勉強し始めたけど、「で、結局どう使うんですか？」って思ったことありませんか？
本や動画で文法は見たけど、いざ自分で書こうとすると手が止まる…。そんな経験、かなり多いです。正直、最初はみんなそうです。

特に初心者さんが困るのが、「動くサンプルが見つからない」ことなんですよね。説明はたくさんあるのに、「コピペしてすぐ使えるコード」が意外と少ないんです。だから、「何に使うのか分からないまま勉強が進む…」という状態になりがちです。

そこでこの記事では、コピペでそのまま使えるJavaScriptの実用サンプルだけを集めました。ボタンをクリックしたときの動きや、フォームの入力チェックなど、よく使う場面ばかりです。「とりあえず動かしてみたい！」という人でも大丈夫な内容にしています。

コードの説明も、できるだけ難しい言葉は使いません。「ここをこうすると、こう動きます」という感じで、感覚的に分かるようにしています。まずは深く考えず、コピペして動かしてみてください。それだけで、「JavaScriptってこうやって使うんだ！」と分かってくるはずです。

よく使うJavaScriptって何があるの？

JavaScriptって聞くと、「なんだか難しそう…」と思われがちですが、実はやっていることはかなりシンプルです。よくある使い方を知るだけでも、「あ、これなら使えそうです」と感じてもらえるはずです。

まず一番よく見るのが、ボタン操作です。ボタンをクリックしたら文字が変わったり、メッセージが表示されたりします。お問い合わせページや、ちょっとした案内表示でよく使われています。「押したら何か起きる」という動きは、ほぼJavaScriptのお仕事です。

次によく使われるのが、フォームの入力チェックです。名前やメールアドレスが空のまま送信されたら、「ここを入力してください」と教えてくれるアレです。これもJavaScriptで動いています。入力ミスを事前に教えてくれるので、ユーザーさんにもやさしい仕組みです。

そして、表示の切り替えも定番です。説明文を開いたり閉じたり、一覧を順番に表示したりする動きですね。画面をスッキリ見せたいときによく使われます。

このようにJavaScriptは、「何か特別なこと」をするというより、「ちょっと便利にする」ために使われることがほとんどです。次の章からは、こうした動きをそのまま使えるコードで紹介していきますので、まずは「こんなことができるんだな〜」くらいの気持ちで読んでみてください。

ボタン操作でよく使うサンプル

JavaScriptで一番よく使われるのが、ボタンを押したときの動きです。
「クリックしたら何か変わる」という操作は、ブログでも仕事でも本当によく出てきます。ここでは、初心者さんがまず覚えておくと便利なサンプルを紹介します。

クリックしたら文字を変える

まずは超定番のサンプルです。ボタンを押すと、画面の文字が変わります。
「動いた！」を実感しやすいので、最初に試すのにピッタリです。

<p id="text">ここに文字が表示されます</p>
<button id="btn">クリックしてください</button>

<script>
  const button = document.getElementById("btn");
  const text = document.getElementById("text");

  button.addEventListener("click", function () {
    text.textContent = "文字が変わりました！";
  });
</script>

このコードは、「ボタンがクリックされたら、文字を書きかえる」というだけのシンプルな動きです。
お知らせ表示や、簡単な説明文の切り替えなどでよく使われます。

ボタンを押したら表示・非表示

次は、ボタンを押すたびに表示したり隠したりするサンプルです。
説明文をスッキリまとめたいときによく使われます。

<button id="toggleBtn">表示を切り替える</button>
<p id="message">この文章は表示されたり消えたりします</p>

<script>
  const toggleBtn = document.getElementById("toggleBtn");
  const message = document.getElementById("message");

  toggleBtn.addEventListener("click", function () {
    if (message.style.display === "none") {
      message.style.display = "block";
    } else {
      message.style.display = "none";
    }
  });
</script>

「今は表示されているか？」をチェックして、表示状態を切り替えています。
最初は意味が分からなくても大丈夫です。コピペして動かすだけでOKです。

こんなときに使えます

• 注意書きをあとから表示したいとき
• 長い説明文を開いたり閉じたりしたいとき
• クリックに反応する動きをつけたいとき

こうしたボタン操作は、覚えておくと本当に出番が多いです。
もし「もう少しちゃんと勉強したいな」と思ったら、**初心者向けのHTML・CSS・JavaScript学習本（2,000円前後）**を1冊持っておくと安心です。サンプルを見ながら少しずつ理解できますよ。

フォーム入力チェックのサンプル

お問い合わせフォームやコメント欄などで、「入力されていないのに送信される」のは困りますよね。そんなときに使われるのが、フォームの入力チェックです。これもJavaScriptの定番の使い道です。

ポイントは、「送信する前にチェックする」ことです。エラーを事前に教えてあげるだけで、使いやすさがかなり上がります。

未入力チェック

まずは一番よく使う、未入力チェックです。
名前が入力されていなかったら、メッセージを出して送信を止めます。

<form id="form">
  <input type="text" id="name" placeholder="お名前">
  <button type="submit">送信</button>
</form>

<script>
  const form = document.getElementById("form");
  const nameInput = document.getElementById("name");

  form.addEventListener("submit", function (e) {
    if (nameInput.value === "") {
      alert("お名前を入力してください");
      e.preventDefault();
    }
  });
</script>

valueは「入力されている中身」のことです。何も書かれていなければ、空っぽという意味になります。
未入力のまま送信されそうになったら、アラートを出して止めています。

文字数チェック

次は、文字数をチェックするサンプルです。
短すぎるコメントを防ぎたいときなどに使われます。

<form id="commentForm">
  <textarea id="comment"></textarea>
  <button type="submit">送信</button>
</form>

<script>
  const commentForm = document.getElementById("commentForm");
  const comment = document.getElementById("comment");

  commentForm.addEventListener("submit", function (e) {
    if (comment.value.length < 10) {
      alert("10文字以上入力してください");
      e.preventDefault();
    }
  });
</script>

lengthは「文字の数」です。10文字より少なかったら、送信しないようにしています。

初心者さんがやりがちなミス

よくあるのが、「チェックは書いたのに、送信が止まらない」というパターンです。
その原因は、e.preventDefault()を書き忘れていることがほとんどです。これを書かないと、条件に関係なく送信されてしまいます。

フォームチェックは、ブログや仕事で本当によく使います。
もし「仕組みからちゃんと理解したい」と思ったら、JavaScript入門のオンライン教材（月額1,000〜2,000円くらい）を使うのもおすすめです。動画で動きを見ながら学べますよ。

配列・データ操作のサンプル

配列（はいれつ）と聞くと、急にレベルが上がった感じがしますよね。でも実際は、「データの入った箱が並んでいるだけ」と考えれば大丈夫です。名前のリストや数字の集まりなど、意外と身近なところで使われています。

ここでは、よく使われる配列の操作を、できるだけかんたんな例で見ていきます。

配列を順番に表示する

まずは、配列の中身を順番に表示するサンプルです。
名前のリストを1つずつ表示してみます。

<script>
  const names = ["たろう", "はなこ", "じろう"];

  names.forEach(function (name) {
    console.log(name);
  });
</script>

namesの中に、3つの名前が入っています。
forEachは、「中身を1つずつ取り出す」という意味です。順番にconsole.logで表示しています。

結果は画面ではなく、ブラウザの開発者ツールで見られます。
「右クリック → 検証 → Console」を開いて確認してみてください。

条件に合うデータだけ取り出す

次は、条件に合うものだけを取り出すサンプルです。
数字の中から、10以上のものだけを集めます。

<script>
  const numbers = [3, 8, 12, 20, 5];

  const result = numbers.filter(function (num) {
    return num >= 10;
  });

  console.log(result);
</script>

このコードでは、「10以上かどうか」をチェックしています。
条件に合った数字だけが、resultにまとめて入ります。

まずは確認するのが大事です

配列の処理は、いきなり完璧に理解しようとしなくてOKです。
「console.logで中身を見てみる」だけでも、かなり理解が進みます。

もし配列が苦手だと感じたら、初心者向けのWeb制作講座（買い切りで3,000円前後）を使って、まとめて学ぶのもアリです。動画とセットだと、動きが分かりやすいですよ。

初心者がつまずきやすいポイントまとめ

JavaScriptを書いていると、「さっきまで動いていたのに、急に動かない…」ということがよく起こります。でも安心してください。初心者さんがつまずくポイントは、だいたい決まっています。

まず一番多いのが、スペルミスです。getElementByIdやaddEventListenerなど、ちょっと長い名前は特に間違えやすいです。エラーが出たら、「名前が合っているか」をゆっくり見直してみてください。

次に多いのが、HTMLのidとJavaScriptの指定がズレているパターンです。HTMLではid="btn"なのに、JavaScriptでは別の名前を書いていると、何も起こりません。動かないときは、idが同じかどうかを確認するのがコツです。

あとは、エラーを見ていないケースもよくあります。ブラウザの「検証」からConsoleを開くと、赤い文字でヒントが出ています。最初は意味が分からなくても、「ここが怪しいんだな」と分かるだけで十分です。

JavaScriptは、間違えながら覚えるものです。動かなくなっても、「失敗した」と思わなくて大丈夫です。「どこが違うんだろう？」と1つずつ確認するクセをつけると、少しずつ理解できるようになります。焦らず、コピペして、動かして、楽しみながら続けていきましょう。

よくある質問