Zenn
😸

【イラスト付き】JavaScript基本構文【丁寧に解説】

2024/09/02に公開
JavaScript
tech

はじめに

皆さんこんにちは。

今回はJavaScriptの基本構文をご紹介します。
基本構文はコードを記述する上で中心となる文法です。

なお、今回は基本構文のベーシックな記述方法のみをご紹介しています。類似する他の構文や、記述の省略などは紹介せず、「実際に使う構文」をご紹介します。

こんな人にオススメ

  • 初めてJavaScriptに触れる方
  • JavaScriptで実際に使う構文体系的に知りたい

初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。

😋 一度で暗記せずに徐々に慣れながら覚える、くらいの意気込みで頑張りましょう♪

コンソール出力

まずポイントをチェック

  • どこまで処理が進んでいるか確認できる
  • その時点での値が何か確認できる
  • console.log()を利用する

コンソール出力は動作確認の際に頻繁に利用する機能です。指定したデータの中身や、処理がどこまで進んでいるかの判断をすることができます。JavaScriptではconsole.log();という処理を使います。

console.log(変数名など);

console.log();の丸かっこに変数などを指定することで、コンソールにその値が表示されます。

console.log('ABC'); // ABCをコンソールに表示
console.log(100); // 100をコンソールに表示
console.log(title); // title変数の値をコンソールに表示

😋 デバッグの際に便利です♪

変数

まずポイントをチェック

  • 変数はletを利用する
  • 定数はconstを利用する
  • varは使わないこと

JavaScriptの変数宣言は３種類あります。let、const、varの３つです。この内varは使いません。

letキーワードは変数宣言です。変数は再代入可能なので、宣言だけ行い後から値を代入することもできますが、多くの場合は変数宣言時に初期値を代入します。

let age; // 変数宣言
age = 10; // 値を代入

let title1 = 'JavaScript-Intro'; // 変数宣言と代入を同時に行う

constキーワードは定数宣言です。定数は値を一度しか代入できない変数です。定数は値が上書きされることがないため、コードが読みやすく処理も安全になります。定数を宣言する際は必ず値を代入します。宣言と代入を分けて記述することはできません。

const title2 = 'JavaScript-Intro'; // 再代入不可
title2 = 'xxxxx'; // 定数への再代入なのでエラーになる

😋 JavaScriptでは定数を好んで使います♪

データ型

まずポイントをチェック

  • 数値はnumber型
  • 文字列はstring型
  • 真偽値はboolean型

最も基本となるデータ型は、number型、string型、boolean型です。これらは基本データ型やプリミティブ型とも呼ばれています。

number型は数値を表します。number型は半角数字で表現します。JavaScriptの場合、小数点を含む値もnumber型として扱われます。

// number型
let ten = 10;
let hight = 160.5;

string型は文字列を表します。string型はシングルクォートもしくはダブルクォートで囲ったもの全てです。JavaScriptではシングルクォートを利用することが多いです。例え数字でも、シングルクォートで囲っていれば文字列として扱われます。

string型には空文字という文字数0の文字列表現もあります。シングルクォートの間に何も指定しないと空文字という扱いになります。

// string型
let moji = 'ABC';
let kazu = '10';
let kara = ''; // 文字数0の文字列

boolean型は真偽値を表します。値はtrue、falseのどちらかです。条件分岐や繰り返し処理の条件に利用されます。

// boolean型
let ok = true;
let ng = false;

😋 基本データ型は単縦な数値や文字列を表します♪

演算＃１：型によって演算子が異なる

まずポイントをチェック

  • データ型によって演算子が異なる
  • number型は+, -, *, /, %
  • string型は+
  • boolean型は&&, ||

データ型によって利用可能な演算子が異なります。

数値の演算では「+（足し算）」「-（引き算）」 「*（掛け算）」 「/（割り算）」「%（割り算の余り）」 を利用します。掛け算と割り算は、算数で使う記号とは違うので注意しましょう。割り算の余りは、値を偶数か奇数か判断する際に利用します。2で割った余りが1だったら奇数です。

// 数値の演算
let ten = 5 + 5; // 10
let one = 3 - 2; // 1
let six = 3 * 2; // 6
let two = 6 / 3; // 2
let odd = 5 % 2; // 1

文字列の演算では「+（結合）」を利用します。前後の値を結合して、新しい文字列を生成します。

// 文字列の演算（'tanakataro'になる）
let fullName = 'tanaka' + 'taro';

真偽値の演算では、「&&（かつ）」「||（もしくは）」を利用します。複数の条件を同時に判断する際に利用します。

// 真偽値の演算
let ok = true || false; // true
let ng = false && false; // false

😋 型によって可能な演算が違います♪

演算＃２：比較の演算

まずポイントをチェック

  • 比較の演算結果はboolean型になる
  • 等しいかは===で比較
  • 大小関係は不等号で比較

