基礎が応用を作る ~ paizaをやってたからできた検索フォームの実装 ~
個人開発中のサービスで検索フォームを実装したのですが、その際にpaizaをやってて良かった〜と心底思ったのでその内容を共有したいと思います！
今回実装した検索フォームはこちら（上の部分）
なぜpaizaをやってて良かったのか？
未知の機能実装に困らなくなったからです。例えば今回のように様々な条件を持った検索機能を作るときでも、Javascriptのどのメソッドを使えば実現できそうか当たりがつきます。
個人開発の前にpaizaで日々様々な問題と向き合ったことで、解を導くための値の渡し方や配列操作のバリエーションを身につけることができたのは幸運でした。
検索フォームのpaizaがあるとき。ないとき。
ここから検索をフォームを作るにあたってpaizaを学ぶ前と学んだ後で自分ができたことの違いを書いていきます。ベーシックな検索フォームの実装から自分で試行錯誤して機能を拡充していった過程が見れるかと思います。
普通の検索フォーム（paizaいらず）
inputフォームにテキストを入力して送信ボタンを押すとデータが送信される一般的なフォームです。
これは特に難しいことはなくhtmlとbuttonを使ったシンプルな実装です。ただもっとスムーズに検索できるようにしたいなと思い改善することにしました。
リアルタイムレンダリングする検索フォーム（paizaいらず）
VueやReactだと比較的簡単に実装可能です。先程の普通のフォームと送信方法は変わりませんが、inputの状態を監視することで入力された値をリアルタイムに出力することが可能です
都度データベースにアクセスするのではなく、ページ読み込み時にjson形式でデータをクライアント側に持たせておくことで検索結果の表示をリアルタイムに更新することができます。
かなり検索しやすくなったのですが複数キーワードで調べたい時に対応してないよな（「大阪 枚方」のように）と思いこちらも改善することに。
ロングテールキーワード検索への対応（paizaいり）
先程までだとinputフォームに入力された値に一致するものしか表示できないため工夫が必要です。
こちらのnoteでは詳細は割愛しますが（今後Qiitaにまとめたい！）、複数入力されたキーワードを配列にそれぞれ格納してデータベースと照合することで実現しました（よくわかりませんね笑）。
コードでは下記Javascriptのメソッドを使うことでうまく実装できました！
split
map
indexOf普段paizaで配列に値を入れていじくるという作業をしていなければ実装できてなかったなと思います。ただここで更に欲が出てきて、単一フォームじゃなくて複数フォームの値をAND検索できたらいいなと考えます。
フォームを横断した複数キーワードのAND検索を実現（もっとpaizaいり）
基本的には先程のようにキーワードを配列に格納するのですが、今回はフォームが更に複数個あります。そのため複数配列に入った複数キーワードをデータベースの内容と照合する必要があります。
ここでpaizaで鍛えた配列いじりスキルの出番です。使ったメソッドは下記。
split
map
concat
indexOf最後にこれらを良い感じに関数化したら出来上がりです。
基礎が応用を作る
今回最も実感したことです。paizaで地道な配列いじり（何に使うんだこれと思いながらやってたこと）が機能を一から生み出す時に超絶役に立ちました。
学校の授業でも「これ将来なんの役に立つんだろ」と思っていたらモチベーションが上がらないものです。でも、今回の私のように実体験としてその恩恵を見つけられたら日々の取り組みにも身が入ります！
「これ何の役に立つんだろ？」と思った時はそこで思考停止してしまうのではなく、「何かに役立ててやろう」という勢いが大事なんだなと実感した出来事でした。
おわり
いいなと思ったら応援しよう！
