ビートルズデータの読み込み、表示を実装

[ryo-i]

・スプシのデータをGoogle Sheets APIでJSON化 ・FirebaseのRealtime Databaseにimport ・Realtime Databaseをfetch apiで読み込む ・ページ上に表示する ・その後の処理を検討…

[ryo-i]

MEMO

全件のデータを最初に取得して、ブラウザ側で配列を絞り込む場合は、filter()が良さそう https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter https://qiita.com/yoshimo123/items/fa21b4cdd293b57b8cc9 https://himenon.github.io/docs/javascript/simple-react-local-search-form/ https://teratail.com/questions/212715 http://lifelog.main.jp/wordpress/?p=2557

algoliaというのもあるらしい https://fwywd.com/tech/next-algolia

[ryo-i]

スプシ→jsonファイル→Realtime Database 配列が全部番号のキー名の連想配列になってる

[ryo-i]

Realtime Databaseのデータをエクスポートしてみたが、元のデータと同じ配列形式だった

DL直後

整形後

連想配列形式になっていればキー名を検索置換したかった

[ryo-i]

fetchで読み込んだデータをconsoleで読み込み 配列形式になっているな

[ryo-i]

1 でスプシのデータを作り込んだので、それを読み込んだ

スプシのJSON APIのデータを取得

Firebaseにimport

Reactからfetch apiで読み込みconsoleに表示

[ryo-i]

さて、ここから2つの方向性がある。 ・firebase側でフィルタを掛けたデータをブラウザ側で読み込むか ・データ全体をブラウザ側で読み込んだあとにReactのみでフィルタリングするか

または上記２つの良いとこ取りのハイブリッド型にするか

[ryo-i]

ひとまず曲名、作品名、発売日のみ抜粋表示に成功ー

[ryo-i]

レイアウトを手直しした

[ryo-i]

Firebase試行錯誤記録

• Firebaseから「安全ではないルールがあります」とメールがくる
• .readのルールをtrueにしているから？(.writeはfalse)
• Firebase Authをインストールして「匿名認証」の設定を試みる https://firebase.google.com/docs/auth/web/anonymous-auth?authuser=0
• localhostで500エラー「Uncaught at Object.firebase/app」「Uncaught at Object.firebase/auth」など
• Next環境のロード時の設定などを追記してみるが変わらず https://zenn.dev/tokiya_horikawa/articles/6008f6463a2e59
• Firebaseをバージョン8でインストールしてバージョン8の書き方にしてみたが変わらず https://zenn.dev/hiro__dev/articles/605161cd5a7875 https://www.i-ryo.com/entry/2021/02/24/062009

他にもいろいろ調べたり試したが主要なものしか覚えていない、、

[ryo-i]

Web APIのセオリーとして ・通信回数の最適化 ・通信量の最適化 では通信回数の方が効果が大きいため、データ量が多くてもなるべく通信回数が少ない方法を取りたい

参考 https://jp.quora.com/Webプログラミングでは通信量を減らすためにAPIへのリク?ch=2&oid=78106424&srid=NZThn&target_type=question https://zenn.dev/nakaryo/articles/87b15866d67efe

なお、graphQLは１回の通信で必要な情報だけが返ってくる https://qiita.com/NagaokaKenichi/items/a4991eee26e2f988c6ec

[ryo-i]

ビートルズデータはapiフォルダにすべきとわかったので移動 https://maku.blog/p/qcp2coz/ https://nextjs-ja-translation-docs.vercel.app/docs/api-routes/introduction

[ryo-i]

動的なページを追加 https://nextjs-ja-translation-docs.vercel.app/docs/routing/dynamic-routes

[ryo-i]

• 動的ページをページ構成のレイアウトに変更
• urlを打ち替えるとテキストの内容も変わる
• ページ遷移の履歴も追加されている

[ryo-i]

json部分を外部ファイル化した apiフォルダ内であれば直リンクが開けないっぽい ! 404ページになる。これでレスポンスの内容を細かく設定できそう♪

参考 https://github.com/vercel/next.js/blob/canary/examples/api-routes/pages/api/people/%5Bid%5D.js

[ryo-i]

