Web Application Frameworks

Web Application Frameworks#

Webアプリ開発に使われるフレームワークについて

Ruby on Rails#

RubyのWebフレームワーク。2000年代は特に人気だった。 MVCアーキテクチャで、PHPのLaravelやPythonのDjangoなど他言語のフレームワークへ強い影響を与えた

コンセプト

  • Convention over Configuration（設定より規約）：設定ファイルのデフォルト値が重視され、規約（設定のデフォルト値）に従って作るとコード量を大きく節約できる設計

  • RESTful：URIはRESTに従って設定される

Next.js#

2024年現在圧倒的シェアを持つJavascriptのフレームワーク（State of JavaScript 2024: Meta-Frameworks）。

Next.jsのhosting#

  1. Vercel: https://vercel.com/

  2. AWSやCloudflareもFaaSにNextjsを動かすadapterを提供している

Remix (React Router)#

RemixはJavascriptのWebフレームワークで、PESPA（Progressively Enhanced SPA) と呼ばれるタイプのバックエンドとフロントエンドの両方を扱うアーキテクチャになっている。

Remixは2024年にReact Routerへ統合された

React Router v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade to React Router v7. https://remix.run/blog/react-router-v7

Tutorial / 解説
Remixの考え方
loader

レンダリング時にデータを取得する（GETする）ための関数。

サーバ側で実行される ので、SPAでありがちな「クライアント側からデータ取得のためAPIを叩くときにAPI-keyをどう秘匿するか」みたいな問題が解決される。

ページごとに定義して使う。例えば、一覧ページ（例えばposts.tsx）では配列Post[]を返すloader()を定義し、詳細ページ（posts.$postId.tsx)では1つの要素（Post）を返すloader()を定義し、自分のcomponentの中で使う

// loaderの例
import { json } from "@remix-run/node";

export const loader = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
  const posts = await response.json();
  return json({ posts });
};

export default function App() {
  const { posts } = useLoaderData<typeof loader>()
action

データを更新する（POST, DELETE, PUT, PATCH）ときに使う関数

Outlet

親ルート内において、子ルートがレンダリングされる場所を示すために使われるコンポーネント

import { Outlet } from "@remix-run/react"

export default function App() {
  return <Outlet />
}

Remixの評判

Hosting

SPA モード / React Router

Contents