react-notionというライブラリの紹介

By: yoppe
Posted: 2020-07-25

概要

vercelが公開していたnotion-blogを参考にブログを開設したが、結局react-notionというライブラリを利用することにした。

 

react-notionは、こういうことも出来るよとアイデアを提示しているだけであり、鵜呑みにするのは良くない。仕組みを理解し、コードを書いたり整える段階で改めて調べているとreact-notionの方が使いやすかった。

 

notion-blogとは

vercelが公開してちょっと話題になっていたnotion-blogがあった。

notionの特定の範囲のページを取得するAPIをサーバー側で実行することで、Next.jsのSSR, SSGをするためのデータとして利用するもの。面白いアイデアで、notionに書いたものがそのまま自分のブログで公開できるというワクワク感が気に入った。(自分のこのブログもコードを拝借して作った。)

 

これを実現するために、notionのAPIをリバースエンジニアリングし、コンテンツ取得のレスポンスを独自にjson色つけ係をしたような感じ。ただし公開してくれたコードは急いで書かれたコードのようであんまり綺麗じゃないようだし、型があんまりないtsで書かれている。

 

なのでまじめに使っていきたいならばTypeScriptに書き換えていこうとか、未実装のコンポーネントを実装しようと思ったところだった。(notionのAPIを勝手に使っている状態ではあるが)

 

react-notionについて

世の中には同じようなことを考えるエンジニアがいるものである。

 

同じくvercelのnotion-blogからインスパイアされて、notionからのレスポンスを描画するライブラリを作る組織があった。

 

TypeScriptで型がある、大抵のコンポーネントは実装済みという状態。OSSなので場合によって自分でPRだせばいい。(自分もちょっとだけコントリビュートした)

 

機能を切り出してOSS化されたコードはある程度協力して作っていくので、すでに誰かが欲しい機能を作ってくれていたりする。既存のコードや事例を探して車輪の再発明を防ごう。そしてそれを利用するならプロジェクトに貢献する意識を持っておこうと思った。