初心者脱却！JavaScriptの言語使用を学ぼう！

OZ
OZ

プロ太先生！そろそろ、JavaScriptを本気で勉強したいです！

何から始めたらいいですかね？

そうですね、まずは基本的な記述ルールから確認しましょうか。例えば、変数の宣言や代入です。まずは以下のコードを見てみましょう。

Contents
  1. 変数の宣言
  2. 変数の命名規則
  3. データ型
  4. リテラル
  5. 比較演算子と論理演算子
  6. 制御文
  7. まとめ

変数の宣言

let str = "こんにちは、皆さん！";
let num = 777;

これは簡単！strには、文字が入ってて、numには、数字が入ってるんですね！

その通りです。JavaScriptでは、文字列はダブルクォーテーションかシングルクォーテーションで囲みます。数値はそのまま書けばOKです。

そしたら、こんなんもありですか？

let kansai = 'なんでやねん';
let answer = 3.14;

はい、その通りです。良い例ですね。ちなみに、文字列は、シングルクォーテーション、ダブルクォーテーションのどちらでも囲えると言いましたが、基本はシングルクォーテーションで囲いましょうね。なぜだか分かりますか？

その理由は、主にHTML との親和性にあります。
JavaScriptはしばしばHTMLと一緒に使用されます。onclick=”属性値” などのように、HTMLでは属性値をダブルクォーテーションで囲むことが一般的です。JavaScriptでシングルクォーテーションを使うことで、HTMLの中でJavaScriptを書く際に混乱を避けることができます。下のコードを例に見てみましょう。

 <!DOCTYPE html>
<html>
<head>
    <title>HTMLとJavaScriptの親和性</title>
</head>
<body>
    <button id="myButton" onclick="showMessage('こんにちは')">クリックしてね</button>

    <script>
    function showMessage(message) {
        alert('ボタンが押されました。メッセージ: ' + message);
    }
    </script>
</body>
</html>

上記のHTMLファイルでは、ボタン要素にJavaScriptの関数呼び出しが含まれています。HTMLの属性値はダブルクォーテーション（”）で囲まれており、その中にJavaScriptのコードが書かれています。

ここで注目すべき点は、onclick属性の値です。HTMLの属性値はダブルクォーテーションで囲まれているため、その中で使用されているJavaScriptの文字列 ‘こんにちは’ はシングルクォーテーションで囲まれています。

もし JavaScript でもダブルクォーテーションを使用していたら、次のようになります。

onclick="showMessage("こんにちは")"  <!-- これは正しく動作しません -->

この場合、HTMLは、最初の"でクォートが終わったと解釈してしまい、正しく動作しません。
このように、JavaScriptでシングルクォーテーションを基本的に使用することで、HTMLとJavaScriptを組み合わせて使う際の混乱を避け、可読性の高いコードを書くことができます。

ただし、これはあくまで一般的な推奨事項です。プロジェクトやチームによっては異なるルールを採用することもあります。大切なのは、選んだルールを一貫して守ることです。

変数の命名規則

変数の名前ってなんでもいいん？

いいえ、いくつかルールがあります。紹介しますね。

// OK
let sampleValue = "これはOK";
let $special_case = "ドル記号とアンダースコアは使えます";

// NG
let 2fast2furious = "数字で始まるのはダメ";
let if = "予約語は使えません";

NG例として、まず、数字で始まるものは使えません。また、予約語も使うことができません。予約後とは、プログラミング言語において、あらかじめ決まったスペルと意味をもち、それ以外の意味では用いることのできない単語のことです。この予約語はプログラミング言語によって異なります。

JavaScriptの予約語の例

  • if
  • else
  • while
  • return
  • null
  • function
  • const
  • let
  • try
  • catch　　など

データ型

先生、さっきの例で文字と数字を入れたけど、他にどんなもの入れられるんですか？

JavaScriptには様々なデータ型があります。主なものを見てみましょう。

// 文字列（String）
let greeting = "こんにちは";

// 数値（Number）
let age = 17;

// 真偽値（Boolean）
let isStudent = true;

// null型（null）
let string = null;

// 配列（Array）
let fruits = ["りんご", "バナナ", "オレンジ"];

// オブジェクト（Object）
let person = {
    name: "OZ",
    age: 17,
    city: "大阪"
};

うわっ！いっぱいあるなぁ。下の方の、配列とかオブジェクトって何ですか？

配列は複数の値をリストとして持てるもので、オブジェクトは関連するデータをまとめて持てるものです。

配列とオブジェクトのイメージ

配列とオブジェクトの違いをもう少し詳しく、学校の道具箱と学生証に例えて説明してみます。

  1. 配列（Array）：学校の道具箱

