JavaScript 基本文法

はじめに

この記事はJavaScriptの抑えとくべき基本的な知識や文法をまとめる．

コメント

// これは1行コメントです

/*
  これは
  複数行
  コメントです
*/

データ型

JavaScriptにはプリミティブ型とオブジェクト型の2種類のデータ型がある．
○プリミティブ型

• 真偽値(Boolean)：trueまたはfalse
• 数値(Number)：42や3.14などの数値
• 巨大な整数(BigInt)：9007199254740992nなどの任意精度の整数
• 文字列(String)："JavaScript"などの文字列
• undefined：値が未定義であることを示すデータ
• null：値が存在しないことを意味するデータ
• シンボル(Symbol)：一意で不変な値のデータ

○オブジェクト型
→オブジェクト，配列，関数，クラスなど．プリミティブ型でないものはオブジェクト型であると覚えても問題ない

変数・定数の宣言

他の静的型付け言語は，代入する値の種類(文字列や数値など)によって宣言時の型が異なる.
JavaScriptは動的型付け言語であるため，代入する値の種類ではなく，再宣言・再代入可能かアクセス可能かによって，
var，const，letの３つの方法で変数を宣言する．
○var

{ 
  var data1 = 1;
  var data1 = 2; //再宣言可能
  data1 = 3; //再代入可能
}
console.log(data1); //ブロック{}外からアクセス可能

○let

{ 
  let data1 = 1;
  let data1 = 2; //再宣言不可能 => エラー
  data1 = 3; //再代入可能
}
console.log(data1); //アクセス不可能 => エラー

○const

{ 
  const data1 = 1;
  const data1 = 2; //再宣言不可能 => エラー
  data1 = 3; //再代入不可能 => エラー
}
console.log(data1); //アクセス不可能 => エラー

配列

○配列の初期化と宣言

//初期化
var array = [];
//宣言方法１
var array1 = new Array('a','b','c');
//宣言方法２
var array2 = ['a','b','c'];

○配列の要素を取得

var array = ['a','b','c'];

console.log(array[0]); // => a
console.log(array[2]); // => c

○配列の要素を追加

var array = ['a','b','c'];
//方法１
array[3] = 'd'; // => 4番目に追加
//方法２
array.push('e'); // => 最後尾に追加

○配列の要素を削除

var array = ['a','b','c'];

delete array[1]; // => 2番目の削除
console.log(array); // => ['a','c']

関数の宣言

○関数宣言

function myFunction(argument){
    //関数の処理
}

○関数式

const myFunction = function(argument){
    //関数の処理
}

○アロー関数

const myFunction = (argument) => {
    //関数の処理
}

テンプレート文字列

JavaScriptのテンプレート文字列を用いることで，文字列の中に変数を埋め込むことができる．

const name = taro;
const age = 20;

// テンプレート文字列を用いた例
const message = `My name is ${name} and I am ${age} years old.`;

演算子

JavaScriptには，四則演算を行う演算子やif文などで用いる条件比較の為の演算子，数値の大小を比較する演算子など様々なタイプの演算子がある．
算術演算子
加算演算子(+)，減算演算子(-)，乗算演算子(*)，除算演算子(/)，剰余演算子(%)，
インクリメント演算子(++)，デクリメント演算子(--)，べき乗演算子(**)

代入演算子
代入演算子(=)，加算代入演算子(+=)，減算代入演算子（-=），乗算代入演算子(*=)，
除算代入演算子(/=)，剰余代入演算子(%=)，べき乗代入演算子(**=)

論理演算子
論理積演算子(&&)，論理和演算子(||)，論理否定演算子(!)

比較演算子
等価演算子(==)，不等価演算子(!=)，厳密等価演算子(===)，厳密不等価演算子(!==)，
大なり演算子(>)，小なり演算子(<)，大なりイコール演算子(>=)，小なりイコール演算子(<=)

条件分岐

JavaScriptでは，条件分岐にif，else，switchを利用する．
○if-else文

if(条件式){
    //条件式がtrueの時に実行する処理
}else if(条件式２){
    //条件式２がtrueの時に実行する処理
}else{
    //どちらの条件式もfalseの時に実行する処理
}

○switch文

switch(式){
    case 条件１:
        //式が条件１と同じ時に実行する処理
        break;
    case 条件2:
        //式が条件２と同じ時に実行する処理
        break;
    defalut:
        //式がいづれのcaseと一致しない場合に実行する処理
}

繰り返す処理

javascriptの繰り返し処理にはforとwhileを利用する．
○for文

//初期化式：繰り返す回数をカウントする変数の初期化
//条件式：繰り返しを継続する条件
//変化式：「初期値」を増減する式

for(初期値; 条件式; 変化式){
    //繰り返す処理
}

○while文

while(条件式){
    //実行する処理
}

○do-while文

do{
    //実行する処理
}while(条件式);

○for文

for(初期値; 条件式; 変化式){
    //繰り返す処理
}

オブジェクト

オブジェクトはプロパティの集合である．プロパティ名(key)と値(value)をペアとして管理することができる．
○オブジェクトの定義方法

const person = {
  //key: value
    name: "Taro",
    age: 20,
    greet:function(){ console.log('Hello!!');}
}; 

console.log(person.name); // => Taro
person.greet(); // => Hello!!

クラス

JavaScriptはクラスを使うことでオブジェクト指向プログラミングの概念を実現する．
クラスはコンストラクタやメソッドなどを含み，それらを使うことでオブジェクトの生成・操作することができる．
○クラスの定義方法

class MyClass {
    //コンストラクタの定義
    constructor(){
        //オブジェクトの初期化を行う
    }
    //メソッドの定義
    method(){
        //処理を記述
    }
}

○コンストラクタの定義方法

class Person {
    //コンストラクタの定義
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
//オブジェクトの生成
const Taro = new Person("Taro",20);
console.log(Taro.name + "(" + Taro.age + ")"); // => Taro(20)

○メソッドの定義方法

class Person {
    //メソッドの定義
    greet(){
        console.log("Hello!!");
    }
}
//オブジェクトの生成
const Taro = new Person();
Taro.greet(); // => Hello!!