JavaScriptとGo言語でToDoリストアプリを作ろう!~検索機能~

こんにちは。KOUKIです。

TodoリストアプリケーションをJavaScriptとGo言語で実装しています。

今回は、検索機能を実装しましょう。

前回

作るもの

UIに検索ボックスを追加して、検索文字列に部分一致したTodoだけ表示させます。

ワークスペース

バックエンド

まずは、バックエンド側に検索処理を実装します。

ドメイン

ドメインにSearchを追加します。

レポジトリ

レポジトリに、Searchメソッドを追加します。

stringsパッケージのIndexは、検索文字列に対して文字列が部分一致で合致しているかチェックします。そして、合致しない場合は、-1が返されます。

テストコードも実装します。

テストを実行しましょう。

テストがパスしました。

デリバリー

デリバリーを実装します。

ユースケース

次は、ユースケースを実装します。

フレームワーク&ドライバー

main関数からSearch機能を呼びだします。

動作確認

Talend API Testerで動作確認をしてみましょう。

  1. POST:http://localhost/todo/store
  2. POST:http://localhost/todo/search

まずは、「http://localhost/todo/store」のエントリポイントで、データを登録をします。

次のテストデータを登録してください。

データが登録できたら、このキーワードで検索します。

検索できましたね。完璧です。

クリーンアーキテクチャを意識して実装すると機能追加がかなり楽です

UI

検索時の挙動を以下にまとめます。

1. 検索時にTodoリストを作り直す
2. 検索文字に部分一致したものを表示する
3. 検索結果が0件の場合はリストに何も表示しない
4. 空文字を検索することでTodoを全件取得する -> 検索リセット

検索窓

まずは、検索窓をつけましょう。

検索用のform要素を追加しました。

要素の取得

次に、先ほどHTMLに設置したsearch要素を取得します。

Search

Fetch APIを使って、サーバー側に実装したsearchエントリポイントへリクエスト送信できるようにします。

Submitイベントの登録

最後にSubmitイベントを登録します。

これで完成です。

次回

次回は、TodoリストをDocker化し、MySQLを導入します。

関連記事

こちらの記事も人気です!

JavaScriptまとめ

Go言語まとめ

JSソースコード

おすすめ書籍


コメントを残す