JavaScriptの基礎知識ついて

JavaScript初心者のための入門ガイド

はじめに

JavaScriptはWeb開発に欠かせないプログラミング言語です。
「ボタンを押したら動く」「画面に文字を表示する」など、Webサイトを動的にするために使われます。

この記事では、初心者が最初に覚えるべき基本構文とのそれぞれのポイントについて紹介します。

---

1. 変数の宣言

プログラムで値を保存するために「変数」を使います。

// 古い書き方（あまり使わない）
var name = "Taro";

// 推奨される書き方
let age = 20;

// 定数（値を変えられない）
const country = "Japan";

2. データ型

変数にはいろいろな種類の値を入れることができます。

// 文字列（String）
let greeting = "Hello";

// 数値（Number）
let score = 100;

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

// 配列（Array）
let fruits = ["apple", "banana", "orange"];

// オブジェクト（Object）
let user = { name: "Taro", age: 20 };

ポイント

• 文字列（String）： " " または ' ' で囲んだ文字。文章や名前を扱う
• 数値（Number）： 整数や小数をそのまま扱える。計算に使う
• 真偽値（Boolean）： true または false の2種類だけ。条件分岐でよく使う
• 配列（Array）： 複数の値をまとめて管理できる。fruits[0] のように番号で取り出す
• オブジェクト（Object）： 名前（キー）と値をセットで管理できる。user.name のようにアクセスする

3. 演算子

計算や比較をするときに使います。

// 足し算・引き算・掛け算・割り算
let sum = 5 + 3;   // 8
let diff = 10 - 4; // 6
let product = 2 * 3; // 6
let quotient = 12 / 3; // 4

// 比較
console.log(5 > 3);   // true
console.log(5 === 5); // true
console.log(5 !== 3); // true

ポイント

• " + - * / " は基本的な四則演算
• === は「型も含めて完全に一致」するかを判定
• !== は「一致しない」ことを判定
• " > < >= <= " で大小比較ができる

4. 条件分岐

「もし〜なら」という処理をするときに使います。

let age = 18;

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

ポイント

• if の条件が true なら中の処理が実行される
• else は条件が false のときに実行される
• else if を使うと条件を複数段階で分けられる

5. 繰り返し処理

同じ処理を何度も行いたいときに使います。

for (let i = 0; i < 5; i++) {
  console.log("回数: " + i);
}

ポイント

• for 文は「初期値」「条件」「増減」を指定して繰り返す
• i++ は「iを1ずつ増やす」という意味
• 配列の要素を順番に処理するときによく使う

6. 関数

同じ処理を何度も使いたい場合、その処理をひとまとめにして名前をつけたものが関数です。一度定義すれば、何度でも呼び出して再利用できます。

// 関数の定義
function greet(name) {
  console.log("こんにちは、" + name + "さん！");
}

// 関数の呼び出し
greet("Taro"); // こんにちは、Taroさん！

ポイント

• function 関数名(引数) で定義する
• 引数（パラメータ）を使うと、処理を柔軟に変えられる
• return を使うと結果を返すことができる

7. イベント処理

Webページでは「クリックされた」「文字が入力された」「ページが読み込まれた」などのイベントが発生します。JavaScriptでは、このイベントに応じて処理を実行できます。

// ボタンがクリックされたときに動く処理
document.getElementById("myButton").addEventListener("click", function() {
  console.log("ボタンがクリックされました！");
});

// 入力欄に文字が入力されたとき
document.getElementById("myInput").addEventListener("input", function(event) {
  console.log("入力された文字: " + event.target.value);
});
}

ポイント

• addEventListener を使うと、複数のイベントを柔軟に扱える
• よく使うイベント: click, input, change, mouseover, keydown など

8. DOM操作

JavaScriptを使うと、HTMLの要素を自由に操作できます。これをDOM操作と呼びます。Webページの見た目や内容を動的に変えることができます。

// 要素のテキストを書き換える
document.getElementById("title").textContent = "新しいタイトル";

// 要素のスタイルを変更する
document.getElementById("title").style.color = "red";

// 新しい要素を追加する
let newItem = document.createElement("p");
newItem.textContent = "これは追加された段落です";
document.body.appendChild(newItem);

ポイント

• getElementById や querySelector で要素を取得
• textContent や innerHTML で内容を変更
• style で見た目を変更
• createElement と appendChild で新しい要素を追加

9. テンプレート文字列

文字列を組み合わせるときに便利なのがテンプレート文字列です。バッククォート（`）を使い、${変数} を埋め込めます。

let name = "Taro";
let age = 20;

// 通常の書き方
console.log("名前は" + name + "、年齢は" + age + "歳です");

// テンプレート文字列を使った書き方
console.log(`名前は${name}、年齢は${age}歳です`);

ポイント

• 可読性が高く、複雑な文字列でも見やすい
• 改行もそのまま書ける

10. Arrow関数

関数をより短く書けるのがArrow関数です。

// 通常の関数
function add(a, b) {
  return a + b;
}

// Arrow関数
const addArrow = (a, b) => a + b;

console.log(addArrow(3, 5)); // 8

// イベント処理での利用例
document.getElementById("myButton").addEventListener("click", () => {
  console.log("Arrow関数で書いたイベント処理");
});

ポイント

• function より短く書ける
• this の扱いが通常の関数と異なるため注意

11. まとめ

この記事では、JavaScript初心者が最初に覚えるべき基本構文を紹介しました。

• 変数の宣言：let や const を使って値を保存
• データ型：文字列、数値、真偽値、配列、オブジェクトなど
• 演算子：計算や比較を行うための基本記号
• 条件分岐：if / else で状況に応じた処理を実行
• 繰り返し処理：for 文で同じ処理を繰り返す
• 関数：処理をまとめて再利用できる仕組み
• イベント処理：クリックや入力などの動作に応じて処理を実行
• DOM操作：HTML要素を動的に変更・追加
• テンプレート文字列：文字列を見やすく組み合わせる方法
• Arrow関数：短く書ける関数の新しい書き方
  これらを理解すれば、簡単なWebページの動きを自分で作れるようになります。

例えば「ボタンを押すと文字が変わる」「入力した内容を画面に表示する」といった小さな仕組みは、この記事の内容だけで十分に実装可能です。