例としてkoa.jsを使用したES6ジェネレーターの使用

投稿者Alexander Trishchenko、DataArtシニアフロントエンド開発者



内容：

•イテレータ。 発電機

•ジェネレーターの使用（Redux、Koa）

•なぜkoa.jsを使用する必要があるのですか

•未来。 非同期待機およびkoa.js 2.x

ジェネレーター-新しい仕様、ECMAScript 6で使用できる新しい機能。 2つの例を見てみましょう：React + Reduxをフロントエンドのケースとして、koa.jsをバックエンドとして。 次に、JavaScriptの未来であるkoa.js、非同期関数、およびkoa.js 2について説明します。



この記事では、特に借用したスニペットを使用しています（ソースへのリンクは最後に記載されています）。コードの一部が画像の形であることをすぐにおaびします。







ECMAScript 6（2015）は、それを使用するのに十分サポートされています。 図は、原則として、EdgeのMicrosoftでもすべてが悪くないことを示しています。大きな問題はInternet Explorerでのみ観察されます（垂直座標軸-機能のサポート、％）。 WebKitチームによると、Safari 10にはうれしい驚きがあります。

イテレータ

•反復可能なオブジェクトは、反復可能なオブジェクトのみです。

•Symbol.iteratorを使用して、単独で実行されないすべてのものを強制できます。



各反復可能データ型、各反復可能データ構造は、反復子を取得して反復可能になります。 文字列、配列を反復処理できます。MapやSetなどの新しいデータ構造を反復処理できます。これらはすべて独自の反復子を含む必要があります。 これで、イテレータ自体に直接アクセスできます。 また、きちんと動かないようにする機会もありました。時には非常に便利な場合もあります。







イテレーターとは何ですか？ ご覧のとおり、単純な配列があります。 最も単純な配列にはキーがあります。イテレータシンボル、実際にはイテレータを返すファクトリです。 このファクトリーを呼び出すたびに、イテレーターの新しいインスタンスが返され、相互に独立してそれらを反復処理できます。 その結果、イテレータへのリンクを保存する変数を取得しました。 次に、唯一のnextメソッドを使用して、それを繰り返します。 次のメソッドは、2つのキーを含むオブジェクトを返します。1つ目-値-イテレータの値、2つ目-イテレータの状態-done：false。







イテレータは自分で説明できます。 基本的に、それは工場であり、通常の機能です。 endlessNumbers関数、インデックス、およびnextメソッドがあるとします。 反復可能な値とステータスを返す単一のnextメソッドを持つオブジェクト。 doneキーをtrueに設定することは決してないので、このイテレータは最後まで移動しません。



イテレータは、特に情報を扱うための非標準的なアプローチを実装するアプリケーションで非常に広く使用されています。 空き時間には、Web Audio APIを使用してJavaScriptシーケンサーを作成します。 私には仕事があります：特定の間隔で音を出すことです。 ある種のサイクルに入れるのは不便なので、メディアプレーヤーにノートを「スピット」するイテレーターを使用します。







発電機の出現の前提条件は長い間生じてきました。 過去5年間のNode.jsの人気のダイナミクスを見ることができます。これは、一般的なJavaScriptの人気を間接的に反映しています。 グラフには、コールバック地獄のリクエストの頻度も反映されます。JavaScriptの分布に比例します。 つまり、人気のあるJavaScriptが増えるほど、開発者とクライアントが苦しんでいます。







画像に示されている麺は、ジェネレーターなしで記述されたコードの構造的な視覚化です。 つまり、これは私たち全員が取り組まなければならないものです-私たちはそれに慣れ、選択の余地がなく、私たちはそれを当たり前だと思っています。 開発者がこの現象と闘おうとすると、約束のようなものが現れました。 アイデアは、すべてのコールバック（コールバック関数）を取得し、コード全体でそれらを「汚す」ことであり、より便利な場所を宣言することでした。 ただし、実際には、同じコールバック関数がまだあり、わずかに異なる形式で表示されています。 開発者は苦労し続けました-これがジェネレーターと非同期関数の登場です。

発電機

申込み

•同期コードの作成。

•一時停止された関数の作成。

•複雑なイテレーターの作成。

