【学習日記#8】JavaScriptでできること

ブログ

こんにちは！Ryuseiです。

今日から、JavaScriptの基本について学んでいきます。これまでHTML・CSS、BEM、Bootstrapと学んできて、いよいよサイトに動きをつけるための一歩です。

まずは、JavaScriptでできることをざっくり整理してみました👇

目次
  1. 1. 変数の宣言と代入
    1. 宣言方法
  2. 2. 演算子
  3. 3. データ型とオブジェクト
    1. プリミティブ型
    2. オブジェクト型
  4. 4. 関数
    1. 関数の作り方
    2. 引数・デフォルト値・戻り値
  5. 5. スコープとスコープチェーン
  6. 6. 条件分岐
    1. if / else
    2. 三項演算子
    3. switch文
  7. 7. 繰り返し処理
    1. for文
    2. while文
    3. forEach（配列用）
    4. for…in（オブジェクト用）
    5. Objectの便利メソッド
  8. まとめポイント
    1. 学んで感じたこと

1. 変数の宣言と代入

宣言方法

種類特徴再代入再宣言スコープ
let一般的な変数〇✕ブロック
const定数（再代入不可）✕✕ブロック
var古い書き方（非推奨）〇〇関数
変数宣言

let age = 25;
const NAME = "Taro"; // 定数は大文字で書くことが多い

📌 コメントアウトは // を使う。

2. 演算子

  • +, , , /, （四則演算）
  • %（あまり）
  • ++（インクリメント）, -（デクリメント）
  • 文字列は '' や テンプレート文字列 で囲む
1. 算術演算子（数値の計算）
演算子	説明	例	結果
+	足し算	5 + 2	7
-	引き算	5 - 2	3
*	掛け算	5 * 2	10
/	割り算	5 / 2	2.5
%	剰余（あまり）	5 % 2	1
++	インクリメント（+1）	let x = 5; x++	x = 6
--	デクリメント（-1）	let x = 5; x--	x = 4

💡 2. 代入演算子（変数への値の代入）
演算子	説明	例	結果
=	代入	x = 5	xは5になる
+=	加算して代入	x += 3	x = x + 3
-=	減算して代入	x -= 2	x = x - 2
*=	乗算して代入	x *= 2	x = x * 2
/=	除算して代入	x /= 2	x = x / 2

🔍 3. 比較演算子（true/falseを返す）
演算子	説明	例	結果
==	等しい（型変換あり）	5 == "5"	true
===	厳密に等しい（型も比較）	5 === "5"	false
!=	等しくない	5 != "5"	false
!==	厳密に等しくない	5 !== "5"	true
>	より大きい	10 > 5	true
<	より小さい	2 < 5	true
>=	以上	5 >= 5	true
<=	以下	4 <= 3	false

⚙ 4. 論理演算子（条件を組み合わせる）
演算子	説明	例	結果
&&	AND（両方true）	true && false	false
`		`	OR（どちらかtrue）
!	NOT（否定）	!true	false

❓ 5. 三項（条件）演算子

const age = 20;
const result = age >= 18 ? "成人" : "未成年";
console.log(result); // 成人
💬 6. 文字列演算（結合）

const name = "太郎";
console.log("こんにちは、" + name + "さん"); // こんにちは、太郎さん
またはテンプレート文字列：

console.log(`こんにちは、${name}さん`); // こんにちは、太郎さん

3. データ型とオブジェクト

プリミティブ型

  • 数値（number）
  • 文字列（string）
  • 真偽値（boolean）
  • undefined：未定義（あまり使わない）
  • null：意図的に「無」を示す
  • symbol, bigint（特別な用途）

オブジェクト型

  • 配列：[1, 2, 3]
  • オブジェクト：{ key: "value" }

const person = { name: "Taro", age: 20 };
const fruits = ["apple", "banana"];

const person = {
  name: "太郎",
  age: 25,
  isStudent: true,
  greet: function() {
    console.log("こんにちは！");
  }
};

📌 オブジェクトの値には「キーと値」がある（プロパティ）

4. 関数

関数の作り方


// 関数宣言
function greet() {
  console.log("Hello!");
}

greet();//ここからgreetで呼び出せるようになる

再利用したい場合はこちら
function greet() {
  console.log("Hello!");
}

const sayHello = greet; // 関数そのものを代入（実行しない！）

sayHello(); // Hello!

// 関数式
const greet = function() {
  console.log("Hi!");
};

greet();

// アロー関数
const greet = () => {
    console.log("Hey!");
};

greet();

引数・デフォルト値・戻り値


function sayHello(name = "John") {
  console.log(`Hello, ${name}!`);
}

function getArea(base, height) {
  return (base * height) / 2;
}

📌 ...args で可変長引数（残余引数）

5. スコープとスコープチェーン

  • ローカル変数：関数内のみ有効
  • グローバル変数：どこでも使える（推奨されない）

function example() {
  let localVar = "I’m local";
}

📌 内側から外側の変数にアクセス可能 → スコープチェーン

6. 条件分岐

if / else


if (age >= 18) {
  return "成人です";
} else {
  return "未成年です";
}

三項演算子


const msg = age >= 18 ? "成人" : "未成年";

switch文


switch (animal) {
  case "dog":
    console.log("ワン");
    break;
  case "cat":
    console.log("ニャー");
    break;
  default:
    console.log("不明");
}

7. 繰り返し処理

for文


for (let i = 1; i <= 10; i++) {
  result += i;
}

while文


while (i <= 10) {
  result += i;
  i++;
}

forEach（配列用）


animals.forEach(animal => {
  console.log(animal);
});

for…in（オブジェクト用）


for (const key in animals) {
  console.log(`${key}は「${animals[key]}」と鳴きます`);
}

Objectの便利メソッド


Object.keys(obj);   // キーの配列
Object.values(obj); // 値の配列

まとめポイント

  • let と const を基本に使う（varは非推奨）
  • オブジェクト・配列はJavaScriptの超重要パーツ
  • アロー関数は省略記法として便利（処理が1行ならreturnすら省略可）
  • 条件分岐と繰り返し処理でプログラムの流れをコントロール
  • スコープ（変数の有効範囲）を意識することが重要！

学んで感じたこと

HTMLやCSSのときと同じで、まずは「書いてみる」「動かしてみる」が大事だなと感じました！

他にも変数宣言やスコープ、条件分岐など、プログラミングの基本的な考え方をしっかり身につけることが大切だと思いました。

これからは、少しずつ「アニメーション」「DOM操作」「イベント」など、JavaScriptの面白いところに触れていきたいと思います！

引き続き頑張ります！

次回は、いよいよ実際にHTMLと組み合わせて、動きのあるWebページを作ってみたいと思います！また備忘録としてまとめるので、楽しみにしていてください