【JavaScript】基礎総まとめ

JavaScriptの基礎をまとめています。

Rubyを一通り学んだ後にJavaScriptをまなんだため、ちょいちょいRubyとの比較を入れております。

変数

命名ルール

2語以上の場合は大文字で区切る！

例：　phoneNumber

変数定義

let number = 0;

変数 let と定数 const の使い分け

let は値の再代入が必要なときだけで、

それ以外は const を積極的に使うようにする！

テンプレートリテラル

const name = "punks";
console.log(`${name}はNFT`);

バッククォーテーションで囲む
${定数}

ちなみにこれがRubyだとこうなる。

name = punks
p "#{name}はNFT"

条件分岐

if文

if (条件式) {
  処理
} else if (条件式){
  処理
} else {
  処理
}

例
if (number > 10) {
  console.log("10より大きいです");
} else if (number > 5){
  console.log("5より大きいです");
} else {
  console.log("5以下です");
}

if文の閉じ括弧にはセミコロンは不要

よく忘れる、以上・以下の比較演算子

a <= b
a >= b

=を付けるのが右だったか左だったか忘れがち。
付けるのは右側！

比較演算子

a === b
a !== b

=は3つ！2つじゃない！

厳密には、== の比較演算子もある！

==と===は、以下の違いがある。

== 値の比較。型が異なれば両方の型が同じとみなされて比較される。

=== データ型含めた値の比較

そのため、==は基本使用することはない。

switch文

switch (条件の値) {
  処理
}

Rubyのcase文とはcaseを使うところがちょっと違うね！

例
const color = "緑"
switch (color) {
  case "赤":
    console.log("ストップ！");
    break;
  case "黄":
    console.log("要注意");
    break;
  default:
    console.log("colorの値が正しく無いです");
    break;
}

switch文を使うときはbreakが必要！
defaultはif文でいうとelseのようなもの。caseのどれにも一致しなかった場合、defaultが実行される。

while文

繰り返し処理を行う。

while (条件式) {
  繰り返す処理
}

例
let number = 1;
while (number <= 100) {
  console.log(number);
  number += 1;
}

for文

できることはwhile文と同じだか、少しシンプルに書ける。

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

例
for (let number = 1; number <= 100; number += 1) {
  console.log(number);
}

・「number = 1」最初に実行する処理

・「number <= 100」numberが100より大きくなるまで繰り返される

・「number += 1」反復の終了時に実行される

最後は101が入り、100以下という条件を満たさずに処理が終了する。

for文の中にif文をネストすることもできる。

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

計算式の省略

計算式を以下のように省略することができる

number += 1
  ↓
number++

number -= 1
  ↓
number--

配列

const fruits = ["banana", "grape", "orange"];

配列を取得する
console.log(fruits);

配列の要素を取得する
console.log(fruits[0]);

要素に値を上書き
fruits[0] = "apple";

変数名は”複数形”とする

for文による配列要素の取り出し

const fruits = ["banana", "grape", "orange"];
for (let i = 0; i < 3; i++) {
  console.log(fruits[i]);
}

