【初心者向け】JavaScriptでできること｜動的操作の例とサンプルコード解説

2025年8月23日

※ この記事にはアフィリエイトリンクが含まれます

普段、私たちが使っているWebサイトには、ちょっとした「動き」が実装されてたりします。

例えば、ボタンをクリックすると文字が変わったり、画像がスライドショーのように切り替わったり。入力フォームに間違いがあると、すぐに赤字で注意してくれることもありますよね。

こうした「動きのある仕組み」は、すべて JavaScript が担っています。

つまり、JavaScriptを学ぶことで、あなた自身の手で「ただの静的なページ」を「使いやすく、見ていて楽しいページ」に変えられるのです。

この記事では、JavaScriptでできる代表的な動的操作の例と、実際に試せるサンプルコードをご紹介します。もし「自分も作れるようになりたい」と思ったら、独学だけでなく、効率的に学べる プログラミングスクール を活用するのも選択肢の一つです。

JavaScriptでできるWebページの動的操作の例

JavaScriptでできることって、意外と身近なところに潜んでます。ここでは代表的な例をいくつか見てみましょう。

テキストや色の変更

ボタンを押したら文字が変わる、背景の色が切り替わる──そんな仕掛けもJavaScriptなら一瞬。
「お、ちゃんと動いた！」って感動できる最初の一歩です。

画像やコンテンツの切り替え

スライドショーやタブ切り替えも定番。
よくある「次へ」「戻る」ボタンで画像が切り替わるあれ、まさにJavaScriptのお仕事です。

フォームの入力チェック

メールアドレスの＠が抜けてたらエラーを出すとか、パスワードの強度を判定するとか。
「ちょっと便利」を作れるようになると、自分のサイトも一気に“それっぽく”なります。

アニメーション効果

スクロールすると文字がフワッと出てきたり、メニューがスルッと動いたり。
デザインの「おしゃれさ」はこういう小さな動きでグッと変わります。

こうして見てみると、普段何気なく触っているWebサイトの“当たり前の動き”が、ほとんどJavaScriptで作られてるんですよね。
「自分でも作れるかも？」って思ったら、次は実際に手を動かして試してみましょう。

JavaScriptのサンプルコードを試してみよう

実際にコードを書いてみると「え、こんなに短いの？」って驚くと思います。

ここでは、超シンプルな例を２つ紹介しますね。

例１：ボタンを押すと文字が変わる

<!DOCTYPE html>
<html>
<head>
  <title>JavaScriptサンプル</title>
</head>
<body>
  <p id="text">こんにちは！</p>
  <button onclick="changeText()">文字を変える</button>

  <script>
    function changeText() {
      document.getElementById("text").innerHTML = "こんばんは！";
    }
  </script>
</body>
</html>

このコードをブラウザで開いて、ボタンを押してみてください。
「こんにちは！」が「こんばんは！」に変わるはずです。
ほんの数行なのに、“自分で動きを作った感覚”が味わえます。

例２：背景色を変える

<!DOCTYPE html>
<html>
<head>
  <title>背景色チェンジ</title>
</head>
<body>
  <button onclick="changeColor()">色を変える</button>

  <script>
    function changeColor() {
      document.body.style.backgroundColor = "lightblue";
    }
  </script>
</body>
</html>

こちらはボタンを押すと、ページ全体の背景色がライトブルーに変わります。
Webページに「自分の意思で動きを加えられる」って、ちょっとワクワクしませんか？

JavaScriptの良いところは、書いたその場で結果がすぐ見えること。
最初はこうしたシンプルな仕組みをいじりながら、「こんなこともできるんだ！」と実感していくのがおすすめです。