---

開発しなきゃな･･････(笑)


っていうことで、ページ遷移はできるようになったと思うので細かいところを肉付けします。
次やんなきゃいけなさそうなのはフォーム検索ですね。
これでやんなきゃいけないのは、フォームを表示して、バリデーションして、よかったらaxiosを使ってapiを叩いてajax通信をし、結果を受け取る、って感じですね。
SPA、もといjavascript化するメリットがこのへんで享受できそうな感じがします。やってみましょう。



どこから手を付けるのがラクかなって考えましたが、上にテキストボックスを既に置いてますしそこから作りましょうかね･･････。
とりあえずテキストボックス用のコンポーネントを作ってみましょう。


と、そのまえにページ全体をちゃんとしたVueの形にしないとですね。



現状こんな感じなんで･･････。コンポーネントの思想に合わないし、後々開発しづらそうなので親コンテナを作るべきだと思います。　
そのへんはネストされたルートとかを使えばいい感じに仕上がりそうです。Nuxt使えばもっと良さそうではあるんですけど、パンクしそうなのでやめときます笑
まだうまく動いてる確信が持てないのでサンプルコードは貼らないことにします(笑)


で、フォームですね。



現行だと、この上の部分の「名前から検索」から入ろうかなと思います。
これに関してはデータバインディングとかは必要ないので、ここでクリアすべき課題は、さっき言ったように適切なバリデーションをして、APIで結果を受け取ることぐらいですね。
あと、可能なら逐一通信して、ヒットした数を表示させられるとおしゃれですね。そのへんのことはできそうな記述がありました。


Vuelidateとかいうライブラリもありますが、今は初心者なのでネイティブで書こうと思います。

とりあえずわかりやすそうなサンプルを探したらこういうのを見つけたので、それを参考に作ってみましょう！！



ここで必要となるのは、テキストの変更を監視し、変更があったら発火するっていう、よくあるイベントハンドラですね。
生javascriptで書くのはダサすぎるので、Vueでなにかサポートされていないか考えます。単にデータを表示するだけなら普通にバインディングすればいいんですが、やりたいことはテキストボックスの中身でSQLを発行するってとこなので、たぶんバインディングとは違う仕組みが必要になりそうなんですよね。


ここで使うのはウォッチャとかいうやつですね。
ここでイベントを監視して、変更があったらaxios発火みたいな感じです。



ということで、ここまで拾うことができたので次はAPI構築です。
現行のものをリファインしながらなので時間かかりそうですね。ファクトリークラスとか作りながらやんなきゃなので。やっぱり昔書いたプログラムってメンテ性悪いんだよなあ

まぁDAOとか導入して努力してるのはわかりますが、その後ORMという武器を手に入れたので、やっぱり見づらい(笑)と思ってしまった。残念(笑)
そんなわけで、今のスキルに合わせたプログラムに書き換えて、読みやすく改良しやすくバグが起こりにくくしないとなので一旦ここで切り上げておきます( ˇ-ˇ )笑