🧠

JavaScript基礎まとめ表

に公開
JavaScript
初心者
基礎
tech

JavaScript基礎まとめ大全

初心者がつまずきやすい部分を、できるだけ具体例付きでまとめました。
これを理解していけば、基本的なJavaScriptはほぼ書けるようになります！

配列（Array）

概要

複数の値を1つの変数にまとめて扱うためのもの。

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // apple

主なメソッド

メソッド 内容 例
push() 配列の最後に要素を追加 fruits.push('grape')
pop() 配列の最後の要素を削除 fruits.pop()
splice() 指定した位置に要素を追加・削除 fruits.splice(1, 1, 'melon')
join() 配列を文字列に変換 fruits.join(', ') // "apple, banana, orange"
split() 文字列を区切って配列にする "a,b,c".split(',') // ["a","b","c"]
map() 配列の全要素に処理をして新しい配列を作る [1,2,3].map(n => n * 2) → [2,4,6]
filter() 条件に合う要素だけ取り出す [1,2,3,4].filter(n => n % 2 === 0) → [2,4]
forEach() 配列の各要素に対して繰り返し処理をする fruits.forEach(f => console.log(f))

オブジェクト

概要

「名前（キー）」と「値（バリュー）」の組み合わせでデータをまとめる。

const user = {
  name: 'Taro',
  age: 20,
  hobby: 'coding'
};
console.log(user.name); // Taro

分割代入（Destructuring）

オブジェクトや配列から変数を取り出す。

const { name, age } = user;
console.log(name, age); // Taro 20

for文

概要

決まった回数、繰り返し処理をする。

for (let i = 0; i < 5; i++) {
  console.log(i); // 0〜4を出力
}

while文

概要

条件がtrueの間、繰り返す。

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

do...while分

概要

最初に1回必ず実行され、その後条件をチェックして繰り返す。

let num = 0;
do {
  console.log(num);
  num++;
} while (num < 3);

変数・定数

種類 宣言方法 再代入 再宣言 スコープ
var 古い書き方 ○ ○ 関数スコープ
let 一般的 ○ × ブロックスコープ
const 定数 × × ブロックスコープ

データ型

型 例 説明
文字列 (String) 'hello' テキスト
数値 (Number) 100 数字
真偽値 (Boolean) true / false 条件判定
配列 (Array) [1,2,3] 複数の値
オブジェクト (Object) { name: 'Tom' } 複雑なデータ
未定義 (undefined) let x; 値がない
null let y = null; 「空」を意図的に示す

スプレット構文・レスト構文

スプレット構文

配列やオブジェクトを展開する。
スプレット構文は右辺。

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

レスト構文

関数の引数などをまとめる。
レスト構文は左辺。

function sum(...nums) {
  return nums.reduce((total, n) => total + n);
}
console.log(sum(1,2,3)); // 6

三項演算子

条件によって結果を一行で分ける。

const score = 80;
const result = score >= 70 ? '合格' : '不合格';
console.log(result); // 合格

比較演算子

記号 意味 例
=== 等しい（型も含めて） 3 === 3 // true
!== 等しくない 3 !== 5 // true
> より大きい 5 > 3 // true
< より小さい 2 < 4 // true
>= 以上 5 >= 5 // true
<= 以下 3 <= 5 // true

論理演算子

記号 意味 例
&& かつ（AND） x > 0 && y > 0
! 否定（NOT） !(x > 0) → falseならtrueになる

まとめ

  • 配列：値をまとめて扱う箱
  • オブジェクト：名前付きで値を整理する箱
  • for / while / do...while：繰り返し処理
  • 変数・定数：データを保存
  • データ型：値の種類を区別
  • スプレッド / レスト：配列・引数を展開/まとめ
  • 三項演算子：ifを短く書ける
  • 比較・論理演算子：条件を組み立てる

これらを理解できれば、JavaScript初級〜中級レベルに確実に到達できます！
ぜひ、手を動かしながら少しずつ覚えていきましょう💪

Discussion