【JavaScript】値と変数について理解しよう

値(データ)について

プログラミングでは、多くの値を扱います。

値を表示したり、値と値を足し算したり、値によって処理を分けたりと、値を使わない処理はありません
値を呼び出し、加工し、出力するためにプログラムを記述します。

前回の学習でコンソールにログを出力した例を見てみましょう。


console.log('Hello, World');
    

これは、コンソールにログを出力するという処理(console.log)に「Hello, World」という値を使用しています。

次に括弧内の値を次のように変えて実行してみましょう。


console.log('織田信長');
    

Hello, World」という値を「織田信長」という値に変更したので、織田信長」がログに出力されます

「こんにちは」や「あいうえお」のように変えると、それぞれの値がログとして出力されます。

値というのは、柔軟で無限大です。
ユーザーが入力する値もあれば、サービス内で固定の値もあります。ユーザーそれぞれにIDとして割り振る他と重複しない一意(いちい)の値もあれば、現在の時刻や、値と値から計算した結果のような値もあります

値とデータ型

値には、それぞれデータ型というものがあります。

プログラミング言語によって扱うデータ型には差がありますが、JavaScriptでは、「こんにちは」というような文字列String: ストリング)型、「34」のような数値Number: ナンバー)型、条件分岐に使用する真偽値Boolean: ブーリアン)型、複数の値を一つのデータ型にまとめる配列Array: アレイ)型やオブジェクトObject)型などがあります。

ここでは、それぞれの特徴について簡単に説明します。より詳しい説明はこれからの学習で行います。

