初心者向けJavaScript入門:Webサイトに動きを加える基本テクニック

eyecatch47 WEB制作

こんにちは、SodDogです。

今回は、これからWeb制作を学びたい、または始めたばかりの方へ向けて、「JavaScriptで何ができるのか」をわかりやすく解説します。この記事では、JavaScriptの基本的な役割から具体的な使い方までを順を追って説明していきますので、ぜひ最後までお付き合いくださいね!


JavaScriptって何?

簡単に言うと…

JavaScriptは、Webサイトに「動き」や「インタラクション」を加えるためのプログラミング言語です。
例えば:

  • ボタンをクリックしたらメッセージが表示される
  • 画像が自動で切り替わるスライドショー
  • 入力フォームにエラーがある場合に警告を表示する

など、HTMLやCSSだけでは作れない「動きのあるWebサイト」を実現します。


HTMLとCSSとの違い

JavaScriptの役割を理解するには、まずHTMLとCSSの役割を知っておくと便利です。以下の表で整理してみましょう。

種類役割
HTMLWebページの「骨組み」を作る見出し、文章、画像、リンクなどを配置する
CSSWebページの「見た目」をデザインする色を付ける、文字の大きさを変える、配置を調整する
JavaScriptWebページに「動き」や「操作」を追加するボタンをクリックすると動作する機能、アニメーションなど

JavaScriptで何ができるの?

初心者の方にもイメージしやすいように、いくつかの具体例を挙げていきます!


1. ボタンをクリックするとメッセージが表示される

まずは基本中の基本、ボタンをクリックしてメッセージを表示してみましょう。

実際のコード

以下をコピーして、HTMLファイルとして保存してみてください。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの基本</title>
</head>
<body>
<h1>JavaScriptの基本例</h1>
<button id="myButton">クリックしてね!</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('ボタンがクリックされました!');
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScriptの基本</title> </head> <body> <h1>JavaScriptの基本例</h1> <button id="myButton">クリックしてね!</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('ボタンがクリックされました!'); }); </script> </body> </html>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの基本</title>
</head>
<body>
    <h1>JavaScriptの基本例</h1>
    <button id="myButton">クリックしてね!</button>

    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('ボタンがクリックされました!');
        });
    </script>
</body>
</html>

仕組みを解説

  1. HTML部分
    • ボタン(<button>)を用意し、id="myButton"で識別できるようにします。
  2. JavaScript部分
    • document.getElementByIdでボタンを取得。
    • addEventListenerでボタンがクリックされたときの動作を設定。
    • alertでメッセージを表示。

2. 入力フォームのエラーをチェックする

ユーザーがフォームに名前を入力しなかった場合に警告を表示する機能を作ってみましょう。

実際のコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームチェック</title>
</head>
<body>
<h1>フォームの入力をチェックしよう</h1>
<form id="myForm">
<input type="text" id="name" placeholder="名前を入力してください">
<button type="submit">送信</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
const name = document.getElementById('name').value;
if (!name) {
alert('名前を入力してください!');
event.preventDefault(); // フォームの送信をキャンセル
}
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>フォームチェック</title> </head> <body> <h1>フォームの入力をチェックしよう</h1> <form id="myForm"> <input type="text" id="name" placeholder="名前を入力してください"> <button type="submit">送信</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { const name = document.getElementById('name').value; if (!name) { alert('名前を入力してください!'); event.preventDefault(); // フォームの送信をキャンセル } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フォームチェック</title>
</head>
<body>
    <h1>フォームの入力をチェックしよう</h1>
    <form id="myForm">
        <input type="text" id="name" placeholder="名前を入力してください">
        <button type="submit">送信</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            const name = document.getElementById('name').value;
            if (!name) {
                alert('名前を入力してください!');
                event.preventDefault(); // フォームの送信をキャンセル
            }
        });
    </script>
</body>
</html>

仕組みを解説

  1. フォームを用意
    • id="myForm"でフォーム全体を識別。
  2. JavaScriptでチェック
    • フォームが送信される前にsubmitイベントを監視。
    • 名前の入力欄(<input>)が空の場合に警告を表示し、送信をキャンセル。

3. カウントアップボタンを作る

次に、ボタンをクリックするたびに数字が増える仕組みを作ってみます。

実際のコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カウントアップ</title>
</head>
<body>
<h1>カウントアップを体験しよう</h1>
<button id="counter">0</button>
<script>
let count = 0;
document.getElementById('counter').addEventListener('click', function() {
count++;
this.textContent = count;
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>カウントアップ</title> </head> <body> <h1>カウントアップを体験しよう</h1> <button id="counter">0</button> <script> let count = 0; document.getElementById('counter').addEventListener('click', function() { count++; this.textContent = count; }); </script> </body> </html>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウントアップ</title>
</head>
<body>
    <h1>カウントアップを体験しよう</h1>
    <button id="counter">0</button>

    <script>
        let count = 0;
        document.getElementById('counter').addEventListener('click', function() {
            count++;
            this.textContent = count;
        });
    </script>
</body>
</html>

仕組みを解説

  1. JavaScriptで変数を用意
    • let count = 0; で初期値を設定。
  2. クリックで数字を更新
    • ボタンをクリックするたびに count++ で数字を1つ増やし、textContent で表示を更新。

まとめ

いかがだったでしょうか?

javascriptを使うことでWebサイトに動きを与えるきっかけとなり、よりユーザビリティに優れたWebサイトを作ることが出来ます。

今回はほんの一例を紹介しましたが、もっと深く勉強することでより高度な技術を習得することが出来ます。

これからもウェブガジェブログでは定期的にコード紹介していきたいと思います。

コメント