iOSエンジニアがNext触ってみる
simorgh3196
これを参考に自分の記事のまとめ、自己紹介、GitHub等各種リンクを置いたページ（こういうのなんて言うんだろう）を作ってみる。
普段iOS開発していてWebフロントは初心者なので、調べたりコード見たりしながら頑張る。
simorgh3196deno + Aleph.jsも新しくて面白そうだけど、初心者なのでまずは記事にあるNextで作っていく
simorgh3196Next.jsことはじめ
simorgh3196参考記事のコードでSEOのためのComponentを作っていた。
最近はこういうのやるのが普通なのかな。
調べたら3000スターごえの似たようなOSSが見つかった。
時間ある時調べてみる。
simorgh3196Nextのyarn create next-app --typescriptでプロジェクトを作る
Linter, Formatter
LintはESLintが自動で入っているがformatterは無いためPrettierを入れる
yarn add --dev --exact prettier eslint-config-prettier
ESLintとPrettierを共存させるためにeslint-config-prettierも入れ、.eslintrcの設定を変更する
{
"extends": [
"next",
"next/core-web-vitals",
"prettier"
]
}
JSの日付の扱い
参考コードではdayjsを使っている。
他にもdate-fnsが有名っぽい。
dayjsはオブジェクトベース、date-fnsは関数ベースらしい。
どちらも良さそうなので一旦参考コードにあるdayjsを使う。
ちなみにjs(ts)のsortがちょっと変わっていて、booleanじゃなくて数値を返す必要があるらしい。
arr.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
API通信はfetchを使う。
クエリパラメータはURLSearchParamsを使って付与するとエンコードもやってくれるっぽい。
こんな感じかな
const query = new URLSearchParams({
page: "1",
per_page: "100",
query: `qiita user:$userId`,
});
const response = await fetch(`https://qiita.com/api/v2/items?${query}`);
Qiita API
以下を参考にする
ユーザーの記事一覧取得はこれっぽい
GET /api/v2/users/${userId}/items
simorgh3196VSCode x Chrome でデバッグができる
simorgh3196ちょっと表示内容いじったせいでUI崩れてるけど一旦取得したものの表示までできた
simorgh31965,6年前からほぼ記事書いてなくて草
simorgh3196ふと気になったけど、APIがうまく動かなくてサイトがうまく更新できなかった時のハンドリングってどうするんだろう
slackとかに通知飛ばしたり、失敗時はすぐにリトライでジェネレートし直したり？
simorgh3196Zennからもとってこようかと思ったけどZennに記事出してなかった
一旦UI調整
simorgh3196作ってて疑問に思った
-
export defaultよくわかってない - コンポーネント？を
functionで書くのとconstで書くのどっちが良いのか、型指定は要らないのか
simorgh3196CSS整えた