配列は、道具箱のようなものです。

  • 道具箱の中には、鉛筆、消しゴム、定規など、様々な文房具が入っています。
  • これらの文房具は、「1番目の引き出し」「2番目の引き出し」のように位置で管理されています。
  • 配列も様々な値を順番に並べて、番号（インデックス）をつけて保存します。
  • 配列の要素には、0から始まる番号（インデックス）でアクセスします。
let schoolBox = ["鉛筆", "消しゴム", "定規", "コンパス"];
console.log(schoolBox[0]); // "鉛筆"が出力されます
console.log(schoolBox[2]); // "定規"が出力されます
  1. オブジェクト（Object）：学生証

オブジェクトは、学生証のようなものです。

  • 学生証には、名前、学籍番号、生年月日など、学生に関する情報が書かれています。
  • これらの情報は、それぞれ名前がついています（例：「氏名」「生徒番号」など）。
  • 同じように、オブジェクトも関連する情報をまとめて、名前（プロパティ名）をつけて管理します。
  • オブジェクトの値には、そのプロパティ名でアクセスします。
let studentCard = {
    name: "OZ",
    studentId: "2024001",
    birthDate: "1987-11-10",
    grade: 2
};
console.log(studentCard.name); // "OZ"が出力されます
console.log(studentCard.studentId); // "2024001"が出力されます

配列とオブジェクトの主な違い

  1. データの整理方法
    • 配列：順番（インデックス）で整理
    • オブジェクト：名前（プロパティ名）で整理
  2. 使用シーン
    • 配列：同じ種類のデータをリストアップするとき（例：クラスの生徒名簿）
    • オブジェクト：1つの対象に関する様々な情報をまとめるとき（例：1人の生徒の詳細情報）
  3. アクセス方法
    • 配列：配列名[インデックス]（例：schoolBox[0]）
    • オブジェクト：オブジェクト名.プロパティ名（例：studentCard.name）

しっかりと違いを理解して頭に入れましょうね。では、次は、データ型について、もう少し深い内容を解説していきます。

基本型（プリミティブ型）と参照型

JavaScriptのデータ型は大きく分けて、基本型（プリミティブ型）と参照型があります。

基本型は値そのものを扱い、参照型は値の格納場所（アドレス）を扱います。まずは基本型から見てみましょう。

基本型（プリミティブ型）

// 真偽値（Boolean）
let isSunny = true;

// 数値（Number）
let age = 17;
let height = 170.5;

// 文字列（String）
let name = 'OZ';

// null
let empty = null;

// undefined
let notDefined;

console.log(typeof isSunny);  // "boolean"
console.log(typeof age);      // "number"
console.log(typeof name);     // "string"
console.log(typeof empty);    // "object" （これはJavaScriptの歴史的な理由による誤り）
console.log(typeof notDefined); // "undefined"

typeofを使うとデータ型が分かります。

ちなみに余談ですが、console.log(typeof empty); // “object” （これはJavaScriptの歴史的な理由による誤り）とありますが、nullが格納されたemptyにtypeofを使うとobject型と表示されます。JavaScriptの初期の設計ミスですが、後方互換性のために修正されていません。nullは実際にはnull型です。

null と undefined の違い

  • null：開発者が「意図的な空の値」を代入したことを示します。
  • undefined：変数は宣言されたが、値がまだ代入されていない状態です。

参照型

参照型には主に配列、オブジェクト、関数があります。以下のような感じです。

// 配列（Array）
let fruits = ['りんご', 'バナナ', 'オレンジ'];

// オブジェクト（Object）
let person = { name: 'OZ', age: 17 };

// 関数（Function）
function greet() {
    console.log('こんにちは！');
}

console.log(typeof fruits);  // "object"
console.log(typeof person);  // "object"
console.log(typeof greet);   // "function"

この参照型は値の格納場所を扱います。イメージで言えば、let fruits や、let personなどのfruitsやpersonは、fruitsというロッカー番号、personというロッカー番号というイメージで、データが保管されている場所を表すイメージを持っておきましょう。

リテラル

リテラルという言葉のイメージが湧きにくいのは、多くの初学者が感じることです。

リテラルは、一言で言うと「プログラムにそれぞれのデータ型として認識してもらうためのコードの書き方」です。文字列リテラルや数値リテラル、配列リテラルなどがありますが、文字列としてプログラムに認識してもらうように書くなら、シングルクォーテーションやダブルクォーテーション、あるいは、バッククォートで囲って書く書き方の３種類の書き方（リテラル）がありますよ〜といった感じで、これを文字列リテラル（文字列の書き方）と呼ぶだけです。数値リテラルなら、数値として扱うなら、シングルクォーテーションなどで囲む必要がない書き方（リテラル）ですよ〜といった感じです。

// 文字列リテラル
let str1 = 'シングルクォート';
let str2 = "ダブルクォート";
let str3 = `バッククォート
複数行も
OKです`;

