JavaScript 初心者が「WEB+DB PRESS Vol.87 特集1」を読んでみたので感想を書きます。
- 作者: 佐藤鉄平,小林明大,石村真吾,坂上卓史,上原誠,鳥居英,佐藤歩,泉水翔吾,うさみけんた,伊藤直也,高橋侑久,佐藤太一,hayajo,橋本翔,西尾泰和,中島聡,はまちや2,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2015/06/24
- メディア: 大型本
- この商品を含むブログ (2件) を見る
最近 JS 関連でホットエントリ入りを果たした後輩に「スッ」っと WEB+DB PRESS Vol.87 を差し出されて「特集1を読んどいてください」と昨日の帰り際に言われたので、早速読んでみました。
書くこと一覧
- 全体的な感想
- どのくらいの初心者だったか
- 読み終わってどうなったか
- Σ(゚д゚`)ヌオッ!!シュゴイ!!ってなったサンプル
- これから
全体的な感想
初心者だからこそ読んでおいて良かった!読むべき価値あり!てか、おもしれぇ!というのが感想です。
初心者から見ると 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(); }
非同期処理を直列に並べて書けてるぅー!凄いー!
そしてなんでコレで動くねーん!って思ったので、コードをのんびり追いかけてみました。 すっごい雑に流れを書いてみます。
asyncflow
関数を引数fanction *() { ... }
で呼び出すg
に引数のgenerator
を格納するnext
にアロー関数を格納するnext
を引数なしで呼び出すg.next(value)
を呼び出しresult
にyield getUrl("/items")
の結果を格納するresult.value
に入っている Promise オブジェクトをpromise
に格納する- Promise完了後、再度
next(value)
(value はgetUrl("/items")
の結果) を呼び出す g.next(value)
を呼び出しresult
にyield getUrl("/items/" + id)
の結果を格納する- 最初の
yield
にvalue
が入るので、本体側のitems
にgetUrl("/items")
の結果が格納される id
にitems[0].id
を格納しgetUrl("/items/" + id)
を呼び出す
- 最初の
result.value
に入っている Promise オブジェクトをpromise
に格納する- Promise完了後、三度
next(value)
(value はgetUrl("/items/" + id)
の結果) を呼び出す g.next(value)
を呼び出しresult
にその結果を結果を格納するyield
には今度getUrl("/items/" + id)
の値が入っているため、それがitem
に格納されるcosole.log(item)
を呼び出し無事本体側のフローは終了
result.done
となっているため、if 文を通らず next 関数は全て終了
た、確かに動きそうー!!凄いー!!