WEB制作レッスン 16週目 クラシック音楽検索サイト作成
KoheiClassic Composer Searchの検索結果が正常に動作する処理を色々やってみました。
「filter」でqueryにマッチするものを取り出そうとしたのですが動作せず…
また色々試してみます！
GitHubにも新しいrepositoryを作ります！
Kohei今日は４時間ほど色々試しましたが根本を理解していないのか、うまく行かず…
queryに一致した検索結果（serch_result）が残るような処理をすればよいという認識なのですが…
const search_result = query.filter(function (value) {
return value === "name";
});
Coji Mizoguchi混乱しちゃってるようなので、devtools でブレイクポイントを設定して、コードを１行づつステップ実行して、変数に何が入っているか確認しながらやることをおすすめします。
やり方は、この記事が参考になるでしょう。
その上で。
あとでこの scrap を見たときわかるように、今回のHTMLの gist 作っときました。
query.filter は検索ワードを対象にしちゃうのでこれはまずいですね
API からの戻り値は composers という変数に入っています。なので、composers.filter をして、その中で名前が query と一致する (=== の完全一致じゃなくて、部分一致が良いと思います)することで、作曲家をフィルタする必要がありますね。
Koheiありがとうございます😭
Chromeのツールで確認しながらやってみます！
あ～確かにqueryにfilterじゃないですね💦
一つ一つ何が何を意味しているのか認識してやっていきます！
Coji Mizoguchiいいですね。その意気です。
私のコードは最近の仕事で、あたりまえに書く書き方でやってます。
カジュアルに arrow functions (() => {}) を使っているので ES6 の項目と、map や filter 使ってるところで Functional Programming の項目をやるとよいかな〜とおもいます。React / Nextjs でめっちゃ使うので。
ES6
Functional Programming
Koheiありがとうございます！
そっちの項目にfilterがあったんですね！
React / Nextjs でめっちゃ使うとなるとなおさらちゃんと習得目指します！
Koheiすこしづつ理解しながら色々試していますが、まだ正解にはたどり着けず…
const result = composers.filter(composer => composer = query);
アロー関数を使ったパターンと
const result = composers.filter(function(value) {
return value = query;
})
このパターン
これらの処理をdevtoolsで検証してみると、28行目のpreventDefault()で一時停止してしまう。
Coji Mizoguchiブレークポイントで止めてのステップ実行の操作、こんなかんじですよ〜。
preventDefault のところにブレークポイントを設定して、ステップオーバー。
search(query) のところでは、ステップインをしています。
composers の中身はオブジェクトの配列なので、function の引数にある value は個別のオブジェクトがはいってます。なのでvalue.name とかと比較しないといけませんね。部分一致検索は文字列に対する includes 関数でやるのが良いと思います。
Koheiすごくわかりやすくて参考になりました！ありがとうございます！
Koheiやっと出来た気がします！
const matchcomposers = composers.filter(composer => {
return composer.name.includes(query) ||
composer.complete_name.includes(query);
});
// 検索結果の div に HTML として入れ込む
const searchResultDiv = document.getElementById("search_result");
searchResultDiv.innerHTML = matchcomposers
.map(
(composer) =>
`<div>
<div>${composer.name}</div>
<div>${composer.complete_name}</div>
Coji Mizoguchiおお！すばらしい！！🤩
Kohei大文字と小文字の判定を区別なくする処理を追加してみたが、動かず．．．
const matchcomposers = composers.filter(composer => {
return composer.name.toLowerCase().toUpperCase().includes(query) ||
composer.complete_name.toLowerCase().toUpperCase().includes(query);
});
↓これだと小文字しか認識せず．．．
const matchcomposers = composers.filter(composer => {
return composer.name.toLowerCase().includes(query) ||
composer.complete_name.toLowerCase().includes(query);
});
要検討