【JavaScript初学者向け】フロントエンド開発に必須の基礎文法まとめ
こんにちは！今日は JavaScript の基本文法について復習しました。この記事では、自分自身の理解を深めるためにも、噛み砕いて説明していきます。
🔰 JavaScriptとは？
JavaScript は、ブラウザ上で動くプログラミング言語です。たとえば、次のようなことができます：
- ボタンをクリックしたら画面が切り替わる
- フォームを送信したらデータを非同期で送信
- ページを更新せずにサーバーと通信（Ajax）
✅ JavaScriptが活躍する場面
| 用途 | 説明 |
|---|---|
| DOM操作 | ページの見た目や中身を変更できる |
| イベント処理 | ユーザーのクリックや入力に反応できる |
| API通信 | 外部のサービス（例：ChatGPTなど）と連携できる |
🧪 開発環境
開発者ツール（デベロッパーツール）を使えば、ブラウザ上で JavaScript を簡単に実行できます。
- Windows:
F12キーで開けます - 「Console」タブでコードを試しながら学習できます
🗣️ コンソール出力 console.log
console.log("こんにちは");
console.log() を使うと、処理結果や値をブラウザのコンソールに表示できます。Rubyの puts のようなものです。
🪜 変数の定義
JavaScriptでは主に const と let を使います。
const（定数）
一度代入した値を変更できません。変更しない「定数」に使います。
const greeting = "おはよう";
// greeting = "こんにちは"; ← エラーになります
let（変数）
後で値を変更できる「変数」に使います。
let count = 1;
count = 2; // OK
| 種類 | 再代入 | 再定義 | 用途 |
|---|---|---|---|
| const | ❌ | ❌ | 変更しない値 |
| let | ✅ | ❌ | 変更する可能性のある値 |
🧮 テンプレートリテラル
const name = "Tom";
const age = 25;
console.log(`私の名前は${name}、${age}歳です`);
- バッククォート（`） を使って文字列に変数を埋め込めます
- 改行もできるので、HTML生成にも便利です
🔀 条件分岐（if文）
「○○なら〜する」「××なら〜しない」といった判断を行う処理です。
const num = 60;
if (num % 15 == 0) {
console.log(`${num}は3と5の倍数です`);
} else if (num % 3 == 0) {
console.log(`${num}は3の倍数です`);
} else if (num % 5 == 0) {
console.log(`${num}は5の倍数です`);
} else {
console.log(`${num}はどちらの倍数でもありません`);
}
ポイント
-
if→ 最初に当てはまる条件 -
else if→ 他の条件も試す -
else→ 全て外れたときの処理
🧺 配列と要素の取得
配列とは、複数のデータを1つの箱にまとめる仕組みです。
const list = ["HTML", "CSS", "JavaScript"];
console.log(list[0]); // "HTML"
console.log(list[2]); // "JavaScript"
- 配列の要素は 0番からスタート
-
list[2]なら3番目の要素になります
🔁 繰り返し処理（for文）
同じ処理を何度も行う時に使います。
for (let i = 1; i <= 5; i++) {
console.log(`今は${i}回目のループです`);
}
for文の構造
for ([初期化]; [条件]; [増減]) {
// 繰り返す処理
}
🌀 forEach関数
配列のすべての要素に対して、処理を順番に行いたいときに便利です。
const fruits = ["apple", "orange", "grape"];
fruits.forEach(function(fruit) {
console.log(fruit);
});
-
forEach()は配列専用の繰り返し処理 -
fruitには各要素が順番に入ってきます
📌 まとめ
| 機能 | 説明 | 例 |
|---|---|---|
| 変数定義 |
constで変更不可、letで変更可 |
const name = "Tom" |
| コンソール出力 | 確認やデバッグに便利 | console.log() |
| 条件分岐 | 状況に応じて処理を分ける | if...else |
| 配列 | 複数のデータを管理 | ["HTML", "CSS"] |
| 繰り返し処理 | 同じ処理を何度も行う |
forやforEach()
|
| テンプレートリテラル | 文字列中に変数を挿入 | `名前は${name}` |
おわりに
JavaScriptは見た目の操作からサーバー通信まで、Webアプリに欠かせない存在です。文法だけでなく、「なぜその書き方をするのか？」を意識することで、理解が深まると実感しました。