JavaScriptでフィルタリングアプリを作成しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、フィルタリングアプリを実装します。

RANDOM USER GENERATORというAPIがあって、そこからユーザーデータを取得します。そして、それをリスト化し、任意の文字列でフィルタリングするアプリケーションです。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

前述の通り、RANDOM USER GENERATORからユーザーデータを取得します。

ページを開いた時にAPIを叩く->ユーザーデータ取得->リスト化->フィルタリング」の流れになります。

要素を取得する

最初に、画面操作に必要な要素を取得します。

ユーザーデータの取得

ユーザーデータを取得しましょう。

「https://randomuser.me/api?results=50」は、APIのリクエスト先です。50件のデータを取得できるようにしています。

async/awaitは非同期関数です。通常は、他のコードと別に実行されるようになりますが、awaitでAPIからのレスポンスが返却されるまで待機させてます。

ユーザーリストの作成

次は、取得したデータを元にユーザーリストを作成しましょう。

これはもう定番の処理ですね。createElementメソッドでリストを作成して、appendChildメソッドで要素を追加しています。

「user.name.first」などは、JavaScriptのテンプレートリテラルを使って、APIから取得したデータを埋め込んでいます。

getData関数をページが読み込まれた時に実行するようにしておきましょう。

フィルタリング機能

次に、フィルタリング機能を作成しましょう。

フィルタリングと言っても実際にデータを削除しているわけではなく、hideクラス(CSSのスタイル)で要素の表示・非表示を切り替えています。

フィルタリングするデータもAPIから再取得せず、取得したデータの中で処理しています。

自己学習レベルならこの実装でも問題ないと思いますが、実務の場合はフィルタリングをする度にAPIからデータを取得しなおしてください。そうでないと、API側でデータの変更があった時に、その変更を画面に反映できません。

inputイベントの登録

最後にinputイベントを登録します。これは、検索窓から文字を打ち込んだ時に発火するイベントです。

これで、完成です。

おわりに

フィルタリング処理は、実務でも実装する機会が結構あります。データがめちゃくちゃ多くなった時に便利なんですよ。

あとは、オートコンプリートページネーションを覚えれば、完璧かもですね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す