English 中文 العربية 日本語 Português

JavaScript: JavaScript入門

JavaScriptはWebのプログラミング言語であり、静的なHTMLページに命を吹き込みます。

このチュートリアルは完全な初心者向けに設計されています。変数や関数から始め、最終的には自分でToDoリストアプリを構築できるようになることを目指します。

1. 学習内容

▶ サンプル

JAVASCRIPT 
// セクションのコード例
const message = "Hello, World!";
console.log(message);
▶ 試してみよう

これは最もシンプルな例で、後のセクションで詳しく説明します。## 2. 前提条件

このチュートリアルを始める前に、以下の知識が必要です：

2. JavaScriptとは

JavaScriptはブラウザ上で直接実行されるスクリプト言語で、コンパイル不要です。ブラウザがJSコードを1行ずつ読み込んで実行します。

JSは元々ブラウザ専用に設計されましたが、現在ではサーバー（Node.js）、デスクトップアプリ（Electron）、モバイルアプリ（React Native）にも幅広く使われています。このチュートリアルでは、Webページ上でのJSの動作を中心に学びます。

3. JavaScriptでできること

JSはWebインタラクションのほぼすべてを担当します：

シンプルに言えば：HTMLが構造を作り、CSSが装飾し、JavaScriptがインタラクティブにします。

4. JavaScriptとHTML/CSSの関係

Webページを人体に例えてみましょう：

それぞれに役割があります。JSはHTML要素やCSSスタイルを操作して、ページの見た目と動作を変更します。

5. JavaScriptの歴史

1995年、NetscapeのBrendan EichがJavaScriptの最初のバージョンをわずか10日間で書き上げました。今やWebを支配する言語が、2週間もかからずに誕生したのです。

いくつかのよくある誤解：

6. ブラウザでのJavaScript実行

すべてのブラウザには組み込みのJSエンジンがあり、コードを機械語に変換します：

プロセスは単純です：ブラウザがHTMLを読み込み → scriptタグに遭遇 → JSエンジンが1行ずつ解析・実行 → 結果がページに表示されます。

▶ サンプル：JavaScriptでページテキストを変更する

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS入門 - テキスト変更</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    #msg { font-size: 24px; color: #333; transition: all 0.3s; }
    button { padding: 12px 28px; font-size: 16px; cursor: pointer; border: none; border-radius: 6px; background: #4CAF50; color: #fff; }
    button:hover { background: #45a049; }
  </style>
</head>
<body>
  <p id="msg">こんにちは、世界！</p>
  <button id="changeBtn">クリックしてテキストを変更</button>
  <script>
    document.getElementById("changeBtn").onclick = function() {
      document.getElementById("msg").textContent = "JavaScriptがページに命を吹き込む！";
      document.getElementById("msg").style.color = "#e91e63";
    };
  </script>
</body>
</html>
▶ 試してみよう

▶ サンプル：JavaScriptがユーザーイベントに応答する

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS入門 - イベント処理</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    .card { display: inline-block; padding: 40px; border: 2px solid #ddd; border-radius: 12px; cursor: pointer; transition: all 0.3s; }
    .card:hover { border-color: #2196F3; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
    .card.active { border-color: #e91e63; background: #fce4ec; }
    #info { margin-top: 20px; font-size: 18px; color: #555; }
  </style>
</head>
<body>
  <div class="card" id="myCard">
    <p>このカードにカーソルを乗せてください</p>
  </div>
  <p id="info"></p>
  <script>
    var card = document.getElementById("myCard");
    var info = document.getElementById("info");
    card.onmouseenter = function() {
      info.textContent = "カードエリアに入りました！";
      card.classList.add("active");
    };
    card.onmouseleave = function() {
      info.textContent = "カードエリアから出ました！";
      card.classList.remove("active");
    };
  </script>
</body>
</html>
▶ 試してみよう

▶ サンプル：JavaScriptのフォームバリデーション

HTML 📖 参照専用 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JS入門 - フォームバリデーション</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 400px; margin: 60px auto; }
    label { display: block; margin-top: 16px; font-weight: bold; }
    input { width: 100%; padding: 8px; margin-top: 4px; border: 2px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    input:focus { outline: none; border-color: #2196F3; }
    button { margin-top: 20px; padding: 10px 24px; border: none; border-radius: 6px; background: #2196F3; color: #fff; cursor: pointer; font-size: 16px; }
    button:hover { background: #1976D2; }
    .error { color: #e91e63; font-size: 14px; margin-top: 4px; display: none; }
    .success { color: #4CAF50; font-size: 16px; margin-top: 12px; display: none; }
  </style>
</head>
<body>
  <h2>ユーザー登録</h2>
  <label for="username">ユーザー名</label>
  <input type="text" id="username" placeholder="3文字以上">
  <p class="error" id="usernameError">ユーザー名は3文字以上必要です</p>
  <label for="email">メールアドレス</label>
  <input type="text" id="email" placeholder="メールアドレスを入力">
  <p class="error" id="emailError">有効なメールアドレスを入力してください</p>
  <button id="submitBtn">送信</button>
  <p class="success" id="successMsg">バリデーション通過 — 送信成功！</p>
  <script>
    document.getElementById("submitBtn").onclick = function() {
      var username = document.getElementById("username").value;
      var email = document.getElementById("email").value;
      var valid = true;
      if (username.length < 3) {
        document.getElementById("usernameError").style.display = "block";
        valid = false;
      } else {
        document.getElementById("usernameError").style.display = "none";
      }
      if (email.indexOf("@") === -1 || email.indexOf(".") === -1) {
        document.getElementById("emailError").style.display = "block";
        valid = false;
      } else {
        document.getElementById("emailError").style.display = "none";
      }
      if (valid) {
        document.getElementById("successMsg").style.display = "block";
      } else {
        document.getElementById("successMsg").style.display = "none";
      }
    };
  </script>
</body>
</html>
論理コード 52 行（40 行制限超過、参照専用）

❓ よくある質問

Q JavaScriptとJavaは同じ言語ですか？
A いいえ、まったくの別物です。名前が似ているだけで、JavaはバックエンドやAndroid開発向けのコンパイル言語、JavaScriptは主にWebページ向けのスクリプト言語です。名前の一致はマーケティング上の偶然に過ぎません。
Q JSを学ぶ前にHTMLとCSSをマスターする必要がありますか？
A マスターする必要はありませんが、基礎は理解しておくべきです。JSは主にHTML要素やCSSスタイルを操作して動作するので、タグやセレクタが読めない状態でJSを学ぶのは苦労します。
Q JSはブラウザでしか使えませんか？
A いいえ。Node.jsを使えばサーバー上で、Electronではデスクトップアプリとして、React Nativeではモバイルアプリとして実行できます。ただし、ブラウザはJSの主な舞台です。

📖 まとめ

📝 練習問題

  1. 初級：ボタンと段落を含むHTMLページを作成してください。ボタンをクリックすると、段落のテキストが「JavaScriptを学んだ！」に変わり、テキストの色が青になるようにしてください。
  2. 中級：「拡大」と「縮小」の2つのボタンを持つページを作成してください。クリックするたびにテキストのフォントサイズが2px増減するようにしてください。
  3. 上級：シンプルなパスワードバリデーションページを作成してください。パスワードは6文字以上で、少なくとも1つの数字を含む必要があります。条件を満たさない場合、入力欄の下に赤いエラーメッセージを表示してください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%