配列の数を指定するときにlengthを使用する
const fruits = ["banana", "grape", "orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

オブジェクト

const 定数名 = { プロパティ1: 値1, プロパティ2: 値2 };

console.log(定数名.プロパティ);

値の上書き
定数名.プロパティ = 値;

Rubyで言うハッシュ。キーとバリュー。言い方違うんだな！

オブジェクトの中に、オブジェクトを入れることも、配列を入れることもできる。

const cafe = {
  name: "punksカフェ",
  businessHours: { 
    opening: "8:00(AM)",
    closing: "10:00(PM)"
  },
  menus: ["ブレンドコーヒー", "アイスコーヒー", "アメリカンコーヒー"]
};

オブジェクトの中に入れた配列は=でなく:

関数

関数とは、いくつかの処理をまとめたもののことを言う。

関数の定義の仕方

以下のようにfunction(){ }で囲う。

const 定数名 = function() {
  まとめたい処理
};

例
const cafe = function() {
  console.log("コーヒー");
  console.log("アップルパイ");
};
cafe();

関数の呼び出しの書き方は結構シンプル！

アロー関数

上記の関数のfunctionの部分をよりシンプルに書くことができる。

これは、ES6から導入された新しい書き方。

const cafe = () => {
  console.log("コーヒー");
  console.log("アップルパイ");
};
cafe();

function()
  ↓
() =>

わかりにくいが覚えるしかないな！

アロー関数のネスト

const user = {
  name: "punks",
  greet:() => {
    console.log("Hello");
  }
};
user.greet();

> Hello

関数でないnameは以下のように呼び出せる。
console.log(user.name);

引数

関数の中で使用する値を渡す。

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

例
const introduce = (name) => {
  console.log(`私は${name}です`);
};
introduce("punks");

値が引数に代入される。

引数が複数の場合

カンマで区切るだけ！

const introduce = (name, age) => {
  console.log(`私は${name}です`);
  console.log(`年齢は${age}です`);
};
introduce("punks", 10);

戻り値

戻り値とは

呼び出し元で受け取る関数の処理結果のこと

戻り値を受け取るにはreturnを使う！

const add = (a, b) => {
  return a + b;
};
const sum = add(2, 3);
console.log(sum);

console.logだとその時点で出力してしまうが、returnだと、関数の外に値を渡せる。

関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことができない。

この使用できる範囲のことをスコープという。

逆に、関数の外で定義した定数や変数は、関数の中でも使うことができる。

最大値を求める関数

const number1 = 100;
const number2 = 200;
const number3 = 300;

const getMax = (a, b, c) => {
  let max = a;
  if (b > max) {
    max = b;
  }
  if (c > max) {
    max = c;
  }
  return max;
};

const max = getMax(number1, number2, number3);
console.log(`最大値は${max}です`);

クラス

class User {

}

クラス名は大文字から

クラスからオブジェクトを生成する

クラスからオブジェクトを生成するには”new クラス名()”とする。

そしてこの生成されたオブジェクトをインスタンスと呼ぶ

class User {
}
const user = new User();

コンストラクタ

クラスの中にはコンストラクタという機能を用意する。

class User {
  constructor() {
    console.log("punks");
  }
}
const user1 = new User();
const user2 = new User();

> punks
> punks

コンストラクタ内の処理はインスタンスが生成された直後に実行され、インスタンス毎に毎回実行される。

プロパティと値を追加する

“this.プロパティ = 値”とすることで、

生成されたインスタンスにプロパティと値を追加することができる。

class Dog {
  constructor() {
    this.name = "フレブル";
  }
}
const dog = new Dog();
console.log(dog.name);

> フレブル

これで、{ name: フレブル }のようになる

this.で追加だワン

コンストラクタの引数

引数は、constructor( )の中に記述する。

class Dog {
  constructor(name, age) {
    this.name = name;
    this.name = age;
  }
}
const dog = new Dog("フレブル", 10);

メソッド

メソッドとは、処理のまとまりを表すもの。

メソッドは以下のように定義する。

class クラス名 {
  constructor() {
  }
  メソッド名() {
    処理
  }
}

書き方は、constructorと似ている。

class Dog {
  constructor(name, age) {
    this.name = name;
    this.name = age;
  }
  greet() {
    console.log("Hello!");
  }
}
const dog = new Dog("フレブル", 10);
dog.greet();

> Hello!

「インスタンス.メソッド名()」でメソッドを呼び出し。

メソッド内でインスタンスの値を使う

class Dog {
  constructor(name, age) {
    this.name = name;
    this.name = age;
  }
  info() {
    console.log(`名前は${this.name}です`);
  }
}
const dog = new Dog("フレブル", 10);
dog.info();

> 名前はフレブルです

メソッド内でインスタンスの値を使うときは、「this.プロパティ名」とする。

メソッド内でメソッドを使う

class Dog {
  constructor(name, age) {
    this.name = name;
    this.name = age;
  }
  greet() {
    console.log("こんにちは")
  }
  info() {
    this.greet();
  }
}

this.greet()でgreetメソッドを呼び出せる。

クラスの継承

Drinkクラスを継承してCoffeeクラスを作成する場合

class Coffee extends Drink {

}

これにより、CoffeeクラスはDrinkクラスの全ての機能を引き継ぐことになる。

そのため、Drinkクラス内で定義したメソッドを使用できる。

Drinkを親クラス、Coffeeを子クラスという。

メソッドの戻り値

class Dog extends Animal {
  getHumanAge() {
    return this.age*7;
  }
}
const dog = new Dog("ソルサ", 12);
const humanAge = dog.getHumanAge();  //　humanAgeに定数dogに対しgetHmanAgeメソッドを呼び出した値を代入
console.log(humanAge);

> 84

上記の場合、new DogとしてDogインスタンスを生成しているが、Animalインスタンスを生成した場合は、メソッド定義が子クラスのDogのため、呼び出すことができない。

親クラスと子クラスで同名のメソッド

class Animal {
  info() {
  }
}
class Dog extends Animal {
  info() {
  }
}

const dog = new Dog("ソルサ", 12);
dog.info();

上記の場合、AnimalクラスとAnimalクラスを継承した子のDogクラス両方でinfoメソッドを呼び出している。

この場合、子のDogが優先される。

つまり、子のDogのinfoメソッドが上書き（オーバーライド）されることになる。

コンストラクタのオーバーライド

コンストラクタにオーバーライドする際は1行目にsuper()を記述する。

class 子クラス extends 親クラス {
  constructor() {
    super()
      処理
  }
}

この「super()」により、親クラスのコンストラクタを呼び出している。

親クラスのコンストラクタに引数を渡すにはこの部分に引数を記述する。

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
}

