前編では、JavaScriptの基本的な書き方と、console.log()を使ったコンソールへの出力方法を学びました。中編では、変数、データ型、演算子といった、プログラミングの基礎となる重要な概念について学んでいきましょう。
3. 変数を使ってみよう
変数とは、データを入れておくための箱のようなものです。この「箱」に名前を付けて、後からその名前を使って、中身を取り出したり、入れ替えたりすることができます。
変数の宣言
JavaScriptでは、変数を使う前に、まず「この名前の変数を使いますよ」と宣言する必要があります。変数の宣言には、letまたはconstというキーワードを使います。
javascript
let myName;
const myAge = 30;letは、再代入可能な変数を宣言します。つまり、後から別の値を入れることができる変数です。constは、再代入不可能な変数を宣言します。つまり、最初に値を入れたら、後から変更できない変数です。
上の例では、myNameという名前の変数と、myAgeという名前の変数を宣言しています。myAgeには、最初から30という値を入れています。
変数に値を入れる
変数に値を入れるには、=という記号（代入演算子）を使います。
javascript
myName = "山田太郎";これで、myNameという変数に、"山田太郎"という文字列が格納されました。
変数の中身を確認する
変数の中身を確認するには、console.log()を使います。
javascript
console.log(myName); // 山田太郎
console.log(myAge); // 30コンソールに、変数myNameとmyAgeの値が表示されます。
変数を使うメリット
なぜ、変数を使うと便利なのでしょうか？それは、同じ値を何度も使い回したり、後から値を変更したりするのが簡単になるからです。
例えば、以下のようなコードを見てみましょう。
javascript
console.log("私の名前は山田太郎です。");
console.log("山田太郎は、今年30歳になります。");
console.log("山田太郎は、プログラミングの勉強を始めました。");このコードでは、"山田太郎"と30という文字列が何度も出てきます。もし、名前や年齢を変更したくなったら、すべての箇所を修正しなければなりません。
しかし、変数を使えば、以下のように書き換えることができます。
javascript
let myName = "山田太郎";
const myAge = 30;
console.log(`私の名前は${myName}です。`);
console.log(`${myName}は、今年${myAge}歳になります。`);
console.log(`${myName}は、プログラミングの勉強を始めました。`);これなら、名前や年齢を変更したいときは、最初の2行を修正するだけで済みます。また、テンプレートリテラルを使うことで、文字列の中に変数の値を埋め込んで表示することができます。
4. データ型って何？
前編で、文字列と数値は、コンピュータにとっては別のものだと説明しました。このように、データの種類を表す言葉をデータ型といいます。
JavaScriptには、主に以下のようなデータ型があります。
文字列 (String)
文字列は、文字の並びを表すデータ型です。ダブルクォーテーション（"）またはシングルクォーテーション（'）で囲んで表現します。
javascript
let message = "Hello, world!";
let name = '山田太郎';数値 (Number)
数値は、数を表すデータ型です。整数、小数、負の数などを表現できます。
javascript
let age = 30;
let price = 99.99;
let temperature = -5.5;真偽値 (Boolean)
真偽値は、true（真）またはfalse（偽）のどちらかの値をとるデータ型です。条件分岐などでよく使われます。
javascript
let isMember = true;
let isLoggedIn = false;配列 (Array)
配列は、複数のデータを順番に並べて格納できるデータ型です。[]で囲み、各データはカンマ（,）で区切って表現します。
javascript
let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];配列の中の各データには、インデックスと呼ばれる番号が付けられています。インデックスは0から始まることに注意してください。例えば、colorsの最初の要素（"red"）を取り出すには、colors[0]と書きます。
オブジェクト (Object)
オブジェクトは、名前（キー）と値のペアを複数格納できるデータ型です。{}で囲み、各ペアはキー: 値の形式で、カンマ（,）で区切って表現します。
javascript
let user = {
name: "山田太郎",
age: 30,
isAdmin: false
};オブジェクトの各値にアクセスするには、オブジェクト名.キー名またはオブジェクト名["キー名"]と書きます。例えば、userのnameの値（"山田太郎"）を取り出すには、user.nameまたはuser["name"]と書きます。
5. 演算子を使ってみよう
演算子とは、データに対して何らかの演算（計算や比較など）を行うための記号です。
算術演算子
算術演算子は、数値の計算に使われます。
+: 足し算-: 引き算*: 掛け算/: 割り算%: 余り
javascript
let x = 10;
let y = 3;
console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.3333333333333335
console.log(x % y); // 1比較演算子
比較演算子は、2つの値を比較して、その結果を真偽値（trueまたはfalse）で返します。
==: 等しい（値だけを比較）!=: 等しくない（値だけを比較）===: 厳密に等しい（値とデータ型の両方を比較）!==: 厳密に等しくない（値とデータ型の両方を比較）>: より大きい<: より小さい>=: 以上<=: 以下
javascript
let a = 10;
let b = "10";
console.log(a == b); // true（値は同じ）
console.log(a === b); // false（データ型が違う）
console.log(a > 5); // true
console.log(a <= 10); // true論理演算子
論理演算子は、複数の真偽値を組み合わせて、新しい真偽値を作ります。
&&: かつ（AND） - 両方がtrueのときだけtrue||: または（OR） - どちらか一方でもtrueならtrue!: でない（NOT） -trueとfalseを反転する
javascript
let isLoggedIn = true;
let isAdmin = false;
console.log(isLoggedIn && isAdmin); // false
console.log(isLoggedIn || isAdmin); // true
console.log(!isLoggedIn); // false