学習目標
前回は、Bootstrapを導入してTodoアプリの見た目を整え、見やすく操作しやすい画面を作成しました。しかし、Todoの数が増えてくると、一覧の中から目的のTodoを探すことが難しくなります。
そこで、この章ではタイトルを入力してTodoを絞り込める検索機能を実装します。検索機能では、URLに検索条件を渡すGETパラメータと、文字列を部分一致で検索できる**icontains**を学習します。
これらを利用することで、入力したキーワードを含むTodoだけを表示できるようになります。この章を終えると、目的のTodoをすばやく見つけられる便利な検索機能を備えたアプリケーションが完成します。
検索機能とは
検索機能とは、入力した条件に一致するデータだけを表示する機能です。例えば、Todoアプリで「買い物」と入力すると、「買い物」や「買い物リスト」など、その文字列を含むTodoだけが一覧に表示されます。
これにより、多くのデータの中から目的の情報をすばやく見つけることができます。検索機能は、ECサイトの商品検索やブログの記事検索、会員情報の検索、お問い合わせ履歴の検索など、さまざまなWebアプリケーションで利用されている基本的な機能です。使いやすいアプリケーションを作るうえで、検索機能は非常に重要な役割を果たします。
GETパラメータとは
検索機能では、入力したキーワードをGETパラメータとしてURLに付加し、サーバーへ送信します。GETパラメータは、?名前=値という形式で指定します。
例えば、http://localhost:8000/?keyword=買い物では、「買い物」が検索キーワードとして送信されます。また、複数の条件を指定する場合は、?keyword=買い物&completed=Falseのように&でつなげて記述できます。
GETパラメータはURLに検索条件が含まれるため、検索結果のページをそのままブックマークしたり、他の人と共有したりできるという特徴があります。検索機能では広く利用されている便利な仕組みです。
GETパラメータを取得する
検索画面では、URLに付加されたGETパラメータをビュー(View)で受け取ります。その際に利用するのが**request.GET**です。例えば、keyword = request.GET.get(“keyword”)と記述すると、?keyword=買い物というURLから「買い物」という値を取得できます。
get()メソッドを使用すると、指定したGETパラメータが存在しない場合でもエラーが発生せず、安全に値を取得できます。そのため、検索画面を初めて表示したときのように検索キーワードが指定されていない場合でも、安心して処理を実行できます。
icontainsとは
検索機能では、入力した文字列を含むデータを取得したい場合が多くあります。そのようなときに利用するのが**icontains**です。例えば、Todo.objects.filter(title__icontains=keyword)と記述すると、タイトルに検索キーワードを含むTodoだけを取得できます。
検索キーワードが「買」の場合、「買い物」や「買い物リスト」などが検索結果として表示されます。icontainsは、大文字・小文字を区別せずに部分一致検索を行うLookupで、ユーザーが入力したキーワードに近いデータを簡単に検索できます。そのため、検索機能を実装する際によく利用される便利な機能です。
検索フォームを作成する
検索画面では、ユーザーがフォームへキーワードを入力し、その内容をサーバーへ送信します。例えば、<input type=”text” name=”keyword”>のような入力欄を用意すると、入力した文字列を取得できます。検索ボタンを押すと、フォームの内容がGETメソッドで送信されます。
検索フォームでは通常、method=”GET”を使用します。これは、入力した検索条件をURLへ反映させるためです。URLに検索条件が表示されることで、検索結果のページを保存したり共有したりできるなど、ユーザーにとって便利な仕組みになります。
タイトル検索を完成させる
検索処理は、次のような流れになります。
- ユーザーが検索キーワードを入力する
- GETで送信する
- Viewで
request.GETを取得する icontainsで検索する- 検索結果をTemplateへ渡す
- 一覧画面へ表示する
これで、タイトルに検索キーワードを含むTodoだけが表示されます。
検索条件を入力しなければ、すべてのTodoを表示するようにすると、使いやすい一覧画面になります。
検索機能の仕組み
タイトル検索では、次のような流れで処理が行われます。
ブラウザ
↓
検索フォーム
↓
GET送信
↓
request.GET
↓
title__icontains
↓
QuerySet
↓
Template
↓
検索結果を表示
この流れは、商品検索や記事検索など、多くのWebアプリケーションでも共通して利用されています。
まとめ
この章では、Todoアプリに検索機能を実装する方法を学習しました。GETパラメータは、検索条件をURLに付加してサーバーへ送信する仕組みです。
Viewでは**request.GETを利用することで、URLから送られた検索キーワードを取得できます。また、検索フォームでは通常method=”GET”を使用し、入力した条件をURLへ反映させます。
さらに、Djangoのicontains**を利用すると、指定した文字列を含むデータを取得する部分一致検索が可能になります。取得した検索結果をTemplateへ渡すことで、条件に一致したTodoだけを一覧表示できるようになります。
ここまでで、Todoアプリにタイトル検索機能が追加されました。次回は、データをページごとに分割して表示するページネーション機能を実装し、件数が多い場合でも見やすい一覧画面を作成していきます。