1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

次世代WordPressはAstro製CMS?CloudflareのEmDashとは

1
Posted at

WordPressは、今でもウェブサイト・ブログ構築の超定番CMSです。

管理画面が直感的で使いやすく、プラグインも豊富。
「とりあえずWordPressで作れば何とかなる」という場面は今でも多いです。

一方で、最近のフロントエンド開発に慣れているエンジニアからすると、

  • PHP前提のテーマ開発
  • プラグイン依存
  • セキュリティ管理
  • 型安全ではない開発体験
  • サーバー管理の手間

あたりに、少し古さを感じることもあると思います。

そんな中、Cloudflareが発表したのが EmDash です。

公式では「WordPressの精神的後継」と表現されており、AstroやTypeScript、Cloudflare Workersなど、かなりモダンな技術スタックで作られたCMSです。

EmDashとは

EmDashは、Cloudflareが発表したオープンソースCMSです。

特徴をざっくり言うと、

WordPressのようにコンテンツ管理できるけど、実装基盤はAstro + TypeScriptなCMS

です。

従来のWordPressはPHPで動きますが、EmDashはTypeScriptベースです。
フロントエンド部分はAstroを前提としており、コンテンツ管理とモダンなWeb開発をかなり近い距離で扱えます。

公式サイトでも、EmDashは「Astro向けのフルスタックCMS」と説明されています。

つまり、WordPressのように管理画面から記事を書きつつ、エンジニア側はAstroのコンポーネントやルーティングを使ってサイトを組み立てるイメージです。

なぜ「次世代WordPress」と言われているのか

EmDashが注目されている理由の1つが、WordPressの課題としてよく挙げられる プラグインのセキュリティ問題 に正面から向き合っている点です。

WordPressのプラグインは非常に強力です。
お問い合わせフォーム、SEO、EC、会員管理、予約機能など、あらゆるものが比較的手軽に導入できます。

ただし、その強力さの裏側にはリスクもあります。

WordPressのプラグインは、サイトのデータベースやファイルシステムに広くアクセスできる構造になっています。便利な反面、脆弱なプラグインや悪意あるプラグインが入ると、サイト全体に影響する可能性があります。

Patchstackの2025年レポートでは、2024年に報告されたWordPress関連の脆弱性のうち、96%がプラグイン由来だったとされています。

https://patchstack.com/whitepaper/state-of-wordpress-security-in-2025/

EmDashではこの問題に対して、プラグインをサンドボックス化する設計を取っています。

要するに、

WordPress
プラグインがサイト本体にかなり深く入り込める

EmDash
プラグインを隔離された環境で動かし、必要な権限だけを渡す

という考え方です。

スマホでアプリが「カメラへのアクセス」「位置情報へのアクセス」を個別に求めるように、EmDashのプラグインも必要な権限を明示する方向で設計されています。

これは現代的な設計思想です。

WordPressとの違い

WordPressとEmDashの違いをざっくり比較すると、こんな感じです。

項目 WordPress EmDash
主な言語 PHP TypeScript
フロントエンド PHPテーマ Astro
データ管理 MySQL中心 SQLite / D1 / PostgreSQLなど
メディア保存 サーバー内ファイル中心 ローカル / R2 / S3互換ストレージ
プラグイン 強力だが権限が広い サンドボックス化を重視
認証 パスワードログイン パスキー標準
AI連携 後付けが中心 MCPなどAIエージェント連携を意識

もちろん、現時点でEmDashはまだ試験段階のため、WordPressをすぐ置き換える存在というよりは、「CMSを今の技術スタックで再設計したらこうなる」という実験的かつ実用寄りのプロジェクトと見るのがよさそうです。

実際にEmDashを触ってみる

公式ドキュメントでは、対話形式でEmDashサイトを作成する方法が紹介されています。

https://docs.emdashcms.com/getting-started

pnpm create emdash@latest
Project name? (use "." for current directory)
→emdash-blog
好きなPJ名を。

Where will you deploy?
→Node.js
ローカルでEmDashを試すだけなら Node.jsを選ぶのが簡単です。
一方で、EmDashはCloudflare発のCMSであり、Cloudflare Workers、D1、R2と組み合わせたサーバーレス構成が大きな特徴です。本番デプロイまで試す場合は Cloudflare Workers (D1 + R2)を選ぶとよいです。
今回はまず管理画面と基本機能を確認したいため、Node.jsを選択します。

Which template?
→Blog (A blog with posts, pages, and authors)
お好みで。今回はBlogを選びます。

Which package manager?
→pnpm
お好みで。今回はpnpmを使用します。

Install dependencies?
→Yes
cd my-emdash-site
pnpm dev

起動後、ブラウザで以下にアクセスします。
http://localhost:4321

初回アクセス時にはセットアップウィザードが表示され、以下の手順でサイト名や管理者メールアドレスを入力します。
EmDashはパスワードではなく、標準でパスキー認証を使う設計です。

