jQueryでアプリケーションを作る

今回は作成したアプリケーションについてお話ししたいとおもいます。

まず作成したアプリがどのようなものか説明したいと思います。

まずは以下のgifを見てください。

こんな感じで、検索ボックスに文字を入力すると一致するフルーツ名が検索結果として表示されます。

上記のようなアプリケーションを実現するために必要な機能をまとめておきます。

だいたいこのような機能が備わったアプリケーションです。

次で完成コードを載せるので、コードを見ながら順に追って行こうと思います。

これが完成版です。

復習ができるようにプログラムのコード内のコメントアウトで説明がされてるので見てみてください。

実際にこのコードが読み込まれるとどのようにプログラミングが実行されていくか書いてみます。上の画像と照らし合わせながら見ていきましょう。

[１行目]

まず入力した値と照らし合わせるために今回は配列を生成し、配列の中にフルーツ名をあらかじめ入れてあります。

[６行目〜１８行目]

そしてここで変数と関数を定義してます。

８〜１２行目でタグの変更によって結果を表示する処理が書いてあります。

１４〜１８行目で配列の要素のそれぞれに変更を行なっています。（これは後で呼び出されるので、そのときに説明します）

[２２行目〜４３行目]

ここから処理が行われています。

２２行目で検索ボックスに入力していくたびに検索が行われるようにkeyupというイベントを利用します。

２４行目で配列を排除できるfilterを利用して、インクリメンタルサーチによるスペースも配列の中に入ってしまう現象を解決しています。

２７〜２９行目で一部の文字で検索できるように正規表現で前方一致を行なっています。

３３行目でeachを使って、fruitsという変数の中にあらかじめ入れたフルーツ名と一致するものを検索する動作をし、

３９行目で一致するものがない場合は「一致する果物がありませんでした」と表示されるようになっています。

今回のアプリ作成において初めて知ったメソッドがいくつかあったのでまとめたかったんですが、

なかなか時間が取れないので今日はここまで。

後日まとめていきたいと思います。

このくらいのアプリケーションなら、jQueryを初めて学習しましたがそんなに時間をかけずに作れるような気がしました。

少しずつプログラミングのインプット作業に慣れてきたのかもしれないです。

明日から自分でブログアプリを作ろうと思っているので、それについて書いていきたいです。