• Home
  • Web制作
  • 【JS入門】初心者のための変数ガイド！基礎から使い方まで徹底解説

【JS入門】初心者のための変数ガイド！基礎から使い方まで徹底解説

schedule
Tags: JavaScript

JavaScriptの変数とは？ なぜ重要なの？

プログラミングの世界へようこそ！JavaScriptを学ぶ上で、最初に理解する必要がある要素の一つが「変数」です。変数をマスターすることは、JavaScriptを自由自在に操るための第一歩と言えるでしょう。

変数はデータの入れ物

想像してみてください。あなたはたくさんの情報を整理するために、ラベル付きの箱をいくつか用意しました。この箱に、名前や数字、住所など、様々な情報を書き込んだメモを入れていきます。

JavaScriptにおける変数とは、まさにこの「ラベル付きの箱」のような役割を果たします。変数には、数値や文字列、オブジェクトなど、様々な種類のデータを格納することができます。

変数を使用するメリットはたくさんあります。

  • プログラムを読みやすくする: 変数にわかりやすい名前を付けることで、コードの意味が理解しやすくなります。
  • コードの再利用性を高める: 一度変数に値を代入しておけば、同じ値を何度も記述する必要がなくなります。
  • 複雑な処理を簡略化する: 変数を用いることで、計算結果を一時的に保存したり、条件に応じて処理を変更したりすることが容易になります。

変数の宣言：let、const、var

JavaScriptで変数を扱うためには、「変数の宣言」が必要です。変数の宣言とは、プログラムに変数を使用することを伝える行為です。変数を宣言する際には、let、const、varのいずれかのキーワードを使用します。

  • let: 再代入可能な変数を宣言します。状況に応じて値を変更する必要がある場合に使用します。
  • const: 再代入不可能な定数を宣言します。一度値を代入したら、その後変更することができません。
  • var: 古いバージョンのJavaScriptで使用されていた変数宣言方法です。現在では、letまたはconstを使用することが推奨されています。

では、それぞれのキーワードを用いた変数宣言方法と、具体的な例を見ていきましょう。

1. letを使った変数宣言

letキーワードを用いると、再代入可能な変数を宣言することができます。

構文:

let 変数名;

例:

let userName; // userNameという名前の変数を宣言
userName = "田中太郎"; // userNameに文字列"田中太郎"を代入
console.log(userName); // コンソールに"田中太郎"と表示される

userName = "佐藤花子"; // userNameに文字列"佐藤花子"を再代入
console.log(userName); // コンソールに"佐藤花子"と表示される

2. constを使った変数宣言

constキーワードを用いると、再代入不可能な定数を宣言することができます。定数とは、一度値を代入したら、その後変更することができない変数のことです。

構文:

const 変数名 = 値;

例:

const PI = 3.1415926535; // PIという名前の定数を宣言し、値を代入
console.log(PI); // コンソールに3.1415926535と表示される

PI = 3; // エラーが発生。constで宣言した定数は再代入できない

3. varを使った変数宣言

varキーワードは、古いバージョンのJavaScriptで使用されていた変数宣言方法です。

varキーワードを用いると、letと同様に再代入可能な変数を宣言することができます。ただし、letとvarではスコープと呼ばれる概念に違いがあります。

現在では、特別な理由がない限り、letまたはconstを使用することが推奨されています。

構文:

var 変数名;

例:

var age = 20; // ageという名前の変数を宣言し、値を代入
console.log(age); // コンソールに20と表示される

age = 25; // ageに25を再代入
console.log(age); // コンソールに25と表示される

変数の命名規則：わかりやすさと一貫性を

変数に名前を付ける際に、いくつかのルールと推奨事項があります。

  1. 使用できる文字: アルファベット、数字、アンダースコア(_)、ドル記号($)を使用できます。
  2. 最初の文字: 数字から始めることはできません。
  3. 予約語の禁止: JavaScriptで特別な意味を持つ予約語 (例: let, const, var, if, elseなど) を変数名として使用することはできません。
  4. 大文字と小文字の区別: JavaScriptでは、大文字と小文字が区別されます。例えば、userNameとusernameは異なる変数として扱われます。
  5. キャメルケース: 変数名は、一般的にキャメルケースで記述します。キャメルケースとは、単語の区切りを大文字で表す記法です。例えば、userFirstNameのように記述します。
  6. 意味のある名前: 変数名には、その変数がどのようなデータを格納しているかを明確に表す、わかりやすい名前を付けるように心がけましょう。

変数を使いこなして、JavaScriptの世界を広げよう！

変数は、JavaScriptプログラミングの基礎中の基礎です。変数を理解することで、より複雑なプログラムを作成できるようになり、JavaScriptの世界が大きく広がります。

本記事で紹介した内容を踏まえて、実際にコードを書いてみたり、他の教材を活用しながら、JavaScriptの学習を進めていきましょう。

関連記事