第 3 回 JavaScript の文法 変数といろいろな値

著者名:村濱一樹(kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

プログラムを書く上では「変数」はかかせません。
内容としては地味ではありますが、概念を理解しておけばこれから JavaScript を学習する上で役に立ちます。

変数とは

変数は、プログラムの中の値を保持するために使います。
JavaScript では次のように変数に数字や文字などを代入できます。これを変数宣言といいます。

1
2
// 変数xを宣言
let x = 1;

これは x に数値 1 を代入します、という意味で、変数宣言は例のように let をつける必要があります。
変数の値は変更できますが、同じ名前の変数は再定義できません。

1
2
3
4
5
6
7
8
9
// 変数 x を宣言
let x = 1;

// 値の変更は可能
x = 2;

// 変数 x を再び宣言しようとするとエラー!
// 一度宣言した変数は再宣言できません
let x = ;

コンソールに表示させてみた例が下記です。
ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/ (External link)

サンプルコード

記述ミスなどでうまく動作しないときのために、下の方にサンプルの実行環境も用意していますので必要に応じて利用してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// xに1を代入しコンソールに表示
let x = 1;
console.log(x);

// xに2を代入し直しコンソールに表示
x = 2;
console.log(x);

// 計算式の代入も可能(2+4×8)
x = 2 + 4 * 8;
console.log(x);

// y に 12345 を代入。初回なのでletを使う。
let y = 12345;
console.log(y);

// x に文字列 abc を代入しコンソールに表示
x = 'abc';
console.log(x);

サンプルの実行環境

https://jsfiddle.net/kintone/c7L4hpgr/3/ (External link)

ここでは変数を意図的に使いましたが、一度しか利用しない値なら、変数にいれる必要はありません。

1
2
console.log('abc'); // 文字列を変数にいれずにダイレクトにコンソールに表示
console.log(2 + 4 * 8); // 計算結果を変数にいれずにダイレクトにコンソールに表示

ただし、消費税の計算のような、計算結果など使いまわしたい値がある場合には、変数に代入しておくと楽になります。

1
2
3
4
5
let z = 1.08; // 消費税

console.log(100 * z); // 毎回1.08と入力しなくてよい
console.log(200 * z);
console.log(300 * z);

JavaScript で扱える値

変数に代入できるものは数値や文字列だけではありません。
JavaScript では次のような値を扱うことができます。
今後サンプルを通して数値や文字列以外の値も学ぶので、現時点ですべて覚える必要はありません。
まずは前述の例のとおり、数値と文字列から使いこなすようにしましょう。
このように、プログラム上で利用できる値のことを「リテラル」といいます。

数値

123 のような整数や、0.123 のような小数を扱えます。マイナス値ももちろん使えます。

文字列

abcはじめようJavaScript などの文字です。 実際に利用するときにはシングルクオート ' やダブルクオート " でくくる必要があります。

真偽値(ブーリアン値)

true(真)と false(偽)を表現します。
「はい、いいえ」「Yes、No」のように、2 種類しかない値です。

配列

['apple', 'orange', 'banana'] のように宣言します。複数の値を一度に扱うことができます。
具体的な使い方は今後学んでいきます。

オブジェクト

{a: 100, b:200, c:300} のように宣言します。配列同様、複数の値を一度に扱うことができます。
具体的な使い方は今後学んでいきます。

サンプルコード

実際に、上記のリテラルをコンソールに表示してみると次のようになります。
https://jsfiddle.net/kintone/j5wtgsxb/1/ (External link)

変数と文字列の取扱の注意点

変数を使う場合、クオートで変数を囲んでしまうと変数名自体が文字列として認識されてしまうので注意してください。

1
2
3
let x = 'こんにちは';
console.log(x); // こんにちは と表示される
console.log('x'); // x と表示される(文字列として認識される)

定数

定数は const キーワードを用いて定義します。
let で定義する変数と同様に値を保持できます。
定数の値は再代入による変更や、再宣言ができません。
しかし、定数を使用することで「コードの途中でうっかり値を変更してしまう」というミスを減らすことができます。
基本的には const を使い、const で実装できないときのみ let を使いましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// 定数 x に 1 を代入しコンソールに表示
const x = 1;
console.log(x);

// 定数 x に 2 を代入しようとするとエラー!
// 一度宣言した定数の値は変更できません
x = 2;

// 定数 x を再び宣言しようとしてもエラー!
// 一度宣言した定数は再宣言できません
const x = 3;

もっと詳しくしりたい場合は

長くなるので必要最低限の説明になりましたが、もっと詳しく知りたい場合は次のリンクを参考にしたり、ご自身で調べて見るのがいいでしょう。
MDN Web docs: 文法とデータ型 (External link)

まとめ

まずは数値と文字列の使い方を覚えておけば問題ありません。
「他にもいろいろなデータが扱えるのだな」くらいに、頭の片隅に置いといてください。
気楽にいきましょう。

  • 変数を使って値を保持できる。
  • JavaScript では、さまざまなデータの種類(リテラル)を扱うことができる。