雀巽の日記帳

雀巽が綴る日常の記録

JavaScript初心者が「WEB+DB PRESS Vol.87 特集1」でES6について学んでみた

JavaScript 初心者が「WEB+DB PRESS Vol.87 特集1」を読んでみたので感想を書きます。

WEB+DB PRESS Vol.87

WEB+DB PRESS Vol.87

最近 JS 関連でホットエントリ入りを果たした後輩に「スッ」っと WEB+DB PRESS Vol.87 を差し出されて「特集1を読んどいてください」と昨日の帰り際に言われたので、早速読んでみました。

web-salad.hateblo.jp

書くこと一覧

  • 全体的な感想
  • どのくらいの初心者だったか
  • 読み終わってどうなったか
  • Σ(゚д゚`)ヌオッ!!シュゴイ!!ってなったサンプル
  • これから

全体的な感想

初心者だからこそ読んでおいて良かった!読むべき価値あり!てか、おもしれぇ!というのが感想です。

初心者から見ると JS 界隈は戦国時代にしか見えず、モダンなエッセンスが詰まった情報源ってなんだよ状態だったのですが、求めていたものがココにあった感じがします。

ES6 の知識をこの特集レベルの知識でしか持ってませんが、コレに目を通しておけば、ES6 で何ができるのか、今まではどうなっていて、それがどう変わったのかというのが一通り頭に入るんじゃないかなと思いました。 そして、そうなることで、ES6 以前の情報に触れた時に、適切にフィルタリングできるようになっている気がしました。

個人的には第5章の Promise と Generator での非同期処理が面白かったです。

JavaScript 面白い!っていう人の気持がわかった気がします。

どのくらいの初心者だったか

ガチで初心者です。なんか業務とかハッカソンとかでちょっと必要になって Google 先生に聞きながら書いたことがある程度です。 ハッカソンGoogle Map API を JS から叩いて謎のアプリ作った (1日) のと、Rails Tutorial レベルの Ajax 書いた (数日) のと、Hubot (業務 + ハッカソン) で CoffeeScript を書いた (数日) 経験しかないです。

JavaScript を触ったことのある日数は合計1週間くらいでしょうか。

JavaScript のコールバック?知らない子ですね。なんかこう書くと動くんでしょ。知らんけど。な状態でした。 変数スコープの話とか this ってやつがヤバイって話くらいは知ってましたが、初心者というのもはばかられる程度の知識量でした。

関数型っぽく書けるの?ならもっと Haskell っぽい文法が良いですね。ほう、ではそんなあなたに PureScript をどうぞ。あ、 Elm もありますよ。ヒィー(((゚Д゚)))ガタガタ

そんな感じでした。

読み終わってどうなったか

ES6 でできるようになったことと言うより、今までの JavaScript ってこんな言語だったのか……!これで戦ってきたのか……!ってなりました。

  • ES6 で追加された文法
  • 強化された標準ライブラリ
  • Promise と Generator による非同期処理
  • モジュール管理についてのアレコレ
  • ES6 をどう取り入れていくか

ということについて、一通り頭に入った感じがします。

あと、従来の非同期処理のソースを読んだおかげで、「JavaScript のコールバック?知らない子ですね」状態からは脱しました。多分理解しました。多分。

ES6 で何ができるか、これまでと何が変わったのか(これまではどうなっていたのか)ということに関してザックリ脳にインデックスが張れたのがとにかく良かったです。

JavaScript 怖い!今どうなってんの!何したら良いのかわかんない!という状態からは抜け出せました。

JavaScript 初心者の人はぜひ読んでみると良いと思います。

あとは訓練あるのみ。

Σ(゚д゚`)ヌオッ!!シュゴイ!!ってなったサンプル

Promise と Generator のところでΣ(゚д゚`)ヌオッ!!シュゴイ!!ってなりました。

サンプル丸ごと写経します。

// 本体
asyncflow(function *() {
  var items = yield getUrl("/items");
  var id = items[0].id;
  var item = yield getUrl("/items" + id);
  console.log(item);
});

// フロー制御関数
function asyncflow(generator) {
  var g = generator();
  var next = value => {
    var result = g.next(value);
    if (!result.done) {
      var promise = result.value;
      promise.then(value => {
        next(value);
      });
    }
  };
  next();
}

非同期処理を直列に並べて書けてるぅー!凄いー!

そしてなんでコレで動くねーん!って思ったので、コードをのんびり追いかけてみました。 すっごい雑に流れを書いてみます。

  1. asyncflow関数を引数fanction *() { ... }で呼び出す
  2. gに引数のgeneratorを格納する
  3. nextにアロー関数を格納する
  4. nextを引数なしで呼び出す
  5. g.next(value)を呼び出しresultyield getUrl("/items")の結果を格納する
  6. result.valueに入っている Promise オブジェクトをpromiseに格納する
  7. Promise完了後、再度next(value) (valuegetUrl("/items")の結果) を呼び出す
  8. g.next(value)を呼び出しresultyield getUrl("/items/" + id)の結果を格納する
    1. 最初のyieldvalueが入るので、本体側のitemsgetUrl("/items")の結果が格納される
    2. iditems[0].idを格納しgetUrl("/items/" + id)を呼び出す
  9. result.valueに入っている Promise オブジェクトをpromiseに格納する
  10. Promise完了後、三度next(value) (valuegetUrl("/items/" + id)の結果) を呼び出す
  11. g.next(value)を呼び出しresultにその結果を結果を格納する
    1. yieldには今度getUrl("/items/" + id)の値が入っているため、それがitemに格納される
    2. cosole.log(item)を呼び出し無事本体側のフローは終了
  12. result.doneとなっているため、if 文を通らず next 関数は全て終了

た、確かに動きそうー!!凄いー!!

これから

競プロをそろそろ C++ でやりたいなって思ってたので、C++ 始めたいと思います(*´ェ`*)