数か月振りの個人HP更新。年末までAWSに力注いでたから仕方ないね。
リンク集追加
まず簡単なやつから。
Link集を追加。までもこれはそんなに難しくないね。aタグのhrefにURL入れるだけだから。display:blockの仕様が理解できてなくて3等分に並べるのに苦戦したけど、最終的に概念を理解できたのでヨシ。
ぶっちゃけ1日かからずに終わったからそんなに感慨ないんだよね。強いて言えばデザインがクソダサである。悲しい。
今後リンクを追加できるつくりにはしてあるし、どうデザイン変えるのがいいんだろね……直置きから少しステップアップしたいところ。
はてなブログAPIから最新記事を取得して表示する
これめっちゃたいへんだった！！！！
作業は大きく分けて2つ。まずはAPIからデータを取得し、それを使える形に整える。そしてそれを画面表示できる形に整えて持ってくる。
1つ目はBFFという概念を参考に作成させてもらった。
僕はNext.jsというフレームワークのページルーターを使っているのでpages/api配下からAPIを呼び出すイメージ。
特にこちらを参考にさせてもらった。
っていうかBFFはほぼ丸パクリである。すごい助かりました。
さて、前半の作業は2日くらいで完了したのだけど、問題は後半、「画面表示できる形に整え持ってくる」である。
これにはReactのcustomHookという概念を利用した……んだけど。
見よう見まねでやっていたせいで不明なエラーが続出。何が何だかわからない。っていうかHooksをどう作るのか？どう使うのかマジでわからなくて……それが理解できてやっと実装できた。
まず引っかかったのはasync/await。useEffectの中でデータを取得してくるようにしてたのだけどうまくいかない。
いろいろ確認してみたけどHooksはasync/awaitなくても実装できそうなことが判明。.then()と.catch()を使った実装で解決。むやみやたらにasync/awaitを使うもんじゃない、覚えた。
次に引っかかったのはHooks内でHooksが使えないこと。より正確に言えばHooksは最初の呼び出しでしか使えないことである。
画面→Hooksは行けるけど画面→Hooks→Hooksはダメということ。「→」が1つの時までしか使えないってことですね。これは理解するのにかなり時間がかかった。
というのも、最後の障壁。customHookが何か理解することである。結果的にcustomHookを作ることになったが、僕は最初のイメージとしてもう一個BFFを作るものだと思っていた。2重に処理するのなんかめんどくね？と思いながらBFFとほとんど同じような機構を作っていたのである。つまりcustomHookを作っているつもりはなかった。イメージとしては
はてなブログAPI→BFF→pages/api→今作ってるやつ→画面
って感じ。
だがその実、やりたいことを満たすにはcustomHookというもっと適切なものがあった。今作ってるやつはcustomHookだったのだ！……それを知らずにやっていたからかなり時間がかかったのである。
これに気づいたのはエラー文で「Hooksとして使うなら最初に『use』がいるよ！」的なことを英語で書かれていたことがきっかけである。エラー文読むって大事だね。
そんな苦節もあり、後半で2週間くらいかかった。でも後から調べてみると引っかかってたところ全部まとまってんだよねぇ。
……と、だいぶ苦戦した初のAPIを使用した実装でした。
次はね……デザインを良くして見れるものにするか、AWSのS3と連携してカメラで撮った写真を上げられるようにしたいですね。デザインは全然思い浮かばんしまた今度かな～。
関連記事
