otaku-tokyo

 

Javascript

ES2015(ES6)

2015年から正式採用されたJavascriptの書き方

変数

変数を更新する際はletなし

let name = “John”;

name = “Katy”;

定数

変数と違って値を更新できない

const name = “John”;

関数の定義

const introduce = function(){}; //セミコロンが必要!!

introduce(); //関数の呼び出し

ES6からはアロー関数が導入され以下のように省略可能

()内には引数という関数内で使える文字を入れる

const introduce = (name)=>{

console.log(`私は${name}です`);

};

introduce(“にんじゃわんこ”);

複数の引数を入れられる

戻り値return以降の処理は実行されない

const check = (a,b){

return a * b % 3 === 0; //戻り値

}; //セミコロンが必要

const result = check(1,3);

//trueかfalseでターミナルに出力される

テンプレートリテラル

console.log内に文字と変数(あるいは定数)を混ぜる場合のみ使用する

バッククォーテーションは「@+Shift」で打つ

console.log(`私は${name}です`);

テンプレートリテラルを用いない場合は次のように書く

console.log(“私は”+name+”です”);

if~else if~else

if(number === 12){}

else if(number <= 200){}

else(number < 10 || number > 20){}

switch~case~break

const color = “赤”;

switch(color){

case “赤”: console.log(“赤色です”); break;

case “黄”: console.log(“黄色です”); break;

default: console.log(“赤色でも黄色でもありません”); break;

}

while

let number = 1;

while(number <= 10){

console.log(number);

number += 1;

}

for

できることはwhile文と同じだが、よりシンプルに書くことが出来る

for(変数の定義; 条件式; 変数の更新){処理} //セミコロンは不要

※fruits.lengthで配列の要素数を取得できる(今回は3)

const fruits = [“apple”,”banana”,”orange”]; //セミコロン必要

for(let i=0; i<fruits.length; i++){

console.log(fruits[i]);

}

オブジェクト

{プロパティ:値,~}をオブジェクトと呼ぶ

const items = [

{name: “手裏剣”, price: 300},

{name: “忍者刀”, price: 1200},

{name: “五平餅”}

]

for(let i=0; i<items.length; i++){

if(items[i].price === undefined){}

else{console.log(items[i].price);}

}

オブジェクトの値にオブジェクトや配列を用いることも可能

const people = {

age: 14,

foods: {name: “lemon”, price: 300},

animals: [“猫”,”犬”,”鳥”]

}

console.log(people.foods.name);

オブジェクトの値にはアロー関数を用いることも可能

const 定数名 = {

プロパティ名: ()=>{処理}

}; //セミコロン必要

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

クラス

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

Katynameに渡されnameに渡される

class Animal{

//コンストラクター(引数を使う場合)

constructor(name,age){

this.name = name;

this.age = age;

}

//メソッド

greet(){

console.log(`こんにちは`);

}

//同じクラスのメソッドを実行可能

info(){

this.greet();

console.log(`私の名前は${this.name}です`);

}

}

//インスタンス

const animal = new Animal(“Katy“,3);

console.log(animal.name);

//インスタンス

const animal = new Animal(“Katy“,3);

animal.info(); //メソッドの呼び出し

継承

Animalクラスを継承するDogクラスを作成すると

定義しなくてもAnimalクラスのinfoメソッドを使える

class Dog extends Animal{

//子クラス独自のメソッド

age(){ return this.age * 7;}

}

//インスタンス

const dog = new Dog(“レオ”,4);

dog.info();

 

const humanAge = dog.age();

console.log(‘人間年齢で${humanAge}歳です`);

オーバーライド

親クラスと子クラス両方に同じメソッドが使用された場合は子クラスが優先される

class Animal(){ info(){} }

class Dog extends Animal{ info(){} }

const dog = new Dog(“John”,5);

dog.info(); //子クラスのメソッドが優先される

コンストラクターもsuper();によってオーバーライド可能

class Animal{

constructor(name){}

}

class Dog extends Animal{

constructor(name,bread){

super(name);

this.bread = bread; //子クラス独自の引数

}}

ファイルの分割

ファイルを分割するとファイル内で定義していないクラスなどができる為インポートする必要がある。

まず、他のファイルでも使用できるようにエクスポートする

class Animal{}

export default Animal;

次に、他のファイルではAnimalクラスを使用できるようにインポートする。ファイル名はanimal.jsだが.jsは省略可能。

import Animal from “./animal”;

インポートやエクスポートにはクラス名だけでなく文字列や数値、関数なども可能。

const dog = new Dog(“Katy”,4);

export default dog;

ただし1ファイルにつきexport defaultは1つしか使えないので、複数の値をエクスポートしたい場合は名前付きエクスポートを用いる

export{cat,bird};

import{cat,bird} from “./data”;

パッケージ

import 定数名 from “パッケージ名”;

相対パス

次のようなファイル構造だとする

script.js

data(ディレクトリ)–dogdata.js

class(ディレクトリ)–dog.js

./は同じディレクトリにあることを意味する

../は一つ上の階層にあることを意味する

[script.js]

import {dog1,dog2} from “./class/dog”;

[dogdata.js]

import Dog from “../class/dog”;

pushメソッド

配列の最後に追加される

const numbers = [1,3,5];

numbers.push(2); //[1,3,5,2]となる

forEachメソッド

配列の中の要素を1つずつ取り出して処理する

const numbers = [1,3,5];

numbers.forEach((number)=>{

console.log(number);

});

※(number)=>{ ~ ber);}までをアロー関数もしくはコールバック関数と呼ぶ

findメソッド

配列の中から条件に合う要素を1つ取り出す

必ずreturnを使うこと

const numbers = [1,5,9];

const abc = numbers.find((number)=>{

return number > 3;

});

console.log(abc);

※戻り値returnを使用しているので条件に合う要素が見つかったときに終了し、1つの要素が取り出される

filterメソッド

配列の中から条件に合う要素をすべて取り出す

必ずreturnを使うこと

const characters = [

{id:1,name:”Katy”},

{id:2,name:”John”}

]; //セミコロン必要

const abc = characters.find((character)=>{

return character.id === 1;

}):

console.log(abc);

mapメソッド

配列内のすべての要素に処理を行い、新しい配列を作成する

const names = [

{firstname:”Kate”,lastname:”Jones”},

{firstname:”Brain”,lastname:”Smith”}

]

const fullname = names.map((name)=>{

return name.firstname + name.lastname;

});

console.log(fullname);

※[“KateJones”,”BrainSmith”]と出力される

コールバック関数

wankoが2つのcallbackに渡される

const wanko = ()=>{console.log(“わんこ”)};

const call = (callback)=>{callback();};

call(wanko);

// 「校長室まで来てください わんこ」と出力される

これは次のように簡略化できる

const call = (callback)=>{callback();};

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

引数を付けると次のようになる

const intro = (callback)=>{callback(“ねこ”,14);};

introduce((name,age)=>{

console.log(`${name}は${age}歳です`);

});