親のAnimalで使用している引数nameとageを、子のDogへsuperで渡す。

クラス毎にファイルを分ける

コードの量が多いと１つのファイルで管理するのが大変になるため、ファイルを分ける。

ファイルを分けた場合、必要な情報がなくなってしまうため、何点か追加で記述が必要になる。

class Animal {
  
}
export default Animal;

基のクラスのファイルに上記のように記述することで、Animalクラスを他のファイルに渡すことができるようになる。

また、Animalクラスを受け取る側にも記述する必要がある。

import クラス名 from "./ファイル名";

例
import Animal from "./animal";

ファイルの中での記述位置は、

exportはファイルの最後に、

importはファイルの冒頭に記述する。

値のエクスポート

エクスポートは、クラスだけでなく、文字列や数値、関数などの値もすることができる。

エクスポート側
const text = "Hello";
export default text;

インポート側
import text from "./ファイル名";
console.log(text);

import text の”text”の部分は、export default text の”text”と必ずしも一緒である必要はない。

from “./ファイル名”でインポートされるため。

export default（デフォルトエクスポート）は1ファイル1つの値しか使えない。

複数の値をエクスポートする場合

defaultを書かずに、名前を{ }で囲って指定する。

エクスポート側
const text1 = "Hello";
const text2 = "Goodmorning"
export { text1, text2 };

インポート側
import { text1, text2 } from "./ファイル名";
console.log(text);

パッケージのインポート方法

import 定数名 from "パッケージ名";

定数名はパッケージ名とかにすればよい

そもそもパッケージとは？

だれかが作ってくれた便利なフレームワークのこと。

これを、自分のプログラムに組み込んで使うことができる。

配列を操作するメソッド

push

const numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);

> [1, 2, 3, 4]

配列に4を加えることができる。

forEach

forEachの中身はコールバック関数を持ちます。

配列の要素を１つずつ処理して、１つずつ出力する。（コールバックする）

