【 JavaScript 基礎 】
はじめに、コードの書き方の例は記載していますが出力結果は載せていません。
学習しながら出力結果を想像して、
自身のエディタに記述して、
実際に手を動かしながら学習して出力結果を確認しましょう。
そうすることで、学習速度は上がります。
・変数、定数
箱に名前をつけて、好きな値を入れて、つけた名前で呼び出すことができる。
const（定数） ・・・ 上書きできない
let（変数） ・・・ 上書きできる
・上書き⇨省略記述方法
（変数名を、xだとして。）
x = x + 1 ⇨ x += 1 ⇨ x++ (足し算)
x = x - 1 ⇨ x -= 1 ⇨ x-- (引き算)
x = x * 1 ⇨ x *= 1 (かけ算)
x = x / 1 ⇨ x /= 1 (割り算)
x = x % 1 ⇨ x %= 1 (割り算の余り)（例 4 % 3 = 1 ）
・テンプレートリテラル
文字列の中に定数や変数を含めて展開することができる。
＜書き方＞
const name = ryuma
let age = 25
console.log(`私の名前は、${name}です。年齢は,${age}です。`);
注意点:
文字列全体をバッククォーテーション（`）で囲む必要がある。
・演算子（大小を比べる）
a < b ・・・ aはb未満
a > b ・・・ aはb超過（より大きい）
a <= b ・・・ aはb以下
a >= b ・・・ aはb以上
・比較演算子
a === b ・・・ aとbは等しい
a !== b ・・・ aとbは異なる
・if文書き方
＜書き方＞
if (条件式１) {
条件式１がtrueの時の処理
} else if (条件式２) {
条件式１がfalse、条件式２がtrueの時の処理
} else {
条件式がfalseの時の処理
}
const number = 7
if (number > 10) {
console.log("numberは、１０より大きい");
} else if (number > 5) {
console.log("numberは、5より大きい");
} else {
console.log("numberは、5より小さい");
}
・条件式、かつ && , または ||
・かつ&&
true && true ⇨ true
true && false ⇨ false
false && true ⇨ false
false && false ⇨ false
・または||
true || true ⇨ true
true || false ⇨ true
false || true ⇨ true
false || false ⇨ false
＜書き方＞
const number = 7
if (number >= 10 && number < 20) {
console.log("numberが、10~19なら、true");
}
if (number < 10 || number > 20) {
console.log("numberが、11~19なら、false");
}
・switch文
注意点： break; が非常に重要。switch文を終了させる命令。
＜書き方＞
switch (条件の値・当てはめたい答え) {
case値1:
条件の値が値１と等しいときの処理
break;
case値2:
条件の値が値2と等しいときの処理
break;
・
・
・
default:
caseに当てはまらなかったときの処理
break;
}
ーーーーーーーーーーーーーーーーーーーーーー
const rank = "銀メダル";
switch (rank) {
case"金メダル":
console.log("１位です。");
break;
case"銀メダル":
console.log("２位です。");
break;
case"銅メダル":
console.log("３位です。");
break;
default:
console.log("ランク外です。");
break;
}
・繰り返し処理 while文
条件式がtrueの間、{}内の処理を繰り返すことができる。
注意点： 今回の場合、number += 1を忘れてしまうと、＋１ずつ更新されず、ずっと１のままで無限ループしてしまう為、記述忘れに注意しよう！
＜書き方＞
while (条件式) {
処理
}
-------------------------
let number = 1;
while (number <= 100) {
console.log(number);
number += 1;
}
・繰り返し処理 for文
できることは、while文と同じ、while文に比べてシンプルに書くことができるのが特徴。
＜書き方＞
for (変数の定義;条件式;変数の更新) {
処理
}
-------------------------
for (let number = 1; number <= 100; number++) {
console.log(number);
}
-------------------------
for (let number = 1; number <= 100; number++) {
if (number % 3 === 0) {
console.log("３の倍数です");
} else {
console.log(number);
}
}
・配列
＞複数の値をまとめて管理することができる。まとめて管理した値を 要素 と呼ぶ。
＞配列には、インデックス番号がついており、左から順に０からカウントする。
＜配列 作り方＞
[値0,値1,値2];
-------------------------
文字列
["apple","banana","orange"];
-------------------------
数値
[11,12,13];
-------------------------
インデックス番号を指定して値を取得
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);
値の上書き
fruits[1] = "grape";
bananaがgrapeに書き変わる。
-------------------------
配列の繰り返し 配列とfor文
const fruits = ["apple","banana","orange"];
for (let i = 0; i < 3; i++) {
console.log(fruits[i]);
}
lengthで、配列の要素数を取得
const fruits = ["apple","banana","orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
lengthで配列の要素の数を確認する
console.log(fruits.length);
要素数の結果が出る。
・オブジェクト
オブジェクトは、配列と同じく複数のデータをまとめて管理するのに用いられます。
破裂は複数の値を並べて管理するのに対して、
オブジェクトはそれぞれの値にプロパティと呼ばれる名前をつけて管理します。
オブジェクトつくり方
{プロパティ１: 値１, プロパティ２: 値２};
-------------------------
const item = {name: ryuma, age: 25};
オブジェクトの値を取り出す
console.log(item.name);
オブジェクトの値を更新する
item.age = 100;
-------------------------
オブジェクトを要素に持つ配列
const items = [
{name: ryuma, age: 25},
{name: yamada, age:20}
];
配列の中のオブジェクトを取り出す
console.log(items[1]);
配列の中のオブジェクトの値を取り出す
console.log(items[1].name);
配列と繰り返し処理
const characters = [
{name: ryuma, age: 25},
{name: yamada, age: 20},
{name: sato, age: 28}
];
for (let i = 0; i < characters.length; i++) {
console.log("-------------------------");
const character = characters[i];
console.log(`私の名前は${character.name}です！`);
console.log(`私の年齢は${character.age}歳です！`);
}
存在しない要素を取得するとundefinedが返ってくる。
const item = {name: ryuma}
console.log(age);
undefinedを回避する。if文を使う。
const item = {name: ryuma}
console.log(age);
if (item.age === undefined) {
console.log("年齢は秘密です");
} else {
console.log(`${item.age}歳です`);
}
・複雑なオブジェクトを扱う、呼び出す。
const items = {
name: ryuma,
age: 25,
favorite: {
food: "ラーメン",
sports: "サッカー",
color: "赤"
}
};
console.log(items.favorite.food);
・オブジェクトの値に配列を用いる。
const items = {
name: ryuma,
age: 25,
foods: ["うどん","カレー","焼きそば"]
};
for (let i = 0; i < items.foods.length) {
console.log(items.foods[i]);
}
・関数とは、
いくつかの処理をまとめたものです。
・関数定義 function(){}
const 定数名 = function() {
まとめたい処理
}
-------------------------
const introduce = function() {
console.log("hello");
};
introduce();
・アロー関数
const 定数名 = () => {
処理
};
-------------------------
const greet = () => {
console.log("こんにちは");
};
greet();
・引数とは、
関数に与える追加情報のようなもの。
関数を呼び出す時に一緒に値を渡すことで、関数の中でその値を利用することができる。
引数を受け取る関数の定義
const 定数名 = (引数名) => {
処理
};
引数を受け取る関数の呼び出し
引数を受け取る関数を呼び出すには、定数名（値）と書きます。
関数は指定した値を受け取り、その値は引数に代入されます。
introduceの呼び出し時に”にんじゃわんこ”という値が渡され、引数nameに代入されています。
const 定数名 (引数名) => {
処理
};
定数名(値);
-------------------------
const introduce = (name) => {
console.log("こんにちは");
console.log(`私は${name}です`);
};
introduce("佐藤");
introduce("山田");
-------------------------
複数の引数を受け取る関数
関数は引数を複数受け取ることもできます。
（）の中にうけちる引数をコンマ（.）で区切って並べることで、複数の引数を指定することができます。
引数は、左から順番に「第一引数、第二引数、、、」と呼びます。
const 定数名 = (第一引数名, 第二引数名) => {
処理
};
定数名(第一引数, 第二引数);
-------------------------
const add = (num1, num2) => {
console.log(num1 + num2);
}
add(5, 7);
・戻り値とは
関数の処理結果を呼び出し元で受け取る方法を学びます。
呼び出し元で受け取る処理結果を戻り値と呼び、このことを関数が戻り値を返すと言います。
戻り値のある関数
関数の中でreturnを使うと、呼び出し元であたいをうけ路れるようになります。
「 return 値 」と書くことで、関数はその値を戻り値として返します。
const 定数名 = () => {
return 値;
};
-------------------------
戻り値を受け取る
const add = (a, b) => {
return a + b;
};
add(7, 5);
関数の呼び出し部分を定数に代入することもできる。
const sum = add(7, 5);
console.log(sum);
-------------------------
様々な戻り値
戻り値も引数と同様に、様々な値を用いることができます。
例えば、
if文で使うような条件式をreturnすると、
その条件式の結果として得られる真偽値（trueまたはfalse）を返すことができます。
const check = (num) => {
return num % 2 === 0;
};
console.log(6);
trueを返す
console.log(7);
falseを返す
-------------------------
const check = (num) => {
return num % 3 === 0;
};
if (num(123)) {
console.log("３の倍数です");
} else {
console.log("3の倍数ではありません")
}
trueが返される為、"３の倍数です"が出力される。
・returnによる処理の終了
returnについて詳しくみていきましょう。
returnは、戻り値を返すだけでなく、関数の処理を終了させる性質も持っています。
よって、
returnの後にある関数ないの処理は実行されませんので注意しましょう。
・関数の中の定数
関数の引数や、関数内で定義した定数や変数は、その関数の中でしか使うことができません。
それぞれの定数や変数の使用できる範囲のことをスコープと呼びます。
・関数の外の定数
関数の外で定義した定数や変数は、関数の中でも使うことができます。
・関数だけでなく、ifやswitchなどの条件分、forやwhileなどの繰り返し文などの、
中括弧{}を使う構文でもスコープを作ります。
最大値を求める
const num1 = 103;
const num2 = 72;
const num3 = 189;
const getMax = (a, b, c) => {
let max = a;
if (max < b) {
max = b;
}
if (max < c) {
max = c;
}
return max;
};
const max = getMax(num1, num2, num3);
console.log(`最大値は${max}です`);
・クラスを学ぼう
JavaScriptのライブラリ（React, Vue.js など）を学習する上で必須の知識になってきます。
・オブジェクトと関数
オブジェクトの値の部分には、関数を用いることもできます。
const 定数名 = {
プロパティ名: () => {
処理
};
};
定数名.プロパティ名();
-------------------------
const user = {
name: "ryuma",
greet: () => {
console.log("こんにちは！");
}
};
user.greet();
・オブジェクトを量産する
Webサービスなどでは、先ほど作成したようなオブジェクトをいくつも扱っています。
ログインが必要なサービスでは、ユーザー（利用者）に関するデータ（オブジェクト）を用いています。
これらのデータは毎回0から作成していたら大変です。
似たようなデータを効率よく生成する方法を学習していきましょう。
・オブジェクトの設計図
効率よくオブジェクトを作成していくための方法として、最初に設計図を用意する方法があります。
例えば、
ユーザーのデータをいくつも作成する場合、
最初にユーザーを生成するための設計図を用意し、
その設計図を元にユーザーのデータを生成していく、といったことができます。
・クラス
前のスライドで説明した設計図のことをJSでは、クラスと呼びます。
クラス名は、基本的に最初の文字は大文字にする。
```javascript:qiita.rb
class クラス名 {
}
・インスタンスの生成
オブジェクトを生成するための設計図を用意できたので、
その設計図から実際にオブジェクトを生成してみましょう。
クラスから生成したオブジェクトは特別にインスタンスと呼びます。
new クラス名(); とする。
```javascript:qiita.rb
class Animal = {
}
const animal = new Animal();
console.log(animal);
空のオブジェクトができる。
・設計図の中身を追加する
ここまでで、設計図（クラス）を用意し、それを元にインスタンスを生成する方法を学習してきました。
しかし、
今はまだクラスに何も処理を追加していないため、博士の設計図のような状態です。
設計図に設定を追加する方法を学習していきましょう。
・コンストラクタとは
class Animal {
constructor() {
}
}
・コンストラクタの処理
コンストラクタの中には処理を記述することができます。
ここに書いた処理は、インスタンスが生成された直後に実行されます。
大切なのは、インスタンスごとに毎回実行されるということです。
class Animal {
constructor() {
console.log("インスタンス生成");
}
}
const animal = new Animal();
インスタンスが実行される。
・プロパティと値を追加する
コンストラクタの中で、生成したインスタンスに関する情報を追加してみましょう。
コンストラクタの中で、 this.プロパティ = 値
とすることで、生成されたインスタンスにプロパティと値を追加することができます。
class Animal {
constructor() {
this.name = "ryuma";
}
}
・インスタんンスとプロパティ
インスタンスに関すつ説明の通り、インスタンスとはオブジェクトです。
したがって、コンストラクタの中で追加した値はオブジェクトと同様に
インスタンス.プロパティとすることでクラスの外で使用することができます。
class Animal {
constructor() {
this.name = "ryuma";
}
}
const animal = new Animal();
console.log(animal.name);
・インスタンスごとに値を変える
コンストラクタ内の処理を追加したことで、生成されるインスタンスの初期設定をすることができました。
しかし、以下のコードで生成されるインスタンスは全て ryuma ３ のように同じ値になっています。
インスタンスごとに自由に値を変える方法を学習していきましょう。
class Animal {
constructor() {
this.name = "ryuma";
this.age = 3;
}
}
const animal = new Animal();
console.log(animal.name);
console.log(animal.age);
・コンストラクタの引数（１）
constructorの後の括弧（）内に引数名を記述することで、
その引数をコンストラクタの処理内で使用できる。
class Animal {
constructor(name, age) {
}
}
・コンストラクタの引数（２）
コンストラクタに引数としてあたいを渡すには、 new クラス名（） の括弧（）内に値を追加します。
以下のコードでは、文字列ryumaという値が引数として渡され、
コンストラクタ内では、nameとして使うことができます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const animal = new Animal("ryuma", 3);
console.log(`名前は:${animal.name}です`);
console.log(`年齢は:${animal.age}歳です`);
・メソッドとは
クラスの重要な機能の一つであるメソッドについて学習していきましょう。
メソッドとはそのインスタンスの動作のようなものです。
名前や年齢などの情報は、プロパティで追加したのに対して、
メソッドは、挨拶をする、値を計算するなどの処理のまとまりを表します。
・メソッドの定義
メソッドはクラスの中で定義します。メソッド名(){}とすることでメソッドは定義できます。
メソッドは関数と似たようなもので、中括弧（）の中にそのメソッドで行いたい処理を記述します。
class クラス名 {
constructor{
}
メソッド名 {
行いたい処理
}
}
・メソッドの使い方
メソッドは、そのクラスから生成したインスタンスに対して呼び出します。
具体的には、以下のコードのように、 インスタンス.メソッド名()
とすることでそのメソッドを呼び出し、処理を実行することができます。
class Animal = {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log("こんにちは！");
}
}
const animal = new Animal("ryuma", 3);
console.log(`私は、${animal.name}です`);
console.log(`年齢は、${animel.age}歳です`);
animal.greet();
・メソッド内で値を使う
nameの値を用いて名前は〇〇ですと出力するメソッドを作成してみましょう。
メソッド内でインスタンスの値を使用するには、this という特殊な値を用いて、
this.プロパティ名 とします。
class Animal {
・・・
info() {
console.log(`私の名前は、${this.name}です`);
}
}
const animal = new Animal("ryuma", 3);
animal.info();
・メソッド内でメソッドを使う
メソッド内で他のメソッドを呼び出すことも可能です。
メソッド内で、 this.メソッド名（） とすることで、
同じクラスの他のメソッドを使うことができます。
class Animal {
greet() {
console.log("こんにちは");
}
info() {
this.greet();
}
}
・継承とは（１）
ここまで動物に関するデータを扱うAnimalクラスを作成してきました。
ここからは、犬のデータに特化したDogクラスを作成していきましょう。
新しく作成するクラスが既存のクラスの一種である場合、
継承という方法を用いることで非常に効率よく作業を進めることができます。
・継承とは（２）
継承とは、既にあるクラスを元に、新しくクラスを作成する方法のことです。
例えば、
Animalクラスから、Dogクラスを継承すると、
Animalクラスの全ての機能を引き継いで、Dogクラスを作成することができます。
・継承の書き方
継承を用いてクラスを作成するには、extendsを用います。
Animalクラスを継承して、Dogクラスを作成するには、
class Dog extends Animal と書きます。
また、
継承では元となるクラスを親クラス（今回はAnimalクラス）、
新しく作成するクラスを子クラス（今回は、Dogクラス）と呼びます。
class 子クラス名 extends 親クラス名 {
}
class Dog extends Animal {
}
・使えるメソッド
DogクラスはAnimalクラスの全ての機能を引き継いでいます。
そのため、Dogクラス内にはまだ何もメソッドは定義されていませんが、
Animalクラスに定義されているinfoメソッドなどを使用することができます。
class Animal {
info() {
this.greet(`名前は、${this.name}です`);
console.log(`${this.age}歳です`);
}
}
class Dog extends Animal {
}
const dog = new Dog();
dog.info();
・独自メソッド
継承して作成したクラスにも、これまでと同じようにメソッドを追加することができます。
今回は犬の年齢を人間の年齢に換算する、 getHumanAge メソッドを用意してみましょう。
class Dog extends Animal{
getHumanAge() {
}
}
・メソッドの戻り値
メソッドでは、関数と同じように戻り値を用いることができます。
以下のコードでは、
getHumanAgeメソッドの戻り値を、
humanAgeという定数に代入しています。
class Dog extends Animal {
getHumanAge() {
return this.age * 7;
}
}
const dog = new Dog("レオ", 4);
const humanAge = dog.getHumanAge();
console.log(humanAge);
・子クラスのメソッド
子クラスで定義した独自のメソッドは、
親クラスから呼び出すことはできません。
以下コードのように、
AnimalクラスのインスタンスからgetHumanAgeメソッドを世に出すとエラーが発生してしまいます。
class Dog extends Animal {
getHumanAge() {
return this.age * 7;
}
}
const animal = new Animal("レオ", 4);
const humanAge = animal.getHumanAge();
エラーになる。
・同名のメソッド
継承したクラスは、
親クラスのメソッドと子クラスのメソッドの両方が使用できることがわかったかと思います。
では、
以下コードのように、
Animalクラス（親クラス）に既にあるメソッドと
同じ名前のメソッドをDogクラスに（子クラス）に定義すると、
どちらのメソッドが呼び出されるでしょうか？
class Animal {
info() {
}
}
class Dog extends Animal {
info() {
}
}
const dog = new Dog("レオ", 4);
dog.info();
・オーバーライド
親クラスと同じメソッドを子クラスに定義すると、
子クラスのメソッドが優先して使用されます。
これは、
子クラスのメソッドが親クラスのメソッドを上書きしていることから、
オーバーライトと呼ばれます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
greet() {
console.log("こんにちは");
}
info() {
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
}
class Dog extends Animal {
info() {
this.greet();
console.log(`名前は${this.name}です`);
console.log(`${this.age}歳です`);
const humanAge = this.getHumanAge();
console.log(`人間年齢で${humanAge}歳です`);
}
getHumanAge() {
return this.age * 7;
}
}
const dog = new Dog("レオ", 4);
dog.info();
・コンストラクタのオーバーライド（１）
メソッドと同じように、コンストラクタもオーバーライドすることができます。
例えば、
子クラスにプロパティを追加したい場合などに用います。
ただし、
コンストラクタをオーバーライドする際は、一行目に super() と記述する必要があります。
class 親クラス名 {
constructor() {
}
}
class 子クラス名 extends 親クラス名 {
constructor() {
super();
子クラスのインストラクタの処理
}
}
・コンストラクタのオーバーライド（２）
子クラスのコンストラクタ内のsuper()では、
その部分で親クラスのコンストラクタが引数を受け取る場合には、
superの後ろの丸括弧（）に引数をわたすひつようがあります。
今回は親クラスのコンストラクタを呼び出した後に、犬の種類を表すbreedプロパティを追加しています。
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;
}
}
・モジュールを組み合わせよう
JSのコードを複数のファイルに分割し、それらを組み合わせる方法を学びます。
複数ファイルに分割することで、維持・更新のしやすいコードを書くことができます。
また、パッケージと呼ばれる便利な機能を使うための方法も学びます。
・ファイルの分割（１）
コード量が増えてくると１つのファイルで管理するのが大変になあるため、
複数のファイルでコードを管理することがあるます。
今回は、
メインのプログラムを実行するscript.js
と
Animalクラスを定義するanimal.js
Dogクラスを定義するDog.js
の３つのファイルにコードを分けてみましょう。
・ファイルの分割（２）
ファイルを分割したときのエラーは、
それぞれのファイルを関連付けし、必要な値を渡すことで解決できます。
・export
まずは、
animal.js内のAnimalクラスを他のファイルでも使用できるようにしましょう。
クラスの定義の後で、
export default クラス名 とすることで、
そのクラスをエクスポート（出力）し、他のファイルへ渡すことができます。
class Animal {
}
export default Animal;
・import
dog.js内でAnimalクラスを使用できるようにしてみましょう。
他のファイルで定義されているクラスを使用するにはインポート（読み込み）をする必要があります。
使用するファイルの先頭で import クラス名 from "./ファイル名"
と書くことでインポートすることができます。
なお、
ファイル名の拡張子の .js は省略することができます。
import Animal from "./animal";
・値のエクスポート
クラスのエクスポートを行いましたが、エクスポートできるのはクラスだけではありません。
文字列や数値や関数など、どんな値でもエクスポートが可能です。
エクスポートする際は、下記コードのように、
export default 定数名;
とします。
インポートする際は、
import 定数名 from "ファイル名";
とします。
smple1のファイル
const text = "Hello Wold";
export default text;
smple２のファイル
import text from "./smple1";
・データ定義部分の分割
ファイルを新しく作成して記述の一部を移動できる。
・デフォルトエクスポート
export defaultはデフォルトエクスポートと呼ばれ、
そのファイルがインポートされると自動的に
export default 値;
の値がインポートされます。
そのため
エクスポート時の値の名前と、インポート時の値に違いがあっても問題ありません。
・デフォルトエクスポートの注意点
デフォルトエクスポートは１ファイル１つの値のみ使えます。
このファイルをインポートする際には、デフォルトエクスポートのあたいを自動でインポートするため、
値が１つのみとなっています。
複数の値をエクスポートしたい場合は、
名前付きエクスポートを用います。
・名前付きエクスポート（１）
名前付きエクスポートとは、
defaultを書かずに、名前を{}で囲んでエクスポートする書き方です。
名前付きエクスポートした値をインポートする場合は、
エクスポート時と同じ名前で値を指定します。
インポートする値は、エクスポート時と同様に、
import {値の名前} from "./ファイル名"
と{}で囲んで指定します。
・名前付きエクスポート（２）
名前付きエクスポートは、デフォルトエクスポートと違い、
複数の定数やクラスを指定してエクスポードができます。
また、
export {名前１, 名前２}
という形で書くことにより、
１つのファイルから複数のエクスポートができます。
インポートの際も、コンマで区切ることで複数のインポートができます。
・相対パス（１）
これまでファイルの指定は ./ファイル名 としてきました。
これは相対パスと言い、記述されているファイルからみた位置関係を示しています。
・同じディレクトリ（フォルダ）のファイル指定
ドット１つの ./ は相対パスが書かれているファイルと同じディレクトリを意味します。
・相対パス（２）
１つ上の階層に戻る場合はドット２つの ../ を用います。
・パッケージ
JSの世界では、誰かが作った便利なプログラムがパッケージという形で公開されています。
また、
JSの機能を使うことで、このポッケージを自分のプログラムの中に組み込んで使うことができます。
・パッケージのimport
パッケージを自分のプログラムで使うためには、importを用いてパッケージをインポートします。
パッケージのimportは、ファイル名ではなくパッケージ名を指定します。
今回は、
chalkというパッケージをインポートします。
・chalkパッケージの使い方
インポートすれば、そのファイルでパッケージが使えるようになります。
chalkは出力する文字の色を変えることができます。
文字列を
chalk.yellow
chalk.bgCyan
で囲むだけで文字の色を変更できます。
import 定数名 from "パッケージ名";
import chalk from "chalk";
console.log(chalk.yellow("hello"));
console.log(chalk.bgCyan("hello"));
・コンソールから値を受け取ろう
・readline-syncの使い方
readline-syncというパッケージを導入すると、コンソールへの値の入力と、
その入力された値をプログラムの中で使うことができるようになります。
readlineSync.question(質問文);
のように記述します。
質問文が出力されると一旦処理が止まり、
コンソールに値が入力されると、次の処理に進みます。
・入力値を使う
入力した値は、定数や変数に代入することができます。
・整数値の入力
年齢のように整数を入力して欲しい場合は questionint を用います。
import readlineSync from readline-sync;
readlineSync.question(名前を入力してください:);
readlineSync.questionint(年齢を入力してください:);
-----------------------------------------
const name = readlineSync.question(名前を入力してください:);
const age = readlineSync.questionint(年齢を入力してください:);
console.log(`${name}と入力されました`);
console.log(`${age}と入力されました`);
・配列を操作するメソッドを学ぼう
・push
pushメソッドとは、
配列の最後に新しい要素を追加するメソッドです。
pushメソッドの後の（）の中に追加したい要素を入力します。
const numbers = [1, 2, 3];
numbers.push(4);
・forEach
forEachメソッドは、
配列の中の要素を１つずつ取り出して、
全ての要素に繰り返し同じ処理を行うメソッドです。
const numbers = [1, 2, 3];
numbers.forEach((number) => {console.log(number);});
・forEachの仕組み
forEachメソッドの引数には、
アロー関数が入っています。
配列内の要素が１つずつの順番にアロー関数の引数に代入され、
処理が繰り返し実行されます。
これから学ぶメソッドはこのようにアロー関数を使う形が多いので覚えておきましょう。
配列 = [要素１,要素2,要素3];
配列.forEach(( 引数 ) => { 処理 });
・forEach使い方
const numbers = [1, 2, 3];
numbers.forEach((number) => {console.log(number);});
・コールバック関数
引数に入っている関数はコールバック関数と呼びます。
これから学ぶメソッドはコールバック関数を使う形が多いので。覚えておきましょう。
下記コードの
(number) => {console.log(number);}
の部分をコールバック関数と呼ぶ。
numbers.forEach((number) => {console.log(number);});
・長いコードの書き方
forEachメソッドのように引数のコールバック関数を使うメソッドはコードが長くなりやすいため、
以下のように書くことが多いです。
処理の前の中括弧{ から稼業することで、
長いコードも見やすくなるという利点があります。
const numbers = [1, 2, 3];
numbers.forEach((number) => {
console.log(number);
});
・find
findメソッドとは、
条件式に合う１つ目の要素を配列の中から取り出すメソッドです。
・findの使い方（１）
findメソッドを使う時は以下のように書きます。
配列numbersの要素が１つずつ引数numberに代入されて処理が進みます。
コールバック関数の中は { return 条件 } と書くことで、
条件に合う要素が戻り値となります。
findメソッドは条件に会う要素が見つかった時に終了するので、
条件に合う最初の１つの要素しか取りません。
const numbers = [1, 3, 5, 7];
const foundNumber = numbers.find((number) => {
return number > 3;
});
console.log(foundNumber);
・findの使い方（２）
配列の要素がオブジェクトの場合もfindメソッドを使うことができます。
以下の例ではオブジェクトのプロパティを条件の中で使用しています。
オブジェクトのプロパティを条件として使用する場合、
そのプロパティを持っているオブジェクトそのものを取り出します。
const characters = [
{id: 1, name: "忍者わんこ"},
{id: 2, name: "羊仙人"},
];
const foundCharacter = characters.find((character) => {
return character.id === 1;
});
console.log(foundCharacter);
・filter
filterメソッドとは、
記述した条件に合う要素のみを取り出して新しい配列を作成するメソッドです。
以下の例では、配列numberから３より大きい数字をすべて取り出しています。
const numbers = [1, 3, 5, 7];
const filteredNumbers = numbers.filter((number) => {
return number >3;
});
console.log(filteredNumbers);
・filterの使い方（１）
以下の例では、配列numberの要素が１つずつ引数numberに代入されます。
その後、
filterメソッド内で、３より大きい数字かどうかを判定し、
条件に合う要素が定数filteredNumbersに配列として代入されます。
const numbers = [1, 3, 5, 7];
const filteredNumbers = numbers.filter((number) => {
return number >3;
});
console.log(filteredNumbers);
・filterの使い方（２）
findメソッドと同様に、
配列の要素がオブジェクトの場合もfilterメソッドを使うことができます。
以下の例では、
オブジェクトのプロパティを条件の中で使用しています。
オブジェクトのプロパティを条件として使用する場合、
そのプロパティを持っているオブジェクトその物を取り出します。
const characters = [
{name: "忍者わんこ", age: 14},
{name: "ベイビーわんこ", age: 5},
{name: "羊仙人", age: 100}
];
const filteredCharacters = characters.filter((character) => {
return character.age > 10;
});
console.log(filteredCharacters);
・map
mapメソッドとは、
配列内の全ての要素に処理を行い、
その戻り値から新しい配列を作成するメソッドです。
以下の列では、
配列numbersの全ての要素を２倍した要素を持つ、
新しい配列を作成しています。
・map使い方（１）
以下の例では、
配列numberの要素が１つずつ引数numberに代入されています。
その後、
mapメソッド内の要素を２倍にする処理をした配列が新しく作られ、
定数doubledNumbersに配列として代入されています。
コールバック関数の中の処理は { return 値 }と書きます。
const numbers = [1, 2, 3];
const doubledNumbers = numbers.map((number) => {
return number * 2;
});
console.log(doubledNumbers);
・mapの使い方（２）
mapメソッドもこれまでのメソッドと同様に、
配列のオブジェクト要素に対しても使うことができます。
以下の例では、mapでfirstNameプロパティとlastNameプロパティをつなげる処理をしています。
const names = [
{firstName: "Kate", lastName: "jones"},
{firstName: "Brian", lastName: "Smith"},
];
const fullName = names.map((name) => {
return name.firstName + name.lastName;
});
console.log(fullName);
・コールバック関数を学ぼう
・引数の種類
JSでは引数に関すを渡すことができます。（引数に （文字列、数値、真偽値、関数） を入れることができる）
引数に渡される関数をコールバック関数と呼びます。
・コールバック関数を渡す
const call = (引数名) => {
処理
};
call(関数名);
・関数の呼び出し方と渡し方
関数は、
関数名の後ろに（）をつけると呼び出され、
（）を付けなければ関数そのものを指します。
pointWanko(); ⇨ 関数が呼び出される
pointWanko; ⇨ 関数の定義そのもの
・コールバック関数の流れ
関数callの引数として渡した関数printWankoが呼び出されるまでの流れを確認しましょう。
const printWanko = () => {
console.log("忍者わんこ");
};
const call = (callback) => {
console.log("コールバック関数を呼び出します");
callback();
};
call(printWanko);
・引数で関数を定義する
先ほどは事前に定義した関数をコールバック関数として渡しましただ、
関数を直接引数の中で定義することもできます。
const call = (callback) => {
console.log("コールバック関数を呼び出します");
callback();
};
coll(() => {
console.log("忍者わんこ");
});
・引数を渡す
コールバック関数では、
普通の関数と同じように引数を渡すことができます。
const call = (callback) => {
callback("忍者わんこ");
};
call((name) => {
console.log(name);
});
・複数の引数を渡す
const call = (callback) => {
callback("忍者わんこ", 14);
};
call((name, age) => {
console.log(`${name}は${age}歳です`);
});
・引数の注意点
コールバック関数の引数と、
実行時に渡す引数の数を揃えるように気をつけましょう。