ジェネレーターを使用すると、同期コードを作成できます。 JavaScriptの尊厳はまさにその非同期性にあると言っていましたが、今度はJavaScriptで同期コードを記述する方法について話しましょう。 実際、一時停止中のジェネレーターの実行を待機している間にバックグラウンドでタイムアウトが発生してもイベントループは停止しないため、このコードは擬似同期になります。 バックグラウンドで他の必要な操作を実行できます。 非常に広く使用されている非同期アクションとは対照的に、サスペンド可能な関数を作成できます。 複雑なイテレータを作成する機会がありました。 たとえば、毎回データベースにアクセスし、そこから1つの値を順番に繰り返すイテレータを作成できます。







上下に、機能的にまったく同じスニペットがあります。 データベースにアクセスしてuser.payment_idを取得する特定の関数があります。 その後、彼女は外部APIにアクセスして、当日に関連する支払い詳細ユーザーを選択する必要があります。 コールバック関数が別のコールバック関数の内側にあるとき、The Pyramid Of Doomの現象があり、ネストの度合いは無限に増加する可能性があります。 当然のことながら、すべての操作を別々の関数にカプセル化しても、出力で「麺」が得られますが、結果は常に受け入れられるとは限りません。



ジェネレーターで同じことを実行できるソリューションがあります。ジェネレーターの構文はわずかに異なります-function *（アスタリスク付き）。 ジェネレータには名前を付けることも名前を付けないこともできます。 ご覧のとおり、yieldキーワードがあります。 ジェネレータを一時停止するyieldステートメントを使用すると、GetUserメソッドが完了するのを待つことができます。 データを受け取ったら、それをユーザーに入力し、その後、paymentDetailsを取得するのと同じ方法で実行を継続し、ユーザーのすべての情報を描画できます。







ジェネレーターを実装する可能性を考慮してください-どうやってそれらを整理することができますか ここで、前述の設計を確認します。 イテレータで示されたように、ここには数値のイテレータもあります。このイテレータは、0〜3の値を返し、それを繰り返し処理します。 つまり、次の方法を使用できます。

次の（）メソッド

•ジェネレーターに転送される値を引数として取ることができます

•戻り値-2つのキーを持つオブジェクト：

value-ジェネレーターから取得した式の一部。

done-ジェネレーターの状態。

次のメソッドは、イテレーターの同様のメソッドと違いはありません。値を取得して完了できます。2つのパラメーターとして、値をジェネレーターに転送し、ジェネレーターから値を取得できます。







次の質問はパフォーマンスです。 私たちが話したことをどれだけ使うのが理にかなっていますか？ レポートの時点では、テストツールは自由に使えるものではなかったので、自分で書いた。 数千回の反復の結果、さまざまなテクノロジーの平均値を達成することができました。 Chromeでは、プロミスとジェネレーターはそれほど大きな違いはなく、どちらかが大きく異なります。 コールバック、Promise、またはジェネレーターを使用して1つの反復を完了するのにかかる時間はミリ秒で計算されることを考慮すると、実際には大きな違いはありません。 わざわざ、マッチを節約することは価値がないと思います。 したがって、好きなものを自由に使用できます。







最新のJavaScriptレポートは、Reactなしではできません。 特に、Reduxについて説明します。

redux-saga

•これはライブラリです。

•これはジェネレーターで書かれたライブラリです。

•これは、不純な機能を見えないように隠すライブラリです。

•これは、同期コードを記述できるライブラリです。

関数型プログラミングには非常に重要な原則があります。 「実際の関数」を使用する必要があります。 私たちの関数は環境に影響を与えるべきではありません;それは私たちがそれに渡す引数で動作するはずです。 何らかの形で、コールバック関数はしばしば不純な関数になりますが、これはもちろん避けたいものです。 したがって、redux-sagaの主な目的は、同期（擬似同期）コードを記述する機能です。







一番下の行は、同じ方法で、ジェネレーターを使用してサガの実行を停止できることです。 サガは、別のアクションを引き起こすアクションの一種であると言えます。 ディスパッチャを使用して回答を待った後、リデューサーで目的のイベントを開始し、必要な情報を送信します。







結論は非常に単純です。その結果、非同期アクションを非常に簡単かつ迅速に実行しました。 実際、最小限のサガは次のようになります。サガを呼び出すジェネレーターがあり、takeEveryを呼び出します。これは、レデューサー内で「USER_FETCH_REQUESTED」イベントを発生させることができるサガメソッドの1つです。 yieldにはアスタリスクが付いていることに気づいたかもしれません。 これはジェネレーター操作の委任であり、ジェネレーターを別のジェネレーターに委任できます。

