Dashboard
You're logged in as {user.email}
); } ``` ### ログアウト ダッシュボード画面でログアウトボタンを押すと、`/auth/logout` に POST リクエストが送信されます。`app/routes/auth/logout.ts` では `action` 関数内で `auth.logout()` 関数を呼び出してログアウト状態にします。 ```tsx:app/routes/auth/logout.ts import { type ActionArgs, redirect } from "@remix-run/server-runtime"; export async function action({ context: { auth } }: ActionArgs) { auth.logout(); return redirect("/"); } ``` ### ログイン画面 ログイン画面の実装は登録画面と大きく変わりません。ここでは、`auth.login` 関数の代わりに `auth.attempt` 関数を使っています。`auth.attempt` 関数は、ユーザーのクレデンシャル情報（=メールアドレスとパスワード）を引数に取り、ログインに成功した場合は `true` を返します。ログインに失敗した場合は `false` を返します。 ```tsx:app/routes/auth/login.tsx import { Form, Link, useActionData } from "@remix-run/react"; import { json, redirect, type ActionArgs } from "@remix-run/cloudflare"; import { User } from "~/models/User"; export async function action({ request, context: { auth } }: ActionArgs) { if (await auth.check(User)) { return redirect("/dashboard"); } const formData = new URLSearchParams(await request.text()); const email = formData.get("email") as string; const password = formData.get("password") as string; if (await auth.attempt(User, { email, password })) { return redirect("/dashboard"); } return json({ error: "Invalid credentials" }, { status: 400 }); } ``` ## アルバムアプリの作成 ここまで Superflare プロジェクトを作成した時点での基本的な実装を確認しました。ここからは実際に簡単なアルバムアプリを作成していきましょう。このアプリケーションでは、ユーザーは自由に画像をアップロードして、アルバムを作成できます。また、アルバムにはタイトルと説明をつけることができます。 完成したコードは以下のレポジトリを参照してください。 https://github.com/azukiazusa1/superflare-album-app テーブルの設計は以下のように提案していただきました。この設計を元に、モデルを作成していきます。 ``` ## ユーザー(users)テーブル ID (主キー) ユーザー名 パスワード メールアドレス ## アルバム(albums)テーブル ID (主キー) タイトル 説明 ユーザーID (外部キー) ## 画像(images)テーブル ID (主キー) キー （R1 Storage のキー） アルバムID (外部キー) ユーザーID (外部キー) アップロード日時 ``` ### マイグレーションの作成 アルバムモデルから作成しましょう。まずはモデルに対応するテーブルを作成する必要があります。テーブルを作成するには、マイグレーションファイルを作成して、マイグレーションを実行します。 以下のコマンドでマイグレーションを作成できます。`albums` は作成するテーブル名です。 ```bash npx superflare generate migration albums ``` コマンドの実行に成功すると `db/migrations` ディレクトリにマイグレーションファイルが作成されます。 ```ts:db/migrations/0001_albums.ts import { Schema } from 'superflare'; export default function () { // return ... } ``` マイグレーションフィルでは `Schema` インスタンスを返す関数を default export する必要があります。`Schema` の `create()` メソッドを使ってテーブルを作成します。 ```ts:db/migrations/0001_albums.ts import { Schema } from "superflare"; export default function () { return Schema.create("albums", (table) => { table.increments("id"); table.string("title"); table.string("description"); table.integer("userId"); table.timestamps(); }); } ``` `id` はテーブルの主キーになります。Superflare ではテーブルの主キーは必ず `id` という名前であることが求められます。 `userId` は `users` テーブルの `id` と紐付けるための外部キーです。`users` テーブルと `albums` テーブルは、1 対多の関係となります。 `timestamps()` メソッドを呼び出すと、`createdat` と `updatedAt` のカラムが追加されます。これらのカラムは、レコードの作成日時と更新日時を自動で管理するためのものです。 同じように、画像モデルに対応するマイグレーションを作成します。 ```bash npx superflare generate migration images ``` ```ts:db/migrations/0002_images.ts import { Schema } from "superflare"; export default function () { return Schema.create("images", (table) => { table.increments("id"); table.string("key"); table.integer("albumId"); table.integer("userId"); table.timestamps(); }); } ``` マイグレーションファイルを作成できたので、マイグレーションを実行しましょう。`npx superflare migrate` コマンドを実行すると、マイグレーションが実行されます。`--create` オプションを渡すと、自動でモデルを作成してくれます。 ```bash npx superflare migrate --create ``` コマンドが成功すると、`migrations` ディレクトリに実行された SQL が出力されます。 ```sql:migrations/0001_albums.sql -- Migration number: 0001 2023-04-01T06:45:58.421Z -- Autogenerated by Superflare. Do not edit this file directly. CREATE TABLE albums ( id INTEGER PRIMARY KEY, title TEXT NOT NULL, description TEXT NOT NULL, userId INTEGER NOT NULL, createdAt DATETIME NOT NULL, updatedAt DATETIME NOT NULL ); ``` ```sql:migrations/0002_images.sql -- Migration number: 0002 2023-04-01T06:45:58.421Z -- Autogenerated by Superflare. Do not edit this file directly. CREATE TABLE images ( id INTEGER PRIMARY KEY, key TEXT NOT NULL, albumId INTEGER NOT NULL, userId INTEGER NOT NULL, createdAt DATETIME NOT NULL, updatedAt DATETIME NOT NULL ); ``` ### モデルの作成 `--create` オプションを渡してマイグレーションを実行した場合、`app/models` ディレクトリに `Album.ts` と `Image.ts` が作成されます。モデル同士のリレーションを定義するために、それぞれのファイルを編集する必要があります。 それぞれのテーブルのリレーションを確認しておきましょう。ユーザーは複数のアルバムを所有できます。アルバムは複数の画像を含むことができ、画像は特定のアルバムに所属し、また、アップロードしたユーザーにも関連しています。  1 人のユーザーが複数のアルバムを所有できるというリレーションは `one-to-many` リレーションと呼ばれています。このリレーションを表現するために、ユーザーモデルに `hasMany()` メソッドを使います。 ```diff:app/models/User.ts + import { Album } from "./Album"; + import { Image } from "./Image"; export class User extends Model { + albums!: Album[] | PromiseDashboard
You're logged in as {user.email}
+ ); } ```  フォームを作成したら、フォームのサブミットを処理するための `action` 関数を作成します。`form` の `action` 属性を指定しない場合、フォームは同じページに POST リクエストとして送信されるので、`app/routes/dashboard.tsx` ファイルに `action` 関数を定義します。 フォームデータは `await request.formData()` メソッドで取得できます。取得したフォームフォームデータを引数とし、`AlbumModel` の `create()` メソッドでアルバムを作成します。 現在ログインしているユーザーの ID は `auth.id()` メソッドで取得できます。 ?> ここでは簡単のため、バリデーションやエラー処理を無視しています。 ```ts:app/routes/dashboard.tsx export async function action({ request, context: { auth, session } }: LoaderArgs) { // ログインしているか確認 if (!(await auth.check(User))) { return redirect("/auth/login"); } // フォームデータを取得 const body = await request.formData(); const title = body.get("title") as string; const description = body.get("description") as string; // ログインしているユーザーのIDを取得 const userId = await auth.id(); // アルバムを作成 await Album.create({ title, description, userId, }); // フラッシュメッセージをセット session.flash("success", "Album created successfully"); // ダッシュボードにリダイレクト return redirect("/dashboard"); } ``` アルバムを作成した後は `session` オブジェクトを使ってフラッシュメッセージをセットしています。 フラッシュメッセージは一度だけ表示されるメッセージです。フラッシュメッセージはセッションに保存されるので、リダイレクトされた先のページで表示されます。 `session` は `auth` オブジェクトと同じく `loader`、`action` 関数の引数から受け取ることで利用できます。 アルバムを作成した後は、ダッシュボードにリダイレクトします。 フラッシュメッセージを表示するためには、`session.getFlash()` メソッドでセッションから読み取る必要があります。フラッシュメッセージが存在する場合にはその要素が、存在しない場合には `undefined` が返ります。 フラッシュメッセージが存在すれば、すべてのページに共通で表示したいため `app/routes/root.tsx` ファイル内の `loader` 関数内でフラッシュメッセージを読み取ります。コンポーネント側では `undefined` 以外の場合にのみフラッシュメッセージを表示するように制御します。 ```tsx:app/root.tsx import { json, LoaderArgs, MetaFunction } from "@remix-run/cloudflare"; import { useLoaderData, } from "@remix-run/react"; export async function loader({ context: { session } }: LoaderArgs) { const flash = session.getFlash("success"); return json({ flash, }); } export default function App() { const { flash } = useLoaderData{flash}
}
Dashboard
You're logged in as {user.email}
+Albums
+ {albums.length ? ( +-
+ {albums.map((album) => (
+
- + {album.title} + + ))} +
You don't have any albums yet
+ )} ); } ```  もう少し一覧から情報を取得できるように、アルバムが持っている写真の数を表示するようにしましょう。アルバムと写真のリレーションは `one-to-many` です。クエリを発行する際にリレーションを先にロードするため `with` メソッドを使います。 これは eager load と呼ばれるもので、N + 1 問題を回避するために ORM でよく使われる手法です。 ```diff:app/routes/dashboard.tsx const albums = await Album.where("userId", await auth.id()) .orderBy("createdAt", "desc") + .with("images"); ``` さらに、`Album` モデルの仮想プロパティとして `imageCount` を定義します。あるモデルに対してゲッターメソッドとして定義することで、データベースに保存されていないフィールドも追加できます。 仮想プロパティもシリアライズされるように、`toJSON()` メソッドの返り値のプロパティに追加します。 ```ts:app/models/Album.ts export class Album extends Model { images!: Image[] | Promise-
{albums.map((album) => (
- {album.title} + - {album.imageCount} images ))}
{album.title}
{album.description}
); } ``` ダッシュボード画面と同様に、ログイン状態をチェックしてログインしていない場合はログインページにリダイレクトします。 動的なパラメーターは `loader` 関数の引数 `params` から受け取ります。ルーティングから受け取った `albumId` とログインしているユーザーの `userId` をもとにアルバムを取得します。もしアルバムが存在しない場合は `404` として `Response` オブジェクトを throw します。 コンポーネントでは `useLoaderData` フックを使って `loader` 関数から返されたアルバムを取得して表示します。  `loader` 関数内で `Response` オブジェクトを throw した場合には [CatchBoundary](https://remix.run/docs/en/main/route/catch-boundary) でキャッチしてエラー画面を描画します。throw された `Response` オブジェクトは `useCatch` フックで取得できます。 さらに、`Catchboundary` でもキャッチされない想定外の例外は、`ErrorBoundary` でキャッチされます。 ```tsx:app/routes/albums/[id].tsx import { useCatch, useParams } from "@remix-run/react"; export function CatchBoundary() { const caught = useCatch(); const params = useParams(); if (caught.status === 404) { return ( <>404
Album {params.id} is not found.
); } throw new Error("Something went wrong"); } export function ErrorBoundary() { return ( <>Something went wrong
); } ```  ### 画像をアップロードする アルバムの詳細ページに画像をアップロードするフォームを追加して、アルバムに画像を追加できるようにしましょう。ファイルをアップロードするには `multipart/form-data` でフォームを送信する必要があります。 ```diff:app/routes/albums/[id].tsx export default function AlbumPage() { const { album } = useLoaderData{album.title}
{album.description}
+ ); } ``` 同ファイルの `action` 関数内でファイルアップロードを処理します。Superflare より提供されている `parseMultipartFormData` 関数を使うことで、ファイルをメモリに展開せず、R2 にファイルを直接ストリーミングできます。 R2 ストレージの操作は `storage` オブジェクトを使用します。`storage().putRandom()` メソッドはランダムな名前を生成してファイルをアップロードします。`extension` オプションを指定することで、ファイルの拡張子を指定できます。 ```ts:app/routes/albums/[id].tsx import { storage, parseMultipartFormData } from "superflare"; export async function action({ request }: LoaderArgs) { if (!(await auth.check(User))) { return redirect("/auth/login"); } const formData = await parseMultipartFormData( request, async ({ name, filename, stream }) => { // ファイル以外のフィールドは無視 if (name !== "file") { return undefined; } const r2Object = await storage().putRandom(stream, { extension: filename?.split(".").pop(), }); return r2Object.key; } ); } ``` ファイルのアップロードに成功したら、ストレージのキーを取得して `Image` モデルに保存します。 ```ts:app/routes/albums/[id].tsx import { storage, parseMultipartFormData } from "superflare"; export async function action({ request, params, context: { auth, session }, }: LoaderArgs) { const formData = // ... const albumId = Number(params.id); const userId = await auth.id(); // データベースに画像のパスを保存 await Image.create({ key: formData.get("file") as string, albumId, userId, }); session.flash("success", "Photo uploaded successfully"); return redirect(`/albums/${albumId}`); } ``` ### 画像一覧を表示する アルバムに紐づく画像を表示できるようにしましょう。はじめに、ストレージのキーを受け取り画像データを返すエンドポイントを作成します。 `app/routes/images/[key].ts` を作成します。 ```ts:app/routes/images/[key].ts import { type LoaderArgs, redirect, json } from "@remix-run/cloudflare"; import { User } from "~/models/User"; import { storage } from "superflare"; const getContentTypes = (extension: string) => { switch (extension) { case "png": return "image/png"; case "jpg": case "jpeg": return "image/jpeg"; case "gif": return "image/gif"; case "svg": return "image/svg+xml"; default: return "application/octet-stream"; } }; export async function loader({ context: { auth }, params }: LoaderArgs) { if (!(await auth.check(User))) { throw new Response("Unauthorized", { status: 401 }); } // パスパラメーターからストレージのキーを取得 const storageKey = params.key as string; // ストレージから画像を取得 const obj = await storage().get(storageKey); // 存在しないキーの場合は 404 を返す if (!obj) { return new Response("Not found", { status: 404 }); } const extension = obj.key.split(".").pop() || ""; return new Response(obj.body, { headers: { "Content-Type": getContentTypes(extension), }, }); } ``` パスパラメーターからストレージのキーを取得して、`storage().get()` メソッドでキーを指定して画像を取得します。`obj.body` にはストリームが入っているので、`Response` に渡すことで画像を返すことができます。 アルバム詳細画面に戻りましょう。`await album.images` でアルバムに紐づくすべての画像を取得します。 ```diff:app/routes/album/$id.tsx export async function loader({ params, context: { auth } }: LoaderArgs) { // ... const album = await Album.where("id", albumId) .where("userId", userId) .first(); // アルバムが存在しない場合、404を返す if (!album) { throw new Response("Not found", { status: 404 }); } return json({ album, + images: await album.images, }); } ``` コンポーネントで `useLoaderData` から `images` を受け取り画像を表示します。`src` のパスには先程作成したストレージのキーを受け取り画像データを返すエンドポイントを指定します。 ```diff:app/routes/album/$id.tsx export default function AlbumPage() { const { album, images } = useLoaderData{album.title}
{album.description}
{ // ...} +Photos
+-
+ {images.map((image) => (
+
-
+
+
+ ))}
+