これなら絶対わかる！JavaScriptの変数と型の基礎をいまこそ理解する

なんとなくjQueryを使っているけど、実はJavaScriptの基礎がよくわかっていない……。そんなJavaScript初心者のために、変数とデータ型をていねいに解説します。

Webプログラミング言語「JavaScript」を学ぼうと決めたものの、どこから始めていいか分からないなら、この記事がちょっとしたヒントになるかもしれません。プログラミングを習得するのに特別なスキルは必要なく、誰だってゼロからスタートしています。一歩ずつ進めていけば大丈夫です。

この記事がおすすめの人は？

以下のどれかに当てはまる人なら、この記事を読むメリットがあります。

• プログラミング言語を使った経験がない
• JavaScriptを使った経験がない
• 以前JavaScriptの習得に挑戦したが、資料が不十分、または難しくてついていけなかった
• JavaScriptについての知識は少しあるが、基礎レベルからさらにステップアップしたい

この記事では構文、変数、コメント、データ型といった基礎に焦点を当てます。記事で習得したJavaScriptの概念を、将来別のプログラミング言語の習得に応用できるのもメリットです。

注：このガイドはJavaScriptおよびプログラミングのまったくの初心者を対象としています。そのため多くの概念はシンプルな方法で示し、strictモードのES5シンタックスを使っています。

準備はできましたか？ それでは始めます。

JavaScriptとは

JavaScriptは、Webサイトの動的かつインタラクティブな設計に使われるプログラミング言語です。クライアントサイドのプログラミング言語なので、コードはユーザーのWebブラウザーで実行されます。Node.jsなどの技術が登場してサーバーサイド言語としても使用可能になり、用途が大きく広がりました。主にフロントエンドWeb開発で使われ、HTMLやCSSと密接に結びついて動きます。

注：JavaはJavaScriptではなく、紛らわしい名前の別の言語です。

要件

多くの人はJavaScriptを使って記述を始める前提条件がすでに整っています。必要なのは、コードを表示するブラウザーとコードを書くテキストエディターだけです。ブラウザーは現在使っているもの（Chrome、Firefox、Safari、Edgeなど）で十分です。コンピューターにはNotepad（Windowsの場合）やTextEdit（OS Xの場合）がプリインストールされていますが、コーディングに特化して設計されたフリーエディターAtomやBracketsのインストールがおすすめです。

CodePenはコードを書いてライブデモを実行できるWebサイトで、もっとも簡単に理解し練習ができます。

基本技術

ちょうど作家が本を書くように、プログラマーはプログラムを書きます。

プログラムとは、コンピューターが読み取りタスクを実行する一連の命令のことです。個々の命令は命令文（statement：ステートメント）と呼ばれる1行のコードであり、本で言えば1つの文のようなものです。英語の1文はピリオドで終わりますが、JavaScriptの命令文は普通セミコロンで終わります。構文（syntax：シンタックス）とは言語の構造を定義する記号や規則を表し、文法や句読点と似ています。従ってJavaScriptの命令文の終端のセミコロンは構文の一部です。

コメント

コメントとは、コード内に書かれた人間が解読できる注記のことです。

コメントは平易な英語で書かれ、コードの説明を目的としています。コメントがプログラムを動かすことはありませんが、自分のため、また将来の共同作業者がコードの意味を理解するために、役に立つ適切なコメントを書く習慣を身に付けましょう。

JavaScriptのコメントには以下の2つのタイプがあります。

• 1行のみのコメント：2本のスラッシュ//のあとに記述

  // This is a single line comment.
  

• 複数行のコメント：/*と*/の間であれば複数行にわたって記述できる

  /* This is a comment.
  It's a multi-line comment.
  Also a haiku. */
  

変数（Variable）

変数とはデータ値を格納（代入）する箱のことです。

変数は「変更できるもの」として認識していることでしょう（『いまさら聞けない、ES2015で変わったJavaScriptの変数宣言の違い』参照）。代数の基本では、変数とは1つの数を表す文字のことです。よくある変数名にxがありますが、yやzなどでも同じように簡単に表現できます。

最初、xは値も意味も持ちませんが、値を1つ代入できます。

x = 5

ここでxは5を表していて、xは5という1つの数値を格納する1つの箱とみなせます。

