Remix がすごい & `remix-auth-twitter` を publish した

 

目次

Remix ついて

Remixは、あえて自分の言葉で表現するならば、超速のパフォーマンスが出るようチューニングされたモダンなWebサイト/アプリが、難しいことをしなくても出来上がってしまうフレームワークです。

まずは公式サイトのトップページをスクロールしていって、売りを一通り見てみることをお勧めします。

remix.run

Remixの特にすごいところ

  • Nested Routes*1
    • メニュー、リスト→詳細ビュー、モーダルなど、複数のオプションから一つにドリルダウンするようなUIパターンは多い。それを入れ子のディレクトリ構造とURL*2にマッピングできるようにしたところが便利 & フレームワークにとって最適化のチャンスになっている
      • e.g. 例えば /users/na2hiro というURLにアクセスするとRemixは次の２つのルートを同時に描画し、結果を繋げて返す：
        • /routes/users.tsx はユーザ一一覧を左に、穴（Outletと呼ばれる）を右に描画。
        • /routes/users/$userId.tsx はuserId="na2hiro"であるようなユーザの詳細を描画。
      • c.f. Next.js では、 /users/[userId].tsx がユーザ一覧も詳細も全て表示しないといけない。 <Layout>のようなコンポーネントが必要になる。
  • loader (readするコード、GET APIとしても使われる) と action (writeするコード、POST APIとしても使われる)を書くと、いろいろなものが手に入る。例えば：
    • 速いSSR
    • Colocation: コンポーネントコード、表示に必要なデータ取得コード、データ送信先のAPIコードが一つのファイルに同居。
      • APIはどこにあるか、APIのURLはどうするかなど考えなくても良くなる。e.g. ユーザ詳細の変更コードは/users/$userId.tsx のactionに作れば良い。 
      • propsを子孫コンポーネントにpropagateする、とか考えなくてもいい場合が増える。
    • Revalidation: actionが行われるとデータが変更されたものとみなし、念の為に自動的にページ全体のloaderが呼び出されて再描画される。
      • 変更を呼び出したところ以外のコンポーネントにあるデータがstaleになる等と考えなくてもよい。
      • i.e. useSWR, React Query などのmutate機能などが吸収されている
      • i.e. reduxのようにデータをフロントエンドの一箇所で管理する必要も場合によっては薄れる。なぜならRemixがサーバからそれぞれのrouteに適宜送ってくれるから。
    • Race condition resolution: 
      • 連続するGETやPOSTが起こると先行するリクエストがキャンセルされ後者のものが採用される (<form>と同じ挙動)
      • race conditionの例：autocompleteのように１字打ち込まれるたびに検索をし直す場合、前に送ったリクエストの処理に時間がかかって最後に帰ってくると結果が古いものとなりおかしくなる。
    • JavaScriptが読み込まれる前にも（場合によっては完全に）動作する
      • GET/POST等のリクエストは<form>要素をラップした<Form>で宣言的に行うことが推奨されており、Remixは内部でfetchによるリクエストを行う。すごいのは、Formはformを描画するので、JSが無くてもなんとSPA上のfetchがformにフォールバックすることとなり、form submitがフルページ再読み込みとなり、動く。
      • 注意：ユーザはlocalhostに対してではなく、しばしば電車内のスマホから遠くのサーバにリクエストしている。
    • Caching: ブラウザのHTTP CacheをHTMLとAPIに利用できる。
      • c.f. useSWR, React Queryなど、ページを更新すると消えてしまうインメモリキャッシュより便利。
    • Vendor agnosticity: Node.js上で動くだけでなく、使っている依存によっては、Cloudflare Workersなどのedgeにもデプロイできるようになっていて、さらに爆速になる

すごいところを挙げ出したらキリがありません。

Remix Auth について

github.com

Remixが提供しているsessionを利用した、認証のためのコミュニティ製ライブラリで、認証方式や認証サービスをstrategyとして抽象化してあり、プラグイン形式でstrategyを誰でも実装できるようになっています。さらには、strategyライブラリのテンプレートが用意されており、作ったものを共有することが推奨されています。

Remix Auth Twitter について

今回このテンプレートを利用し、Twitter OAuth 1.0aに対応したstrategyを実装してライブラリとしてpublishしました。

github.com

これを作ることにしたのは、太古の昔にPHP+vanilla JSで書かれた将棋ったー*3をRemix+Reactで書き直す段階で、twitter認証のライブラリがないことに気付き、Remix Authのdiscussionでスレッドができて一ヶ月経とうとしていたのを見つけたためです。

金曜の夜にコーディングを始め、土曜の夜中にテストを大方書き終え*4publishしました

主な技術的困難は：

  • Node.jsの標準ライブラリに依存しないという制約
    • RemixはCloudflare Workersのようなedgeに対してもデプロイできるようになっており、そのようなアプリで使われることを考えると依存させたくない
  • Twitterの公式ドキュメントが間違いだらけ
    • 結局将棋ったーで使われている手元のPHPライブラリの発行するHTTPリクエストを見て正解を知った（ドキュメントではPOSTのはずがGETじゃないと動かない等）

Remix Auth Twitter Example について

`crypto-js` ライブラリ使ってて本当に動くのかという質問があったので、ライブラリ使用方法の例示のためにも、twitterログイン・ログアウトするだけのRemixアプリを作成し、Cloudflare Workersにデプロイしました。無事動いています🎉

https://remix-auth-twitter-example.na2hiro.workers.dev/

おわりに

Remix おすすめ！

www.youtube.com

*1:React Routerとも通じる考え。RemixはReact Routerを作ったメンバーが作っている。

React Router v6 | Remix

*2:ディレクトリの入れ子構造をURLに反映しないようにもできる

*3:na2hiro on Twitter: "将棋ったーをReact + Remixで書き直しているが、2011年の段階でReactなし(ほぼvanilla JS、少しjQuery)、webフレームワークなし(vanilla PHP)、自動テストなし(手)で100種類の変則将棋が動く将棋ったー書いた奴化け物かという気持ちになっている。"

*4:"大方書き終え"：na2hiro on Twitter: "テストはここで途切れている