JavaScriptドリル

全10回

「JavaScriptが書ける人」は、経験によりさまざまな解法を場合に応じて使い分けることができます。このシリーズでは「ドリル」形式の問題を通して、さまざまな解決のパターンを学んでいきます。

第10回非同期処理の実装後編 2018年6月7日

APIから非同期に返ってくる情報を処理する解答例を紹介しつつ、非同期処理のさまざまなポイントを学びます。後編はasync/awaitを使った解答を紹介。よくある失敗例も解説します。

JavaScriptのプログラムでは出くわすことが多いわりに、ちょっと苦手意識を持ってしまいがちな「非同期」。この処理をどのように実装するかをドリルを通して考えてみましょう。

今回の問題は「インクリメンタルサーチの実装」です。データ検索と処理と、input要素への入力やクリックのハンドリングといったUIを扱う処理が並存します。これらをどうわかりやすくコードにするかがポイントです。

CSVデータのパースと集計処理が今回のテーマ。後編は「各フィールドのデータは尊重し、集計の際にカンマの処理をするアプローチ」をとっている解答を紹介しています。このアプローチの長所は要件変更にも柔軟に対応しやすい点です。

CSV形式のテキストをパースし、データを集計する一連の処理を組み立てます。カンマで区切られたデータを扱いますが、今回の例では、フィールドにもカンマを含んだデータがあります。さて、あなたならどのような実装にしますか？

今回も並び替えをします。1LDKなど省略して書かれた間取りを指定した順に並び替えるのですが、それは広さではなく、指定のルールに沿って並べる必要があります。あなたはどのように解きますか？

JavaScriptドリルの第4弾です。今回は単なる数値ではない基準（評価や間取り）にしたがって、昇順や降順に並び替えるという課題が登場します。まずは初学者でも挑戦できる比較的簡単な課題からです。

後編は、ES6で書かれたもの、ES5ベースでクラスを表現した解答や、AngularJS、Reactなど独自の設計思想で構造化を行いやすいライブラリを使用した手法を紹介します。中〜上級者向けの解法です。

今回のドリルはグローバル変数として定義されたデータから、指定どおりのHTMLを生成する問題です。前編は、比較的初心者向けのDOM操作やテンプレート機能を使った解法を紹介します。

JavaScriptの基本的な文法を押さえたら、少しずつ「解法」のストックを増やしていきましょう。第1回目はJSON文字列から特定の情報を取り出すパターンを考えます。

運営会社