JavaScriptでも変数は同様の働きをしますが、数値以外も1つの値として格納できます。また、変数にはあらゆる種類のデータ値を格納できます。これについては、記事の最後に説明します。

変数はvarというキーワードを使って作成・宣言されます。上の代数の例を使ってJavaScriptの命令文を作成できます。

var x = 5; // the variable x contains the numeric value of 5.

このJavaScript命令文は、変数（x）を宣言し、単一の等号（=）を使って数値型のデータ（5）を格納し、何をしているかを平易な英語のコメント（//）で説明していることが、これまでの説明で分かるでしょう。命令文はセミコロン（;）で終わっています。

変数は最初に使うときのみvarで宣言する必要があり、それ以降は「変数」の名のとおり、値を変更できます。

var x = 5; // x was worth 5
x = 6; // now it's worth 6

変数は1度に1つの値しか格納できず、さらにプログラムは上から下へ実行されていくのでこの時点でxの値は6です。

上の例のデータ型は数値型でしたが、次の例では別のデータ型を使っています。

var greeting = "Oh hi, Mark!";

変数greetingは文字列Oh hi, Mark!を格納しています。

変数の重要なことは次のようになります。

• 変数名には文字、数字、ドル記号（$）、アンダースコア（_）が使用できる。ただし数字は先頭に使えない
• 予約語は変数に使えない
• 変数の大文字と小文字は区別される
• 命名規則はキャメルケース（camelCase）。つまり変数はいつも小文字で始まるが、複合語の後続ワードの先頭は大文字とする

ヒント：変数には任意の名前をつけられますが、記述的かつ簡潔な名前を選ぶことが大切です。

データ型

変数について理解したところで、変数が使えるデータ型を習得していきます。

データ型とはデータの分類のことです。プログラミング言語で値を適切にやり取りするにはさまざまなデータ型を使う必要があります。人が計算するのに文章ではなく数値を使うように、コンピューターも数値と文章を異なるものとして分類します。プリミティブ（基本の）データ型は文字列型（string）、数値型（number）、ブール型（Boolean）、null型、undefined型、シンボル型（Symbol：ES6の新機能）の6つです。プリミティブ型は単一の値のみ格納できます。どのプリミティブ型にもあてはまらないものがオブジェクト（Object）です。オブジェクトは複数の値を格納できます。

JavaScriptは弱く型付けされた（weakly-typed）、または緩く型付けされた（loosely-typed）言語として知られていますが、使われる構文に基づいてデータ型を自動的に決定する言語、という意味です。

テスト出力

alert()とconsole.log()はJavaScriptで値を出力する2つの簡単な方法です。

var x = 5;

alert(x);
console.log(x);

このデモはこちらです。alertはポップアップウィンドウを開き、console.logはインスペクターに出力します。インスペクターを開くにはブラウザー上で右クリックしてInspect（要素を調査）を選択します。

記事全体を通してこのデモを再度利用するつもりはないのですが、練習に最適なものを選びました。今後は、alertの使用を避けることをおすすめします。とても迷惑ですから。

typeofを使っていつでも変数の型を調べられます。

var answer = 42;

typeof answer // returns number

文字列型（String）

文字列型とは一連の文字のことです。

テキストを代入したデータは文字列で表されます。stringという名前は初期のプログラマーが糸に通したビーズを連想したことに由来しているそうです。

• 文字列は以下のようにダブルクォート（" "）で囲まれる場合もある

  "Pull the string, and it will follow wherever you wish."; // double   quoted string
  

• シングルクォート（' '）で囲まれる場合もある

  'Push it, and it will go nowhere at all.'; // single quoted string
  

注：シングルクォートは通常アポストロフィーと呼ばれています。英語キーボードのいちばん左にあるバックティック（バッククォート）と混同しないでください。

文字列の両端は同じ記号が使われている必要がありますが、どちらの記号を使うかで違いはなく、単に書き方が異なるに過ぎません。

とはいえ、シングルクォートで囲んだ文字列の中に「I’m」と書く、ダブルクォートで囲んだ文字列内でなにかをクォートで囲むとどうなるのでしょうか。文字列はエラーにならないのでしょうか。

エラーになります。対処するための2つのオプションがあります。次のように逆のタイプのクォートを使えば大丈夫です。

