Astro Editorを試してみた - Content Collectionの編集に集中できるエディタ

概要

Astro EditorというAstro向けのエディタを見つけました。

この記事を書いている2025年11月27日時点でのバージョンは1.0.0です。
まだリリースされたてですが、コンテンツコレクションで記事を管理するのに便利そうだったので紹介します。

おすすめできる人

• Astroでブログ/ドキュメントサイトを運営している人
• Content Collectionを活用している人
• frontmatterの管理に手間を感じている人
• MDXを頻繁に使う人

インストール

サイトからダウンロードするか、brewでインストールできます。

brew install --cask astro-editor

主な機能

ユーザーガイドで網羅的に紹介されていますが、その中でも自分が良いと思った点に絞って紹介します。

frontmatterを自動で生成してくれる

記事を作成すると次の画像のようにサイドバーにfrontmatterのプロパティが表示されます。
ここにテキストを入れれば自動でfrontmatterとして記載してくれます。

scaffdogなどを使えばファイル生成時にfrontmatterを生成できるとはいえ、ファイル作成時には記事タイトルなどがまだ決まっていないこともあります。
仮のテキストを入れれば良いとはいえ、自分にとっては若干の認知負荷がかかるため、後から好きなタイミングで追加できるのは意外と嬉しいポイントでした。

frontmatterの内容がZodの定義に合わせて適切に編集できる

通常のstringはもちろん、例えばstringのarrayを指定している場合は次の画像のように、

dateの場合は次の画像のようにカレンダー形式で、

booleanならトグルボタンとして表示されます。

通常のfrontmatterだとどんな形式であってもテキストによる指定なので、こちらの方が編集しやすいです。

MDXコンポーネントを簡単に挿入できる

.mdxファイルのときのみcommand /でコンポーネント挿入UIが出てきます。

また、どのpropsを入力するかも選べます。

これら一連の流れをキーボード操作だけで完結できるので操作もしやすいです。

ただしimport文は自動挿入されず、そこは惜しいポイントです。
今後のアップデートに期待しています。

実際に記事を作成する流れ

1. Astro Editorでプロジェクトを開く
   1. 
   2. ウィンドウ左上、Collectionsの左上にあるフォルダのアイコンをクリックして開きます
2. 新規記事を作成する
   1. 
   2. ウィンドウ右上、New articles fileから作成します
3. frontmatterを設定する
   1. 先ほど記載したように画面右側のサイドバーから編集します
4. 本文を執筆する
   1. 
   2. 真ん中のペインに本文を書く

Content Collectionの設定例

Astro Editorはsrc/content/config.tsのZodスキーマを自動的に読み込みます。

以下はAstro EditorというよりはAstroそのものの説明ですが、このような定義をすることでエディタのサイドバーに適切な入力UIが表示されます。

src/content/config.ts

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
  })
});

export const collections = { blog };

Content Collections設定の詳細はAstroの公式ドキュメントをご覧ください。

VS Codeなど一般的なエディタとの比較

機能	Astro Editor	一般的なエディタ
Content Collection対応	◎	○
Zodスキーマ連携	◎	○
MDXコンポーネント挿入	○	△
汎用性	△	◎
プラグインなどの拡張性	×	◎

Astro Editorは完全にAstro専用の作りなので、エディタとしては一点突破な性能です。

注意点・現時点での制限

ここまでにもいくつかの注意点を記載しましたが、ここでまとめて記載しておきます。

• エディタ上からフォルダ作成不可
• MDXコンポーネントのimport文自動挿入非対応
• Astroプロジェクト専用（汎用Markdownエディタではない）
• Astro公式から出ているエディタではない

ただし現状のバージョンは1.0.0であるため、これから追加される機能も多いでしょう。

まとめ

追加の要望はあるにはあるのですが、文章を書くのに集中できるエディタだと思いました。

また、作者の「AI製の粗雑な文章ではなく、もっと多くの人が自分で書いた方が良い」といった主張にも賛成で、応援の意味も込めて記事を書いてみました。