値を比較する演算は結果がboolean型なので条件分岐や繰り返しの構文と併用されます。比較には等しいかと大小関係の２種類があります。

値が等しいかの比較を行う際は、「===（等しい）」「!==（等しくない）」を利用します。他のプログラミング言語ではイコールが２つのことがあるので、混同しないように注意しましょう。比較はデータ型が等しいかも検証されるので、数値の10と文字列の’10’は異なる値です。

// 等しいかの比較
let onaji1 = 'abc' === 'abc'; // true
let onaji2 = 10 === 10; // true
let chigau = 10 !== 20; // true

数値の大小を比較する際は「>（大なり）」「>=（以上）」「<（小なり）」「<=（以下）」を利用します。

// 大小の比較
let bigger = 20 > 10; // true
let smaller = 10 < 20; // true
let izyou = 10 >= 10; // true
let ika = 10 <= 10; // true

😋 比較は条件分岐や繰り返しの条件で利用されます♪

繰り返し＃１：for文

まずポイントをチェック

  • for文は回数指定のループが可能

繰り返し処理で回数を任意に指定したい場合は、for文を利用します。for文は、カウンター変数・繰り返し条件・カウンターの更新の３箇所を記述します。カウンターの更新は「++（インクリメント演算子）」という1増やす演算子を利用します。for文は記述箇所が多く書き間違いによるバグを誘発しやすいので、注意しましょう。

// for文（10回ループする例）
for (let i = 0; i < 10; i++) {
    console.log(i);
}

😋 for文は他の言語にもある標準的な繰り返し構文です♪

繰り返し＃２：for-of文

まずポイントをチェック

  • for-of文は指定要素数分ループする

配列やオブジェクトが持つ要素数全てを処理する場合は、for-of文を利用します。指定した配列などの値のまとまりから、値を順番に１つずつ取り出して処理を実行します。

要素数を基準にループ回数が決まるので、不用意にバグを埋め込む危険性が少ない構文です。ofの右側に繰り返しの基準となる配列やオブジェクトを指定し、ofの左側の変数に個別の要素が順次代入されます。

// for-of文（要素数分ループ）
let list = [0, 1, 2, 3, 4];
for (let item of list) {
    console.log(item);
}

😋 繰り返し処理はfor文よりもfor-of文を使う方が安全です♪

繰り返し＃３：while文

まずポイントをチェック

  • while文は無限ループする

無限ループはwhile文を利用します。while文は条件がtrueの間は無限ループします。条件がfalseにならない限りループが終了しないので、条件になる値を更新するなど、ループを終了させるよう処理を組み立てます。

// while文（'AAA'になるまで無限ループ）
let letter = 'A';
while (letter !== 'AAA') {
    letter = letter + 'A';
    console.log(letter);
}

😋 条件を満たすまで無限に繰り返します♪

条件分岐

まずポイントをチェック

  • if文で条件分岐ができる
  • 他の選択肢を持たせる場合、else ifを使う
  • いずれにも該当しない場合、elseを使う

条件分岐にはif文を使います。条件にboolean型の値を指定し、trueとfalseによって処理が分岐します。

ifは指定した条件がtrueの場合のみ処理を行い、falseの場合は無視されます。連続した判断を行いたい場合は、必要な分だけelse ifを繋げて記述します。全ての条件がfalseの場合の処理はelseを利用します。

else ifとelseは任意ですので、不要であれば記述しなくても問題ありません。

let age = 22;

// 20歳以上か
if (age >= 20) {
    console.log('20歳以上');
// そうでなければ、20歳以上か
} else if (age >= 10) {
    console.log('10歳以上');
// いずれでもない
} else {
    console.log('10歳未満');
}

😋 if文はどの言語にもある代表的な制御構文です♪

コメント

まずポイントをチェック

  • // は1行コメント
  • /**/は複数行コメント

コメントの書き方は2種類あります。1行コメントは、スラッシュ２つで表現します。複数行コメントは、スラッシュとアスタリスクで囲った範囲がコメント扱いになります。

// 1行コメント

/*
複数行コメント
複数行コメント
*/

😋 コメントが適度にあると読みやすいコードになります♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

基本構文について確認をしていただきました。
これらの基本文法は、処理を組み立てる上での基本的なパーツです。また基本構文は他のプログラミング言語と共通する内容が多く知識の使い回しができます。まずは基本構文をしっかり確認しましょう。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（MDN Web Docs のリンク）

console.log()：https://developer.mozilla.org/ja/docs/Web/API/console/log
宣言：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#宣言
データ構造とデータ型：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#データ構造とデータ型
式と演算子：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators
ループと反復処理：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Loops_and_iteration
条件文：https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#条件文
コメント：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Lexical_grammar#コメント

Discussion