【入門編3】JavaScriptで変数を扱ってみよう

JavaScript入門

今回はJavaScriptの変数について解説します。

JavaScriptでは変数を使い、データを一旦格納し、別の箇所で使うことが可能です。

本記事では変数とは何か、変数の具体的な使い方を解説します。

加えて、代入演算子、単項演算子の使い方に関しても併せて触れていきましょう。

変数を理解することで、JavaScriptのコードが少し読めるようになるかもしれません。

JavaSciprtの変数とは?

変数とはデータを入れておく箱のようなものです。

箱には必ず名前を付けます。

この名前を変数名と呼びます

たとえば、以下のように変数名を指定します。

var a = 2;

変数には、数値や文字列など、あらゆるデータを入れることが可能です。

変数にデータを入れることで、プログラム内でデータを利用することができます。

変数を使った方が、読みやすいソースコードになります

また、プログラムを修正する際、変数を使えば書き換えが楽になります

このような理由で、変数は必ず使われているのです。

JavaSciprtの変数の使い方

JavaScriptの変数の使い方をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var a = 2;
var b = 3;
document.write(a + b);
</script>
</body>
</html>

○実行結果

上記では「a」と「b」という変数にそれぞれ数値を格納しています。

JavaScriptでは変数を使う場合、「var 変数名 = 値」と書きます

「document.write(a + b);」によって、変数同士を足し算しています。

aには2、bには3が格納されていたので、それらが足されて「5」が出力されます。

このように変数名を指定することで、中のデータを取り出すことが可能です。

もう1つ例をみていきましょう。

○コード例

<script>
var a = 2;
var b = a + 3;
document.write(b);
</script>

○実行結果

上記では変数aに2を格納しています。

その次に、変数bに「a+3」を格納しています。

このように、変数と数値を足し算することも可能です。

また、足し算したデータを別の変数に格納できます。

代入演算子、単項演算子の使い方

今後は、代入演算子、単項演算子をみていきましょう。

代入演算子を使うと、変数に格納された数値を簡単に変更することが可能です。

単項演算子も同様に、数値に足したり引いたりできます。

代入演算子と単項演算子の具体的な使い方をみていきましょう。

代入演算子で変数の値を変更する

代入演算子とは、変数に対し値を代入するため演算子のことです。

代入演算子は次のように使います。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var a = 2;
a += 2
document.write(a);
</script>
</body>
</html>

○実行結果

変数aには2が格納されています。

その次の行で、代入演算子「+=」によって変数aに2がプラスされています。

よって、document.writeでの表示結果は4になるのです。

このように代入演算子を使うと、変数の値を増やすことが可能です。

ちなみに代入演算子を使わなくても「a = a + 2」と書けば、同じ処理ができます。

ただ、代入演算子の方がコード量が短くて済むのです。

また代入演算子「-=」を使うことで、変数の値を減らすこともできます。

○コード例

<script>
var a = 2;
a -= 2
document.write(a);
</script>

○実行結果

2から2が引かれて、0になりました。

単項演算子で変数の値を変更する

続いて、単項演算子の使い方を紹介します。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var a = 2;
a++;
document.write(a);
</script>
</body>
</html>

○実行結果

単項演算子を使う場合、「{変数名}++」とします

こうすることで、変数の値に「+1」がされます。

上記の例では、変数aに2が格納されており、単項演算子によって「+1」され、「3」が表示されます。

数値に「+1」したい場合は、単項演算子の方が便利です。

ただし単項演算子では「+2」や「+3」はできません

また「+1」ではなく「-1」したい場合は次のようにします。

○コード例

<script>
var a = 2;
a--;
document.write(a);
</script>

○実行結果

単行演算子「–」によって「-1」され、「1」が表示されました

こちらも単に「-1」したい場合に便利です。

後ほど詳しく解説しますが、単項演算子はwhileでのループ処理で使うことになるので、覚えておきましょう。

まとめ

本記事ではJavaScriptで変数を使う方法、を解説しました。

変数を使うと、コード全体がすっきりします。

今回は短いコードを紹介しましたが、長いコードになると、より変数の便利さがお分かり頂けるかと思います。

コード量が増えると、どこに何の記述があるか分かりにくくなるので、変数を正しく使うようにしましょう

また、代入演算子や単項演算子も覚えておくと便利です。

次回は、JavaScriptでalertを出す方法について解説します。

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました