こんにちは。AI/BI部の塚本です。

 

本日から、2024年のAI/BI部のAdvent Calendarとして12/25のクリスマスまで1日1本、AI/BI部のメンバーで記事を投稿していこうと思っています。

今回は初めての試みということで、各々が好きな記事を書いていく形式で進めていきます。

 

どうぞ、約1か月間よろしくお願いします！

 

Dive to Remix

Webアプリ開発にはあまり関わらない私ですが、せっかくのアウトプットの機会を活かして、Advent CalendarとともにWebアプリ開発について学びを深めていこうと思います。

 

今回の記事では、Webアプリケーション開発向けの注目フレームワークであるRemixを紹介します！「Remixって何？」という疑問をお持ちの方に向けて、コードにはまだ触れず、Remixの特徴や魅力を初心者目線でお伝えします。

 

次回以降は実際にソースコードを用いて、PrismaとRemixでのデータ操作や、Go言語のGinとの連携についても紹介していく予定です。

これから一緒にRemixの世界に飛び込んでいきましょう！

 

参考:Remix公式

Remixでフルスタック開発

Remixは、公式の言葉を借りると「フルスタックのウェブフレームワーク」です。

フルスタックの言葉通り、サーバーサイドの処理（データの取得やデータベースの書き込み）からフロントのUI部分の実装まで、このRemixというフレームワークで開発することができます。

 

この記事では、Remixを利用する上で頻繁に利用することになる以下の2つの特徴を紹介していきます。

• loaderとaction: より効率的なデータの取得や操作を実現
• Nested Route: 直感的なルーティングを可能にする機能

loaderとaction

loaderとactionは、Webアプリ開発初心者の私たちでもフルスタック開発を直感的に体験できるRemixの機能になっています。

loaderとactionを利用したRemixの仕組みを図示すると、下の画像のようになります。UI部分はloaderとactionの処理を通してデータの取得や操作をすることができます。

loader

loaderの話をする前に軽くSSRについて紹介します。

 

SSRとはServer Side Renderingの略で、サーバーサイドでコンテンツを生成し、クライアントに送信する仕組みのことを言います。

SSRはサーバーサイドでコンテンツを生成するという特徴から、以下のメリットが得られます。

• 高速な描画: クライアント側に送信される前にコンテンツが生成されているため、サーバー側のキャッシュなども多く機能し、ローディング後の描画が速い。
• SEO対策に有利: クライアント側に送信される前にコンテンツが生成されているため、SEOなどに有利。

 

このサーバーサイドでのコンテンツ（UI）生成の際に表示するデータをデータベースから取得する必要がある場合などにloaderという機能が役に立ちます。

loaderは、サーバーサイドでデータ取得処理を実施するので、クライアント側でUIを表示する際には、すでにデータが読み込まれた状態にすることができます。

 

action

actionは、その名の通り、UIで発生したアクション（例: ボタンクリックやフォーム送信）でデータを操作する際に使用されるRemixの機能です。

最も分かりやすい例は、Formのsubmitです。Remixでは、Formでのsubmitが発生されると、サーバーサイドで定義されたaction関数が自動で呼び出されます。

 

また、action関数はそのページに紐づくため、データの処理ロジックが分散せず、記述したソースコードが簡潔で分かりやすいものになります。

Nested Route

次に紹介するNested Routeは、画面遷移をより効率的にしてくれる機能です。

その名の通り、ルート（ページ）を入れ子構造にすることで、ページ全体の一部のみを更新することができるようにします。

 

イメージとしては、下画像のようになります。下画像では、root/first/second/thirdという入れ子構造のURLを持つページの例を表しています。

 

Nested Routeを活用することで、画像のthirdの部分のみを更新したい場合、firstやsecondの部分はそのままにして、thirdのUIのみを変更することができるようになるため、より効率的な描画が可能になります。

また、コンテンツの表示内容に応じてURLが変わるため、ユーザー同士がURLの共有で同じコンテンツを表示できるようになるというメリットもあります。

 

Remixの今後

Remixは今後のアップデートでReact Routerと統合されることが発表されています。

しかし、Remixを今の内から触れることで、新しいReact Routerに向けた助走をつけることができます。

興味がある方は、React Routerの現状についても調べてみると面白いかもしれません。

 

参考: React Router 公式

おわりに

今回は、Remixの簡単な紹介をさせていただきました。

Remixとはざっくりどんなものなのかを分かっていただけたならうれしいです。

 

次回は、よりRemixの理解を深めるため、PrismaというORMフレームワークを利用してactionとloaderの動きをソースコードを通して確認していきたいと思います！