tech.luma.devを支える技術
Notion
Notion blogで探すと以下のリポジトリが見つかる。
こちらはAPIをリバエンして作られているものになるので、公式APIという形ではない。
今回は公式APIを利用して作成した。
公式クライアントも便利。まだ改善点はあるが、TSでの体験ではかなり上位にくると思われる。
Next.js
Gatsby.jsでも同じことはできるはず。すこしだけGatsbyを触ってみたが、あちらはプラグインシステムでやりたいことをやるという思想も割と強く、あまり自分に合わなさそうだと思ったのでNext.jsにした。
getStaticPaths と getStaticProps を使ってSSGをする。 getStaticProps の revalidate を指定することで ISR をする。revaliateには10秒程度を指定した。なので、Notionで編集してもだいたいそのくらいで反映される。個人的には、キャッシュ戦略という点での重要性もそうだが、Notion API の Rate Limit を超えないためという点もあり、そのあたりをみながらこの時間に決めてみた。
ということで Notion API 自体は 1秒に平均3リクエストということなので、10秒程度間隔のAPI呼び出しは30個ほどさばけるということになる。
レートリミットはまだ実験段階のようなので、料金プランが色々できたりしそう。様子を見ながら間隔は調整すると良さそう。1分ぐらいまでなら十分な体験が得られそうだなぁと思ったり。
Vercel
商用利用しない前提での選択肢は Vercel、Netlify、GitHub Pages などになるが、今回は Function を使いたいという気持ちがあって、Pagesは無しに。 Vercel + Function を実はそんなに本格的には使ったことない（中身はまんまAWS Lambdaで、そっちはたくさん使ってるんですけど）ので、せっかくなので Vercel にしてみた。
まだ実装していないが、記事検索を Notion API で Function 経由でやるというのを考えている。Notion APIはかなりの自由度を提供している(公式Webクライアントでできることと等価)ので、日付フィルター + キーワード検索などにして提供するなどを考えている。
1秒に3回制限を超えそうになったら…どうしたらいいんでしょうね。無料範囲で検索をそれなりに扱えるのは Googleカスタム検索とはてなブログとかだろうか。
そんなに見られることはないので杞憂だと思いますけど。
VercelのNext.js Deployが地味に pnpm 対応をしていたので感動した。いいことだ。
Tailwind CSS
上記にも書いた通り、予想以上に人気が高い。Tailwind 推しの人はそれなりに見かけて、何度か少しだけ使ったことはあるがいまいち利点がわかっていなかった。
今回、ちょっとした規模、といっても2日クオリティの規模だけど、それなりに使ってみて、かなり良いというか、他のライブラリを使うにしても、Tailwind は無いとつらいかもなと思えた。
class="flex p-2" とか指定する程度のことにわざわざクラス名(styled-componentであれば変数名)を考えたくない。私はよく Wrapper とか WrapperOuter WrapperInner とかするが、地獄。
Grommet を試したりしたこともあって、flexやpaddingであれば同じようなことはできるが、やはりTailwindはCSSの網羅をしているのでその点も良い。importする必要がないのも良いね。
なんら新しい枠組みを提供するというわけではないので、私としてはTailwindは、「ただ開発スピードを上げるためのもの」という考え方に近く、ただ楽をするためだけに必要とするもののようには思えるが、それだけでも十分にほしい。
classのほうがinline styleよりも重複が減るというのをメリットと考えるのはあるかもしれないが、些細だろう。
もう一つメリットとして、スタイルの移し替えや分割が非常に楽というのがあった。たとえば簡単にスタイルを試してみたいだとか、中に <span> を作って分離したい、というようなことがすぐにできる。Tailwindがなければ、spanを何層かにするというのを、命名を避けたい・CSSファイルに移動するのがめんどくさいという気持ちから避けてしまうのは理解できる。
ブックマークはどうやって作ってる？
これをサーバー側で使って、staticPropsで渡しています。
追記
この記事をサポートするために「メンション」（ページのみ）と「引用」のサポートをした。