動的APIで曲単位のデータを取得 とりあえずトップページから叩いたけど、これを曲単位の動的ページから叩きたい

[ryo-i]

親コンポーネントのフックをContextで子コンポーネントに渡す 子コンポーネント上でフックを更新できた

useContextで親コンポーネントのフックを受け取る https://qiita.com/Rascal823/items/0f53ffbb410505b707f8

フックのセットはuseEffectの中で実行する https://qiita.com/FumioNonaka/items/3fe39911e3f2479128e8

[ryo-i]

トップと楽曲情報をリンクで往来できるようにした

[ryo-i]

queryパラメータを取得する前にGETが実行されてAPIを2回叩いていた。下記の記事を参考に修正。

https://zenn.dev/kiyokiyoabc/articles/d3a8464367094a https://scrapbox.io/rmaruon/router.queryがundefinedになる

[ryo-i]

APIからpageInfoを取得して、全体の件数と何ページ目かを表示する

これを足掛かりにページネーションを作りたい

[ryo-i]

OGPに入れたい内容がブラウザ側でURLのuseRouter()で取得したパスの値を元にAPIに通信して得たレスポンスの内容になる。 これを動的に反映されるのが難しく、OGPでは空欄になってしまう。

---

解決策が見つかるまでは汎用的な初期値を入れることにした（これまでは空欄になっていた）

Souces（初期値）

Elements（取得内容に更新）

---

SGやSSRを使うとHTMLレンダリングの前にパスを取得したりAPIと通信したりできそう

参考 https://www.to-r.net/media/next-meta-tags/ https://zenn.dev/luvmini511/articles/1523113e0dec58 https://qiita.com/matamatanot/items/1735984f40540b8bdf91 https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/pages#server-side-rendering https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/data-fetching#getserversideprops-server-side-rendering https://reffect.co.jp/react/next-js#getServerSideProps

[ryo-i]

SGでサーバ側でパスを取得し、該当する曲の情報をAPIから取得し、OGPに埋め込めた

ただし、ページネーション向けの50件しばりのレスポンスの影響で51件からさきは404になっている。解決したい。

[ryo-i]

別名でも同一階層だと同じページで処理が行われるみたいな感じでデプロイエラーになった

Error: You cannot use different slug names for the same dynamic path ('category' !== 'track'). エラー：同じ動的パスに異なるスラッグ名を使用することはできません（ 'category'！== 'track'）。

https://stackoverflow.com/questions/60565918/you-cannot-use-different-slug-names-for-the-same-dynamic-path-nextjs

[ryo-i]

・絞り込み後の件数がおかしい（1曲少ない） ・カテゴリの件数もおかしい（1曲少ない） ・ページングのurlに絞り込みが反映したい

[ryo-i]

オブジェクトの空判定 https://zenn.dev/hakshu/articles/check-js-object-is-empty

[ryo-i]

オブジェクトをそのまま文字列にするのはJSON.stringify() オブジェクトを任意な区切りの文字文字列にするのはentries()とjoin() https://www.delftstack.com/ja/howto/javascript/javascript-object-to-string/

[ryo-i]

今後の予定

• 絞り込み条件のタイトルを日本語にする
• 検索窓の追加
• さらなる詳細の絞り込みを追加
• トップとカテゴリのコンポーネンツを共通化できるか？

[ryo-i]

参考になったページ ネストしたコンポーネントからコンテクストを更新する https://ja.reactjs.org/docs/context.html#updating-context-from-a-nested-component

こっちは難しかった… 動的インポート https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

[ryo-i]

やった！ついによく似ていた2つのコンポーネントを統合でけた！！！ これで修正が一箇所で済む〜♪

さて、次はいつの間にか発覚していた事象、 カテゴリページでページをリロードすると件数が0件になる問題、 こちらの解決に入る。

リロード時にはcategoryの値がundefinedになっている模様

[ryo-i]

categoryとisCategoryの処理を分離したらリロードでも検索結果を表示できた！ categoryはパスではなくパラメータを見てた。そういうことか。

あとはこれもいつの間にかだけど、リロードするとカテゴリのカレントスタイルが効かないようなので、次はこちらを調べたい。

[ryo-i]

ローカルでは起こらず、デプロイ環境のみで起こる事象

