第 3 回 JavaScript の文法 変数といろいろな値
JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
プログラムを書く上では「変数」はかかせません。
内容としては地味ではありますが、概念を理解しておけばこれから JavaScript を学習する上で役に立ちます。
変数とは
変数は、プログラムの中の値を保持するために使います。
JavaScript では次のように変数に数字や文字などを代入できます。これを変数宣言といいます。
|
|
これは x
に数値 1 を代入します、という意味で、変数宣言は例のように let
をつける必要があります。
変数の値は変更できますが、同じ名前の変数は再定義できません。
|
|
コンソールに表示させてみた例が下記です。
ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/
サンプルコード
記述ミスなどでうまく動作しないときのために、下の方にサンプルの実行環境も用意していますので必要に応じて利用してください。
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/c7L4hpgr/3/
ここでは変数を意図的に使いましたが、一度しか利用しない値なら、変数にいれる必要はありません。
|
|
ただし、消費税の計算のような、計算結果など使いまわしたい値がある場合には、変数に代入しておくと楽になります。
|
|
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/
変数と文字列の取扱の注意点
変数を使う場合、クオートで変数を囲んでしまうと変数名自体が文字列として認識されてしまうので注意してください。
|
|
定数
定数は const
キーワードを用いて定義します。
let
で定義する変数と同様に値を保持できます。
定数の値は再代入による変更や、再宣言ができません。
しかし、定数を使用することで「コードの途中でうっかり値を変更してしまう」というミスを減らすことができます。
基本的には const
を使い、const
で実装できないときのみ let
を使いましょう。
|
|
もっと詳しくしりたい場合は
長くなるので必要最低限の説明になりましたが、もっと詳しく知りたい場合は次のリンクを参考にしたり、ご自身で調べて見るのがいいでしょう。
MDN Web docs:
文法とデータ型
まとめ
まずは数値と文字列の使い方を覚えておけば問題ありません。
「他にもいろいろなデータが扱えるのだな」くらいに、頭の片隅に置いといてください。
気楽にいきましょう。
- 変数を使って値を保持できる。
- JavaScript では、さまざまなデータの種類(リテラル)を扱うことができる。