LabEx
ログイン登録

JavaScript で変数を定義して使用する

HTMLBeginner
オンラインで実践に進む

はじめに

この実験では、参加者はウェブ開発に不可欠なスキルである JavaScript における変数の定義と使用の基本概念を探求します。この実験では、JavaScript がインタラクティブなウェブエクスペリエンスを作成する際の役割、HTML 環境のセットアップ、および変数宣言と操作技術の習得について学習者を案内します。

参加者は、varキーワードを使用して変数を宣言し、これらの変数に値を割り当て、ウェブページ上で動的に表示する方法を学びます。段階的な指示に従うことで、学生は JavaScript のコアプログラミング原則、つまり現代のウェブ開発の基礎をなす変数の命名規則や基本的なスクリプト技術に関する実践的な経験を得ることができます。

JavaScript を理解し、ウェブ開発におけるその役割を把握する

このステップでは、JavaScript とそのウェブ開発における重要な役割について学びます。JavaScript は、ウェブサイトにインタラクティビティと動的な機能をもたらす強力で多用途のプログラミング言語です。

JavaScript は主にウェブブラウザで使用されるクライアントサイドのスクリプト言語です。開発者は、HTML と CSS を操作し、ユーザーイベントを処理し、リアルタイムで複雑な計算を行うことで、インタラクティブで動的なウェブページを作成することができます。

JavaScript の主な特徴は以下の通りです。

  • ウェブブラウザで直接実行されます
  • インタラクティブなウェブエクスペリエンスを可能にします
  • HTML と CSS を動的に変更できます
  • イベント駆動型のプログラミングをサポートします
  • フロントエンドとバックエンドの両方の開発に使用されます (Node.js を使って)

JavaScript の基本機能を示す簡単な例を以下に示します。

<!doctype html>
<html>
  <head>
    <title>JavaScript Introduction</title>
  </head>
  <body>
    <h1 id="greeting">Hello, Web Development!</h1>
    <script>
      // JavaScript can dynamically change page content
      document.getElementById("greeting").innerHTML = "Welcome to JavaScript!";
    </script>
  </body>
</html>

ブラウザでの例の出力：

Welcome to JavaScript!

この例は、JavaScript がどのようにウェブページのコンテンツを即座に変更できるかを示しており、動的なウェブエクスペリエンスを作成する際のその力を示しています。

JavaScript 用の HTML ファイルをセットアップする

このステップでは、JavaScript コードを含み実行できる HTML ファイルを作成する方法を学びます。HTML はウェブページの構造を提供し、JavaScript はインタラクティビティと動的な機能を追加します。

まず、プロジェクトディレクトリに移動します。

cd ~/project

WebIDE を使って variables.html という新しい HTML ファイルを作成します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Variables</title>
  </head>
  <body>
    <h1>Learning JavaScript Variables</h1>

    <!-- 次のステップでここに JavaScript を追加します -->
    <script>
      // JavaScript コードをここに記述します
    </script>
  </body>
</html>

HTML 構造に関する要点：

  • <!DOCTYPE html> はこれが HTML5 ドキュメントであることを宣言します
  • <script> タグは JavaScript コードを記述する場所です
  • <script> タグは <head> または <body> セクションに配置できます

ブラウザで開いたときの例の出力：

Learning JavaScript Variables

<script> タグを使うと、HTML ファイルに直接 JavaScript を記述したり、外部の JavaScript ファイルにリンクしたりできます。次のステップでは、このファイルに変数を扱うための JavaScript コードを追加します。

var キーワードを使って変数を宣言する

このステップでは、JavaScript で var キーワードを使って変数を宣言する方法を学びます。変数は、コード全体で使用および操作できるデータ値を格納するコンテナです。

WebIDE で variables.html ファイルを開き、<script> セクションを変更して変数宣言を追加します。

<!doctype html>
<html lang="en">
  <body>
    <script>
      // var キーワードを使って変数を宣言する
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // 初期値なしでも変数を宣言できます
      var lastName;
    </script>
  </body>
</html>

変数宣言に関する要点：

  • JavaScript では var が変数を宣言するために使用されます
  • 変数はさまざまな型のデータを格納できます：
    • 文字列 (テキスト): "John"
    • 数値：25
    • 論理値：true または false
  • 初期値なしで変数を宣言できます

