【Vue.js入門】13_Qiita記事検索アプリを作ってみる

Vue.js入門第1３回。今回は今までの内容でQiitaの記事を検索するアプリを作成してみます。

Qiita記事検索アプリについて

入力されたキーワードを元にQiitaから記事を検索するアプリです。

dataプロパティに検索結果を保持するitems、検索キーワードを保持するkeywordプロパティ、ロード中や文字入力中などのメッセージを保持するmessageプロパティを定義しています。

createdプロパティはVueインスタンス生成後に呼び出されますが、ここでdebounceSearchという検索関数を作成し、lodashという外部のライブラリ_.debounceを使って１秒後にsearchメソッドを呼び出すようにしています。

watchプロパティでkeywordを監視して、変化があったら（つまり入力中）だったらmessageに「typing..」と表示して、上述のdebounceSearch関数を呼び出しています。debounceによって最後に呼び出されてから１秒後に検索が走るようにしています。

methodsプロパティに実際に検索するsearchメソッドを定義しています。keywordが空であればitemsとmessageの初期化を行いreturnで終了しています。空でなければQiitaAPIを呼び出してレスポンスをitemsプロパティに設定しています。

検索テキストボックスとしてkeywordを双方向データバインディングさせています。

v-forディレクティブで検索結果の一覧（記事タイトルといいね数）を表示しています。

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。