クイックスタート

Strapi は柔軟性が高く、手早く結果を見たい場合も、プロダクトを深く掘り下げたい場合もカバーできます。このチュートリアルではゼロからプロジェクトとコンテンツ構造を作る流れに沿い、その後 Strapi Cloud にデプロイしてクラウド側からデータを追加します。

Strapi を試す 3 つの方法

次のいずれかを選んでください。

Strapi のホストされたデモでは、コンテンツマネージャーをすぐ試し、コンテンツ編集の流れを学べます。デモは本番モードのため、コンテンツタイプビルダーは仕様により無効です。
Strapi バックエンド、Next.js フロント、サンプルデータ一式を含む完成形を試すなら、LaunchPad をローカルにインストールしてください。
一から学びたい場合は、このクイックスタートに従ってください。

Prerequisites

Strapi をインストールする前に、次の要件をコンピューターに用意してください。

Node.js: Active LTS または Maintenance LTS のみサポート（現状 v20、v22、v24）。奇数バージョンの「current」リリース（例: v23、v25）はサポートされません。
好みの Node.js パッケージマネージャー:
- npm（v6 以上）
- yarn
- pnpm
Python（SQLite データベースを使う場合）

Strapi Cloud にデプロイするには、git のインストールと GitHub アカウントも必要です。

パート A: Strapi で新しいプロジェクトを作成する

ターミナルでコマンドを実行してマシン上に新しい Strapi プロジェクトを作り、最初のローカル管理者ユーザーを登録します。

折りたたみを開いて、手順を読み進めてください。

ステップ 1: インストールスクリプトを実行し Strapi Cloud アカウントを作成する

ターミナルで次のコマンドを実行します。
npx create-strapi@latest my-strapi-project
ターミナルにログインまたはサインアップの案内が出ます。完了すると、GrowthCMS Growth プランには Live Preview、Releases、Content History が含まれます。の 30 日間トライアルがプロジェクトに自動適用されます。このチュートリアルでは、ターミナルで Login/Sign up が選ばれていることを確認するか、矢印キーで選んで Enter を押します。

Info
ログインをスキップした場合、パート C と D は実施できませんが、ローカルでの試用は引き続き可能です。
開いたブラウザのタブで、確認コードがターミナルと同じであることを確認し、Confirm をクリックします。
同じタブで Continue with GitHub をクリックします。ブラウザで GitHub にログインしていない場合は、ログインページへリダイレクトされることがあります。
ログイン後、ブラウザに "Congratulations, you're all set!" と表示されたらタブを閉じ、ターミナルに戻って問題ありません。
ターミナルでいくつか質問されます。すべて既定値でよければ Enter を押します。

ターミナルに表示されるとおり、プロジェクトがローカルでビルドされています。

Info

プロジェクトフォルダには、ローカルの Strapi を Strapi のサーバーと紐づける .strapi-cloud.json が含まれます。
その他のインストール方法はインストールドキュメントを参照してください。

ステップ 2: 最初のローカル管理者ユーザーを登録する

インストールが終わったらサーバーを起動します。ターミナルに次を入力または貼り付けます。

cd my-strapi-project && npm run develop

ブラウザで新しいタブが自動的に開きます。

Tip

my-strapi-project フォルダにいる限り、Strapi サーバーを再度起動するときは npm run develop を実行すれば十分です。

フォームに入力してアカウントを作成すると、この Strapi アプリケーションの最初の管理者ユーザーになります。

管理パネルにアクセスできます。

おつかれさまでした！

新しい Strapi プロジェクトができました。単独で Strapi を試したりコンテンツマネージャーを開いたりしてもよいですし、下のパート B に進んでも構いません。

パート B: コンテンツタイプビルダーでコンテンツ構造を作る

インストールスクリプトは空のプロジェクトを作成しました。ここから小さなレストラン一覧用の構造を作ります。

ローカルの Strapi の管理パネルは http://localhost:1337/admin で動きます。コンテンツの作成・更新の多くはここで行います。

まずコンテンツの構造を定義します。これは開発モードでのみ可能で、ローカル作成のプロジェクトでは既定で開発モードです。

Tip

サーバーがまだ起動していない場合は、ターミナルで my-strapi-project に cd して npm run develop（または yarn develop）を実行します。

TypeScript プロジェクトなど、ビルドが必要な場合は develop の前に npm run build または yarn build が必要になることがあります。

コンテンツタイプビルダーでコンテンツ構造を定義します。空のプロジェクトでは、ここから始めます。

ステップ 1: 「Restaurant」コレクションタイプを作成する

レストランが複数件になる想定なので、「Restaurant」コレクションタイプを作成し、新規エントリーで表示するフィールドを定義します。

管理パネル左のメインナビから Content-Type Builder を開きます。
Collection types の横にあるプラスをクリックします。
Display name に Restaurant と入力し、Continue をクリックします。
Add new field をクリックし、Text フィールドを選びます。
Name フィールドに Name と入力します。
Advanced Settings タブで Required field と Unique field にチェックを入れます。
Add another field をクリックします。
一覧から Rich text (Blocks) を選びます。
Name に Description と入力し、Finish をクリックします。
最後に Save をクリックし、Strapi の再起動を待ちます。

