shou2017.com
JP / EN

Javascript、es6とes2015

Wed Oct 24, 2018
Sat Aug 10, 2024
JavaScript

最近、es6を学んだのでメモしておきます。

Ruby似たメソッドが使えるのでわりと覚えやすいです。

そもそもes6とはなんなのか

es6の正式名称はECMAScript。読み方はエクマスクリプト。

6というだけあって、es6はECMAScriptのバージョン6のこと。

ECMAScriptは標準規格。

JavaScriptはその実装。

es6を簡単にいうと次世代JavaScriptというらしい。

たまに聞く、es2015とかes2016はes6とes7のこと。

これからは策定年号も入れようとのことで、こんな呼び方になった。

es6は2015年にできたので、es2015。

es7は2016年にできたので、es2016。

実にややこしい。

es6のコードは全てのブラウザで動く訳ではないので、Babelなどを使って変換してes5にする。es5は、ほとんど全てのブラウザで動くから。

forEach

まず最初に昔ながらのFor Loopを書いてみます。

var numbers = ['1', '2', '3'];

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

ん〜。実にごちゃごちゃしてますね。Rubyをやってる尚更そう感じます。初期化して、numbersの長さを測って、自己代入してエトセトラ。 これをforEachで書き直すと。

var numbers = ['1', '2', '3'];

numbers.forEach(function(number) {
    console.log(number);
});

先ほどより、かなりスッキリしました。

よくある合計をだす場合は、

var numbers = [1, 2, 3];
var sum = 0;

numbers.forEach(function(number) {
    sum += number;
});

sum;
=>6

map

まず最初に昔ながらのFor Loopを書いてみます。

var numbers = ['1', '2', '3'];
var doubledNumbers = [];

for (var i = 0; i < numbers.length; i++) {
    doubledNumbers.push(numbers[i] * 2);
}

doubledNumbers;
=>
[2,4,6]

次はmapを使って書いてみます。mapのいいところは、新しい配列をわざわざ用意しなくてもmapが勝手に用意してくれること。rubyでは当たり前ですが、jsでこの辺までやってくれるのは便利。

var numbers = ['1', '2', '3'];

var doubled = numbers.map(function(number) {
    return number * 2;
});

doubled;
=>[2,4,6]

あるオブジェクトからある要素を取ってくる方法。

var users = [
    { name: 'nobita', test: 0},
    { name: 'takeshi', test: 40},
    { name: 'dekisugi', test: 100}
];

var tests = users.map(function(user) {
    return user.test;
});

tests;
=> [0,40,100]

filter

まず最初に昔ながらのFor Loopを書いてみます。

var products = [
    { name: 'キュウリ', type: '野菜' },
    { name: 'バナナ', type: 'フルーツ' },
    { name: 'セロリ', type: '野菜' },
    { name: 'オレンジ', type: 'フルーツ' },
];

var filteredProducts = [];

for (var i = 0; i < products.length; i++) {
    if (products[i].type === 'フルーツ') {
        filteredProducts.push(products[i]);
    }
}

filteredProducts
=> 
[{"name":"バナナ","type":"フルーツ"},{"name":"オレンジ","type":"フルーツ"}]

次にfilterを使って書きます。

var products = [
    { name: 'キュウリ', type: '野菜' },
    { name: 'バナナ', type: 'フルーツ' },
    { name: 'セロリ', type: '野菜' },
    { name: 'オレンジ', type: 'フルーツ' },
];

products.filter(function(product){
    return product.type === 'フルーツ';
});

=>
[{"name":"バナナ","type":"フルーツ"},{"name":"オレンジ","type":"フルーツ"}]

ちょっと複雑な条件。種類が野菜で、量が0個より多くて、値段が10より小さいもの

var products = [
    { name: 'キュウリ', type: '野菜', quantity: 0, price: 1 },
    { name: 'バナナ', type: 'フルーツ', quantity: 10, price: 15 },
    { name: 'セロリ', type: '野菜', quantity: 30, price: 9 },
    { name: 'オレンジ', type: 'フルーツ', quantity: 3, price: 5 },
];

