（うわき）Remix触ってみた

📝きょうの学習

Remixにちょっとうわきしました。CodeZineのサンプルが分かりやすかったです。ちょっと触っただけですがすごくシンプルなフレームワークで分かりやすい気がしました。みんながイイ！イイ！って言っている理由が分かった気がします。

参考ページ：CodeZine：React向けのフレームワーク「Remix」で初めてのWebサイトをつくる

ざっくりおさらいしておきます。DogAPIをたたいてイッヌの写真を表示するページを作りました。今回の実装だとSSR（サーバーサイドレンダリング）になると思うので、イメージだとブラウザからリクエスト→サーバーサイドでDogAPIをコールしてjson取得→jsonの内容を埋め込みつつHTMLをレンダリングしてブラウザにレスポンスってことになるんだと思います。あってる？

✨プロジェクト作成

npx create-remix@latest
npm run dev

動作確認OK。

📁ディレクトリ構成を確認

app
- routes（この中にxxx.tsxを作ると勝手にルーティングを作ってくれるらしい）
root.tsx（これがNext.jsいうところのLayout.tsxっぽい）
entry.client.tsx（クライアントサイドレンダリングのエントリーポイントだそうな。）
entry.server.tsx（サーバーサイドの処理のエントリーポイント？user-agentをisBotメソッドに渡して、botかブラウザのリクエストかを判断して処理してるように見える。）
public（これは他と一緒。静的ファイルの置き場所）

👀おためし実装する

自分で作ったのはこれだけ。

routes/dog.tsx
style/dog.css（フォルダ／ファイルは自分で新規作成。スタイルシート。）
types/DogPhotApi.ts（フォルダ／ファイルは自分で新規作成。TypeScript用の型定義）
utils/dogApi.server.tsx（フォルダ／ファイルは自分で新規作成。サーバーサイドでAPIを呼ぶ。CodeZineでフォルダ名がutilsになっていたので一旦合わせたけど、「services」の方が一般的なstringUtils.tsxなどと混同しなくて良いかも。）