Touch ID、Face ID、Windows Hello、セキュリティキーなどを使ってログインできるため、従来の「IDとパスワードを守る」CMSとは一線を画しています。

スクリーンショット 2026-06-21 10.54.29.png

スクリーンショット 2026-06-21 10.55.18.png

スクリーンショット 2026-06-21 10.55.46.png

スクリーンショット 2026-06-21 10.56.01.png

この画面になれば初期セットアップ完了です。

スクリーンショット 2026-06-21 10.56.33.png

設定ファイルを見てみる

EmDashはAstroのintegrationとして登録します。

例えばローカル開発でSQLiteとローカルファイルストレージを使う場合、astro.config.mjs は以下のような形になります(抜粋)。

astro.config.mjs
import { defineConfig } from "astro/config";
import emdash, { local } from "emdash/astro";
import { sqlite } from "emdash/db";

export default defineConfig({
  integrations: [
    emdash({
      database: sqlite({ url: "file:./data.db" }),
      storage: local({
        directory: "./uploads",
        baseUrl: "/_emdash/api/media/file",
      }),
    }),
  ],
});

ここでやっていることはシンプルです。

  • database にSQLiteを指定
  • storage にアップロードファイルの保存先を指定
  • AstroにEmDashを組み込む

WordPressでいうと、wp-config.php に近い役割ですが、よりフロントエンドエンジニアに馴染みやすい書き方です。

コンテンツをAstro側で取得する

公式ドキュメントでは、EmDashのコンテンツはAstroのLive Content Collectionsを通じて扱われます。

まず src/live.config.ts でEmDashのloaderを登録します。

src/live.config.ts
import { defineLiveCollection } from "astro:content";
import { emdashLoader } from "emdash/runtime";

export const collections = {
  _emdash: defineLiveCollection({
    loader: emdashLoader(),
  }),
};

そして、Astroページ側では次のように記事一覧を取得できます。

index.astro
---
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts");
---

<ul>
  {posts.map((post) => (
    <li>
      <a href={`/posts/${post.slug}`}>
        {post.data.title}
      </a>
    </li>
  ))}
</ul>

WordPressでいう WP_Query や get_posts() のようなことを、Astro + TypeScriptの世界で書いているイメージです。

PHPテンプレートに慣れている人からすると新鮮ですが、ReactやNext.js、Astroを触ったことがある人ならかなり扱いやすいと思います。

EmDashの良さ

個人的にEmDashの良さは、単に「WordPressっぽいCMSをTypeScriptで作った」ことではなく、CMSの設計思想が現代のWeb開発に寄っていることだと思っています。

例えば、

  • Astroベースで軽量に画面を作れる
  • TypeScriptの型安全を活かせる
  • コンテンツモデルを型として扱える
  • Cloudflare WorkersやD1、R2と相性が良い
  • パスキー認証が標準
  • MCP ServerなどAIエージェント連携を意識している

このあたりは、従来のCMSよりかなり開発者体験が良さそうな点です。

特に、今後AIエージェントがコンテンツ更新やサイト修正を手伝う流れを考えると、MCP対応は面白いポイントです。

しかし、まだ新しい

EmDashはまだ新しいCMSです。

WordPressには20年以上の歴史があり、情報量、プラグイン数、テーマ資産、運用ノウハウが圧倒的にあります。

一方でEmDashは、今まさに開発が進んでいる段階で2026年6月現在ベータ版プレビューのPJです。
実際、GitHubでは短い期間で活発にリリースが行われています。

https://github.com/emdash-cms/emdash

また、EmDashのサンドボックス化されたプラグイン実行にはCloudflareのDynamic Workersが関係しており、GitHubのREADMEでは有料アカウントが必要になるケースも案内されています。

そのため、現時点ではいきなり大規模な本番サイトに採用するというより、

  • 個人ブログ
  • 技術検証
  • 小さめのメディア
  • AstroベースのCMS検証
  • WordPressからの移行調査

あたりから試すのがよさそうです。

まとめ

EmDashは、WordPressをそのまま置き換えるCMSというより、
「WordPress的なコンテンツ管理体験を、今のWeb技術で作り直したらどうなるか」
をかなり本気で形にしているプロジェクトだという印象を受けました。

特に、

  • TypeScript
  • Astro
  • サーバーレス
  • パスキー認証
  • サンドボックス化されたプラグイン
  • AIエージェント連携

を意識するエンジニアには、かなり刺さると思います。

WordPressはまだまだ現役です。
ただ、CMSの未来を考えるうえで、EmDashは今後かなり面白い選択肢になるかもしれません。

WordPress案件をやってきた人ほど、触ってみると
「なるほど、ここをこう変えたかったのか」
と感じる部分が多いと思います。

採用拡大中!

アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニアを募集しています!

少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう!

お問い合わせはこちらから↓
https://official.assisteng.co.jp/contact/

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?