// 数値リテラル
let num1 = 123;      // 10進数
let num2 = 0o10;     // 8進数 (10進数の8)
let num3 = 0xFF;     // 16進数 (10進数の255)

// 配列リテラル
let arr1 = ['HTML', 'CSS', 'JavaScript'];
let arr2 = [1, 'two', { three: 3 }];

// オブジェクトリテラル
let obj = {
    name: 'OZ',
    age: 17,
    greet: function() {
        console.log('よろしゅう！');
    }
};

へぇ〜。色んな書き方（リテラル）があるんやな。でも、文字列リテラルの“のバッククォートって初めて見ました！

バッククォートは比較的新しい機能で、テンプレートリテラルと呼ばれます。バッククォート内で変数を埋め込んだり、複数行の文字列を書いたりできるので便利です。
このテンプレにそった書き方（リテラル）をすれば便利だよという感じですね。

実際に以下のコードで使ってみます。

let name = 'OZ';
//下のコードでテンプレートリテラルを使用。変数使える＆複数行もOK！
let message = `こんにちは、${name}さん！
今日もJavaScriptを勉強しましょう。`;
console.log(message);

比較演算子と論理演算子

次は、比較演算子と論理演算子について学びましょう。

はい！！でも、なんか、難しそうな名前ですね。

大丈夫です！実際はとてもシンプルです。まずは、比較演算子から見てみましょう！

比較演算子

let x = 5;
let y = '5';

console.log(x == y);   // true （値が同じなら型が違ってもtrue）
console.log(x === y);  // false （値と型が両方同じでないとfalse）
console.log(x != y);   // false （値が違えばtrue）
console.log(x !== y);  // true （値か型のどちらかが違えばtrue）

console.log(x < 10);   // true
console.log(x >= 5);   // true

ええ！？　「＝＝」と「＝＝＝」って違うんですか？

その通りです。「＝＝＝」（厳密等価演算子）の方がデータの型まで一致しているか確認できて安全なので、基本的にはこちらを使うことをお勧めします。

下記が、上記のコードの実際のコンソールでの実行結果です。

論理演算子

じゃあ、先生、論理演算子ってのは？

論理演算子は、複数の条件を組み合わせるときに使います。

let sunny = true;
let warm = false;

console.log(sunny && warm);  // false （AND演算子：両方trueならtrue）
console.log(sunny || warm);  // true （OR演算子：どちらかがtrueならtrue）
console.log(!sunny);         // false （NOT演算子：真偽を反転）

// 短絡評価
console.log(false && anything);  // false （左側がfalseなら右側は評価されない）
console.log(true || anything);   // true （左側がtrueなら右側は評価されない）

JavaScriptの論理演算子には主に3つあります：

  • && (AND演算子)：両方の条件がtrueの場合にtrueを返します。
  • || (OR演算子)：少なくとも1つの条件がtrueの場合にtrueを返します。数学で言うと、
  • ! (NOT演算子)：条件の真偽を反転させます。

短絡評価とは

短絡評価は、論理演算子の特別な性質です。これは、最初の条件だけで結果が決まる場合、2つ目の条件は評価しないという動作を指します。

  • &&（AND）の場合：
    • 左側がfalseなら、右側は評価されません。
    • なぜなら、ANDは両方trueでないとtrueにならないので、左側がfalseなら結果は必ずfalseだからです。
  • ||（OR）の場合：
    • 左側がtrueなら、右側は評価されません。
    • なぜなら、ORはどちらかがtrueならtrueになるので、左側がtrueなら結果は必ずtrueだからです。

短絡評価の具体的な使い方

短絡評価で、｜｜の具体的な使い方を身近な例を見て、イメージを掴んでおきみましょう。

これは、デフォルト値の設定などで使うことができます。

使用例１：デフォルト値の設定

function welcomeUser(name) {
  // nameが空文字やnullの場合、"ゲスト"を使用
  let userName = name || "ゲスト";
  console.log("ようこそ、" + userName + "さん！");
}

welcomeUser("太郎");  // "ようこそ、太郎さん！"
welcomeUser();        // "ようこそ、ゲストさん！"

使用例２：エラーメッセージの設定

function displayError(error) {
  // errorがない場合、デフォルトのメッセージを表示
  console.error(error || "不明なエラーが発生しました");
}

displayError("ファイルが見つかりません");  // "ファイルが見つかりません"
displayError();  // "不明なエラーが発生しました"

制御文

では、最後に制御文について学んでおきましょう。
主に条件分岐と繰り返し処理があります。

おお！！プログラムの流れを制御するんやな！なんか、かっこいいな！

条件分岐

では、まずはif文から見ていきましょう。

let age = 17;