変数を実際に使ってみるには、console.log() を使ってそれらの値を表示できます。

<script>
  var firstName = "John";
  console.log(firstName); // 出力：John
</script>

ブラウザの開発者コンソールでの例の出力：

John

変数に値を代入して表示する

このステップでは、JavaScript で変数に値を代入し、さまざまな方法で表示する方法を学びます。前のステップを基に、変数の値をどのように扱うかを探求します。

variables.html ファイルを開き、<script> セクションを次のコードで更新します。

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // 変数を宣言して値を代入する
      var firstName = "John";
      var age = 25;
      var isStudent = true;

      // 変数の値を再代入する
      age = 26;
      firstName = "Jane";

      // console.log() を使って値を表示する
      console.log("Name: " + firstName);
      console.log("Age: " + age);
      console.log("Is Student: " + isStudent);

      // ウェブページ上に値を表示する
      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Name: " +
        firstName +
        "<br>Age: " +
        age +
        "<br>Is Student: " +
        isStudent;
    </script>
  </body>
</html>

変数に値を代入して表示するに関する要点：

  • = を使って変数に値を代入または再代入します
  • console.log() はブラウザの開発者コンソールに値を表示します
  • document.getElementById().innerHTML はウェブページ上に直接値を表示できます
  • + を使って文字列を変数と連結できます

ブラウザの開発者コンソールでの例の出力：

Name: Jane
Age: 26
Is Student: true

ウェブページ上での例の出力：

Name: Jane
Age: 26
Is Student: true

変数の命名規則を練習する

このステップでは、JavaScript における変数の命名に関するベストプラクティスについて学びます。良好な変数の命名は、クリーンで読みやすく保守可能なコードを書くために重要です。

variables.html ファイルを開き、<script> セクションを次の例で更新します。

<!doctype html>
<html lang="en">
  <body>
    <div id="output"></div>
    <script>
      // 良好な変数の命名規則

      // 変数名にはキャメルケースを使用する
      var firstName = "John";
      var lastName = "Doe";
      var age = 25;
      var isStudent = true;

      // 説明的で意味のある名前
      var totalPrice = 99.99;
      var discountPercentage = 10;
      var calculatedDiscount = totalPrice * (discountPercentage / 100);

      // 単一文字の変数を避ける（ループなどの特定のケースを除く）
      var x = 10; // 悪い例
      var width = 10; // 良い例

      // 結果を表示する
      console.log("Full Name: " + firstName + " " + lastName);
      console.log("Discounted Price: $" + calculatedDiscount);

      var outputElement = document.getElementById("output");
      outputElement.innerHTML =
        "Full Name: " +
        firstName +
        " " +
        lastName +
        "<br>Age: " +
        age +
        "<br>Discounted Price: $" +
        calculatedDiscount;
    </script>
  </body>
</html>

主な変数の命名規則：

  • キャメルケースを使用する（例：firstName, lastName）
  • 説明的で意味のある名前を選ぶ
  • 単一文字の変数名を避ける
  • 命名スタイルを一貫させる
  • 変数には名詞を使用する
  • 論理型の変数には is のような意味のある接頭辞を使用する

ブラウザの開発者コンソールでの例の出力：

Full Name: John Doe
Discounted Price: $9.999

ウェブページ上での例の出力：

Full Name: John Doe
Age: 25
Discounted Price: $9.999

まとめ

この実験では、参加者は JavaScript 変数の基本概念とそれらがウェブ開発における役割を探求します。この実験は、強力なクライアントサイドスクリプト言語である JavaScript を紹介することから始まり、JavaScript が HTML と CSS を操作し、ユーザーイベントを処理し、リアルタイム計算を行うことができることにより、インタラクティブで動的なウェブ体験を可能にすることを強調します。

段階的なアプローチを通じて、学習者は HTML ファイルをセットアップし、var キーワードを使用して変数宣言を練習し始め、適切な変数命名規則の重要性と変数値を代入および表示する方法を理解します。実践的な演習は、動的なウェブコンテンツを作成する際の実際的な洞察を提供し、静的なウェブページをインタラクティブで魅力的なユーザー体験に変える JavaScript の多様性を示しています。

関連 HTML コース
初心者向け HTML

初心者向け HTML

htmlweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development