JavaScript: 変数の宣言とデータ型の使用方法

はじめに

JavaScript の世界へようこそ！この実験では、プログラミングにおける最も基本的な概念である変数とデータ型について学びます。変数は情報を格納するコンテナのようなもので、データ型は変数がどのような種類の情報を保持できるかを定義します。

以下の内容を扱います。

この実験の終わりには、JavaScript でデータを扱うための確固たる基盤が身につくでしょう。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 94%です。学習者から 99% の好評価を得ています。

このステップでは、JavaScript で変数を宣言する方法を学びます。変数を宣言するにはキーワードを使用し、最も一般的なものの一つが let です。let キーワードは、後で再代入可能な新しい変数を作成していることを示します。

まず、WebIDE の左側にあるファイルエクスプローラーで script.js ファイルを見つけます。それをクリックしてエディターで開きます。

次に、script.js に以下のコード行を追加して、message という名前の変数を宣言します。

let message;

この行は、JavaScript エンジンに message という名前の変数のためにメモリ領域を確保するように指示します。まだ値がないため、デフォルトではその値は undefined です。

変数を宣言したので、値を与えましょう。まずは String データ型から始めます。文字列とは、テキストを表すために使用される文字のシーケンスです。JavaScript では、文字列はシングルクォート（'）またはダブルクォート（"）で囲みます。

代入演算子（=）を使用して変数に値を代入します。宣言と代入を別々のステップで行うこともできますが、通常は 1 行で行います。

script.js ファイルを修正して、message 変数を宣言し、1 行で文字列値を代入します。既存のコードを以下に置き換えてください。

let message = "Hello, LabEx!";

この 1 行で、message 変数が作成され、その中に "Hello, LabEx!" というテキストが格納されます。

次に、Number データ型について見ていきましょう。この型は、整数（例：10）や小数（例：3.14）を含む、すべての数値に使用されます。

このステップでは、console.log() の使用方法も学びます。これは、ブラウザの開発者コンソールに情報を出力する組み込みの JavaScript 関数です。変数の値を確認したり、コードをデバッグしたりするための不可欠なツールです。

script.js ファイルの末尾に以下の行を追加します。これにより、新しい変数 userCount が作成され、その値がコンソールに出力されます。

let userCount = 100;
console.log(userCount);

出力を確認するには、LabEx インターフェースの上部にある Web 8080 タブをクリックします。ページ上で右クリックし、「検証」を選択し、表示される開発者ツールパネルの「コンソール」タブをクリックします。コンソールに数値 100 が出力されているはずです。

次に説明する 3 つ目の基本的なデータ型は Boolean です。ブール値は true または false のいずれか一方の値しか持ちません。ブール値は、プログラミングにおける論理や意思決定の基礎となります。

ブール型の変数を宣言してみましょう。script.js ファイルの末尾に以下の行を追加して、isComplete という名前の変数を作成し、その値をログに出力します。

let isComplete = true;
console.log(isComplete);

次に、Web 8080 タブに戻り、コンソールを確認してください。前のステップの 100 の下に、新しい出力 true が表示されているはずです。

変数にどのような種類のデータが格納されているかを知る必要がある場合があります。JavaScript では、この目的のために typeof 演算子を提供しています。これはオペランドの型を示す文字列を返します。

この最後のステップでは、typeof を使用して作成した各変数のデータ型を調べます。script.js ファイルの末尾に以下の行を追加します。

console.log(typeof message);
console.log(typeof userCount);
console.log(typeof isComplete);

コードを追加した後、Web 8080 タブに切り替えて、必要に応じてページを更新してください。コンソールを確認します。これで、各変数のデータ型が出力されているのが見えるはずです。

コンソールでの期待される出力は次のようになります。

string
number
boolean

この実験を完了された皆さん、おめでとうございます！変数と基本的なデータ型について学ぶことで、JavaScript プログラミングの最初のステップを踏み出しました。

この実験では、以下の方法を学びました。

これらの概念は、あらゆる JavaScript アプリケーションを作成するための構成要素です。学習を続けるにつれて、この基礎の上に構築し、より複雑でインタラクティブなプログラムを作成していくことになります。