ぼちぼちフロントエンドなるもんもやってみたいなーと思い、Remixに入門してみました。

フロントエンドの経験は、仕事でちょっとVue2を触ったことがあるのと、3年ほど前にReactのチュートリアルをやったことがあるくらい。

特に拘りはなく、同僚がおすすめしてたRemixに手を出してみることにしました。

Remix Tutorialは連絡先管理システムを改善していく形式で、雰囲気を掴むにはとてもいい感じでした。

所要時間は30分と想定されてますが、しっかり理解しながら進めるとなると1、2時間はかかるんじゃないかな……？と思いました。

チュートリアルを終えて2日もあればRのヘルプ検索システムなんか作れちゃうあたり、よくできていると思いますし、良い時代ですね。

loaderやらactionやら知らない概念が出てきましたが、データ管理の流れが分かりやすくてよかった感じします。

• loaderはURLに応じたデータ読み込みを行う
  • クエリパラメータを更新した時とかも使える
• actionはルーティング（ページ移動）やデータの更新を行う
  • データを作る
    • 空の連絡先の作成
  • ユーザーがフォームから送信した内容を反映し、ページを移動する
    • 連絡先をの編集画面で結果を保存し、閲覧画面に移動する
    • 連絡先の閲覧画面で連絡先を削除し、トップ画面に移動する

RemixはSSR（サーバーサイドレンダリング）を基本としているのですが、SPAにも対応しています。
せっかくなので、SPA化もしてみたのですが、loaderやactionをReactのuseStateで置き換えていくことになり、依存関係の記述に結構な苦労をしました。

ちなみにSPA化はチュートリアルの内容そのものでやったわけではないです。
先ほども軽く触れた、Rのヘルプ検索システムをSSRで実装してからSPA化しました。

https://helpr.atusy.net

Rをブラウザ上で動かすWebRを使ってWebアプリを作ってみたいというのがフロントエンドに手を出してみた理由なのでした。
実は同じ目的のWebアプリをShinyで作ったこともあるのですが、デプロイ先がhttps://shinyapps.ioに縛られる点や、あいまい検索機能を自分でフルスクラッチする必要があったことに辛さを感じていました。
SPA + WebRならnodeやRを動かすサーバーが不要なので、Cloudflare Pagesなどにもデプロイできていいですね。
あいまい検索もfzf-for-jsが使えます。

Rのヘルプ検索システムについては詳しくはまた別の記事で語ろうと思います。

ENJOY!