GIF: Content-type Builder で Restaurant コレクションタイプを作成

再起動後、ナビの Content Manager > Collection types に "Restaurant" が表示されます。最初のコンテンツタイプが完成しました。続けてもう 1 つ作ってみましょう。

ステップ 2: 「Category」コレクションタイプを作成する

カテゴリがあればレストラン一覧が整理しやすくなります。「Category」コレクションタイプを作成します。

Content-type Builder を開きます。
Collection types の横のをクリックします。
Display name に Category と入力し、Continue をクリックします。
Add new field をクリックし、Text フィールドを選びます。
Name に Name と入力します。
Advanced Settings で Required field と Unique field にチェックを入れます。
Add another field をクリックします。
Relation フィールドを選びます。
中央で many-to-many を表すアイコンを選びます。
右側の Category ドロップダウンから Restaurant を選び、表示が Categories has and belongs to many Restaurants になるようにします。

Finish、続いて Save をクリックし、Strapi の再起動を待ちます。

おつかれさまでした！

Strapi プロジェクトの基本的なコンテンツ構造ができました。コンテンツタイプビルダーをさらに試すか、パート C・D で Strapi Cloud に進み、実際のコンテンツを追加してください。

Tip

手動での作成に加え、Figma のプロトタイプやローカルファイルのインポート、Strapi AI GrowthThis feature is available with a Growth plan. に自然言語で指示して生成する方法もあります。試してみてください。

️ パート C: Strapi Cloud にデプロイする

ローカルで最初の Strapi プロジェクトが動いているので、公開環境へ載せましょう。最も手軽なのは Strapi Cloud で、1 コマンドでデプロイできます。🚀

Strapi Cloud へ無料デプロイするには、ターミナルで次を行います。

ローカル Strapi が起動している場合は Ctrl-C で停止します。
Strapi プロジェクトのフォルダにいることを確認します（必要なら cd my-strapi-project）。次のコマンドを実行します。
- Yarn
- NPM
yarn strapi deploy
npm run strapi deploy
ターミナルの質問に答えます。プロジェクト名（Enter で既定）、推奨の Node.js バージョン、近いリージョンを選びます。

しばらくするとローカルプロジェクトが Strapi Cloud 上にホストされます。🚀

完了すると、ターミナルに https://cloud.strapi.io/projects で始まるリンクが表示されます。クリックするかアドレスバーに貼り付けて開きます。

Strapi Cloud のダッシュボードに、作成した my-strapi-project が表示されます。右上の Visit app をクリックして、デプロイした Strapi にアクセスします。

おつかれさまでした！

プロジェクトが Strapi Cloud 上にあり、オンラインからアクセスできます。詳しくは Strapi Cloud ドキュメントを読むか、パート D でオンラインの管理パネルにログインし、データを追加してください。

Tip

コンテンツタイプビルダーでフィールドやタイプを追加したら、再度 deploy コマンドを実行して Strapi Cloud に反映すると、数分でホスト側も更新されます。🪄

パート D: コンテンツマネージャーで Strapi Cloud プロジェクトにコンテンツを追加する

「Restaurant」と「Category」の 2 つのコレクションタイプを用意し Strapi Cloud にデプロイしたので、クラウド上でエントリーを作成してコンテンツを追加します。

ステップ 1: 新しい Strapi Cloud プロジェクトの管理パネルにログインする

Strapi Cloud プロジェクトができたので、ログインします。

Strapi Cloud ダッシュボードで my-strapi-project をクリックします。
Visit app をクリックします。
開いたページのフォームに入力し、この Strapi Cloud プロジェクトの最初の管理者ユーザーを作成します。

ログインできたら、ここからデータを追加します。

ユーザーと Strapi Cloud プロジェクトに関する補足:

補足: ローカルユーザーと Strapi Cloud のユーザーは別です

Strapi Cloud プロジェクトとローカルプロジェクトではデータベースが別です。ローカルから Strapi Cloud へデータは自動では引き継がれず、ローカルで作ったユーザーも含まれます。そのため、初めて Strapi Cloud プロジェクトにログインするときは、新しい管理者アカウントの作成を求められます。

ヒント: Strapi Cloud プロジェクトの管理パネルに直接アクセスする

Strapi Cloud の各プロジェクトは https://my-strapi-project-name.strapiapp.com のような URL でアクセスできます。オンラインの管理パネルは URL の末尾に /admin を付けます（例: https://my-strapi-project-name.strapiapp.com/admin）。URL はダッシュボードでも確認でき、プロジェクト名と Visit app からも開けます。

ステップ 2: 「Restaurant」コレクションタイプのエントリーを作成する

ナビの Content Manager > Collection types - Restaurant を開きます。
Create new entry をクリックします。
Name に好きな地元のレストラン名を入力します。例: Biscotte Restaurant。
Description に短い説明を書きます。例文を使う場合は Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers. でも構いません。
Save をクリックします。

スクリーンショット: コンテンツマネージャーの Biscotte Restaurant