"Damn it, man, I'm a doctor, not a torpedo technician!"; // using single quotes within a double quoted string
'"Do. Or do not. There is no try." - Yoda'; // using double quotes in a single quoted string

プロジェクトを通じて一貫して文字列に同じスタイルを選択することは大切です。バックスラッシュ（\）を使うと続く文字をエスケープ文字にできます。

'Damn it, man, I\'m a doctor, not a torpedo technician!'; 
"\"Do. Or do not. There is no try.\" - Yoda";

文字列は変数に代入できます。greeting（あいさつ）の例を示します。

var greeting = "Oh hi, Mark!";

さらに文字列は結合（concatenation）というプロセスで結合できます。変数と文字列はプラス記号（+）を使って結合できます。

var greeting = "Oh hi, " + "Mark" + "!"; // returns Oh hi, Mark!

ちなみに空白も文字列内の1文字です。下の例で結合がどれほど便利か分かるでしょう。

var message = "Oh hi, ";
var firstName = "Mark";
var bam = "!";

var greeting = message + firstName + bam; // returns Oh hi, Mark!

例では文字列全体が変更可能な変数で表されています。Eメールなどのアプリにログインしたあと名前の入ったあいさつが表示されたとしたら、名前がアプリのシステムの変数にどのように入って文字列になっているか分かりますね。

数値型（Number）

数値型は数値を表します。

数値型には、文字列のように関連する特別の構文はありません。"5"のようにクォートで囲んで数値を記述しようとすると、数値ではなく文字列内の文字とみなされます。数値は整数（whole）でも小数（decimal、浮動小数点数と呼ばれる）でも良く、正負どちらの値も取れます。

var x = 5; // whole integer
var y = 1.2; // float
var z = -76; // negative whole integer

数値型は15桁まで有効です。

var largeNumber = 999999999999999; // a valid number

数値型は加法（+）、減法（-）、除法（/）、乗法（*）の四則計算ができます。

var sum = 2 + 5; // returns 7
var difference = 6 - 4; // returns 2

変数を使って計算ができます。

var elves = 3;
var dwarves = 7;
var men = 9;
var sauron = 1;

var ringsOfPower = elves + dwarves + men + sauron; // returns 20

このほかに、特殊な数値型が2つあります。

■非数（NaN）
NaNは技術的には数値型であるにもかかわらず「数値でない」ことを意味します。別のデータ型を使って無効な計算をしようとすると結果がNaNになります。

var nope = 1 / "One"; // returns NaN

たとえば数値を文字列で割ろうとすると、結果としてNaNが返されます。

■無限大（Infinity）
Infinityも技術的には数値型で、0で割ったり、大きすぎる数値を計算したりした結果を表します。

var beyond = 1 / 0; // returns Infinity

ブール型（Boolean）

ブール型は真（true）か偽（false）のどちらかの値を取ります。

ブール値は、値がイエスとノー、オンとオフ、真と偽などで切りかわるようなときにプログラミングでとてもよく使われます。ブール型ではなにか頻繁に変化する現在の状態を表せます。

たとえば、ブール型を使ってチェックボックスにチェックが入っているかどうかを表示できます。

var isChecked = true;

多くの場合ブール型は2つのものが等しいかどうか、または計算式の結果が真か偽かをチェックするために使われます。

/* Check if 7 is greater than 8 */
7 > 8; // returns false

/* Check if a variable is equal to a string */
var color = "Blue";

color === "Blue"; // returns true

注：等号が1つ（=）の場合1つの値をもう一方に代入します。等号が2つ（==）または3つ（===）の場合、2つのものが等しいかどうかをチェックします。

Undefined型

undefined型の変数には値が入っていません。

変数はキーワードvarで宣言しますが、値が代入されるまでその変数はundefinedとなります。

var thing; // returns undefined

変数がvarで宣言されていない場合もundefinedとなります。

typeof anotherThing; // returns undefined

Null型

Null型はなにも表現しない値です。

Null型には意図的に値がなにも入っていません。存在しないもの、ほかのどのデータ型にも該当しないものを表します。

var empty = null;

null型とundefined型の違いはかなり微妙ですが、主な違いはnull型が意図的に空の値であるという点です。

シンボル型（Symbol）

