[JS] JavaScriptの基本構文まとめ（if, for, 配列, 計算, 日付, etc…)

2023-04-22

JavaScriptの基本的な文法のまとめです。

他の言語のまとめはこちら：
JavaScript（JS）の基本構文まとめ（当記事）
PHPの基本構文まとめ
 Shopify Liquidの基本構文まとめ

変数宣言

// 昔の書き方
var hello = 'Hello world!';
// 最新の書き方
const hello = 'Hello world!'; //定数
let hello = 'Hello world!';   //変数

// デバッグ
console.log(hello);

条件分岐（if）

const num = 70;

if(num >= 80){
  console.log('80以上です');
}else if(num >= 50){
  console.log('50以上です');
}else{
  console.log('50未満です');
}

比較演算子

A == B	AとBが等しい
A != B	AとBが等しくない
A > B	AがBより大きい
A >= B	AがB以上
A < B	AがBより小さい（未満）
A <= B	AがB以下

複数の条件で条件分岐する（AND,OR)

const numA = 30;
const numB = 70;

if(numA >= 50 && numB >= 50){
  console.log('numAとnumB、両方とも50以上です');
}
if(numA >= 50 || numB >= 50){
  console.log('numAとnumB、どちらか(もしくは両方)が50以上です');
}

繰り返し（for）

//コンソールに1～10を順番に出す
for(let i=1; i<=10; i++){
  console.log(i);
}

四則演算

足し算「+」

let num = 10;
console.log(num + 5); //10+5=15

num++; //10+1と同じ
console.log(num); //11

引き算「-」

let num = 10;
console.log(num - 5); //10-5=5

num--; //10-1と同じ
console.log(num); //9

掛け算「×」「*」

let num = 10;
console.log(num * 3); //10×3=30

割り算「÷」「/」「%」

let num = 10;
console.log(num / 3); //10÷3=3.33333...
console.log(num % 3); //10÷3の余り=1

配列

基本の配列

配列（[]）の宣言と、値の読み取り方です。

let array = ['りんご', 'みかん', 'ぶどう'];

console.log(array[0]); //りんご
console.log(array[1]); //みかん
console.log(array[2]); //ぶどう

配列の値を先頭から処理するには、forEachを使います。

let array = ['りんご', 'みかん', 'ぶどう'];

array.forEach(function(e,i){
  console.log(e); //りんご,みかん...
  console.log(i); //0,1...
});

配列の追加は.pushを使います。

let array = ['りんご', 'みかん', 'ぶどう'];
array.push('もも');

console.log(array); //["りんご","みかん","ぶどう","もも"]

多次元配列

配列の中に配列が入っているものを「多次元配列」といいます。

let array = [
  ['りんご', '赤'],
  ['みかん', 'オレンジ'],
  ['ぶどう', '紫'],
];

console.log(array[0][0]); //りんご
console.log(array[0][1]); //赤

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

「キー：値」で構成する配列を「連想配列（オブジェクト）」といいます。
連想配列では[]ではなく{}を使う点に注意です。

let array = {
  name: 'りんご',
  color: '赤',
  price: 300,
};

console.log(array.name); //りんご
console.log(array.color); //赤
console.log(array.price + '円'); //300円

連想配列の中に連想配列が入るサンプルです。
forEachで先頭から処理したい場合は、Object.keys(配列名)という記述が必要になります。

let array = {
  'りんご': {
    color: '赤',
    price: 300,
  },
  'みかん': {
    color: 'オレンジ',
    price: 100,
  },
  'ぶどう': {
    color: '紫',
    price: 500,
  },
};

console.log(array['りんご'].color); //赤

Object.keys(array).forEach(function(key) {
  console.log(key + 'の色は' + array[key].color); //りんごの色は赤, みかんの色はオレンジ...
});

日付

const today = new Date();
console.log(today); //2023-01-02T10:30:00.874Z

console.log(today.getFullYear() + '年');  //2023年
console.log((today.getMonth()+1) + '月'); //1月
console.log(today.getDate() + '日');      //2日
console.log(today.getHours() + '時');     //10時
console.log(today.getMinutes() + '分');   //30分
console.log(today.getSeconds() + '秒');   //0秒

他の言語のまとめはこちら：
JavaScript（JS）の基本構文まとめ（当記事）
PHPの基本構文まとめ
 Shopify Liquidの基本構文まとめ