楽曲一覧でスクロールすると楽曲が画面に入った時に、楽曲情報のAPIを叩いている（画面表示上は不要な処理）

Networkから処理の冒頭を見るとonmessage、postMessageなどが見受けられる

onmessage https://lab.syncer.jp/Web/API_Interface/Reference/IDL/WebSocket/onmessage/ https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage https://www.tohoho-web.com/html/attr/onmessage.htm

postMessage https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage https://js.studio-kingdom.com/javascript/window/post_message https://launchcart.jp/blog/%E3%80%90javascript%E3%80%91postmessage%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E9%80%9A/

上記の関数は自分の書いたコードの中にはなく、ファイル一式の中で検索しても出てこない。デプロイ時に自動的に生成されていると思われる。

リクエストのurlは下記のようになっている。 https://beatles-db.vercel.app/_next/data/xxxxxxx/track/5.json （自分で楽曲リンクをクリックした時は下記のurl） https://beatles-db.vercel.app/api/beatles/track/5

「/_next/data」はnext/linkを使うと生成されるパスかもしれない https://zenn.dev/gc/articles/b644e2c57aef67

[ryo-i]

フックの値が1つずつズレているのだが、これが原因かも 実行する場所やタイミングの問題

フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。

フックを呼び出すのはトップレベルのみ https://ja.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

[ryo-i]

hoge: fuga, fuga, fuga / hoge: fuga, fuga, fuga / hoge: fuga, fuga, fuga

みたいな値を区切り文字を「 / 」だけでなく「 : 」でも区切りたい。入れ子構造

split()を使った二次元配列の例（map()の中を無名関数にしてもう一回split()を実行 https://qiita.com/yama-t/items/75971cfbe50935f1bf2c

[ryo-i]

フリーワード検索窓を付けたい

検索ボタンはinputタグかbuttonタグか →buttonタグの方がスタイル付けやすい（機能は変わらない） https://neos21.net/blog/2020/08/06-01.html

Reactのフォーム機能 https://ja.reactjs.org/docs/forms.html

stateはフックに書き換え可能 https://ja.reactjs.org/docs/hooks-state.html

buttunタグでページ遷移はrouter.pushを使う https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next/router#routerpush

[ryo-i]

配列内の要素の部分一致については、現状はループで回して正規表現で確認する方法が有効なようです。

https://into-the-program.com/array-string-search/

今後の課題 ・空文字検索はしないようにしたい ・大文字小文字の区別をしないようにしたい ・エンターでも検索実行できるようにしたい

前後を空白文字を削除する正規表現 https://www.nishishi.com/javascript-tips/trim-space-chars.html

JavaScript での大文字小文字を区別しない文字列比較 https://www.delftstack.com/ja/howto/javascript/how-to-perform-case-insensitive-string-comparisons-in-javascript/

エンターキーで実行 https://blog.freks.jp/react-submit-with-enter/

[ryo-i]

コンポーネントにスタイルを分割するとリロード時に効かない。 class名が一致しないようだ。こちらを参考に対策 https://takumihiguchi.portfolio.branchwith.jp/blog/362r6yyncv7 https://github.com/vercel/next.js/blob/deprecated-main/examples/with-styled-components/pages/_document.js

スタイルは聞くようになったがコンソールエラーは消えない babel-plugin-styled-componentsも入れてみたが変わらない https://zenn.dev/nbr41to/articles/c0c691653e3d55 https://www.npmjs.com/package/babel-plugin-styled-components

しかしこの事象はデプロイ環境では起こらないようで、ローカル環境だけの事象かも？

[ryo-i]

style設定に三項演算子を使っているせいとあったので、なくして見たが結果はかわらず https://github.com/styled-components/babel-plugin-styled-components/issues/333

メッセージにあったページを見ると、フックを使うとよさそう？ https://nextjs.org/docs/messages/react-hydration-error

[ryo-i]

こちらの記事を参考に、CSSのclass名設定などの分岐処理が終わったあとにStyled-Componentsのレンダリングを実行するようにしたら解決した！！ https://zenn.dev/takewell/articles/5ee9530eedbeb82e4de7

[ryo-i]

一通り完成したのでクローズ。 残りは楽曲解説を追加していく。