【JavaScript入門】JavaScriptの変数と定数を学ぼう

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptの変数と定数を学びます。

変数と定数はプログラミングにおいて重要な概念です。

JavaScriptだけてなく、他のプログラミング言語でも必ず使います。

本題に入る前に、「変数」を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「003 変数と定数」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

変数ってなに

まずは、「変数」について見ていきましょう。

「変数」とは、プログラムの中で使う値を入れておく「箱」 のことをいいます。

ここでいう値とは、文字や数値などのデータを指します。

「変数」に値を入れることを、代入と言います。

代入することによってその値を繰り返し使うことができます。

変数の書き方

変数を書くにはまずは、宣言 をする必要があります。

宣言をして、変数の名前を書いてから値を代入します。

では、実際にJavaScriptの変数の書き方を見てみましょう。

let apple = "りんご"

これは、変数「apple」に「りんご」という文字を「代入」 しています。

「let」はこれから変数を書きますよという「宣言文」です。これを書くと、コンピュータはこれが変数だと解釈します。

「変数の名前」は「箱」の名前で、「値」は変数に代入するデータです。

「変数の名前」と「値」は任意の名前やデータを入れることができます。

次の例では、変数orangeに「オレンジ」という文字を代入しています。

let orange = "オレンジ"

変数の値を書き換える

一度、宣言した変数の値は書き換えることができます。

変数appleに数値のデータを入れてみましょう。

let apple = 1

これは、「1」というデータを変数appleに代入しています。

では、この変数の値を　「100」に変えてみましょう。

apple = 100

書き方は、変数を宣言したときとほとんど同じですが、「let」がありません。

変数は一度宣言をすれば、そのあとは宣言文を書かなくても値を書き換えることができます。

変数を書いてみよう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「変数を書いてみよう」と記述がされています。

その真下に、次のような変数を書いてください。

必ずタイピングして手を動かして書きましょう。

// 変数を書いてみよう
let apple = "りんご"
let orange = "オレンジ"
let lemo = "レモン"
let peach = "もも"

let japan = "日本"
let america = "アメリカ"
let korea = "韓国"

let first = 1
let second = 2
let third = 3
let forth = 4
let fifth = 5
let hundred = 100
let thousand = 1000

変数を使う意味ってなに

さて、変数の書き方を学びましたが、変数は何のために使うのでしょうか。

変数は、値を「変数」という「箱」に入れて、それを 繰り返し使うため にあります。

例を見てみましょう。

次の例は、コンソールに「こんにちは」という文字を出力しています。

console.log("こんにちは")
console.log("こんにちは")

しかし、2回も「こんにちは」と書くのはあまり効率がよくありませんね。

これを変数を使って、書き換えてみましょう。

let message = "こんにちは"
console.log(message)
console.log(message)

「message」という変数を作り、「こんにちは」を代入しています。

「console.log」は受け取った変数の値を出力することができるので、同じように「こんにちは」を出力します。

このように変数を作ることによって、同じ値を繰り返して使うことができます。

もう一つ例を見てみましょう。

次の例は、「1+1」の計算結果をコンソールに出力しています。

console.log(1 + 1)

コンソールに出力されるのは、「2」ですね。

これを変数に書き換えてみましょう。

let result = 1 + 1
console.log(result)

「result」という変数を作り、計算結果を代入しています。

「result」変数に入っている値は「2」ですね。

なので、コンソールには同様に「2」が出力されます。

変数をコンソールに出力してみよう

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「変数をコンソールに出力してみよう」と記述がされています。

その真下に、次のような変数を書いてコンソールに出力させてみましょう。

// 変数をコンソールに出力してみよう
let name = "私の名前は太郎です"
console.log(name)

let age = 20
console.log(age)

let email = '[email protected]'
console.log(email)

let phone = 'iPhone X'
console.log(phone)

phone = 'iPhone X Pro'
console.log(phone)

書き終わったら、「スタート」フォルダの「index.html」をChromeで開いてみましょう。

コンソール画面に記述した変数が出力されているのが確認できます。

最後の「phone」変数は、値を書き換えているので注意しましょう。

変数のルール

変数の書き方や意味について学びましたが、変数を書くにはいつくかのルールがあります。

まずは、使うことのできる変数の名前について見ていきましょう。

使うことのできる変数の名前

使うことのできる変数の名前は主に次のようなものです。

例を見てみましょう。

次の例は、全て変数の名前にすることができます。

// 半角のアルファベット
let apple = "りんご"

// 半角のアルファベットと数字の組み合わせ
let orange1 = "オレンジ"

// _ (アンダースコア)
let my_name = "太郎"

// $ (ダラー)
let $age = 20

漢字なども変数の名前にすることができますが、アルファベットにするのが一般的なので覚えておきましょう。

使うことのできない変数の名前

では次に、使うことのできない変数の名前を見ていきましょう。

次のものは変数の名前にすることはできません。

// 数字のみは禁止
let 1111 = 1111

// 先頭が数字は禁止
let 1name = 1

// 予約語は禁止
let break = 200

予約語とは

予約語とは、JavaScriptで既に別の用途で使われているキーワードです。

予約語は次のようなキーワードです。

break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

このキーワードは、変数の名前にすることができないので注意しましょう。

変数の名前は何でもいいの？

変数の名前は、「半角のアルファベット」、「半角のアルファベットと数字の組み合わせ」「_ (アンダースコア)」、「$ (ダラー)」などを使うことができます。

上記の組み合わせなら何でも名前にすることができるのですが、変数の名前には 意味を持たせる ことが推奨されています。

例えば、次のような変数を見てみましょう。

console.log(a)

コンソールに「a」という変数を出力しています。

しかし、これを見ただけで「a」という変数に何が入っているか分かるでしょうか。

コンソールの出力画面を見るまでは一体何が入っているか見当がつきません。

では、次の例を見てましょう。

console.log(name)

「name」という変数をコンソールに出力しています。

「name」なので、おそらく名前に関するデータが入っているのだなと推察できます。

このように、変数の名前にはなるべく意味を持たせて、それにふさわしい値を入れるのがいいでしょう。

定数とは

変数について学びましたが、次は「定数」について見ていきましょう。

「定数」とは、変数と同様に値を入れる「箱」になります。

変数と同様に、値を繰り返し使う目的で使われます。

では、変数とはなにが違うのでしょうか。

定数と変数の違い

定数と変数の違いは、値を書き換えられるか書き換えられないか の違いです。

定数では、一度代入した値を 書き換えることができません。

定数の書き方

では、定数の書き方を見てみましょう。

const apple = "りんご"

定数には、「let」の代わりに「const」を使います。

宣言分に「const」と書くことによって、コンピュータはこれが定数だと解釈します。

定数は、値を書き換えることができないので次のように再代入をすることはできません。

const apple = "りんご"
// 再代入はダメ！
apple = "アップル"

定数を使う意味ってなに

定数の書き方について学びましたが、定数を使う用途は何でしょうか。

定数は一度入れた値を変えることができないという特徴から、固定の値を入れる ときに使われます。

例えば、次の例では名前を変数として定義しています。

let name = "山田太郎"

あるプログラムの中で、この名前が住民票の名前に使われるとします。

もし、なんらかのバグで次のように名前が書き換えられてしまいました。

name = "鈴木一郎"

本来なら、「山田太郎」さんなのに、「鈴木一郎」さんで住民票に登録されてしまいました。

しかし、これを変数から定数に変えるとどうでしょう。

const name = "山田太郎"

定数は一度入れた値を書き換えることができないので、「name」という定数はずっと「山田太郎」さんになります。

このように 変更されないべき値を使う 時は、定数を使うのがいいでしょう。

定数が使われることが多い

実際の開発の現場だと、定数が使われることが圧倒的に多い です。

なぜなら、定数は意図せぬ変更を防ぐことができるからです。

知らないところでいつの間にか値が変わると、バグの要因になる可能性が高いです。

なので、基本的には定数を使って、値の変更が許容できるときだけ変数を使うのがいいでしょう。

定数をコンソールに出力してみよう

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「定数をコンソールに出力してみよう」と記述がされています。

その真下に、次のような定数を書いてコンソールに出力させてみましょう。

// 定数をコンソールに出力してみよう
const book = "本"
console.log(book)

const pencil = "鉛筆"
console.log(pencil)

const pen = "ペン"
console.log(pen)

const desk = "つくえ"
console.log(desk)

const number = 1 + 1
console.log(number)

書き終わったら、「スタート」フォルダの「index.html」をChromeで開いてみましょう。

コンソール画面に記述した定数が出力されているのが確認できます。

今までの変数の書き方

「let」と「const」について見てきましたが、以前は変数を書く際には「var」という宣言文が使われていました。

var apple = "りんご"

最近だと、「var」は使われなくなりつつあるので積極的に「let」と「const」を使いましょう。

まとめ

本章では、JavaScriptの変数と定数を解説しました。

最後にもう一度、重要なことを確認しましょう。

次章は、JavaScriptの条件式について解説します。