モデルを追加する

はじめに

このチュートリアルでは、 Orizm のスターターキットに新たなモデル Job（採用情報）を追加し、CMSで管理しつつ、公開サイトで表示するまでの流れを解説します。

スターターキットにはすでに固定ページ・お知らせ・ブログなどのモデルが含まれていますが、新たにJobモデルを追加することで、Orizmのテーブル機能を理解し、独自のデータ構造を組み込む方法を学びます。

モデルの定義

はじめに必要なカラムを設計します。ここではJobは以下のカラムを持つモデルとして定義します。

モデルの作成

スターターキットのコードを編集してモデルを追加します。次のコードをコピーして packages/orizm/src/schemas/job.ts に保存します。

import type { SchemaDefinition } from './schema-definition';
 
export const JobSchema: SchemaDefinition = {
  tables: [
    {
      name: 'job',
      columns: [
        // 職種
        { name: 'title', type: 'string', required: true },
        // 業務内容
        { name: 'description', type: 'string', required: true },
        // 掲載順
        { name: 'order', type: 'number', required: true }
      ],
    },
  ],
  tableModules: [],
  buckets: [],
};
 

このコードが読み込まれるようにするために、同ディレクトリの index.ts に追記します。

+import { JobSchema } from './job';
 
 const SCHEMAS = [
...
+  JobSchema,
];

このスキーマを適用するために、次のコマンドを実行してデータベースを更新します。

pnpm run orizm:update

うまくいけば、Orizm console にテーブルが追加されていることが確認できます。

また、テーブルを消したいときは、先ほど追加したTypeScriptのスキーマを削除し、再度 orizm:update を実行してください。本番プロジェクトでこのような破壊的変更を望まない場合、削除保護機能を使うことができます。

CMS での管理

CMSでこの新しいモデルを管理するページを追加していきます。

以下に、大まかな変更箇所を示します。

packages/model にvalibotスキーマを追加する

スターターキットでは Valibot を使って型システムの補強やバリデーションを行っています。 Orizm のコード生成コマンドでは Valibotに依存しない型定義しか生成していないため、このレイヤーで型の補強しています。

packages/apps/cms に CRUDページを追加する

スターターキットにすでに存在するモデルを参考にして、新しいモデルのCRUDページを作成していきます。

Server Action の追加

スターターキットでは src/**/actions.ts というファイルに Server Action を定義しています。 ここでは、 Orizm CMS SDK を使ってリモートのOrizmプロジェクトと通信するコードが存在します。

コンポーネントの追加

スターターキットでは src/features というディレクトリに、モデル固有のコンポーネントを配置しています。 例えば、作成フォーム、編集フォームといったコンポーネントがここに配置されます。 この階層のコンポーネントは、 CMS SDK を使ってデータを読み込んだり、前のステップで定義した Server Action を呼び出してデータを更新します。

ページの追加

スターターキットは App Router を使っています。 src/app ディレクトリにファイルを配置することで、ページのRoutingを定義できます。

公開サイト(Consumer)に表示

スターターキットの公開サイト(Consumer) は apps/consumer ディレクトリにある Next.js アプリケーションです。

シンプルな例として、Jobモデルを一覧表示するには、以下のような page.tsx ファイルを作成し、appディレクトリに配置します。

import { serverSideCmsClient } from '@/lib/orizm-client';
 
export default async function Page() {
  const res = await serverSideCmsClient.tables.job.list({
    limit: 10,
    order: { order: 'asc' },
  })
  const jobs = res.contents;
 
  return <div>
    {jobs.map((job) => (
      <div key={job.id}>
        <h2>{job.title}</h2>
        <p>{job.description}</p>
      </div>
    ))}
  </div>;
}

スターターキットでは、CMSと同様に src/features ディレクトリにモデル固有のコンポーネントや通信ロジックをまとめて配置することで、コードの再利用性を高めています。

まとめ

ここまでで、独自のモデルを定義して追加する際の大まかな流れを解説しました。 さらにカスタマイズする場合、Orizm のテーブル機能のリファレンスも参考にしてください。