Skip to article frontmatterSkip to article content
Site not loading correctly?

This may be due to an incorrect BASE_URL configuration. See the MyST Documentation for reference.

Web Application Frameworks

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

Ruby on Rails

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

コンセプト

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

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

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 - Build Better Websites

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

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の評判

SPA モード / React Router

ソフトウェア工学
仮想化技術
ソフトウェア工学
Web Application Architecture