redux-saga：あとがき

•Sagasは通常のアクションとして宣言されず、sagaMiddlewareを介して実装する必要があります。

•明らかに、sagaMiddleware自体はReduxのストアのミドルウェア以外のものです。

フロントエンドについて話しましたが、今度はバックエンド、つまりコアについて話します。 バックエンドで多くのフレームワークに出会いましたが、私にとって最も興味深いのはkraken.jsとkoa.jsでした。2番目のフレームワークについて詳しく説明します。

koa.js

一言で言えば：

•サーバー開発用のnode.js-framework。

•ES6ジェネレーター、ES2016の非同期機能を使用するnode.jsフレームワーク。

•express.jsによって記述されたnode.jsフレームワーク。

express.jsチームの信頼性と会社のリソースを考えると、このフレームワークは信頼でき、急速に開発されています。 現時点では、彼の周りに堅固なコミュニティが形成されており、彼はたくさんのライブラリで草に覆われています-ミドルウェアkoaの何らかの種類のソリューションを見つけるのは非常に簡単です。

•「新世代フレームワーク」

コアとは？ 実際、これはミドルウェアエンジンを提供するフレームワークであり、そのアーキテクチャ図は誰にでもよく知られている甘やかされた電話のゲームに非常に似ています。 ここに、ミドルウェア間で順番に渡される状態があり、それぞれがこの状態に影響を与えるか、または影響を与えません（影響を与えないロガーの例を示します）。 このミドルウェアを使用します。 koa.jsはミドルウェアジェネレーターフレームワークであることを思い出してください。 つまり、ルーティング、さまざまな便利なHTTPメソッド、セキュリティシステム、CSRF攻撃に対する保護、クロスドメインリクエスト、テンプレートエンジンなどについて話している場合、koaにはこのようなものはありません。 koaにはミドルウェア用のエンジンしかなく、それらの多くはkoa.js.チーム自身によって作成されています。







これは、koa.jsの最も単純なアプリケーションの外観です。 ロギングの実装があります-koa.jsでのミドルウェアの最も単純な実装です。 これは、返される前と返された後の両方で状態を返すジェネレータです。これにより、アプリケーションの実行にかかる時間を計算できます。 これらは宣言の順序で実行されることに注意してください。上記で発表された内容が最初に動作を開始します。

koa.js

利点：

•co.jsでラップされた膨大な数のライブラリの存在。

•モジュール性と明るさ。

•より理解しやすいコードを書く能力。

•より少ないコードを書く能力。

•高いコミュニティ活動。

koa.jsは、ほとんど何も存在しない貧しいフレームワークのようです。 同時に、多くのライブラリがあり、ほとんどの標準サービス機能はミドルウェアとして提供されています。 クロスドメインリクエストが必要です-パッケージを差し込んでミドルウェアを転送するだけです。 設定が必要な場合は、パラメーターを渡すだけで、クロスドメインリクエストが発生します。 jwt-tokenを使用した承認が必要です-同じこと：3行のコードが必要です。 データベースを使用する必要がある場合-お願いします。



そのようなケースは数多くあります-フレームワークの操作は、コンストラクターを使用したゲームのようになります。異なるパッケージを試すだけで、すべてが機能します。 誰もがそのようなカプセル化機能を楽しみにしていたので、今では自由に使用できます。 フレームワーク内の機能の欠如の結果として、それはより簡単になりました。また、後で完成する必要がある標準コンポーネントもありません。 これで、より理解しやすいコードを作成できます。 ジェネレーターを使用すると、擬似同期コードを記述できるため、アプリケーション内の不明瞭で不要なものの数を減らすことができます。 その結果、より少ないコードを記述する機能も登場しました。 積極的なコミュニティサポートがあり、多くのプラグインが互いに競合し始めています。 最高の勝利、多くは排除され、一般に、もちろん便利です。







この表は、Koa、Express、およびConnectフレームワークの配信の比較を示しています。 ご覧のとおり、koaにはミドルウェアカーネルしかありません。



co.js自体について少し説明する価値があります。



Co.jsはジェネレーターとプロミスのラッパーであり、非同期操作の作業を簡素化できます。 coを「JavaScriptのコルーチン」として指定する方が正確です。 コルーチンの考え方は新しいものではなく、他のプログラミング言語にも非常に長い間存在しています。



