DOnations]プログラムの一環として寄付を受け取りました。[リアクティブプログラミング]は、_非同期データストリーム_に関するパラダイムです。プログラミングモデルでは、すべてが時間の経過とともに広がるデータのストリームであると見なされます。これには、キーストローク、HTTPリクエスト、印刷されるファイル、さらには非常に短い間隔で時間を計られているとみなされる配列の要素が含まれます。言語では非同期データが一般的であるため、JavaScriptに最適です。[JavaScript]のリアクティブプログラミング用の一般的なライブラリです。[Java]、https://www.python.org/のような他の多くの言語で拡張されています。[Swift]、およびhttps://www.dartlang.org/[Dart]。RxJSは、AngularやReactなどのライブラリでも広く使用されています。RxJSの実装は、一定の期間にわたってデータを処理し、認識できる連鎖機能に基づいています。これは、引数とコールバックのリストを受け取る関数以外の何ものでもなく、RxJSのほぼすべての側面を実装し、そうするように指示されたときにそれらを実行できることを意味します。RxJSを取り巻くコミュニティはこの重労働を行っており、その結果、クリーンで保守可能なコードを記述するために任意のアプリケーションで直接使用できるAPIが得られました。このチュートリアルでは、RxJSを使用して、リアルタイムの結果をユーザーに返す機能豊富な検索バーを構築します。HTMLとCSSを使用して、検索バーをフォーマットします。最終結果は次のようになります。[検索バーのデモ]検索バーと同じくらい一般的で一見シンプルなものには、さまざまなチェックが必要です。このチュートリアルでは、RxJSがかなり複雑な一連の要件を管理しやすく理解しやすいコードに変換する方法を示します。前提条件このチュートリアルを始める前に、次のものが必要です。[などのJavaScript構文の強調表示をサポートするテキストエディター崇高なテキスト]。これらのエディターは、Windows、macOS、およびLinuxで使用できます。HTMLとJavaScriptを一緒に使用することに関する知識。[JavaScriptをHTMLに追加する方法]をご覧ください。JSONデータ形式に精通していること。[JavaScriptでJSONを使用する方法]で詳細を確認できます。[Github]で入手できます。ステップ1-検索バーの作成とスタイル設定このステップでは、HTMLとCSSを使用して検索バーを作成およびスタイルします。コードはhttps://getbootstrap.com/[Bootstrap]のいくつかの一般的な要素を使用して、ページの構造化とスタイル設定のプロセスを高速化し、カスタム要素の追加に集中できるようにします。_Bootstrap_は、タイポグラフィ、フォーム、ボタン、ナビゲーション、グリッド、その他のインターフェイスコンポーネントなどの一般的な要素のテンプレートを含むCSSフレームワークです。アプリケーションはhttps://daneden.github.io/animate.css/[Animate.css]を使用して、検索バーにアニメーションを追加します。+`という名前のファイルを作成することから始めます。search-bar.html次に、アプリケーションの基本構造を作成します。次のHTMLを新しいファイルに追加します。</body></html>Bootstrapライブラリ全体のCSSが必要なため、BootstrapおよびAnimate.cssのCSSをロードしてください。CSS`コメントの下に次のコードを追加します。Fonts]ライブラリのhttps://fonts.google.com/specimen/Rubik[Rubik]というカスタムフォントを使用して、検索バーのスタイルを設定します。+`コメントの下に強調表示されたコードを追加して、フォントをロードします。CSS`コメントの下のページにカスタムCSSを追加します。これにより、ページの見出し、検索バー、および結果が読みやすく、使いやすくなります。+`コメントの下にヘッダーと入力バーを定義するHTMLを追加します。-->...これは、Bootstrapのグリッドシステムを使用して、ページヘッダーと検索バーを構成します。+」識別子を割り当てました。これは、チュートリアルの後半でリスナーにバインドするために使用します。次に、検索結果を表示する場所を作成します。div」を作成し、チュートリアルの後半で結果を追加します。search-bar.html`ファイルは次のようになります。</body></html>このステップでは、HTMLとCSSを使用して検索バーの基本構造をレイアウトしました。次のステップでは、検索語を受け入れて結果を返すJavaScript関数を作成します。検索バーがフォーマットされたので、このチュートリアルの後半で作成するRxJSコードの基盤として機能するJavaScriptコードを作成する準備ができました。このコードはRxJSと連携して、検索語を受け入れ、結果を返します。このチュートリアルでBootstrapとJavaScriptが提供する機能は必要ないので、それらをロードするつもりはありません。RxJSを使用します。+`コメントの下に以下を追加して、RxJSライブラリをロードします。+`の参照を保存します。`タグにハイライトJavaScriptコードを追加します。--><script></script>...次に、APIからのJSON応答をページに表示するHTML要素に変換するコードを追加します。このコードは、最初に検索バーのコンテンツをクリアしてから、検索結果アニメーションの遅延を設定します。+`タグの間に強調表示された関数を追加します。`で始まるコードブロックは、検索結果をチェックする条件付きループであり、結果が見つからなかった場合はメッセージを表示します。+`ループはユーザーにアニメーションで結果を提供します。このステップでは、結果を受け入れてページ上に返すことができる関数を作成して、RxJSのベースをレイアウトしました。次のステップでは、検索バーを機能的にします。手順3-リスナーの設定RxJSはデータストリームに関係しています。データストリームは、このプロジェクトでは、ユーザーが入力要素または検索バーに入力する一連の文字です。このステップでは、更新をリッスンするリスナーをinput要素に追加します。search-input`要素への参照を保持する変数を作成します。functions_とも呼ばれます。+`タグに強調表示された行を追加します。`演算子を使用してイベントをリッスンします。odel要素にリスナーが追加されます。この場合、DOM要素は検索バーです。DOM要素が最初のパラメーターです。+」イベントが続きます。これは、コードがリッスンするイベントタイプです。document.getElementById("search-input");...リスナが設定されたので、入力要素で更新が行われるたびにコードが通知を受け取ります。次のステップでは、演算子を使用してこのようなイベントに対してアクションを実行します。`は、データに対して操作を実行する1つのタスクを持つ純粋な関数です。+`パラメータのバッファリング、HTTPリクエストの作成、結果のフィルタリングなどのさまざまなタスクを実行します。ユーザーがクエリを入力すると、結果がリアルタイムで更新されることを確認します。これを実現するには、前のステップのDOM入力イベントを使用します。DOM入力イベントにはさまざまな詳細が含まれていますが、このチュートリアルでは、ターゲット要素に入力される値に関心があります。+`演算子を使用してオブジェクトを取得し、指定されたキーで値を返します。'input')...イベントが必要な形式になったので、検索語の最小値を3文字に設定します。多くの場合、3文字未満では関連する結果が得られないか、ユーザーがまだ入力中です。`演算子を使用します。指定された条件を満たす場合、データをストリームのさらに下に渡します。長さ条件を「+2」より大きく設定して、少なくとも3文字を必要とします。'value')...また、APIサーバーの負荷を軽減するために、リクエストが500ミリ秒間隔でのみ送信されるようにします。`演算子を使用して、ストリームを通過する各イベント間の最小指定間隔を維持します。2)...また、最後のAPI呼び出し以降に変更がなかった場合、アプリケーションは検索語を無視する必要があります。これにより、送信されるAPI呼び出しの数がさらに減り、アプリケーションが最適化されます。例として、ユーザーは「スーパーカー」と入力し、最後の文字を削除して(「スーパーカー」という用語を作成)、削除した文字を追加して「スーパーカー」に戻します。その結果、用語は変更されなかったため、検索結果は変更されません。このような場合、操作を実行しないことは理にかなっています。+`演算子を使用します。この演算子は、ストリームを介して渡された以前のデータを記憶し、異なる場合にのみ別のデータを渡します。.debounceTime(500)...ユーザーからの入力を規制したので、検索語でAPIを照会するコードを追加します。これを行うには、_AJAX_のRxJS実装を使用します。AJAXは、ロードされたページのバックグラウンドで非同期的にAPI呼び出しを行います。AJAXを使用すると、新しい検索語の結果でページをリロードすることを回避でき、サーバーからデータを取得してページの結果を更新することもできます。`を使用してAJAXをアプリケーションにチェーンするコードを追加します。」を使用して、入力を出力にマップします。+`によって発行されたすべてのアイテムに適用します。.distinctUntilChanged()...このコードは、API応答を3つの部分に分割します。+:APIサーバーによって返されるHTTPステータスコード。200+」または成功した応答のみを受け入れます。+:受信した実際の応答データ。これには、クエリされた検索語の結果が含まれます。+:APIサーバーから返される応答のハッシュ値。このチュートリアルでは、UNIXタイムスタンプを使用します。これは、結果が変わると変わる結果のハッシュです。一意のハッシュ値により、アプリケーションは、結果が変更されており、更新する必要があるかどうかを判断できます。システムに障害が発生し、エラーを処理するためのコードを準備する必要があります。+`演算子を使用します。)...次に、応答で変更が検出された場合にのみDOMを更新するコードを追加します。DOM更新はリソースを大量に消費する操作になる可能性があるため、更新の数を減らすとアプリケーションにプラスの影響があります。+`は応答が変更されたときにのみ変更されるため、この機能を実装するために使用します。+`演算子を使用します。コードはこれを使用して、キーが変更されたときにのみユーザー入力を受け入れます。+`演算子を使用してデータ全体が変更されたかどうかを確認しましたが、この例では、応答で更新されたキーを確認します。単一のキーの変更を識別することと比較すると、応答全体を比較することはリソースのコストがかかります。キーハッシュは応答全体を表しているため、応答の変更を識別するために自信を持って使用できます。この関数は、前に見た値と新しい値の2つのオブジェクトを受け入れます。その場合、データはフィルターで除外され、パイプラインでそれ以上渡されません。このステップでは、ユーザーが入力した検索語を受け取り、それに対してさまざまなチェックを実行するパイプラインを作成しました。チェックが完了すると、API呼び出しを行い、結果をユーザーに表示する形式で応答を返します。必要に応じてAPI呼び出しを制限することにより、クライアント側とサーバー側の両方でリソース使用量を最適化しました。次の手順では、入力要素でリッスンを開始するようにアプリケーションを構成し、結果をページにレンダリングする関数に渡します。+`によって発行されたデータイベントを確認できるようにします。次の3つのメソッドを実装します。+:これは、イベントが受信されたときの処理を指定します。+:これはエラーの処理を担当します。+`の呼び出しは行われません。+`が最後に呼び出されたときに呼び出されます。パイプラインで渡されるデータはこれ以上ありません。execution_を実現するためのものです。」パイプラインを定義し、サブスクライブしたときにのみ動作するようにする機能です。+」をサブスクライブする方法を示しています。+`をサブスクライブし、UIでのレンダリングを担当するメソッドにデータをルーティングします。b.result_hash)...これらの変更を行った後、ファイルを保存して閉じます。コードの記述が完了したので、検索バーを表示してテストする準備ができました。search-bar.html`ファイルをダブルクリックして、Webブラウザーで開きます。コードが正しく入力されていれば、検索バーが表示されます。[完成した検索バー]検索バーにコンテンツを入力してテストします。[検索バーに入力されるコンテンツのgif。2文字では結果が返されないことを示しています。+`にサブスクライブして、コードをアクティブにします。これで、定型化され機能する検索バーアプリケーションができました。結論このチュートリアルでは、ユーザーにリアルタイムの結果を提供する、RxJS、CSS、およびHTMLを備えた機能豊富な検索バーを作成しました。検索バーには最低3文字が必要で、自動的に更新され、クライアントとAPIサーバーの両方に最適化されています。複雑な一連の要件と考えられるものは、18行のRxJSコードで作成されました。このコードは読みやすいだけでなく、スタンドアロンのJavaScript実装よりもはるかにクリーンです。これは、将来、コードの理解、更新、および保守が容易になることを意味します。[公式APIドキュメント]をご覧ください。