シンボル型は一意で不変な値のデータ型です。

シンボル型は新しいプリミティブデータ型で、最新のJavaScriptリリース（ES6）とともに登場しました。主な特徴は、書き換え可能なほかのデータ型と違って、個々のシンボルが完全に一意的なトークンであるという点です。

シンボル型は高度でしかもあまり使われていないデータ型なので詳しくは取り上げません。このデータ型の存在を知っておくことにはメリットがあるので、詳しくはこちらを参考にしてください。

var sym = Symbol();

オブジェクト（Object）

オブジェクトとは名前と値のペアの集合です。

単なる文字列型、数値型、ブール型、null型、undefined型、シンボル型ではない値がオブジェクトです（『JavaScriptオブジェクトの作成パターン ES6時代のベストプラクティス』参照）。

中カッコのペア（{}）を使ってオブジェクトを作成できます。

var batman = {};

オブジェクトはプロパティとメソッドで構成されます。プロパティはオブジェクトが「なにであるか」、メソッドはオブジェクトが「なにをするか」を示します。言語に例えると、プロパティは名詞と形容詞、メソッドは動詞のようなものです。

プロパティ	メソッド
batman.firstName バットマン：ファーストネーム	batman.fight() バットマン：闘う
batman.location バットマン：位置	batman.jump() バットマン：跳ぶ

名前と値のペア（キーと値のペアと呼ばれることもある）を使って、オブジェクトbatmanにプロパティを適用できます。プロパティはpropertyName: propertyValueのように記述し、カンマで区切ります。

var batman {
  firstName: "Bruce", // string
  lastName: "Wayne", 
  location: "Gotham", 
  introduced: 1939, // number
  billionaire: true, // Boolean
  weakness: null // null
};

注：オブジェクトのプロパティのリストでは、最後のアイテムの末尾にカンマはつけません。

見てのとおり、プリミティブデータ型をオブジェクトの値として代入できます。ドット（.）を使って個々の値を取得できます。

batman.firstName; // returns Bruce, a string

ブラケット記法でも値を取得できます。

batman["firstName"]; // returns Bruce

JavaScriptのプロパティ名は、有効なJavaScript文字列か数字リテラル（定数）でなければなりません。プロパティ名の先頭が数字になっていたり名前にスペースが含まれていたりする場合、ブラケット記法を使ってアクセスする必要があります。MDNを参考にしてください。

batman.secret identity; // invalid
batman["Secret Identity"]; // valid

メソッドはアクションを実行します。シンプルな例を示します。

var batman {
  firstName: "Bruce",
  lastName: "Wayne", 
  secretIdentity: function() { // method
    return this.firstName + " " + this.lastName;
  }
};

値はシンプルなデータ型の代わりに、functionを使っています。functionはthisオブジェクトのfirstNameとlastNameを結合し、結果を返します。この例でthisはオブジェクト（{}）内にあるのでbatmanと同じになります。

batman.secretIdentity(); // returns Bruce Wayne, a concatenation of two properties

メソッドはカッコ（()）付きで表示されます。

配列（Array）

配列は単一の変数のリストを格納します。配列は、1つ以上の値を格納しているのでオブジェクトの1つです。

大カッコのペア（[]）を使って配列を作成できます。

var ninjaTurtles = [];

配列は名前と値のペアを格納しません。

var ninjaTurtles = [
  "Leonardo",
  "Michelangelo",
  "Raphael",
  "Donatello"
];

配列のindexを参照することで個々の値を取得できます。プログラミングではゼロから数え始めるので、リスト内の最初のアイテムのインデックスはいつも[0]になります。

var leader = ninjaTurtles[0]; // assigns Leonardo to the leader variable

lengthプロパティで配列内にあるアイテムの数を確認できます。

ninjaTurtles.length; // returns 4

最後に

この記事ではたくさんのことを取り上げました。プログラミングにおける一般的な概念、用語、構文、原則について理解が深まったことでしょう。この記事でJavaScriptの変数とデータ型についてすべてマスターできたら、あとは実際にプログラムを書いてデータを操作してみましょう。

※本記事はScott Molinari、Vildan Softic、Chris Perryが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

（原文：A Beginner’s Guide to JavaScript Variables and Datatypes）

［翻訳：新岡祐佳子／編集：Livit］