JavaScriptの基本をまとめました

JavaScriptの基本

JavaScript(EC6)の基本的な構文をまとめました。
JavaScriptでの書き方を見返すためのチートシートとして作成しました。

出力

//コンソールへの出力
console.log("hogehoge");

テンプレートリテラル

let name = "佐藤";
//変数や定数を文字列に埋め込んで出力する場合には以下が必要
//①バッククォート(`)で囲む
//②${}で囲む
console.log(`名前は${name}です`);
//名前は佐藤ですが出力される

変数・定数の定義

var(変数)

再定義：可能
再代入：可能

var name = "佐藤";
console.log(name); //佐藤が出力される

var name = "田中";
console.log(name); //田中が出力される(再定義可能)

name = "鈴木";
console.log(name); //鈴木が出力される(再代入可能)

let(変数)

再定義：不可能
再代入：可能

let name = "佐藤";
console.log(name); //佐藤が出力される

let name = "田中";
console.log(name); //エラーになる(再定義不可能)

name = "鈴木";
console.log(name); //鈴木が出力される(再代入可能)

const(定数)

再定義：不可能
再代入：不可能
これで定義された定数は必ず同じ値が入っていることを保証できる

const name = "佐藤";
console.log(name); //佐藤が出力される

const name = "田中";
console.log(name); //エラーになる(再定義不可能)

const name = "鈴木";
console.log(name); //エラーになる(再代入不可能)

if文(条件分岐)

与えた条件によって処理を分岐させたい場合

if(条件式1){
  条件式1がtrueなら実行する処理
} else if(条件式2) {
  条件式2がtrueなら実行する処理
} else {
  条件式が全てfalseなら実行する処理
}

switch文(条件分岐)

switch(num){
  case 2:
    console.log("2です");
    break;
  case 3:
    console.log("3です");
    break;
  default:
    console.log("当てはまる数字はない")
    break;
}

breakはswitch文を抜け出すために記述するもの。case2だった場合にbreakを書かないとcase3の処理もdefaultの処理も実行してしまう。

defaultは当てはまるケースがない場合に実行する処理を記述する

繰り返し処理

while

基本の形
いずれ条件式がfalseになる処理を記述しないと無限ループしてしまう

while (条件式) {
  条件式がtrueなら実行する処理
}

記述の例
numberが100以下ならばその数字を出力をする

let number = 1;         //変数numberに1を定義
while (number <= 100) { //①numberに入っている数字が100以下ならtrueを返す。falseなら処理終了
  console.log(number);  //②numberに入っている数字を出力する
  number += 1;          //③numberに入っている数字に1を足す
}                       //再び①の処理に戻る

for

while文よりも記述が少なくかける繰り返し処理
forの(　)内に記述する処理は;で区切る

for(変数の定義; 条件式; 変数の更新){
  処理
}

記述の例
numberが100以下ならばその数字を出力する

//下記は以下を行なっている
//変数numberに1を入れて定義
//numberが100以下ならばtrueを返す。falseならば処理狩猟
//numberに1を足す
for(let number = 1; number <= 100; number += 1){
  console.log(number); //numberが出力される
}

配列

配列は[ ]で囲むことで定義できる。
配列の中の値にはインデックス番号(順番)がついている。この番号は0から始まるので注意。
例として下の配列の中の1のインデックス番号は0である。

const number = [1, 2, 3, 4];

インデックス番号を指定すると値を指定できる

console.log(number[0]); //1が出力される

オブジェクト

オブジェクトはプロパティと値をセットで持つことができる。
オブジェクトは{}で囲む
プロパティと値の間には:をいれる

const food = {name: "おにぎり", price: 150};

オブジェクトのプロパティを指定して値を取り出すことができる

console.log(food.name); //おにぎりが出力される

undefind

オブジェクトにないプロパティを指定するとundefindとなる

console.log(food.size); //存在しないsizeを指定すると
                        //undefindが出力される

関数

関数とはいくつかの処理をまとめたものである。

関数の定義

基本の定義

const 定数名 = function() {
  //処理
}

上記の形で処理を定数名をつけてまとめることができる。

アロー関数

functionを書くよりも() =>を使ってシンプルに書くことができる。

const 定数名 = () => {
  //処理
}

引数が必要な場合には以下のように記述する

const 定数名 = (引数) => {
  //処理
}

戻り値

関数から返ってくる値を戻り値という
戻り値を返すにはreturnを使用する

//引数に受け取った値を2倍にして戻り値として返す関数であるdoubleNumberを定義
const doubleNumber = (num) => {
  return num * 2; //returnが無いと戻り値を返せない
}

//変数resultに関数doubleNumberの戻り値を代入。引数は1
let result = doubleNumber(1);

//引数で渡した1を2倍にした数である2が出力される
console.log(result);

コールバック関数

基本の定義
関数の中でさらに関数を呼び出すことができる。

//関数oneを定義
const one = () => {
  console.log("関数1"); //関数1が出力される 
}

//コールバック関数であるcallを定義
const call = (callback) => {
  console.log("コールバック関数を呼び出す");
  callback();
}

//コールバック関数の呼び出し
call(one);
//コンソールは以下が出力される
//コールバック関数を呼び出す
//関数1

クラス

クラスはオブジェクトの設計図である。
クラス名は大文字から始まることに注意
クラスの定義

//クラスFoodを定義
class Food {

}

インスタンス

設計図であるクラスから作られた子どもがインスタンスである。
インスタンスの生成

const food = new Food();

コンストラクタ

コンストラクタはインスタンスの生成時に実行する処理や設定を追加するためもの。
このコンストラクタに書いた処理はインスタンスを生成した直後に実行される。
オブジェクトのようにプロパティと値を持つことができる。

class Food {                 //クラスFoodの定義
  constructor(name, pprice){ //コンストラクタの処理。引数nameとpriceを受け取る
    this.name = name;        //このクラスのプロパティnameに引数のnameを代入
    this.name = price;       //このクラスのプロパティpriceに引数のpriceを代入
  }
}

//foodという定数名でnameがおにぎり、priceが150のインスタンスを生成する
const food = new Food("おにぎり", 150);  

メソッド

クラスに関数としてメソッドを持たせることができる。

class Food {
  constructor(){
  }
  smell(){
    console.log("美味しい匂いがする");
  }
}

const food = new Food(); //インスタンスを生成
food.smell();            //インスタンスが持つメソッドを実行
                         //美味しい匂いがするが出力される

メソッドと関数は何が違うのか

メソッドはクラスの持つ動作を指す。
クラスに関数を持たせたものがメソッドである。
オブジェクト指向において現実世界にそのオブジェクトを置き換えた際に持つ概念や動作をメソッドとして定義している。
例として現実世界の動物である犬を表現したいclass Dogがあったとして、犬は吠えるという動作を持っているのでメソッドとしてhoeruを持つという考え方ができる。

継承

クラスを別のクラスに継承することができる。
extendsを記述してその後に継承元のクラス名を記述する。
継承すると継承元が持っていたプロパティやメソッドを継承先でも呼び出すことができる。
親のクラスが子クラスが持つプロパティやメソッドなどを呼び出すことはできない。

class Menu extends Food {

}

オーバーライド

継承すると親クラスのメソッドを子クラスでも呼び出せる。
その継承したメソッド名と同じメソッドを子クラスでも定義した場合には子クラスのメソッドが優先される。
上から上書きしていることからオーバーライドという。

最後に

簡単ではありますがいつでも見返せるようにまとめさせていただきました。