Skip to content

i18n(ja): Add guides/migrate-to-astro/from-docusaurus.mdx #11698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions src/content/docs/ja/guides/migrate-to-astro/from-docusaurus.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: Docusaurusからの移行
description: DocusaurusプロジェクトをAstroに移行するためのガイド
sidebar:
label: Docusaurus
type: migration
stub: true
framework: Docusaurus
i18nReady: true
---

import PackageManagerTabs from '\~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Docusaurus](https://docusaurus.io)はReact製の人気ドキュメントサイトビルダーです。

## DocusaurusとAstroの類似点

DocusaurusとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

- どちらもJavaScriptベースのモダンなサイトビルダーであり、[コンテンツ駆動](/ja/concepts/why-astro/#コンテンツ駆動)なウェブサイト―とくにドキュメントサイト―を構築するために最適化されています。
- 両者とも[MDXページ](/ja/guides/markdown-content/)をサポートしています。既存の`.mdx`ファイルをAstroに持ち込んでそのまま使用できます。
- どちらも`src/pages`内に置いたMDXファイルに対して[ファイルベースルーティング](/ja/guides/routing/)を行い、自動でページルートを生成します。既存コンテンツや新規ページをAstroのディレクトリ構造に配置しても違和感は少ないでしょう。
- Astroには[Reactコンポーネントを利用する公式インテグレーション](/ja/guides/integrations-guide/react/)があります。AstroではReactファイルの拡張子を`.jsx`または`.tsx`にする**必要があります**。
- Astroは[NPMパッケージのインストール](/ja/guides/imports/#npmパッケージ)をサポートしており、多くのReact用パッケージもそのまま利用できます。
- [AstroのJSXライクな構文](/ja/basics/astro-components/)はReactに慣れていればすぐ理解できます。

## DocusaurusとAstroの主な相違点

DocusaurusサイトをAstroで再構築すると、次のような違いに気付くでしょう。

- DocusaurusはReactベースのシングルページアプリ(SPA)ですが、Astroサイトは[`.astro`コンポーネント](/ja/basics/astro-components/)で構成されたマルチページアプリです。必要に応じてReact、Preact、Vue、Svelte、Solid、AlpineJSも併用できます。
- Docusaurusにはドキュメントサイト向けの機能が組み込まれています。Astroではこれらを自前で実装するか、[公式ドキュメントテーマStarlight](https://starlight.astro.build)や[コミュニティ製ドキュメントテーマ](https://astro.build/themes?search=&categories%5B%5D=docs)を利用します。このAstro公式サイトもStarlightを使用しています。
- DocusaurusはコンテンツをMDXで管理しますが、StarlightはデフォルトでMarkdown(`.md`)を使い、MDXはオプションです。必要であれば[AstroのMDXインテグレーション](/ja/guides/integrations-guide/mdx/)を追加して`.mdx`を併用できます。(Starlightには標準で含まれています。)

## DocusaurusサイトをAstroに変換する

DocusaurusドキュメントサイトをAstroへ移行するには、まず[Starlight公式スターターテンプレート](https://starlight.astro.build)を使用するか、[テーマショーケース](https://astro.build/themes?search=&categories%5B%5D=docs)でコミュニティ製ドキュメントテーマを探索してください。

`create astro`コマンドに`--template`を渡すと、公式スターターで新しいAstroプロジェクトを作成できます。また、[GitHub上の既存Astroリポジトリから新規プロジェクトを開始](/ja/install-and-setup/)することも可能です。

<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm create astro@latest -- --template starlight
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm create astro@latest --template starlight
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn create astro --template starlight
```
</Fragment>
</PackageManagerTabs>

StarlightにはMDXインテグレーションが含まれているため、[既存のコンテンツファイルを直ちに追加](https://starlight.astro.build/getting-started/#add-content)できます。

公式スターターおよび他のテンプレートは[astro.new](https://astro.new)で確認できます。各プロジェクトのGitHubリポジトリ、IDX・StackBlitz・CodeSandbox・Gitpodで開くワンクリックリンクも用意されています。

## コミュニティリソース

<CardGrid>
<LinkCard title="ドキュメントを10倍高速化(Russian)" href="https://habr.com/ru/articles/880220/" />
</CardGrid>