JavaScriptの変数を学ぼう

変数は、JavaScriptのみならず、プログラミング言語を学ぶうえで基礎となる部分です。

変数含め、関数、引数は合わせて「プログラミングの3大要素」とよばれています。

この記事を通し、変数についてマスターしましょう！

変数とは

変数とは、端的にいうと「数値やデータの値を入れることができる箱」です。

箱に名前をつけて、その中に数値やデータを入れておくことで、その内容を保管しておくことができるのが変数です。

変数の役割

JavaScriptでは、外部からデータを読み込んだり、複雑な計算をすることがあります。

そして、そこから得られた値をプログラム内で何度も活用する、といったケースが多いです。このとき同じ読み込みや計算を何度も行うと処理に時間が掛かってしまったり、負担がかったりします。

そこで、外部から読み込んだデータや複雑な計算結果を保管できるようになれば、保管した値を表示することで再度同じ処理をやる必要がなくなりますね。これを実現できるのが変数なのです。

変数に得られた値を保管しておけば、それからはその変数名を記述するだけでその値を呼び出すことができます。

変数の定義および変数の呼び出し

次に、実際に変数をどのように使うのかを見ていきましょう。

変数には「変数の定義」と「変数の呼び出し」という行為が存在します。

変数の定義

変数を作成する行為を「変数の定義」といいます。

実際にコードで書き表すと、以下のようになります。

let name;

上記のコードを、分解しながら解読していきましょう。

let について

letは、変数を宣言するためのワードです。詳細は次章で説明いたします。

name について

これは、今回定義した「変数の名前」です。今回、名前を保管する変数を作成したかったのでわかりやすくnameと名付けています。

実際に「変数の名前」を設定する際、どんな名前をつけても問題がありませんが、「その変数に入る値が、なんの値なのかを英子文字で表す」のが一般的です。

; について

最後の;は、変数の定義が終了したことを示します。文章の句点のようなものです。

定義した変数に対して数値やデータの値を入れて保管したい場合、以下のように書きます。

let name; 
name = "石田です。";

ここで= “石田です。”;は変数に入れたい値を指定しています。変数に値を入れることを、「代入する」といいます。

= について

=は、「この後に書かれる値を代入しますよー」ということ表す記号になります。算数や数学では=は等号を示しますが、プログラミングでは全く違う意味になるので間違えないようにしましょう。

"石田です。"について

"石田です。"は、今回変数に代入したい値です。今回のように、テキストを代入したい場合は、""（ダブルクォーテーション）で囲うのがルールとなっています。

また、以下のコードのように、定義した変数の中にあらかじめ数値やデータの値を入れて保管することもできます。

let name ="石田です。";

変数の呼び出し

変数に代入した値をプログラムの中で使用することを、「変数の呼び出し」といいます。

以下のコードでは、実際に「変数の呼び出し」を行っています。

ここで、console.log()は、()内に記述した内容をブラウザのコンソール画面に表示することができるコードです。

console.log(name);

このように、変数を定義すると、その後その変数名を記述するだけで、変数内の値を呼び出すことができます。

変数の宣言

前節で登場したletのように、変数を定義する際には必ず「変数の宣言」を行います。

「変数の宣言」とは、「これから変数を定義します。」という宣言をすることです。

宣言の仕方は、letの他に計3種類あり、それらによって変数の性質が変わります。

以下に、それぞれの意味について示していきます。

let

letを使用すると、宣言した変数の値を、もう一度代入することができます。

例えば、以下のコードのように変数を定義したとします。

let name = "石田です";

let name = "石田です";
name = "山本です"; //ここでnameの値が、"石田です"から"山本です"に変更します

var name = "石田です";
name ="山本です"; //ここでnameの値が、"石田です"から"山本です"に変更します

var name = "石田です";
var name ="山本です"; //ここで値が、"石田です"から"山本です"に変更します

let name = "石田です";
let name = "山本です"; // => SyntaxError: redeclaration of let name

const name = "石田です";
name = "山本です"; // => TypeError: invalid assignment to const 'name'
const name = "山本です"; // => TypeError: invalid assignment to const 'name'

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー