|
| 1 | +--- |
| 2 | +title: VuePressからの移行 |
| 3 | +description: 既存のVuePressプロジェクトをAstroに移行するためのヒント |
| 4 | +sidebar: |
| 5 | + label: VuePress |
| 6 | +type: migration |
| 7 | +stub: true |
| 8 | +framework: VuePress |
| 9 | +i18nReady: true |
| 10 | +--- |
| 11 | + |
| 12 | +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' |
| 13 | + |
| 14 | +[VuePress](https://vuepress.vuejs.org)は、Vueをベースにしたオープンソースの静的サイトジェネレーターです。 |
| 15 | + |
| 16 | +## VuePressとAstroの主な共通点 |
| 17 | + |
| 18 | +VuePressとAstroには、移行時に役立ついくつかの共通点があります。 |
| 19 | + |
| 20 | +- VuePressとAstroはどちらもモダンなJavaScript製の静的サイトジェネレーターであり、似たようなプロジェクト構成を持ちます。どちらも[ファイルベースのルーティング用の特別な`src/pages/`フォルダー](/ja/basics/astro-pages/)を使用します。ページの作成や管理の方法は親しみやすいはずです。 |
| 21 | +- AstroとVuePressはどちらも[コンテンツ駆動型のWebサイト](/ja/concepts/why-astro/#コンテンツ駆動)に適しており、Markdownファイルの優れたサポートを提供します。Markdownでの執筆は馴染みがあり、既存コンテンツをそのまま利用できます。 |
| 22 | +- Astroには[Vueコンポーネントを使用するための公式インテグレーション](/ja/guides/integrations-guide/vue/)があり、[Vue関連のNPMパッケージのインストール](/ja/guides/imports/#npmパッケージ)もサポートしています。Vueで書いたUIコンポーネントの一部またはすべてを再利用できる可能性があります。 |
| 23 | + |
| 24 | +## VuePressとAstroの主な違い |
| 25 | + |
| 26 | +VuePressサイトをAstroで再構築する際には、いくつかの重要な違いに気付くはずです。 |
| 27 | + |
| 28 | +- VuePressはVueベースのシングルページアプリケーション（SPA）です。Astroサイトは[`.astro`コンポーネント](/ja/basics/astro-components/)を用いたマルチページアプリケーション（MPA）ですが、[React、Preact、Vue、Svelte、Solid、AlpineJS](/ja/guides/framework-components/)などのフレームワークにも対応しています。 |
| 29 | +- [レイアウトテンプレート](/ja/basics/layouts/)：VuePressではMarkdown（`.md`）とHTMLテンプレートを使ってページを構成します。Astroはコンポーネントベースであり、HTMLテンプレートとして使えるAstroコンポーネントを通じて、ページ・レイアウト・UI要素を組み立てます。Astroでは[MarkdownおよびMDXファイルからページを生成](/ja/guides/markdown-content/)できます。 |
| 30 | +- VuePressはMarkdown中心のコンテンツ重視のドキュメントサイトを構築するために設計されており、組み込みのドキュメント機能が多数あります。Astroではそのような機能を[公式ドキュメントテーマ（Starlight）](https://starlight.astro.build)で補完できます。Starlightはこのサイトが元になっており、現在も使われています。[コミュニティによるドキュメントテーマ](https://astro.build/themes?search=&categories%5B%5D=docs)も多数用意されています。 |
| 31 | + |
| 32 | +## VuePressからAstroへの移行方法 |
| 33 | + |
| 34 | +VuePressのドキュメントサイトをAstroへ移行するには、公式の[Starlightドキュメントテーマスターター](https://starlight.astro.build)を使うか、[コミュニティ製ドキュメントテーマ一覧](https://astro.build/themes?search=&categories%5B%5D=docs)からテーマを選びましょう。 |
| 35 | + |
| 36 | +`create astro`コマンドに `--template` オプションを付けてスターターテンプレートから新しいAstroプロジェクトを開始できます。または、[既存Astroリポジトリからプロジェクトを作成](/ja/install-and-setup/#cliウィザードからインストールする)することも可能です。 |
| 37 | + |
| 38 | +<PackageManagerTabs> |
| 39 | + <Fragment slot="npm"> |
| 40 | + ```shell |
| 41 | + npm create astro@latest -- --template starlight |
| 42 | + ``` |
| 43 | + </Fragment> |
| 44 | + <Fragment slot="pnpm"> |
| 45 | + ```shell |
| 46 | + pnpm create astro@latest --template starlight |
| 47 | + ``` |
| 48 | + </Fragment> |
| 49 | + <Fragment slot="yarn"> |
| 50 | + ```shell |
| 51 | + yarn create astro --template starlight |
| 52 | + ``` |
| 53 | + </Fragment> |
| 54 | +</PackageManagerTabs> |
| 55 | + |
| 56 | +既存のMarkdownコンテンツファイルを[Markdownページとして追加](/ja/guides/markdown-content/)できます。VuePressの`docs`ディレクトリにあるドキュメントをAstroの`src/pages/`に移動すれば、[ファイルベースルーティング](/ja/guides/routing/)の利点を活かせます。既存のURL構造を維持したい場合は、同じ構成でフォルダを作成してください。 |
| 57 | + |
| 58 | +VuePressやそのテーマは、レイアウトやメタデータの処理を多く担っていた可能性があります。[Markdown用ラッパーレイアウトの作成方法](/ja/basics/layouts/#markdownのレイアウト)を参照して、Astroでテンプレートや`<head>`の管理方法を確認しましょう。 |
| 59 | + |
| 60 | +[astro.new](https://astro.new)では、Astroの公式ドキュメントスターターやその他テンプレートが見つかります。各プロジェクトのGitHubリポジトリのリンクや、IDX、StackBlitz、CodeSandbox、Gitpodといったオンライン開発環境ですぐに試せるリンクも用意されています。 |
| 61 | + |
| 62 | +## コミュニティリソース |
| 63 | + |
| 64 | +:::note[共有したいリソースがありますか？] |
| 65 | +VuePressサイトをAstroに移行するための参考になる動画やブログ記事を見つけた・作成した場合は、[このリストに追加してください](https://github.com/withastro/docs/edit/main/src/content/docs/ja/guides/migrate-to-astro/from-vuepress.mdx)! |
| 66 | +::: |
0 commit comments