概要
JavaScriptの基本文法のまとめを、学習のアウトプット用に一覧化した。
各種サイトを参考に、自分なりに理解ができているか文法をアレンジし実行確認している。
セミコロンを忘れがち。
環境
実行環境：VScode
バージョン:ES6
参考サイト：
とほほのJavaScript入門
Progate-JavaScriptスライド(一部引用)
基本文法一覧
文字の出力 & コメントアウト
JavaScript
//コメントアウト
console.log('Hello World!');
console.log("Hello World!!");
Hello World!
Hello World!!
'(シングルクオーテーション)でも"(ダブルクオーテーション)でもいい。
変数定義と更新
JavaScript
// <変数の宣言> <変数名> = <代入する値>;
let name = "Honda";
console.log(name);
//変数の更新 ※変数の宣言はしない
name = "Kawasaki";
console.log(name);
Honda
Kawasaki
変数定義はlet
定数定義 (更新できない)
JavaScript
//<定数の宣言> <定数名> = <代入する値>;
const name = "Yamaha";
console.log(name);
Yamaha
定数定義はConst
Ex.定数なので更新はできない
const name = "Yamaha";
console.log(name);
name = "Suzuki";
console.log(name);
Error
name = "Suzuki";
^
TypeError: Assignment to constant variable.
テンプレートリテラル
JavaScript
const name_1 = "Honda";
const name_2 = "Kawasaki";
//``(バッククォーテーション)で囲み、${}をつける
console.log(`これは${name_1}です。`);
console.log(`あれは${name_2}です。`);
これはHondaです。
あれはKawasakiです。
数値と計算
JavaScript
//四則演算
console.log(1 + 1);
console.log(2 - 1);
console.log(1 / 2);
console.log(2 * 2);
//剰余
console.log(10 % 7);
2
1
0.5
4
3
比較演算子、等価演算子、厳密等価演算子
JavaScript
const age = 16;
//比較演算子
console.log(age < 16); //定数ageより小さい? ⇒ False
console.log(age <= 16); //定数age以下のため? ⇒ True
console.log(age > 16); //定数ageより大きいため? ⇒ False
console.log(age >= 16); //定数age以上のため? ⇒ True
//等価演算子
console.log(age == 16); //定数ageと等価ですか？ ⇒ True
console.log(age != 16); //定数ageと等価ではないですか? ⇒ False
console.log(age == "16"); //暗黙的変換が行われる ⇒ ※True
//厳密等価演算子
console.log(age === 16); //定数ageと厳密に等価ですか？ ⇒ True
console.log(age !== 16); //定数ageと厳密に等価ではないですか？ ⇒False
console.log(age !== "16"); //文字列と数値は別物ですと厳密に判断 ⇒ ※False
真偽値(TrueかFalseか)を判断し返す。
論理演算子
// AND , かつ , ∩
True && True ⇒ True
True && False ⇒ False
False && True ⇒ False
False && False ⇒ False
// OR , または , ∪
True || True ⇒ True
True || False ⇒ True
False || True ⇒ True
False || False ⇒ False
条件分岐 if文
JavaScript
if (条件式1){
条件1がTrueの処理;
}else if(条件式2){
条件1がFalseで条件2がTrueの処理;
}else{
上の条件式がどれもFalseの処理;
}//※ここのセミコロンは不要
条件式の真偽値(TrueかFalseか)で判断し処理を返す。
JavaScript
const age = 17;
const license = true;
if (age >= 20 && license) {
console.log("車に乗れます。");
} else if (age >= 16 && license){
console.log("車は乗れませんが、バイクに乗れます。");
} else if (age >=20 || license){
console.log("運転できる可能性を秘めています。");
}else{
console.log("運転できません。");
}
車は乗れませんが、バイクに乗れます。
条件分岐switch文
JavaScript
switch (){
case 値1: //コロン
「条件の値」が「値1」と等しい処理;
break;
case 値2: //コロン
「条件の値」が「値2」と等しい処理;
break;
}
caseに置いた値が等しい場合、処理を返す。
case毎にbreakを置かないとすべてのcaseが返される。
JavaScript
const color = "赤"
switch(color){
case"赤":
console.log("STOP！");
break;
case"黄":
console.log("WARNING！");
break;
default:
console.log("OK");
break;
}
STOP!
繰り返し処理 While文
JavaScript
While (条件式){
処理;
}
条件式に繰り返す条件を入れ、処理を繰り返す。
JavaScript
let number = 1;
while (number <= 10){
console.log(number);
number += 1;
}
1
2
3
4
5
6
7
8
9
10
繰り返し処理 for文
JavaScript
for (変数定義; 条件式; 変数の更新){
処理;
}
JavaScript
for(let number = 1; number <= 10; number += 1){
console.log(number);
}
1
2
3
4
5
6
7
8
9
10
配列 定義・取得・更新・繰り返し処理
JavaScript
//定義
const model =["SuperCub50", "CBR250", "CB125"];
//取得
console.log(model);
console.log(model[0]);
console.log(model[2]);
//更新
model[2] = "NC750";
console.log(model);
console.log(model[2]);
//繰り返し処理 : 変数iがリストのインデックスの数まで(lengthで数える)繰り返す
for (let i = 0; i < model.length; i++){
console.log(model[i]);
}
//要素の取得
['SuperCub50', 'CBR250', 'CB125']
SuperCub50
CB125
//更新後
['SuperCub50', 'CBR250', 'NC750']
NC750
//繰り返し処理
SuperCub50
CBR250
NC750
オブジェクト プロパティの定義・取得・更新
1つのオブジェクトの場合
JavaScript
//定義
const model = "SuperCub50";
const superCub50 = {maker: "Honda", cc: 50, price: 200000};
//取得
console.log(superCub50);
console.log(`${model}のメーカーは${superCub50.maker}です。`);
//更新
superCub50.price = 250000
console.log(superCub50);
//
//取得
{maker: "Honda", cc: 50, price: 200000}
SuperCub50のメーカーはHondaです。
//更新
{maker: "Honda", cc: 50, price: 250000}
オブジェクトを要素に持つ場合
JavaScript
//リストの中にオブジェクトを入れる
const honda_items = [
{name: "SuperCub50", cc: 50, price: 250000},
{name: "CBR250", cc: 250, price: 850000},
{name: "NC750", cc: 750, price: 1000000}
]
//(1)リストの取り出し方で要素(オブジェクト)を取得
console.log(honda_items[1]);
//(2)要素の中のオブジェクトのプロパティを取得
console.log(honda_items[1].name);
//(3)繰り返し処理 + 条件分岐
for (let i= 0; i < honda_items.length; i++){
const honda = honda_item[i];
if (honda.cc >= 400){
console.log(`${honda.name}の値段は${honda.price}です。大型二輪免許が必要です。`);
}else if (honda.cc >= 51) {
console.log(`${honda.name}の値段は${honda.price}です。普通自動二輪免許以上が必要です。`);
}else{
console.log(`${honda.name}の値段は${honda.price}です。自動車免許か、原動機付き自転車免許が必要です。`);
}
}
//(1)
{name: "CBR250", cc: 250, price: 850000}
//(2)
CBR250
//(3)
SuperCub50の値段は250000です。自動車免許か、原動機付き自転車免許が必要です。
CBR250の値段は850000です。普通自動二輪免許以上が必要です。
NC750の値段は1000000です。大型二輪免許が必要です。
関数定義
function宣言
JavaScript
function 関数名 (引数1, 引数2) {
処理;
}
//呼び出し
関数名(引数1, 引数2);
最も基本的な関数定義
関数式
JavaScript
const 定数名 = function(引数1, 引数2){
処理;
}
//呼び出し
定数名(引数1, 引数2);
function宣言と関数式の違い
function宣言は、JavaScriptがスクリプトやコードブロックを実行するまでに、関数オブジェクトを生成
⇒定義された関数名を先に呼び出せる。
関数式は、その式が実行されるときに関数オブジェクトを生成
⇒定義された関数を先に呼び出すとエラーが起きる。
アロー構文
JavaScript
const 定数名 = (引数1, 引数2) =>{
処理;
}
//呼び出し
定数名(引数1, 引数2);
出力は関数式と同じ。=>は⇒(矢印)と思えばいい。
return
JavaScrip
const add = (a, b) =>{
return a + b;
}
add(1, 2);
3
returnで戻り値を返し、関数の処理を終了させる。
以降の処理は実行されない。