配列 = [要素1, 要素2, 要素3];
配列.forEach((引数) => {処理});

配列の中の要素1,要素2,要素3を１つずつ引数に渡して、処理している。

例
const numbers = [1, 2, 3];
numbers.forEach((number) => {
  console.log(number);
});

>
1
2
3

(number) => {console.log(number);} 
この部分をコールバック関数と呼ぶ。

for文と働き（出力結果）は同じですが、forEachを使った方が、簡単に書くことができます。

全く同じ出力をfor文でしようとすると、以下になります。

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

引数の有無の違いがあります。forEachの方がシンプルに書ける上に、for文内でインデックスを指定する必要もないですね。

find

条件式に合う最初の1つ目の要素を配列の中から取り出すメソッド

const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((number) => {
  return number > 3;
});
console.log(foundNumber);

> 4

オブジェクトでのfindメソッドの使用

const dogs = [
  {id: 1, name:"チワワ"},
  {id: 2, name:"フレブル"}
];
const foundDog = dogs.find((dog) => {
  dog.id === 1;
});
console.log(foundDog);

> {id: 1, name:"チワワ"}

filter

条件に合う要素全てを取り出すメソッド。

コールバックに合格した要素からなる新しい配列を生成する。

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter((number) => {
  return number > 3;
});
console.log(filteredNumber);

> [4, 5]

配列で出力される。

オブジェクトでのfilterメソッドの使用

const dogs = [
  {id: 1, name:"ソルサ", age:12},
  {id: 2, name:"グール", age:3},
  {id: 3, name:"ラッキー", age:11}
];
const filteredDogs = dogs.filter((dog) => {
  return dog.age > 10;
});
console.log(filteredDogs);

> [
    {id: 1, name:"ソルサ", age:12},
    {id: 3, name:"ラッキー", age:11}
  ]

map

配列内の全ての要素に同じ処理をして、新しい配列を作るメソッド

const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => {
  return number*2;
});
console.log(doubledNumber);

> [2, 4, 6]

オブジェクトでのmapメソッドの使用

const names = [
  {firstName: "Starbucks", lastName: "Coffee"},
  {firstName: "Komeda", lastName: "Coffee"}
];
const fullNames = names.map((name) => {
  return name.firstName + name.lastName;
});
console.log(fullNames);

> ["StarbucksCoffee", "KomedaCoffee"]

forEach()とmap()の違い

forEach()・・・戻り値がなく、実行するだけ

map()・・・実行後の結果を配列として返す

コールバック関数

ある他の関数に引数として渡される関数のこと

JavaScriptでは引数に関数を渡すことができる。この関数をコールバック関数と言う。

const call = (引数名) => {
  処理
}
call(関数名)

call()の中の関数が引数に入る！

関数を呼び出すときと、関数を渡すときの違い

関数を呼び出すとき
関数名();

関数を渡すとき
const call = (callback) => {
  call(関数名);
}
このcallは定義した関数

"関数を呼び出すとき"は末尾に()を付けるが、"関数を渡すとき"はこれが不要

関数を”事前に定義する場合”と”直接引数の中で定義する場合”の違い

事前に定義した場合

const dog = () => {
  console.log ("ソルサ");
};
const call = (callback) => {
  callback();
}
call(dog);

> ソルサ

直接引数の中で定義する場合

const call = (callback) => {
  callback();
}
call(() => {
  console.log ("ソルサ");
});

> ソルサ

処理の流れ

関数callを呼び出す
1が引数callbackに代入される
関数callbackが呼び出される

コールバック関数で引数を渡す

普通の関数の場合

const dog = (name, age) => {
  console.log(`${name}は${age}歳です`);
};

dog("ソルサ", 12);

コールバック関数の場合

const dog = (callback) => {
  callback("ソルサ", 12);
};
dog((name, age) => {
  console.log(`${name}は${age}歳です`);
});