変数やデータの型について学ぶことは、プログラミングにおける最初の一歩です。
JavaScriptでも当然これらは大切な基礎知識となっています。
データ型の違いやその特徴を知り、変数を使いこなせるようになりましょう!

JavaScriptのスキルを身につけてWebエンジニアとして活躍したいなら、約15.5万の講座の中から自分に合ったものを探せるこちらのサービスがおすすめです。
習得したいスキルに合わせてプロのエンジニアが解説する動画で効率的な学習ができます!
フロントエンドエンジニアになりたい人の Webプログラミング入門

変数と定数

プログラミングではデータを処理することで様々な出力結果を得ることを目的として、コンピュータに対する命令文を記述します。
データは様々な操作が加わることで、その内容が変化していきます。

プログラム中では、これらのデータに名前を付けて取り扱います。
名前を付けたデータのことを変数定数と呼びます。
また、この名前のことを識別子といい、基本的に自由につけることができます。
ただし、識別子にはアルファベットしか使えず、プログラムの中で特別な意味を持つ単語(予約語)を使うことはできません。

たかが名前と軽視しがちですが、プログラミングにおいてネーミングセンスは非常に重要です。
わかりやすい識別子はコードの可読性を大きく向上させます
識別子の命名規則については後述します。

変数や定数はデータを入れておくための入れ物のようなイメージです。
変数は箱のようなもので、途中で中身を入れ替えることもできます。
定数は鍵付きの箱のようなもので、最初に入れた中身を変更することはできません。

変数や定数を利用するための、JavaScriptの具体的なプログラムを見てみましょう。

変数

変数に対して行う基本的な操作は、宣言・初期化・代入の3つです。
また、プログラム中で変数名を記述すれば、その時の変数の値を参照することができます。

宣言

変数を宣言する方法は簡単で、letキーワードの後ろにつなげて変数名を指定します。
また、コードの後ろについているセミコロン( ; )は文章の句点(。)と同じ意味で、「ここでひとつの命令が終わりですよ」という目印になっています。

変数宣言を行うことで、それ以降プログラム中でその変数を使用することができるようになります。

let price;

初期化

変数を宣言するときに、初期値値を指定しておくことができます。
これを変数の初期化といい、宣言と同様に扱われることも多いです。

let greet = "Hello";

ここで注意すべき点はイコール記号( = )の持つ意味です。
数学の世界ではイコールは、左右の辺々の値が等しいという意味ですが、プログラムにおいては意味が全く異なります。
プログラム中では、左辺の変数に対して右辺の値を代入する、ということを表します。

このイコール記号のことを、代入演算子といいます。
イメージ的には、左向きの矢印( <- )だと思えばわかりやすいでしょう(実際にこの記号を使用する言語も存在します)。

数学が意味するイコールは等価演算子と呼ばれ、プログラムの中では ===== を用います

代入

変数の値を変更したい場合には、代入によってその値を更新します。
変数に対する代入操作は何回でも行うことができます。
初期化の時と同様で更新したい変数を左辺に、上書きしたい値を右辺に記述します

length = 200;

参照

宣言・初期化した変数はプログラム中で参照することができます。
呼び出した変数の中身をそのまま展開して利用します。

let height = 60;
console.log(height);

定数

定数は変数とは異なり、一度決めた値を変更できないデータです。
定数に対して行える操作は初期化だけです。

初期化した値を代入で書き換えることはできませんし、初期値を指定せずに宣言することもできません

定数を定義する際には、letキーワードの代わりにconstキーワードを使用します。
プログラム中で変わってほしくない値はconstキーワードで宣言するようにしましょう。

const golden_ratio = 1.618

識別子のルール

復習になりますが、プログラム中で開発者が変数や定数などにつける名前のことを識別子といいます。
識別子の命名の仕方にはいくつかのルールがあり、これを守らないとエラーを生じます。

基本的なルールは以下のようになっています。

  • 識別子に空白は使えない
  • アルファベットと数字と$と_が利用可能(日本語も使えるが普通は使わない)
  • 一文字目に数字は使えない
  • 予約語は使えない

予約語

プログラムの中で特別な意味を持ったキーワード予約語と呼ばれ、識別子に用いることができません。
例えば、変数や定数を宣言するときに用いるletキーワードやconstキーワードなどを変数名に指定することはできません。
試しに指定してみると、以下のようにエラーが発生します。

> const let;
Uncaught SyntaxError: let is disallowed as a lexically bound name

ただし以下のようにこれらを変数中に含めることは可能です。

const const_id = 1234;

以下はJavaScriptの予約語の一覧です。

await  break  case  catch  class
const  continue  debugger  default  delete
do  else  enum  export  extends
finally  for  function  if  imprements
import  in  instanceof  interface  let
new  package  private  protected  public
null  return  static  super  switch
this  throw  try  typeof  var
void  while  with  yield

