ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

JavaScriptドリル

カテゴリー
JavaScript
JavaScriptドリル
全10回

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

第1回 JSON文字列を扱う

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

第2回 HTMLを生成する 前編

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

第3回 HTMLを生成する 後編

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

第4回 特殊なソート 前編

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

第5回 特殊なソート 後編

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

第6回 CSVデータのパースと集計 前編

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

第7回 CSVデータのパースと集計 後編

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

第8回 インクリメンタルサーチの実装

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

第9回 非同期処理の実装 前編

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

第10回 非同期処理の実装 後編

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