「ato de yomu」(あとで読む) というリーディングリストのWebアプリを作りました。

リーディングリストというのが一般的な用語かわかりませんが、Safari についてるリーディングリスト機能のイメージです。ato de yomu には次の機能があります。

• あとで読みたいウェブの記事を保存しておける
• 読んだ記事の履歴を残せる
• 他人のリストを閲覧・購読できる

この記事は CAMPHOR- Advent Calendar 2022 の18日目の記事です。

2017年に「買ってよかったもの」というウェブサイトをリリースし運営していますが、リリースから5年経った今 PaaS 移行のため技術スタックも一新しフルスクラッチで書き直したのでその話をします。

ソースも公開しています。

この記事で言いたいことは2つあって、

• Azure Static Web Apps の開発体験が良い
• TypeScript + React + GraphQL (Apollo Server, GraphQL Code Generator, React Query) の組み合わせが良い

です。

これらの技術要素を使って https://github.com/morishin/azure-static-web-apps-template というサンプルアプリを作成したので、その紹介をします。

上記の要素に加え、ビルドツールとして Vite、ルーティングに React Router、UI フレームワークに Chakra UI を利用しています。

React Hooks は最初は何が嬉しくてこんな書き方をしないといけないのか訳がわからなかったけど、しばらく使ってみた実感として大きなメリットは2つで

• クラスを使わなくて良くなる
• コンポーネントのステートやライフサイクルに結合していた処理を Hooks 関数の形で切り出して、複数のコンポーネントで使い回せるようになる

と理解した。