なるべくやさしくJavaScript -4.変数の基礎をわかりやすく

はじめに

福岡のホームページ制作・SEO対策の株式会社スゴヨクです。

JavaScriptを扱うにあたって欠かすことのできない変数について解説していきます。変数を自在に操ることができるようになれば、プログラミング初心者を抜け出す第一歩になります。なるべくわかりやすく、なるべく丁寧に説明していきます。

（この記事はすでにHTML・CSSの知識があって、そこにJavaScriptを加えたいなという方向けのものです。）

変数とは

そもそも

JavaScriptをはじめとしたプログラミング言語で見られる「変数」とは、任意の文字列・数値・配列などに名前をつける（＝変数の宣言）ことで、それらの代わりに繰り返し使えるようにするものです。

たとえば、以下のように使用することができます。

どうして変数を使うのか？

上記のような使用例では、なぜわざわざ変数を使う必要があるのかという疑問を抱く人もいるでしょう。変数を宣言してから出力を行うという二段階の動きを踏まずとも、【console.log(“こんにちは”);】という記述だけでももちろん同じ結果が得られます。

しかし、もっともっと長いプログラムを組み立てる際に、変数を使わずに何度も同じ文字列や数値を繰り返し使用していると、後からこれらのデータの変更が必要になった場合にはそのすべての記述を書き換えなければなりません。一方で、変数を使っていれば、その変数の宣言を行っている箇所を書き換えるだけで済ませることができます。

また、とても長い文字列やHTML要素を扱う際にも、複雑な記述を何度も書くよりも一度変数に収めてしまうほうが楽ちんです。

変数の使い方と宣言

変数を使用する際には「宣言」と呼ばれる記述が必要です。逆に言えば、変数は宣言を行わなければ使用することができません。

変数の宣言とは、この変数名を使ってこのデータ（文字列や数値）を取り扱いますよ、というのをコンピューターに伝えています。言い換えると「変数を定義」しています。誰しも一度は目にしたことがある「”変数名” is not defined」はこの宣言がなされていない、またはスペルミスや処理の順番（宣言より前に変数を使っているなど）のミスが原因だと考えられます。

JavaScriptの変数宣言は以下のような書き方で行います。

JavaScriptの変数宣言には3種類のキーワード「var・let・const」が用意されており、それぞれに異なる特性を持っています。自分がこの変数を用いてどのような処理を行うかによって適切に使い分ける必要があります。上記の「var・let」のように、宣言だけを先に行うこともできますが、「const」のように変数の宣言とともに初期値を設定することもできます。この3種類の「var・let・const」の違いについてはまた次回以降に詳しく取り上げます。

おわりに

JavaScriptの変数を自在に扱うことができるようになれば、ループを使った複雑な処理を扱うことや、他の人が書いたコードの解読もぐんと理解しやすくなります。すこしずつすこしずつ理解していきましょう。

勉強中の方、JavaScript駆け出しの方の参考にしていただけたら幸いです。