javascript

【javascript】変数とは?宣言や代入、初期化について初心者向けに徹底解説!

変数と定数

 

変数とは?

を入れておく箱のようなもの で、主に「数値」や「文字列」等を使い回すときに使用します。

javascriptの変数

例えば、100円のアイスクリームの税込み価格を計算する場合、

と計算しますが、他の商品の計算でも使い回しができる「1.1」を変数に入れて使用することにより、

複数の商品の税込み価格を計算する場合や、後で税率などの変数自体が変わる場合に役立ちます。

1つずつ数字を打ち替えてると、どこかでミスしそうだもんね。

 

また、変数には名前をつけることができます。

先ほどの変数に「tax」と命名することで、他の人がコードを見たときに「この数字は税率だよ!」ということを伝える役目も果たします。

 

このように、中身が変わる「変数」に対し、中身が変わらない「定数」というのものも存在します。

変数と定数

 

この記事では

変数定数使い方や、名前をつける際の注意点など、学習していく上で、初心者の方がつまずきやすい部分を解説していきます。

 

できるだけわかりやすく解説するので、ぜひ最後まで読んでみて下さいね!

目次

変数の宣言変数の代入変数の初期化

定数の宣言変数の命名規則




 📖目次に戻る

変数の宣言

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

変数の宣言は以下の構文のように、「let」というキーワードに続けて「変数名」を書いて行います。

 

構文

let 変数名;

例文

let tax;

注意ポイント

letで変数を宣言した後、同じ階層で再宣言するとエラーになるので注意してください。

 

しかしこれだけでは、中身が空っぽの箱を用意しただけで、使うことが出来ません。

変数を使用するには、変数の中に値を入れる必要があります。

それが次に紹介する変数への値の代入です。

 

ちなみに、値の入っていない変数には、未定義値の「undefined」が入ってるよ。

 📖目次に戻る

変数への値の代入

変数を宣言した後は、変数に値の代入をする必要があります。

代入は=(イコール)記号を使用して行います。このイコールは代入演算子と呼ばれる演算子の一つで、右辺の値を左辺の変数に代入します。

 

構文

変数名 = 値;

例文

let tax;  //変数の宣言

tax = 1.1;  //値の代入

また、同じ変数に再度「値」を代入することも可能です。

このような2回目以降の代入のことを再代入と呼びます。

例文

let tax;

tax = 1.1;

tax = 1.2;  //再代入

この場合は、先に代入されていた値「1.1」が上書きされ「1.2」に置き換わります。

でも、変数の「宣言」「代入」同時にできたら便利だよね。

それが次に紹介する「変数の初期化」だよ。




 📖目次に戻る

変数の初期化

変数の宣言と、変数の代入を同時に行うことを変数の初期化と言います。

 

構文

let 変数 = 値;

例文

let tax = 1.1;

変数を使用するときは、基本的に宣言と同時に値を代入するよ。

 📖目次に戻る

定数の宣言

再代入することで中身の「値」を変更できる「変数」に対し、値を変えたくない場合に使用するのが「定数」です。

先ほどの式で言うと、商品の値段を変える予定がない場合などは定数を使用します。

 

定数の宣言は、変数で使用した「let」と違い、「const」を使用して行います。

構文

const 定数名 = 値;

例文

const ice_cream = 100;
const reamen = 550;
const pizza = 2000;

注意ポイント

「const」の宣言をする場合は、同時に値を代入する必要があります。

 

定数の最大の特徴は、「あとで値を代入することが出来ない」というところにあります。

「const」を宣言した後に、再代入を行うとエラーが発生します。

しかし、この特徴を利用して予期せぬ書き換えによるバグを防ぐことができるので、基本的には「const」を使用して、再代入する予定があるときだけ「let」を使用します。

 

変数と定数の特徴をまとめると次の表の通りです。

変数定数
宣言方法letconst
再代入できるできない
ルール宣言と同時に値を代入

 

コードが長くなったり、複数人で作業するときは、気をつけないとね。

 📖目次に戻る

変数の命名規則

変数には使用できる文字に制限があったり、命名規則が存在します。

変数に名前をつける際は以下のことに気をつけましょう。

 

命名規則

使用できる文字

  • 「 a ~ z 」(アルファベット)
  • 「 _ 」(アンダースコア)
  • 「 $ 」(ドルマーク)
  • 「 0 ~ 9 」(数字) ※命名ルールに注意

命名ルール

  • 数字1文字目に使用できません。また、数字のみの変数名をつけることはできません
  • 予約語(別の目的のために予め用意された文字列)と同じ名前は使用できません

 

予約語

使用できない予約語を以下にまとめました。(下記のリンクを参考にしています。)

Standard ECMA-262 5.1 Edition / June 2011 ECMAScript® Language Specification

breakdoinstanceoftypeof
caseelsenewvar
catchfinallyreturnvoid
continueforswitchwhile
debuggerfunctionthiswith
defaultifthrow
deleteintry

 

将来の予約語

classenumextendssuper
constexportimport

 

厳格モードで将来の予約語とみなされる予約語

implementsletprivatepublicyield
interfacepackageprotectedstatic

 

ただし、「do」と「break」を組み合わせた「dobreak」など、複数の予約語他の文字と組み合わせた場合は使用できるよ。

あくまで単体では使用できないってことだよ。

📖目次に戻る

最後に

いかがでしたでしょうか、今回はjavascriptの基本である「変数」について解説しました。

変数はまだまだ奥が深く、使用できる範囲(スコープ)が決まっていたりと今回の記事だけでは紹介しきれなかった特徴があります。

もっと詳しく学習したい方は、下の記事一覧から他の記事もご覧下さい。

Javascript

javascriptの基本的な使い方について解説した記事一覧ページです。
イラストを交えてやさしく解説していますので、ぜひご覧ください。

最後までお読みいただき、ありがとうございました!



-javascript
-