products.filter(function(product){
    return product.type === '野菜'
        && product.quantity > 0
        && product.price < 10;
});

=> 
[{"name":"セロリ","type":"野菜","quantity":30,"price":9}]

find

まず最初に昔ながらのFor Loopを書いてみます。

var users = [
    { name: 'nobita' },
    { name: 'takeshi' },
    { name: 'dekisugi' },
];

var user;

for (var i = 0; i < users.length; i++) {
    if (users[i].name === 'nobita') {
        user = users[i];
    }
}

user;
=> 
{"name":"nobita"}

findを使う場合。

var users = [
    { name: 'nobita' },
    { name: 'takeshi' },
    { name: 'dekisugi' },
];

var user;

users.find(function(user){
    return user.name === 'nobita';
});

user;
=> 
{"name":"nobita"}

コメントに関連したpostをfindする。

var posts = [
    { id: 1, title: '楽しかった夏' },
    { id: 2, title: '悲しかった冬' }
];

var comment = { postId: 2, content: '元気出して'};

// コメントに関連したpostをfindする関数を作る
function postForComment(posts, comment) {
    return posts.find(function(post) {
        return post.id === comment.postId;
    });
}

postForComment(posts, comment);
=>
{"id":2,"title":"悲しかった冬"}

every

まず最初に昔ながらのFor Loopを書いてみます。

var computers = [
    { name: 'Apple', ram: 24 },
    { name: 'Dell', ram: 4 },
    { name: 'HP', ram: 32 },
];
// 16gb ramが必要なソフトを探す

// すべてで動かせるフラグ
var allComputersCanRun = true;

// どれかでは動かせるフラグ
var someComputersCanRun = false;

for (var i = 0; i < computers.length; i++) {
    var computer = computers[i];

    if (computer.ram < 16) {
        allComputersCanRun = false;
    } else {
        someComputersCanRun = true;
    }
}

'---'
allComputersCanRun
someComputersCanRun

=>
True
---
False
True

everyを使う場合。 everyは論理積を求める。1つでもfalseがあったら結果はfalse。

var computers = [
    { name: 'Apple', ram: 24 },
    { name: 'Dell', ram: 4 },
    { name: 'HP', ram: 32 },
];

// 16gb ramが必要なソフトを探す
computers.every(function(computer) {
    return computer.ram >= 16;
});

=>
False

some

someは論理和を求める。１つでもtrueがあれば結果はtrue。

var computers = [
    { name: 'Apple', ram: 24 },
    { name: 'Dell', ram: 4 },
    { name: 'HP', ram: 32 },
];

// 16gb ramが必要なソフトを探す
computers.some(function(computer) {
    return computer.ram >= 16;
});

=>
True

reduce

まず最初に昔ながらのFor Loopを書いてみます。

合計値を出します。

var numbers = [10, 20, 30];
var sum = 0;

for (var i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}
=>
60

次にreduceを使って書いていきます。

var numbers = [10, 20, 30];
var sum = 0;

numbers.reduce(function(sum, number) {
  return sum + number;
}, 0);
=>
60

0は初期値。

コールバック関数は足し算をしているだけなので、0+10が行われて10が返ってくる。

次に10がコールバック関数に渡されて、10+20で30

最後に30がコールバック関数にわたsれて、30+30で60。

数字じゃない合計をreduceを使って求める。

var primaryColors = [
    { color: 'red' },
    { color: 'yellow' },
    { color: 'blue' }
];

primaryColors.reduce(function(previous, primaryColor) {
    previous.push(primaryColor.color)
    return previous;
}, []);

=>
["red","yellow","blue"]

(((())))の(が左右両方同じ数なのかをreduceを使って調べる。

均衡が取れている場合を0とする。

function balancedParens(string) {
  return !string.split('').reduce(function(previous, char){
    if (previous < 0) { return previous;}
  	if (char ==='(') { return previous +1; }
    if (char ===')') { return previous -1; }  
  }, 0);
}

balancedParens(')(')

=>
false

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

Amazon
楽天
See Also