文字列型(String

文字をダブルクォート(")、シングルクォート(')またはバッククォート(`)の何れかで囲むと文字列型となります。
"こんにちは"'こんにちは'`こんにちは`は同じ文字列型の値です。

"で囲まれた文字列内で"を文字として使用したい場合は、バックスラッシュ(Windows: ¥、Mac: \)を"の前に入力してエスケープする必要があります。


console.log("バックスラッシュで、\"をエスケープします。");  // バックスラッシュで、"をエスケープします。
    

文字列内のクォートと異なるクォートで囲めばエスケープを省略できます。
次の例は、文字列内のダブルクォートとは異なるシングルクォートで囲む例です。


console.log('他のクォートで囲めば、"のエスケープを省略できます。');  // 他のクォートで囲めば、"のエスケープを省略できます。
    

バッククォートは、文字列内に変数や関数を埋め込むことができます。これは、これからの学習で詳しく解説します。

数値型(Number

126241028などの整数や、3.1442.195などの小数-8-21のような負数は、数値型となります。

数値型は、何も囲まずそのまま入力します。


console.log(1024);  // 1024
console.log(3.14);  // 3.14
console.log(-7);  // -7
    

数値型の値は、四則演算などの計算に使用することができます


console.log(4 + 2);  // 6
console.log(3.14 - 2);  // 1.1400000000000001
console.log(-7 * 8);  // -56
console.log(4 / 0.4 );  // 10
    

数値をクォートで囲むと、数値型ではなく文字列型となるため、計算結果が異なることに注意してください


console.log('4' + '2');  // 42
console.log('3.14' - '2');  // 1.1400000000000001
console.log('-7' * '8');  // -56
console.log('4' / '0.4' );  // 10
    

真偽値型(Boolean

真偽(しんぎ)を確かめるために使用する真偽値型にはtrue(真: トゥルー)かfalse(偽: フォルス)の2つの値しかありません

真偽値は「もしtrueならAの処理、falseならBの処理」というような条件分岐に使用されます。(条件分岐については別の学習で行います)


console.log(true);  // true
console.log(false);  // false
    

多くの場合、この真偽値は、ある条件から導き出された結果です。

例えば、ユーザーの年齢が20歳以上であればtrue、20歳未満であればfalseとする場合は、ユーザーの年齢が20歳以上かどうかを条件にします。


console.log(34 >= 20);  // true
console.log(14 >= 20);  // false 
    

><>=<===!====!==といった比較演算子を使用できますが、詳しいことは現時点で覚える必要はありません。

JavaScriptでは、真偽値型以外でもtruefalseとみなされるtrusy(真っぽい値)やfalsy(偽っぽい値)があります。
そして、それを条件に処理を分けることも可能ですが、この点についても詳しくは別の学習で行います。

配列型(Array

配列については、別の学習で詳しく説明します。

同じ種類の値を複数まとめて扱う場合に、配列型を使用します。

例えば、学生の名前をまとめて扱いたい場合などです。
配列は角括弧([])内に、それぞれの値をカンマ(,)区切りで設定します。


console.log(['織田信長', '豊臣秀吉', '明智光秀']);  // (3) ["織田信長", "豊臣秀吉", "明智光秀"]
    

配列を用いることで、複数の値に同じ処理を施したり、複数の値を計算した結果を出力するなどのことができるようになります。

オブジェクト型(Object

オブジェクトについては、別の学習で詳しく説明します。

ある一つの物や対象についての値をまとめて扱う場合に、オブジェクト型を使用します。

先程の配列は学生の名前をまとめていましたが、オブジェクトは学生一人のより詳細なデータをまとめるような場合に使用します。
オブジェクトは波括弧({})内に、メンバ(またはプロパティ)名と値をコロン(:)区切りで設定し、複数のメンバをカンマ(,)区切りで設定します。


console.log({
    name: '織田信長',
    age: 16,
    gender: 'male',
});  // {name: "織田信長", age: 16, gender: "male"}
        

理解度チェック

  • 値によってそれぞれデータ型があるということが理解できましたか?
  • 文字列と数値の違いはなんですか?説明してください!

値と変数

値と変数

プログラミングでは、値をそのまま使用することはほとんどありません
多くの場合、変数に値を代入(だいにゅう)して、値の代わりに変数を使用します

変数というのは、値を格納する箱のようなもので、この箱の実態はコンピュータのデータを格納するメモリへの参照パスになります。(少し難しい単語が出てきましたが、今の所完璧に理解する必要はありません。)

つまり、変数を使用するというのは、変数に代入した値を使用することと同じです

変数には好きな名前を命名することができます。
また、JavaScriptでは、変数にはどんなデータ型でも代入することができます。

変数の宣言

変数を使うためには、まず変数を宣言する必要があります

JavaScriptでは、変数を宣言するために、letまたはconstを使用します

次の例で、letconstを使って変数を宣言してみます。


let count;
const maxCount = 4;
    

countmaxCountという変数名(識別子)で2つの変数を宣言したことになります。
これらの変数をログとして出力してみましょう。


let count;
const maxCount = 4;
console.log(count); // undefined
console.log(maxCount); // 4
    

変数countは、ただ宣言しただけで、何も値が設定されていない状態であるため、ログにはundefined(未定義)が表示されます。
変数maxCountは、宣言時に数値の4を設定しているので、ログには4が出力されます。

また、同じプログラムの参照範囲で同一の変数名を宣言しようとすると重複エラーとなります


let count;
let count; // Uncaught SyntaxError: Identifier 'count' has already been declared
    

代入について

変数に値を設定することを代入と言い、変数と値をイコール(=)で結ぶことで代入することができます

変数の宣言時に値を設定することを初期化と言い、初期化されていない変数は未定義undefined)となります

letで宣言した変数には何度でも値を代入することができ、代入するたびに値は上書きされます


let count = 100; // 初期化
console.log(count); // 100
count = 100 + 50;
console.log(count); // 150
count = 1;
console.log(count); // 1
    

constで宣言した変数は、初期化の時だけしか値を代入できないという制約があります
そのため、constの変数は初期化時の値から不変であることを約束されており、定数と呼ぶことがあります。


const maxCount;
console.log(maxCount);  // undefined
maxCount = 4; // Uncaught SyntaxError: Missing initializer in const declaration
        

次のように記述する必要があります。


const maxCount = 4; // 初期化
console.log(maxCount); // 4
    

変数の命名規則

変数名は、文字、またはアンダースコア(_)、ドルマーク($)から始まる必要があります。

文字は、英語の大文字と小文字を区別し、日本語の漢字や平仮名を使用することもできます。


const japan = '日本'; // 小文字の変数名
const JAPAN = '日本'; // 大文字の変数名
const _ja = '日本語'; // _から始まる変数名
const $_ja = '日本語'; // $から始まる変数名
const 日本語 = 'にほんご'; // 漢字の変数名
console.log(日本語); // にほんご
    

変数名は、誰が読んでも分かりやすい変数名を付ける必要があります

「自分しか読まないから大丈夫だ」と思っていても、3ヶ月後の自分はその時の自分とは別人レベルでコードを理解していません。

日本語で変数名を名付けることもできますが、それもお勧めしません。

なるべく英単語を組み合わせ、どんな値が設定されているのか分かりやすい変数名をつけるようにしましょう

未定義(undefined)とNull(ヌル: null

変数を宣言して初期化されていない状態はundefined(未定義)となります。

このundefinedは、JavaScriptにおいては「最初から存在しないもの」と同じ意味です。

また、null(ヌル: 何もない)という同じ様なニュアンスの値もありますが、nullはもともとある存在(値)を意図的に何もない状態に設定する場合などに代入して使用します。

理解度チェック

  • 変数を宣言し、初期化してください!
  • 初期化した変数をログとして出力してください!
  • letconstの違いについて説明してください!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。