【progate】javaScriptレッスンの備忘録

初めに

progateのjavaScriptレッスンをやりました。メモとしてやった内容をまとめておきます。

内容

コンソール

console.log()のかっこの中身をコンソールに出力する。

//Hello Worldを出力
console.log("Hello World");
console.log('Hello World');

//3と出力
console.log(3);

//1と出力
console.log(3-2);

//35と出力
console.log("3"+"5");

変数

変数宣言し、変数は再代入できる。

let name = "sato";

定数

定数宣言すると、再代入が不可能になる。

const name = "sato";

テンプレートリテラル

連結は「＋」を用いる以外の方法もある。

const name = "sato";

//こんにちは、satoさんと出力
console.log(`こんにちは、${name}さん`);

if

if文で条件判定する。

// a===b  →　aとbが等しい
// a!==b  →　aとbが異なる

//単純なif,else文
if(条件式){

}else{

}

//たくさんの条件を書く場合
if(条件式){

}else if(条件式){

}else{

}

switch

どの値に該当するかを判定しそれぞれ該当する動作をする。

const color = "赤"
switch(color){
    case"赤":
        console.log("ストップ!");//この場合この行が実行される。
        break;
    case"緑":
        console.log("前進!");
        break;
}

while,for

ループ作業に使う。

while(条件式){

}

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

}

//例:1～100まで出力
for(let i = 1; i <= 100, i++){
    console.(i);
}

配列

それぞれのインデクス番号を使って値を更新できる。

//配列宣言:インデクス番号は左から0,1,2
const number = [1, 2, 3];

//[1,2,3]と出力
console.log(number);

//3と出力(配列の長さ)
console.log(number.length);

オブジェクト

配列と同じく複数のデータをまとめて管理できる。
ただオブジェクトはそれぞれの値にプロパティと呼ばれる名前を付けて管理する。
値は更新できる。

//  {プロパティ1:値1, プロパティ2: 値2}
const item = {name:"手裏剣", price:300};

//{name:"手裏剣", price:300}と出力
console.log(item);

//手裏剣と出力
console.log(item.name);

オブジェクト＋配列

const items = [
    {name:"手裏剣", price:300},  //インデクス番号0
    {name:"忍者刀", price:1200}  //インデクス番号1
];

//1200と出力
console.log(item[1].price);

undefined

undefinedは特別の値で、値が定義されていないことを意味する。

const number = [1, 2, 3];

//undefinedと出力
console.log(number[5]);

if(何か === undefined){
    //何かが定義されていないの時の処理
}

複雑なオブジェクト

const character = {
    name:"にんじゃ",
    age:14,
    favorite:{
        food:"ラーメン",//favoriteプロパティの値がオブジェクトになっている。
        color:"青",
    },
};

//{food:"ラーメン", color:"青"}と出力
console.log(character.favorite);

関数

普通の関数

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

//関数の呼び出し
定数名();

アロー関数

同じように関数定義できて、ES6から導入される新しい書き方。

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

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

//値が引数名に代入され呼び出す
定数名(値);

//戻り値
const add = (a,b) =>{
    //処理
    return a + b;
};

オブジェクトの中の関数

const 定数名 = {
    プロパティ名:()=>{
        //処理
    }
};

定数名.プロパティ名();//関数の呼び出し

クラス

クラス名は基本的に大文字から始める

class Animal{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    greet(){
        console.log("こんにちは!");
    }
    info(){
        console.log(`名前は${this.name}です`);
    }
}

const animal = new Animal("sato",3);
animal.greet();//こんにちは！と出力
animal.info();//名前を出力

継承
親クラスのメソッド使用可能。

class Dog extends Animal{
    getHumanAge(){
        return this.age*7;
    }
}

const dog = new Dog("kuro",4);
console.log(dog.getHumanAge());//28

子クラスに親クラスと同じメソッドが存在する場合子クラスのメソッドが呼び出される。これはオーバーライドという。また、コンストラクタをオーバーライドする場合最初にsuper()が必要。

class Dog extends Animal{
    constructor(name,age,breed){
        super(name,age);
        this.breed = breed;//子クラス独自のもの
    }

}

ファイルの分割

複数のファイルでコード管理する。
以下のようにファイル分けする場合、関連付ける必要がある。

• script.js
• dog.js
• animal.js

animal.js

class Animal{

}
export default Animal;
//Animalクラスをほかのファイルでも使用できる設定。
//1ファイルにつき1つの値のみ使えます。

dog.js

import Animal from "./animal";//インポートして使えるようにする。

名前付きエクスポート

デフォルトエクスポートと違い複数の定数やクラスを指定してエクスポートできる。（もちろん1つでも大丈夫）

dogData.js

const dog1 = new Dog("レオ",4,"チワワ");
const dog1 = new Dog("ベン",2,"プードル");
export{dog1, dog2};

sprict.js

import {dog1, dog2} from "./dogData";
dog1.info();
dog2.info();

パッケージ

• chalk：コンソール出力文字に色をつける

import chalk from "chalk";

console.log(chalk.yellow("hello"));//黄色文字表示

• readline-sync：コンソールに値を入力できる

import readlineSync from "readline-sync";

const name = readlineSync.question("名前を入力してください:");
//コンソールでは一旦とまり、文字入力するとnameに代入。

console.log(`${name}と入力されました`);

const age = readlineSync.questionInt("年齢を入力してください:");
//整数を入力させる場合はquestionIntを使う

配列を操作するメソッド

push

配列の最後にあたらあしい要素追加。

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

forEach

配列の中の要素を1つずつ取り出し同じ処理を行う。
下のように引数に渡される関数はコールバック関数という。

const n =[1,2,3];
n.forEach(
    //アロー関数
    (n)=>{
        console.log(n);
    }
);
//1,2,3の順に表示

find

コールバック関数の処理部分に記述した条件式に合う1つ目の要素を配列の中から取り出すメソッドである。

const n =[1,3,5,7];
const foundNumber = n.find((n)=>{
    return n > 3;//条件
});

console.log(fondNumber);//5と出力

filter

条件に合う要素のみを取り出して新しい配列を作成する。

const n =[1,3,5,7];
const filtedNumbers = n.filter((n)=>{
    //条件に合う要素がfiltedNumbersに配列として代入される。
    return n > 3;
});

console.log(filtedNumbers);//[5,7]

map

配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成する。

const n =[1,2,3];
const doubledNumbers = numbers.map((n)=>{
    //配列の中身をすべて2倍にする。
    return n*2;
});

console.log(doubledNumbers);//[2,4,6]

コールバック関数

引数に関数を渡す。この引数に渡される関数をコールバック関数という。

//関数printWanko
const printWanko = () =>{
    console.log("わんこ");
};

const call = (callback) =>{
    callback();
    //コールバック関数を呼び出すときは()をつける
    //わんこと出力される
};

call(printWanko);//コールバック関数を渡すときは()をつ

関数の扱い方として、
関数名() → 関数が呼び出される
関数名 → 関数の定義そのもの

直接引数の中で定義した関数

直接引数の中で関数を定義できる。

const call = (callback) =>{
    callback();
    //わんこと出力される
};

call(()=>{
    console.log("わんこ");
});

普通の関数と同じように引数を渡すこともできる。

const introduce = (callback) =>{
    callback("わんこ")
};

introduce((name)=>{
    console.log(name);
});