JavaScript 实例 - 学習のためのベストプラクティス

豊富な JavaScript 实例 を探求し、さまざまな一般的なプログラミングシナリオを網羅し、JavaScript のコアコンセプトと実践的なスキルをすばやく習得し、プログラミングスキルを向上させます。

1. JavaScript 基礎インスタンス

変数宣言、データ型、演算子、条件文、ループ文など、JavaScript のコア構文を示し、初心者がすぐに使い始められるようにします。

例：変数とデータ型

    <script>
      // 文字列型の変数を宣言
      let name = "田中";

      // 数値型の変数を宣言
      let age = 25;

      // 論理値型の変数を宣言
      let isStudent = true;

      // 変数の値をコンソールに出力
      console.log("名前: " + name);
      console.log("年齢: " + age);
      console.log("学生ですか？: " + isStudent);
    </script>
  

2. JavaScript 文字列操作インスタンス

文字列の結合、検索、置換え、抽出など、JavaScript を使用した文字列の操作方法を示し、テキスト処理の効率を向上させます。

例：文字列の結合と置換

    <script>
      let message = "こんにちは";
      let name = "田中";

      // 文字列の結合
      let greeting = message + "、" + name + "さん";
      console.log(greeting); // 出力: こんにちは、田中さん

      // 文字列の置換
      let newMessage = greeting.replace("こんにちは", "こんばんは");
      console.log(newMessage); // 出力: こんばんは、田中さん
    </script>
  

3. JavaScript 配列操作インスタンス

JavaScript 配列の作成、アクセス、反復処理、ソート、追加、削除などの操作について説明し、配列処理のスキルを習得します。

例：配列の作成と要素へのアクセス

    <script>
      // 配列の作成
      let numbers = [1, 2, 3, 4, 5];

      // 要素へのアクセス
      console.log(numbers[0]); // 出力: 1
      console.log(numbers[2]); // 出力: 3

      // 配列の長さ
      console.log(numbers.length); // 出力: 5
    </script>
  

4. JavaScript 日付と時刻インスタンス

現在の日時の取得、日付の書式設定、時間差の計算など、JavaScript を使用した日付と時刻の処理方法を示します。

例：現在の日時の取得とフォーマット

    <script>
      // 現在の日時の取得
      let now = new Date();

      // 年の取得
      let year = now.getFullYear();

      // 月の取得 (0から始まるため+1する)
      let month = now.getMonth() + 1;

      // 日の取得
      let date = now.getDate();

      // フォーマットした日付の出力
      console.log(year + "/" + month + "/" + date);
    </script>
  

5. JavaScript 関数インスタンス

JavaScript 関数の定義、呼び出し、パラメータの受け渡し、戻り値などの概念、および関数式、アロー関数などの高度な使用方法について説明し、関数型プログラミングを深く理解します。

例：関数の定義と呼び出し

    <script>
      // 関数の定義
      function greet(name) {
        console.log("こんにちは、" + name + "さん");
      }

      // 関数の呼び出し
      greet("田中"); // 出力: こんにちは、田中さん
      greet("鈴木"); // 出力: こんにちは、鈴木さん
    </script>
  

6. JavaScript DOM 操作インスタンス

要素の取得、要素の内容とスタイルの変更、要素の作成と削除など、JavaScript を使用した Web ページ要素の操作方法を示し、動的な Web ページ効果を実現します。

例：要素の内容変更

    <p id="message">デフォルトテキスト</p>
    <button onclick="changeText()">テキストを変更</button>

    <script>
      function changeText() {
        document.getElementById("message").textContent = "新しいテキスト";
      }
    </script>
  

7. JavaScript イベント処理インスタンス

JavaScript のイベント処理メカニズムについて説明し、イベントリスナーのバインド方法、ユーザー操作（マウスのクリック、キーボードの入力など）への応答方法を示し、Web ページのインタラクティブ性を向上させます。

例：クリックイベント

    <button id="myButton">クリック</button>

    <script>
      let button = document.getElementById("myButton");
      button.addEventListener("click", function() {
        alert("ボタンがクリックされました");
      });
    </script>
  

8. JavaScript フォーム検証インスタンス

メールアドレスの形式、パスワードの強度などのユーザー入力データの検証に JavaScript を使用する方法を示し、データの有効性を確保します。

例：メールアドレスの検証

    <form name="myForm" onsubmit="return validateForm()">
      メールアドレス: <input type="text" name="email">
      <input type="submit" value="送信">
    </form>

    <script>
      function validateForm() {
        let email = document.forms["myForm"]["email"].value;
        if (email == "") {
          alert("メールアドレスを入力してください");
          return false;
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
          alert("有効なメールアドレスを入力してください");
          return false;
        }
      }
    </script>
  

9. JavaScript アニメーション効果インスタンス

要素の移動、フェードイン/フェードアウトなど、JavaScript を使用して単純なアニメーション効果を作成する方法を示し、Web ページの視覚体験を向上させます。

例：要素のフェードイン

    <p id="fadeInElement" style="opacity: 0;">フェードインする要素</p>
    <button onclick="fadeIn()">フェードイン</button>

    <script>
      function fadeIn() {
        let element = document.getElementById("fadeInElement");
        let opacity = 0;
        let id = setInterval(frame, 20);
        function frame() {
          if (opacity >= 1) {
            clearInterval(id);
          } else {
            opacity += 0.1;
            element.style.opacity = opacity;
          }
        }
      }
    </script>
  

10. JavaScript AJAX インスタンス

JavaScript を使用して非同期リクエストを送信し、サーバーデータを取得して Web ページのコンテンツを更新し、Web ページの部分的な更新を実現し、ユーザーエクスペリエンスを向上させる方法について説明します。

例：API からデータを取得

    <div id="dataContainer"></div>
    <script>
      let xhr = new XMLHttpRequest();
      xhr.open("GET", "https://api.example.com/data", true);
      xhr.onload = function() {
        if (this.status == 200) {
          let data = JSON.parse(this.responseText);
          document.getElementById("dataContainer").innerHTML = data.message;
        }
      };
      xhr.send();
    </script>
  

参考資料

• MDN Web Docs JavaScript
• W3Schools JavaScript Tutorial

Q&A