主なアイデアは、メインプログラムからコルーチンに制御を移すことです。コルーチンは、制御をメインプログラムに戻すことができます。 実際、このプロセスの一部はJavaScriptのジェネレーターによって実装されます。



JS開発者の問題に馴染みのあるものすべてを提供すると、co.jsがジェネレーターを実行するため、next（）ジェネレーターを順次呼び出す必要がなくなります。 次に、coは別のpromiseを返します。これにより、その完了を追跡し、エラーをキャッチできます（これにはcatchメソッドを使用できます）。 最もクールなのは、coでプロミスの配列（la Promise.all）に対してyieldを実行できることです。 coが発電機の代表団と素晴らしい仕事をしていることは注目に値します。

koa.js

始めるのに役立ついくつかのパッケージ：



•koa-cors-1行でクロスドメインリクエストを許可します。

•koa-route-本格的なルーティング。

•koa-jwt-jwtトークンを使用した承認のサーバー実装。

•koa-bodyparse-着信リクエスト本文のパーサー。

•koa-send-静的管理。

上記の例として、実際のアプリケーションで使用できるミドルウェアがいくつかあります。 koa-corsパッケージはクロスドメインリクエストを許可し、koa-routeはExpressが持つものと同様のルーティングを提供します。







koa.jsの主な短所は、フレームワークがむき出しになっているという事実の裏返しであり、相互に依存することを約束しないパッケージの品質を常に監視する必要があり、バグを取り除くことが困難になる場合があることです。 2番目の問題は、チームの選択です。現時点では、残念ながら、koa.jsで作業する人は多くありません。 このため、プロジェクトに新しい人を紹介する時間が長くなります。 また、プロジェクトが小規模の場合、採算が取れない可能性があります。 つまり、koa.jsを賢く使用する必要があります。

koa.js 2

新世代のフレームワーク？

Koa.js 2は非常に扱いにくいフレームワークです。 そうでない仕様でも機能します。 つまり、ECMAScript 7またはECMAScript 2016であるという非同期関数に関する記事を見つけることができます。しかし、実際には、Babel、Google Chrome、およびMicrosoft Edgeは非同期関数をサポートしているにもかかわらず、それらは存在しません。 多くの人は非同期機能がECMAScript 7（2016）の公式リリースに含まれることを期待していましたが、最終的にはバグ修正と2つの新機能を発表しました。 一方、koa.js 2は非同期関数で動作し、開発者はそれらについて記述します。 そして、これらはすべて新世代のフレームワークとして位置付けられています。

非同期関数

復習

•非同期は約束です。

•待つことは約束です。

非同期関数-AsyncとAwaitはどちらも約束です。







このようなコードがあるとしましょう。 非同期を削除して待機し、関数の隣にアスタリスクを入れて、征服する前にyieldを置くと、ジェネレーターが得られます。 違いは何ですか？ そして、私たちは通常のPromiseの征服を期待しています。非同期関数をジェネレーターでラップする必要はありません。単に必要ではありません。フェッチサーバーリクエストを受信するための通常の新しい方法を使用できます。 次に、結果を待つ必要があります。結果が得られたら、それを状態にして、状態を返します。

非同期関数

あとがき

•非同期関数はジェネレーターよりも便利です（コードが少なく、ジェネレーターのプロミスをラップする必要がありません）。

•非同期関数はまだ標準の一部ではなく、非同期関数が標準の一部になるかどうかは明確ではありません。

非同期関数はジェネレーターよりも確かに便利です;それらはより少ないコードを書くことを可能にします。 この場合、バインディングコードを記述する必要はありません。約束を返すライブラリ（ほとんどすべての最新のライブラリ）を使用できます。 これにより、多くの時間とお金を節約できます。 マイナス-非同期関数-はまだドラフト仕様です。 そのため、最終的には、WebRTCの画面キャプチャと同じようになります。この機能を使用するアプリケーションが登場し、結果として拒否されました。







この記事で話したすべてのモラルは非常に単純です。ジェネレーターがPromiseまたはCallbackの代わりになると言っているのではありません。 非同期関数がジェネレーター、コールバック、プロミスを置き換えることができると言っているのではありません。 しかし、コードを美しく構造化するためのコードを書くための新しいツールがあります。 しかし、それらの使用はあなたの裁量です。 特定のプロジェクトの各ツールの合理性と適用性の観点から決定する価値があります。

使用済みリソースのリスト

ここで借りた図面： 1、2、3 。



スニペットはここで借りました 。