JavaScript基礎文法一覧！初心者もコピペで動く

「JavaScriptを学び始めたけど、まず何を覚えるべきかわからない」
「基本構文を一覧でサクッと確認したい」

そんな方のために、JavaScriptの基礎となる文法を厳選してまとめました。

プログラミングは「暗記しなくていい」と言われますが、最低限の「書き方のルール（文法）」を知らなければスタートラインに立てません。

この記事では、初心者がまず覚えるべき重要文法をコード例付きで解説します。

1. 変数（Variable）

データを入れておく「箱」のようなものです。

let eatsName = "神戸牛"; 
console.log(eatsName);

出力結果

神戸牛

解説：

let 変数名 = 値 と書くことで、変数に値や文字列を代入できます。

一度代入すれば、変数名を使うだけで中身を何度でも呼び出せます。

2. 配列（Array）

複数のデータをひとまとめにして管理する方法です。

let eats = ["豚肉", "鶏肉", "牛肉", "魚", "しょうゆ", "塩"];

console.log(eats[0]); 
console.log(eats[1]);

出力結果

豚肉
鶏肉

解説：

[ ] の中にデータをカンマ区切りで入れます。

取り出すときは 配列名[番号] を使います。番号（インデックス）は0から始まる点に注意しましょう。

3. 条件分岐（If）

条件によって処理を分ける書き方です。

let number=8
if (number > 5 ) { 
 cosole.log("大当り");
}  elseif (number >3 ) {
 console.log("当り");
}  else {
console.log("外れ");
}
console.log(number); 

出力結果

大当り

解説：

number が 8 なので、最初の条件 number > 5 に当てはまり、「大当り」が出力されます。

• if：もし～なら
• else if：そうでなく、もし～なら
• else：どれにも当てはまらないなら

4. ループ処理（Loop）

同じ処理を繰り返したい時に使います。

for文

回数を指定して繰り返す基本的なループです。

for (let i = 0; i < 10; i++) { console.log(i); }

出力結果

0 1 2 3 4 5 6 7 8 9

解説：

i が 0 から始まり、10未満の間（つまり9まで）、1ずつ増えながら処理を繰り返します。

forEach文

配列の中身を順番に取り出して処理します。

const friends = ["ライオン", "猫", "トラ"];

friends.forEach((friend) => { console.log(friend); });

出力結果

ライオン
猫
トラ

while文

条件を満たしている間、ひたすら繰り返します。

let i = 2; while (i < 1000) { console.log(i); i = i * i; }

出力結果

2
4
16
256

5. 関数（Function）

一連の処理をまとめて、名前をつけて呼び出せるようにしたものです。

関数と引数

function build(material1,material2 ){
console.log(material1＋”を細く切ります。”);
console.log(material2＋”をよく混ぜます。”);
console.log(material2＋”を”＋material1＋”にムラなく塗ります。”);

cook("角材","塗料")

出力結果

角材を細く切ります。
塗料をよく混ぜます。
塗料を角材にムラなく塗ります。

解説：

build("角材", "塗料") のカッコ内の値（引数）が、関数の material1 と material2 に渡されて処理が実行されます。

戻り値（return）

処理結果を呼び出し元に「返す」仕組みです。

function applyTax(price) { 
const result = price * 0.1; 
return result; 
}

const tax = applyTax(12000); 
console.log(tax);

出力結果

1200

アロー関数

モダンなJavaScript（ES6以降）で使われる、関数を短く書く記法です。

// 通常の書き方 
function double(x) { 
return x * 2; 
}

// アロー関数での書き方 const doubleArrow = x => x * 2;

解説：

=>（矢印）を使って定義します。中身が1行だけなら return や { } を省略できるため、コードがスッキリします。

6. オブジェクト（連想配列）

データに名前（キー）をつけて管理する方法です。

const user = { id: 123, name: 'Taro Aoki', age: 24 };

console.log(user.name); 
console.log(user.age);

出力結果

Taro Aoki
24

解説：

配列が番号で管理するのに対し、オブジェクトは name や age といったキーで値を管理します。

オブジェクト名.キー名 で値を取り出せます。

まとめ

これらはJavaScriptの最も基本的な文法ですが、どんな複雑なアプリもこれらの組み合わせで作られています。

まずはこのページにあるコードを実際にエディタに書いて、動かしてみてください。

「書いたら動いた！」という小さな成功体験が、プログラミング学習の一番の近道です。