【フロントエンド入門6】JavaScriptの基本文法｜変数、関数、制御構文をわかりやすく解説

JavaScriptはWebページに動きを付けたり、ユーザーとのインタラクションを実現するためのプログラミング言語です。フロントエンド開発では欠かせない存在であり、基本文法を理解することで、より高度なWebアプリケーションの開発が可能になります。本記事では、JavaScriptの基礎である変数、関数、制御構文について初心者向けにわかりやすく解説します。

JavaScriptとは何か？
変数の基本
1. 変数とは？
2. JavaScriptでの変数の宣言
データ型
配列とオブジェクト
1. 配列とは？
2. オブジェクトとは？
関数の基本
1. 関数とは？
2. 関数の定義方法
制御構文
配列とループの組み合わせ
結論

JavaScriptとは何か？

JavaScriptは、Webページの動的なコンテンツを操作するためのスクリプト言語です。例えば、ボタンをクリックしたときに動作するアニメーションや、フォームに入力した内容のチェックなどがこれに該当します。

HTMLとCSSの補完的な役割：HTMLがページの構造、CSSがデザインを担当するのに対し、JavaScriptはボタンを押したときの動作や、リアルタイムのデータ表示などの動的な機能を実現します。
ブラウザ上で実行される：特別なソフトウェアやインストールが不要で、ブラウザさえあればすぐにコードを実行できます。
サーバーサイドでも活躍：Node.jsを使うとサーバー側でもJavaScriptを利用できるため、フロントエンドからバックエンドまで幅広い開発が可能です。

変数の基本

変数とは？

変数とは、値を一時的に保存しておくための「入れ物」です。名前を付けてデータを保存し、必要なときに取り出して使用します。

JavaScriptでの変数の宣言

JavaScriptでは、変数を次のように宣言します。

var：昔から使われている方法ですが、現在はあまり推奨されません。
let：再代入が可能で、ブロック内でのみ有効です。
const：再代入できない定数を宣言します。

例1：`let`を使った変数の宣言

let message = "こんにちは、世界！";
console.log(message);

この例では、messageという変数に「こんにちは、世界！」という文字列を保存し、それを画面に表示しています。

例2：`const`を使った定数の宣言

const pi = 3.14;
console.log(pi);

この例では、piという名前の定数に3.14を保存しています。constを使って宣言した場合、この値を変更することはできません。

例3：再代入の動作の違い

let counter = 1;
counter = 2;  // letの場合は再代入可能

const name = "Alice";
// name = "Bob";  // constの場合はエラー

データ型

JavaScriptには、さまざまなデータを扱うためのデータ型があります。

文字列（String）：テキストを表す（例："こんにちは"）
数値（Number）：整数や小数を表す（例：42、3.14）
真偽値（Boolean）：trueまたはfalseの値を取る
オブジェクト（Object）：複数の値を1つにまとめた複雑なデータ型
配列（Array）：複数のデータを順番に格納する（例：[1, 2, 3]）
未定義（undefined）：変数に値が設定されていない状態を示す
ヌル（null）：意図的に「空」を表す値

型の確認方法

JavaScriptではtypeof演算子を使ってデータの型を確認することができます。

let value = "こんにちは";
console.log(typeof value);  // 出力: "string"

let number = 10;
console.log(typeof number);  // 出力: "number"

配列とオブジェクト

配列とは？

配列は、複数の値を1つの変数にまとめて格納するためのデータ構造です。

配列の例

let fruits = ["りんご", "バナナ", "オレンジ"];
console.log(fruits[0]);  // りんご

インデックス番号：配列の最初の要素は0番目から始まります。

配列に要素を追加する

fruits.push("ぶどう");  // 配列の末尾に追加
console.log(fruits);  // ["りんご", "バナナ", "オレンジ", "ぶどう"]

オブジェクトとは？

オブジェクトは、キーと値のペアでデータを管理する構造です。

オブジェクトの例

let person = {
    name: "太郎",
    age: 25,
    job: "エンジニア"
};

console.log(person.name);  // 太郎

オブジェクトの各プロパティには「キー」を指定してアクセスします。

関数の基本

関数とは？

関数とは、1つまたは複数の処理をまとめて実行するためのブロックです。繰り返し使用する処理を関数として定義すると、コードを短く分かりやすく保つことができます。

関数の定義方法

例1：関数宣言

function greet(name) {
    console.log("こんにちは、" + name + "さん！");
}

greet("太郎");

この関数は、引数として受け取った名前に「こんにちは」を付けて挨拶を表示します。

例2：アロー関数

アロー関数は簡潔に関数を定義するための方法です。

const add = (a, b) => a + b;
console.log(add(5, 3));  // 出力: 8

制御構文

if文

if文は、条件が真（true）のときに特定の処理を実行します。

例：年齢による条件分岐

let age = 20;

if (age >= 18) {
    console.log("成人です。");
} else {
    console.log("未成年です。");
}

この例では、年齢が18歳以上であれば「成人です。」と表示し、それ以外の場合は「未成年です。」と表示します。

複数の条件を評価する

else ifを使用すると、複数の条件を順番に評価できます。

let score = 85;

if (score >= 90) {
    console.log("優秀です。");
} else if (score >= 70) {
    console.log("良好です。");
} else {
    console.log("頑張りましょう。");
}

forループ

forループは、一定回数の繰り返し処理を行うために使用します。

例：1から5までの数値を表示

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

この例では、1から5までの数値が順番に表示されます。

whileループ

whileループは、指定した条件が満たされるまで処理を繰り返します。

例：カウントアップ

let count = 0;

while (count < 3) {
    console.log("カウント: " + count);
    count++;
}

この例では、カウントが3に達するまで「カウント: 0」「カウント: 1」「カウント: 2」と表示されます。

配列とループの組み合わせ

配列内のすべての要素にアクセスするためにループと組み合わせることがよくあります。

例：フルーツのリストを表示

let fruits = ["りんご", "バナナ", "オレンジ"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

この例では、配列内のすべてのフルーツが順番に表示されます。

結論

JavaScriptの基本文法である変数、関数、制御構文、そして配列やオブジェクトを理解することで、Webページに動きを加える基礎が身に付きます。これらの知識を応用してイベントハンドリングやDOM操作を学ぶことで、よりインタラクティブなWebサイトを構築できるようになります。さらに、非同期処理やAPIの利用なども学んでいくことで、実践的なWeb開発スキルが身に付くでしょう。