本気でWebエンジニアを目指すなら、現役で活躍する講師の現場で使える技術を学べるこちらの講座がおすすめです。
コミュニティマネージャーとの面談から理想のキャリアと現状に合わせた、自分専用のコースを組み立てることができます。
まずは無料のWeb説明会に参加してみましょう!
ゼロから人気のWebスキルを学ぶなら【Cucua】

データの種類

変数や定数といったデータにはと呼ばれるものが何種類かあります。
これはその変数や定数の性質を表したものになっています。
型は各プログラミング言語ごとに用意されていますが、それらはどれも似たようなものとなっています。

JavaScriptで使用することができる型とその性質は以下の通りです。

データ型概要
NULL型何も存在しないことを表す型。
Undefined型未定義の値を表す型。宣言したばかりの初期化されていないデータなど。NULLと間違いやすいので注意。
Boolean型(真偽値)条件が成り立つ場合は真(true)、成り立たない場合は偽(false)のどちらかの値を持つ型。
数値型有限の小数を表す型。表現できる範囲が限定されていることに注意。保持できる最大の値は約$1.8×10^(308)$で、それ以上の値はInfinityに置き換えられます。
長整数型上下限のない整数値を表す型。
文字列型文字列を表す型。
シンボル型ユニーク(一意)であることが保証され、決して競合しない型。開発者が作成することはほとんどない。
オブジェクト型メソッド(関数)やプロパティ(変数・定数)の集合でできた型。

オブジェクト型は内部にデータを持ちますが、それ以外の型は内部にデータを内包することはできません。
オブジェクト型以外のデータ型は全て、プリミティブな(メソッドを持たない)データであるといいます。

JavaScriptでは変数がこれらのどの型に属するか、ということを自動的に判断してくれます。
このような言語を動的型付け言語といいます。
型を意識することなく変数を利用できるのは開発者にとって負担が減るため非常に楽な反面、システムの安定性を損なう可能性もあり一長一短です。

Null型

Nullは値を持たないことを表す型で、とりうる値はnullのみです。
実際に値が存在しないわけではなく、nullという「値が存在しないことを表す値」が入っているイメージです。

Undefined型

Undefinedは未定義の値を表す型で、取りうる値はundefinedのみです。
宣言したばかりで初期化も値の代入も行われていない変数はundefined型になります。

Null型と間違いやすいですが、メモリ(変数を保存しておく領域)は用意したけどまだ実際に値は入れていないという状態です。

Boolean型

Booleanは、命題(与えられたテーマ)が真(true)であるか偽(false)であるかの2つの値で表現します。
この真偽値では、論理演算とよばれる特別な演算を行うことができます。

数値型

数値(Number)は計算を行うための型です。
整数や負の値、小数(浮動小数点数)などを扱うことができますが、扱える数値の幅が決まっています。

小数点以下は約17桁程度、扱える最大の数値は約1.8×10308程度です。
扱える範囲より大きな値や小さな値はそれぞれ、+Infinity-Infinityという特別な値に置き換えられます。
また、数値として扱えない値(文字列など)がNumber型に代入されたときには、NaN(Not a Number)という値が割り当てられます。

長整数型

長整数(BigInt)は数値型と同様、計算を行うことができます。
使用できるのは整数だけとなってしまいますが、扱える数値の範囲が限定されません。

BigInt型を使用するには、以下のように数字の後ろにnを付けます。

500n

また、Number型とBigInt型での計算は行うことはできないので注意しましょう。

文字列型

文字列(String)はその名の通り文字列を表す型です。
Sting型を使用する場合には、使用したい文字列をダブルクオーテーションかシングルクォーテーションで囲います。

シンボル型

Symbolはプログラム中で唯一無二の何かであり、一度つくったシンボル型のデータと一致するものは存在しません。
この型が用意されたのには、ES6の仕様制定時にそれまでのJavaScriptとの互換性を保つために必要だったという背景があるようです。
ということで、実際の開発で利用する機会はそこまで多くはありません。

オブジェクト型

オブジェクトは複数のプロパティ(変数や定数といった値)やメソッド(関数)をまとめて管理できる型になっています。
始めは理解が難しいかもしれませんが、オブジェクト指向プログラミングは非常に重要なパラダイムですので是非マスターしておきましょう。

まとめ

プログラミングを学ぶ上で非常に重要な変数・定数とデータ型について解説してきました。
基本的なデータの扱い方を理解して、まずは様々なプログラムを真似して書いてみることをおすすめします。

ひとりではなかなかプログラミングの学習が続かない、未経験だから不安が多い、という方はプログラミングスクールを利用してみるのも有効です。
本物のエンジニアに学ぶことで、時間がない方でも最短でスキルを身につけることができます。
現役エンジニアのパーソナルメンターからマンツーマンで学べる

お悩みの方は、まずは無料キャリアカウンセリングにお申込みください。

関連記事

この記事のタグ