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

[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]

コンポーネントにスタイルを分割するとリロード時に効かない。
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設定に三項演算子を使っているせいとあったので、なくして見たが結果はかわらず
styled-components/babel-plugin-styled-components#333

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

[ryo-i]

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

[ryo-i]

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