レストランが Content Manager の Collection types - Restaurant 一覧に表示されます。

ステップ 3: カテゴリを追加する

Content Manager > Collection types - Category でカテゴリを 2 件作成します。

Create new entry をクリックします。
Name に French Food と入力します。
Save をクリックします。
Collection types - Category に戻り、再度 Create new entry をクリックします。
Name に Brunch と入力し、Save をクリックします。

「French Food」と「Brunch」が Content Manager の Collection types - Category に下書きとして表示されます。

レストランにカテゴリを紐づけます。

Content Manager > Collection types - Restaurant から "Biscotte Restaurant" を開きます。
ページ下部の Categories ドロップダウンで "French Food" を選び、上にスクロールして Save をクリックします。

ステップ 4: ロールと権限を設定する

レストランとカテゴリを追加したので、API から公開取得できるようにします。

メインナビ下部の Settings をクリックします。
Users & Permissions Plugin から Roles を選びます。
Public ロールを開きます。
Permissions まで下にスクロールします。
Permissions タブで Restaurant を開きます。
find と findOne にチェックを入れます。
Category でも同様に find と findOne にチェックを入れます。
ページ上部の Save をクリックします。

スクリーンショット: Users & Permissions の Public ロール

ステップ 5: コンテンツを公開する

作成したコンテンツは既定で下書きです。カテゴリとレストランを公開します。

まず Content Manager > Collection types - Category を開きます。

"Brunch" エントリーを開きます。
次の画面で Publish をクリックします。

一覧に戻り、"French Food" でも同様に Publish します。

最後に Content Manager > Collection types - Restaurant で "Biscotte Restaurant" を開き、Publish します。

ステップ 6: API を使う

コンテンツを作成し API で取得できる状態にしました。Strapi Cloud プロジェクトの URL に /api/restaurants を付けたパス（例: https://beautiful-first-strapi-project.strapiapp.com/api/restaurants）にアクセスすると、レストラン一覧が返るはずです。

試してみてください。レスポンスは次の例に近い形になります 👇。

クリックして API レスポンスの例を表示

{
  "data": [
    {
      "id": 3,
      "documentId": "wf7m1n3g8g22yr5k50hsryhk",
      "Name": "Biscotte Restaurant",
      "Description": [
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
            }
          ]
        }
      ],
      "createdAt": "2024-09-10T12:49:32.350Z",
      "updatedAt": "2024-09-10T13:14:18.275Z",
      "publishedAt": "2024-09-10T13:14:18.280Z",
      "locale": null
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

おつかれさまでした！

コンテンツを作成・公開し、API から取得する権限も設定できました。引き続きコンテンツを充実させてください。

ヒント: ローカルと Strapi Cloud 間でデータを移すには

Strapi Cloud とローカルではデータベースが別のため、データは自動では同期されません。データ管理を使ってプロジェクト間で転送できます。

次にやること

Strapi でコンテンツを作成・公開する基本がわかったら、次のトピックを掘り下げてみてください。

Strapi の REST API でコンテンツを取得する方法を学ぶ
機能カテゴリで Strapi の機能を読む
Strapi Cloud ドキュメントでクラウドプロジェクトについて学ぶ
上級向けに Strapi バックエンドのカスタマイズや管理パネルのカスタマイズに進む

パート A: Strapi で新しいプロジェクトを作成する​

ステップ 1: インストールスクリプトを実行し Strapi Cloud アカウントを作成する​

ステップ 2: 最初のローカル管理者ユーザーを登録する​

パート B: コンテンツタイプビルダーでコンテンツ構造を作る​

ステップ 1: 「Restaurant」コレクションタイプを作成する​

ステップ 2: 「Category」コレクションタイプを作成する​

️ パート C: Strapi Cloud にデプロイする​

パート D: コンテンツマネージャーで Strapi Cloud プロジェクトにコンテンツを追加する​

ステップ 1: 新しい Strapi Cloud プロジェクトの管理パネルにログインする​

ステップ 2: 「Restaurant」コレクションタイプのエントリーを作成する​

ステップ 3: カテゴリを追加する​

ステップ 4: ロールと権限を設定する​

ステップ 5: コンテンツを公開する​

ステップ 6: API を使う​

次にやること​

パート A: Strapi で新しいプロジェクトを作成する

ステップ 1: インストールスクリプトを実行し Strapi Cloud アカウントを作成する

ステップ 2: 最初のローカル管理者ユーザーを登録する

パート B: コンテンツタイプビルダーでコンテンツ構造を作る

ステップ 1: 「Restaurant」コレクションタイプを作成する

ステップ 2: 「Category」コレクションタイプを作成する

️ パート C: Strapi Cloud にデプロイする

パート D: コンテンツマネージャーで Strapi Cloud プロジェクトにコンテンツを追加する

ステップ 1: 新しい Strapi Cloud プロジェクトの管理パネルにログインする

ステップ 2: 「Restaurant」コレクションタイプのエントリーを作成する

ステップ 3: カテゴリを追加する

ステップ 4: ロールと権限を設定する

ステップ 5: コンテンツを公開する

ステップ 6: API を使う

次にやること