if (age < 18) {
    console.log('未成年です');
} else if (age === 18) {
    console.log('ちょうど18歳です');
} else {
    console.log('成人です');
}

なるほど！条件によって、実行する内容を変えることができるんやな！上のコードやと、 let age = 17で設定されてるから、「未成年です」が表示されるな！

if文は、下のようにswtich文で書き換えることができます。

let age = 17;

switch (true) {
    case (age < 18):
        console.log('未成年です');
        break;
    case (age === 18):
        console.log('ちょうど18歳です');
        break;
    default:
        console.log('成人です');
        break;
}
  • switch (true) で、条件式が true になるケースをチェックします。
  • 各 case には、age の大小比較を直接書いています。
  • 一致する条件が見つかった時点で、そのブロックが実行され、break で処理が終了します。
  • どの case にも該当しない場合、default ブロックが実行されます。

if文とswitch文の使い分け

通常、 大小比較をswitch文で書くと、上記のように switch (true) のような少し直感的には分かりにくい工夫が必要になるので、if文を使います。よって、メインは、if文を使っておいて、条件が多い場合だと、if文だとコードが読みにくくなるので、そういった場合に、switch文で書くことを検討するという流れを押させておきましょう。以下は、条件が多い場合の例です。こういった場合は、switch文の方が読みやすいでしょう。

let day = '月曜日';

switch(day) {
    case '月曜日':
        console.log('月曜日は憂鬱...');
        break;
    case '火曜日':
        console.log('火曜日も憂鬱...');
        break;
    case '金曜日':
        console.log('金曜日はうれしい！');
        break;
    default:
        console.log('普通の一日');
        break;
}

ただし、switch文の注意点としては、breakの書き忘れに注意してください。breakは処理を終了させる命令です。これがないと、意図していない次のcaseの処理も実行されてしまいます。

繰り返し処理

JavaScriptの繰り返し処理を行う際には、for文 と while文 を使うことが多いです。どちらも繰り返し処理を実現するための構文ですが、使い方や目的が少し異なります。両者の違いや使い分けも含めて、解説します。

for文の基本構文

for 文は繰り返しの回数が明確なときに使うのが一般的です。

for (初期化; 条件; 更新) {
    // 繰り返し処理
}

while文の基本構文

while 文は、条件が満たされている限り繰り返す処理に適しています。

while (条件) {
    // 繰り返し処理
}

for文とwhile文の使用例

for文の例：1から5までの数字を出力
for (let i = 1; i <= 5; i++) {
    console.log(i);
}
  • 解説：
    1. i = 1 で初期化
    2. i <= 5 が真の間は繰り返し
    3. 毎回 i++ でインクリメント

この場合、繰り返しの回数が決まっているため、for文 が適しています。

while文の例：1から5までの数字を出力
let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}
  • 解説：
    1. 変数 i を初期化
    2. i <= 5 が真の間、繰り返し処理が実行される
    3. 毎回 i++ でインクリメント（iの値を１ずつ増やしていく）

ただし、while文 では、条件が変わらないと無限ループに陥る可能性があるので、変数の管理に注意が必要です。上記のコードであれば、i++を書き忘れてしまうと、無限ループに入ってしまいます。

for文とwhile文の使い分け

  • for文
    • 繰り返しの回数が決まっている場合に適している
    • 初期化、条件、更新を1行にまとめて書けるため、簡潔に記述できる
  • while文
    • 特定の条件が満たされるまで繰り返したい場合に使う
    • 繰り返しの回数が事前にわからない場合や、無限ループに近い処理に適している

do…while文もある！

while文 にはもう1つ、do...while文 というバリエーションがあります。これは、少なくとも1回は必ず実行されるループです。

let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);
  • 解説：do ブロックが最初に実行され、その後に条件をチェックします。

for文・while文まとめ

比較項目for文while文
適した状況繰り返し回数が決まっている場合条件が満たされるまで繰り返す場合
初期化1行でまとめて書ける外部で行う必要がある
更新処理ループ内で一括管理できる必ずしも毎回更新しなくても良い
無限ループのリスク少ない条件を忘れると発生しやすい

目的に応じて使い分けることが重要です。for文 は回数が決まっている処理、while文 は不確定な条件の繰り返しに向いているということを押させておきましょう。

まとめ

はい！というわけで、今日は変数から始まり、制御文まで学びましたね。
これらは、JavaScriptプログラミングの基礎となる重要な概念です。

へぇ〜。今日も勉強になりました！JavaScriptってめっちゃ奥が深いですね。

そうですね。でも、基礎をしっかり押さえれば、どんなプログラムでも作れるようになりますよ。

よっしゃ！もっと勉強して、すごいプログラムを作ってみたいです！
みんな一緒に頑張ろう！JavaScript最高や！