diff options
Diffstat (limited to 'docs/src/pages/ja')
| -rw-r--r-- | docs/src/pages/ja/comparing-astro-vs-other-tools.md | 237 | ||||
| -rw-r--r-- | docs/src/pages/ja/getting-started.md | 76 | ||||
| -rw-r--r-- | docs/src/pages/ja/installation.md | 179 | ||||
| -rw-r--r-- | docs/src/pages/ja/quick-start.md | 75 | ||||
| -rw-r--r-- | docs/src/pages/ja/themes.astro | 53 |
5 files changed, 0 insertions, 620 deletions
diff --git a/docs/src/pages/ja/comparing-astro-vs-other-tools.md b/docs/src/pages/ja/comparing-astro-vs-other-tools.md deleted file mode 100644 index 954dbfbea..000000000 --- a/docs/src/pages/ja/comparing-astro-vs-other-tools.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: Astro vs. X -description: Astroと他の静的サイトジェネレーター（Gatsby、Next.js、Nuxt、Hugo、Eleventyなど）の比較 -lang: ja ---- - -よく、「Astro は、私が気に入ってる静的サイトジェネレーターの **\_\_\_\_** と比べてどうですか？」と聞かれます。このガイドは、いくつかの人気の静的サイトジェネレーターと Astro の代わりに使えるツールについて、その質問に答えるために書かれました。 - -もし、お気に入りの静的サイトジェネレーターがここに掲載されていない場合は、 [Discord で聞いてみてください](https://astro.build/chat)。 - -## プロジェクトの状況 - -プロジェクトの進捗状況について簡単に説明します。**Astro はまだベータ版です**。 ここに掲載されている多くのツールはもっと成熟しており、中には Astro より 12 年以上先行しているものもあります。 - -Astro にはまだいくつかの機能が欠けており、いくつかの API もまだ完成していません。しかし、バグの観点からは安定していると考えられていて、すでにいくつかの本番用 Web サイトが Astro を使って構築されています。これは、Astro を選択する際の重要なポイントとなるでしょう。 - -## Docusaurus vs. Astro - -[Docusaurus](https://docusaurus.io/) は、人気のあるドキュメントサイト生成ツールです。 Docusaurus は React を使って Web サイトの UI を生成しますが、Astro は React、Vue.js、Svelte、そして生の HTML テンプレートをサポートしています。 - -Docusaurus は、ドキュメント Web サイトを構築するために設計されていて、Astro にはない、ドキュメントに特化した Web サイト機能がいくつか組み込まれています。その代わり、Astro では、ドキュメントに特化した機能を、サイトに使用できる公式の[`docs`](https://github.com/snowpackjs/astro/tree/main/examples/docs)テーマを通じて提供しています。この Web サイトは、そのテンプレートを使って構築されています。 - -### Docusaurus と Astro のパフォーマンス比較 - -ほとんどの場合、Astro の Web サイトは Docusaurus の Web サイトよりも大幅に速く読み込まれます。これは、Astro がページ内の不要な JavaScript を自動的に外し、必要なコンポーネントのみをハイドレーションするためです。この機能を[パーシャルハイドレーション](/core-concepts/component-hydration)と呼びます。 - -Docusaurus はパーシャルハイドレーションに対応しておらず、ページコンテンツのほとんどが静的なものであっても、ユーザーがブラウザでページ全体を読み込んで再ハイドレーションするようになっています。これにより、ページの読み込みが遅くなり、Web サイトのパフォーマンスが低下します。Docusaurus では、この動作を無効にする方法はありません。 - -### ケーススタディ：ドキュメントサイトの構築 - -[docusaurus.io/docs](https://docusaurus.io/docs) は、Docusaurus で構築された Docusaurus の公式ドキュメントサイトです。このサイトは、Astro の公式ドキュメントサイトと比較しても、十分に似たデザインと機能を提供しています。これにより、2 つのサイトビルダーを**大雑把に実際のサイト**で比較できます。 - -- **Docusaurus のパフォーマンススコア**: 100 点満点中 61 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocusaurus.io%2Fdocs) -- **Astro のパフォーマンススコア**: 100 点満点中 99 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -このパフォーマンス差の大きな理由の 1 つは、Astro の JavaScript ペイロードが小さいことです。 -[docusaurus.io/docs](https://docusaurus.io/docs)が最初のページ読み込み時に**238kb**の JavaScript をロードするのに対し、[docs.astro.build](https://docs.astro.build)は最初の読み込み後に**78.7kb**（全体で 67％の JavaScript 削減）の JavaScript をロードします。 - -## Elder.js vs. Astro - -[Elder.js](https://elderguide.com/tech/elderjs/) は、Svelte のために作られたこだわりの強い静的サイトビルダーです。 - -Elder.js は Svelte を使って Web サイトをレンダリングします。Astro はより柔軟で、人気のあるコンポーネントライブラリ（React、Preact、Vue、Svelte、Solid など）や、HTML+JSX に似た Astro の HTML ライクなコンポーネント構文を使って UI を自由に構築できます。 - -Elder.js は、[パーシャルハイドレーション](/core-concepts/component-hydration)をサポートするサイトビルダーとして、このリストの中でもユニークな存在です。Astro も Elder.js も、ページから不要な JavaScript を自動的に外し、必要な個々のコンポーネントだけをハイドレーションします。Elder のパーシャルハイドレーションの API は少し違っていて、Astro は Elder.js がサポートしていないいくつかの機能をサポートしています（`client:media`など）。しかし、パフォーマンス的には、どちらのプロジェクトも非常に似通ったサイトを構築できます。 - -Elder.js は独自のルーティングを採用しており、新しい開発者には馴染みがないかもしれません。Astro は[ファイルベースのルーティング](/core-concepts/routing)を採用していて、Next.js や SvelteKit、または Eleventy のような静的サイトビルダーを使っている人には馴染みがあるでしょう。 - -Elder.js は、大規模な Web サイトで動作するように設計されていて、20,000 ページ程度の Web サイトを（手頃な VM 上で）10 分以内に構築できると謳っています。Astro は、記事執筆時点では、1,000 ページを 66 秒で構築していますが、20,000 ページ以上のプロジェクトではまだテストされていません。Astro はまだ初期のベータ版であり、Elder.js のビルド速度に匹敵することが Astro v1.0 の目標です。 - -Elder.js は、静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)の両方をサポートしています。現在、Astro は静的サイト生成(SSG)のみをサポートしています。 - -## Eleventy vs. Astro - -[Eleventy](https://www.11ty.dev/) は、Node.js を採用した人気の高い静的サイトビルダーです。 - -Eleventy は、いくつかの [古い HTML テンプレート言語](https://www.11ty.dev/docs/languages/) を使用して Web サイトをレンダリングします。サポートしているテンプレート言語には、Nunjucks、Liquid、Pug、EJS などがあります。Astro では、お気に入りの UI コンポーネントライブラリ（React、Preact、Vue、Svelte など）や、HTML + JSX に似た、組み込みのコンポーネント構文を使ってページを作成できます。 Eleventy は、モダンな UI コンポーネントを使った HTML のテンプレート化には対応していません。 - -### Eleventy と Astro のパフォーマンス比較 - -Eleventy のコンセプトは、Astro の「クライアントサイドの JavaScript を最小限にする」という Web 開発のアプローチと一致しています。Eleventy と Astro は、どちらも同様に、デフォルトでは JavaScript を使用しないパフォーマンスを基本として提供します。 - -Eleventy は、JavaScript を完全に避けることでこれを実現しています。Eleventy のサイトは、往々にして JavaScript をほとんど、あるいはまったく使わずに書かれています。これは、クライアントサイドの JavaScript が必要になったときに問題になります。Eleventy のために独自のアセットビルドパイプラインを作成することは、あなた次第です。そのため、バンドルやミニファイなどの複雑な最適化を自分で設定しなければならず、時間がかかります。 - -これに対して、Astro は、クライアントサイドの JavaScript と CSS を自動的に構築します。Astro では、ページ内の不要な JavaScript を自動的に外し、必要な個々のコンポーネントのみをハイドレーションします。この機能を[パーシャルハイドレーション](/core-concepts/component-hydration)と呼びます。この機能は、Eleventy でも自分で用意すれば実現可能ですが、Astro では、デフォルトで組み込まれています。 - -## Gatsby vs. Astro - -[Gatsby](https://www.gatsbyjs.com/)は、React 向けの人気の Web サイト＆アプリケーションフレームワークです。 - -Gatsby は React を使って Web サイトをレンダリングします。Astro はより柔軟で、人気のあるコンポーネントライブラリ（React、Preact、Vue、Svelte、Solid など）や、HTML+JSX に似た Astro の HTML ライクなコンポーネント構文を使って UI を自由に構築できます。 - -Gatsby v4 は、インクリメンタル・リビルドによる静的サイト生成 (SSG)、Deferred Static Generation (DSG)、サーバーサイドレンダリング (SSR)のすべてをサポートしています。現在、Astro は静的サイト生成（SSG）のみをサポートしています。 - -Gatsby では、サイトのすべてのコンテンツを扱うために、カスタムの GraphQL API が必要です。開発者の中にはこのモデルを好む人もいますが、Gatsby に対する一般的な批判は、このモデルが複雑になりすぎて、とくにサイトの成長に伴って維持するのが難しくなるというものです。Astro では、GraphQL を必要とせず、代わりに（`fetch()`やトップレベル`await`のような）使い慣れた API を提供し、データが必要とされる場所の近くでデータを読み込めます。 - -### Gastby と Astro のパフォーマンス比較 - -ほとんどの場合、Astro の Web サイトは、Gatsby の Web サイトよりも大幅に速く読み込まれます。これは、Astro がページから不要な JavaScript を自動的に外し、必要な個々のコンポーネントのみをハイドレーションするためです。この機能を[パーシャルハイドレーション](/core-concepts/component-hydration)と呼びます。 - -Gatsby はパーシャルハイドレーションをサポートしておらず、ページコンテンツのほとんどが静的なものであっても、ユーザーがブラウザでページ全体を読み込んで再ハイドレーションするようになっています。これにより、ページの読み込みが遅くなり、Web サイトのパフォーマンスが低下します。Gatsby には、ページからすべての JavaScript を削除するための[コミュニティプラグイン](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/)がありますが、これでは多くの Web サイトが壊れてしまいます。このプラグインを使うなら、各ページのインタラクティブ性について、「すべてか無か」の決断を迫られることになります。 - -Gatsby には素晴らしいプラグインエコシステムがあり、ニーズに応じて Gatsby をより良い選択にすることができます。[gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)は、画像の最適化のための人気のあるプラグインで、画像を多用する Web サイトには Gatsby が適しているかもしれません。 - -### ケーススタディ：ドキュメントサイトの構築 - -[gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/) は、Gatsby で構築された Gatsby の公式ドキュメントサイトです。この Web サイトは、Astro の公式ドキュメント Web サイトと比較して、十分に似たデザインと機能セットを提供しています。これにより、この一般的なユースケースにおける、2 つのサイトビルダーの**大雑把に実際のサイト**での比較が可能になりました。 - -- **Gatsby パフォーマンススコア**: 100 点満点中 64 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.gatsbyjs.com%2Fdocs%2Fquick-start%2F) -- **Astro パフォーマンススコア**: 100 点満点中 99 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -このパフォーマンス差の大きな理由の 1 つは、Astro の JavaScript ペイロードの小ささです。[gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/)では、最初のページ読み込み時に**417kb**の JavaScript をロードするのに対し、[docs.astro.build](https://docs.astro.build)では、最初の読み込み後に**78.7kb**（全体で 81%の JavaScript 削減）の JavaScript をロードします。 - -## Hugo vs. Astro - -[Hugo](https://gohugo.io/) は、人気のある静的サイトジェネレーターで、Go で書かれています。 - -Hugo は独自の[テンプレート言語](https://gohugo.io/templates/introduction/)を使って Web サイトを作成します。Astro では、お気に入りの UI コンポーネントライブラリ（React、Preact、Vue、Svelte など）や、HTML+JSX に似た組み込みのコンポーネント構文を使ってページを作成できます。Hugo は、モダンな UI コンポーネントを使った HTML のテンプレート化をサポートしていません。 - -### Hugo と Astro のパフォーマンスの比較 - -Hugo のコンセプトは、Astro の「クライアントサイドの JavaScript を最小限にする」という Web 開発のアプローチと一致しています。Hugo と Astro は、どちらも同様に、デフォルトで JavaScript を使用しないパフォーマンスを基本として提供します。 - -Hugo も Astro も、JavaScript のビルド、バンドル、ミニファイをサポートします。Astro は、ページから不要な JavaScript を自動的に外し、必要な個々のコンポーネントのみをハイドレーションします。この機能を[パーシャルハイドレーション](/core-concepts/component-hydration)と呼びます。Hugo でもこの機能を実現できますが、Astro ではデフォルトでこの機能が組み込まれています。 - -## Jekyll vs. Astro - -[Jekyll](https://jekyllrb.com/) は、人気の高い静的サイトジェネレーターで、Ruby で書かれています。 - -Jekyll は、[Liquid と呼ばれる古いテンプレート言語](https://jekyllrb.com/docs/liquid/)を使って Web サイトをレンダリングします。Astro は、お気に入りの UI コンポーネントライブラリ（React、Preact、Vue、Svelte など）や、HTML + JSX に似た組み込みのコンポーネント構文を使ってページを作成できます。Jekyll は、モダンな UI コンポーネントを使った HTML のテンプレート化をサポートしていません。 - -### Jekyll と Astro のパフォーマンス比較 - -Jekyll のコンセプトは、Astro の「クライアントサイドの JavaScript を最小限にする」という Web 開発アプローチと一致しています。Jekyll と Astro は、どちらも同じように、デフォルトで JavaScript を使用しないパフォーマンスを基本として提供します。 - -Jekyll は、JavaScript を完全に避けることでこれを実現しています。Jekyll のサイトは、往々にして JavaScript をほとんど、あるいはまったく使わずに書かれていて、代わりにサーバーサイドでの HTML 生成を推進しています。これは、クライアントサイドの JavaScript が必要になったとき、問題になります。Jekyll のために独自のビルドパイプラインを作成するのはあなた次第です。そのため、バンドルやミニファイなどの最適化を自分で設定しなければならず、手間がかかります。 - -これに対して、Astro は、クライアントサイドの JavaScript を自動的に構築します。Astro では、必要最低限の JavaScript のみを、最小化、バンドル、最適化してブラウザに送信します。これは、Jekyll でも実現可能ですが、Astro ではデフォルトで組み込まれています。 - -## SvelteKit vs. Astro - -[SvelteKit](https://kit.svelte.dev/) は、Svelte 用の Web サイト＆アプリケーションフレームワークとして人気があります。 - -SvelteKit は、Svelte を使って Web サイトを生成します。Astro はより柔軟で、人気のあるコンポーネントライブラリ（React、Preact、Vue、Svelte、Solid など）や、HTML+JSX に似た Astro の HTML ライクなコンポーネント構文を使って UI を自由に構築できます。 - -SvelteKit も Astro も、Web サイトを構築するためのフレームワークです。SvelteKit は動的な Web サイト（ダッシュボードや受信トレイなど）に適しており、Astro は静的な Web サイト（コンテンツや e コマースサイトなど）に適しています。 - -SvelteKit は、静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）の両方をサポートしています。現在、Astro は静的サイト生成（SSG）のみをサポートしています。 - -### SvelteKit と Astro のパフォーマンス比較 - -ほとんどの場合、Astro の Web サイトは SvelteKit の Web サイトよりも速く読み込まれます。これは、Astro がページから不要な JavaScript を自動的に取り除き、必要な個々のコンポーネントのみをハイドレーションするためです。この機能は、[パーシャルハイドレーション](/core-concepts/component-hydration)と呼ばれています。 - -SvelteKit はパーシャルハイドレーションに対応しておらず、ページコンテンツのほとんどが静的なものであっても、ユーザーがブラウザでページ全体を読み込んで再ハイドレーションするようになっています。これにより、ページの読み込みが遅くなり、Web サイトのパフォーマンスが低下します。SvelteKit は、[ページレベルの静的なゼロ JavaScript ページ](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate)をサポートしています。しかし、ページ上の個々のコンポーネントをハイドレートするためのサポートは予定されていません。このため、各ページのインタラクティブ性については、「すべてか無か」の判断を迫られることになります。 - -### ケーススタディ：ドキュメントサイトの構築 - -[kit.svelte.dev](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) は、SvelteKit で構築された SvelteKit の公式ドキュメントサイトです。この Web サイトは、Astro の公式ドキュメント Web サイトと比較して、十分に似たデザインと機能を提供しています。これにより、この一般的なユースケースにおける 2 つのサイトビルダーの**大雑把に実際のサイト**での比較ができます。 - -今回テストした 2 つのサイトの注目すべき違いが 1 つあります。SvelteKit のドキュメントは 1 つのページとして提供されるのに対し、Astro のドキュメントは複数のページに分かれています。この大きなコンテンツペイロードは、ツール自体とは関係なく、パフォーマンスに若干のマイナス影響を与えるはずです。 - -- **SvelteKit パフォーマンススコア**: 100 点満点中 92 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fkit.svelte.dev%2Fdocs) -- **Astro パフォーマンススコア**: 100 点満点中 99 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -このテストでは、SvelteKit は Astro と同等のパフォーマンスを発揮しました。 - -## Next.js vs. Astro - -[Next.js](https://nextjs.org/) は、React 用の Web サイト＆アプリケーションフレームワークとして人気があります。 - -Next.js は React を使って Web サイトをレンダリングします。Astro はより柔軟で、人気のあるコンポーネントライブラリ（React、Preact、Vue、Svelte、Solid など）や、HTML+JSX に似た Astro の HTML ライクなコンポーネント構文を使って UI を自由に構築できます。 - -Next.js も Astro も、Web サイトを構築するためのフレームワークです。Next.js はダッシュボードや受信トレイなどの動的な Web サイトに適しており、Astro はコンテンツや e コマースサイトなどの静的な Web サイトに適しています。 - -Next.js は静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）の両方をサポートしています。現在、Astro は静的サイト生成（SSG）のみをサポートしています。 - -### Next.js と Astro のパフォーマンス比較 - -ほとんどの場合、Astro の Web サイトは Next.js の Web サイトよりも圧倒的に速く読み込まれます。これは、Astro がページから不要な JavaScript を自動的に取り除き、必要な個々のコンポーネントのみをハイドレーションするためです。この機能を[パーシャルハイドレーション](/core-concepts/component-hydration)と呼びます。 - -Next.js はパーシャルハイドレーションをサポートしておらず、ページコンテンツのほとんどが静的なものであっても、ユーザーがブラウザでページ全体を読み込んで再ハイドレーションするようになっています。そのため、ページの読み込みが遅くなり、Web サイトのパフォーマンスが低下します。Next.js は、完全にスタティックな、JavaScript を使用しないページを[実験的にサポート](https://piccalil.li/blog/new-year-new-website/#heading-no-client-side-react-code) しています。しかし、ページ上の個々のコンポーネントをハイドレートするためのサポートは予定されていません。そのため、各ページのインタラクティブ性については、「すべてか無か」の判断を迫られることになります。 - -Next.js には画像を最適化する機能が組み込まれているため、画像を多用する Web サイトでは Next.js の方が適しているかもしれません。 - -### ケーススタディ：ドキュメントサイトの構築 - -[nextjs.org/docs](https://nextjs.org/docs/getting-started) は、Next.js で構築された公式の Next.js ドキュメントサイトです。この Web サイトは、Astro の公式ドキュメントサイトと比較しても、十分に似たデザインと機能を備えています。これにより、この一般的なユースケースにおける 2 つのサイトビルダーの**大雑把に実際のサイト**での比較ができます。 - -- **Next.js パフォーマンススコア**: 100 点満点中 59 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnextjs.org%2Fdocs%2Fgetting-started) -- **Astro パフォーマンススコア**: 100 点満点中 99 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -このパフォーマンス差の大きな理由の 1 つは、Astro の JavaScript ペイロードの小ささです。 -[nextjs.org/docs](https://nextjs.org/docs/getting-started)が最初のページ読み込み時に**463kb**の JavaScript をロードするのに対し、 [docs.astro.build](https://docs.astro.build)は最初の読み込み後に**78.7kb**（全体では 83％の JavaScript 削減）の JavaScript をロードします。 - -## Nuxt vs. Astro - -[Nuxt](https://nuxtjs.org/) は、人気のある Vue の Web サイト＆アプリケーションフレームワークです。Next.js に似ています。 - -Nuxt は Vue を使って Web サイトを生成します。Astro はより柔軟で、人気のあるコンポーネントライブラリ（React、Preact、Vue、Svelte、Solid など）や、HTML+JSX に似た Astro の HTML ライクなコンポーネント構文を使って UI を自由に構築できます。 - -Nuxt も Astro も、Web サイトを構築するためのフレームワークです。Nuxt は動的な Web サイト（ダッシュボードや受信トレイなど）に最適で、Astro は静的な Web サイト（コンテンツや e コマースサイトなど）に最適です。 - -Nuxt は静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）の両方をサポートしています。現在、Astro は静的サイト生成（SSG）のみをサポートしています。 - -### Nuxt と Astro のパフォーマンス比較 - -ほとんどの場合、Astro の Web サイトは Nuxt の Web サイトよりも圧倒的に速く読み込まれます。これは、Astro がページから不要な JavaScript を自動的に取り除き、必要な個々のコンポーネントのみをハイドレーションするためです。この機能は、[パーシャルハイドレーション](/core-concepts/component-hydration)と呼ばれています。 - -Nuxt はパーシャルハイドレーションに対応しておらず、ページコンテンツのほとんどが静的なものであっても、ユーザーがブラウザでページ全体を読み込んで再ハイドレーションします。これにより、ページの読み込みが遅くなり、Web サイトのパフォーマンスが低下します。この動作を無効にする方法は、Nuxt にはありません。 - -Nuxt には優れた画像最適化機能が内蔵されているため、画像を多用する Web サイトでは Nuxt の方が適している場合があります。 - -### ケーススタディ：ドキュメントサイトの構築 - -[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) は、Nuxt で構築された Nuxt の公式ドキュメントサイトです。この Web サイトは、Astro の公式ドキュメントサイトと比較しても、十分に似たデザインと機能を備えています。これにより、2 つのサイトビルダーを、この一般的なユースケースにおいて、**大雑把に実際のサイト**で比較できます。 - -- **Nuxt パフォーマンススコア**: 100 点満点中 48 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnuxtjs.org%2Fdocs%2F2.x%2Fget-started%2Finstallation) -- **Astro パフォーマンススコア**: 100 点満点中 99 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -このパフォーマンスの差の大きな理由の 1 つは、Astro の JavaScript ペイロードの小ささです。 -[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation)が最初のページ読み込み時に **469kb** の JavaScript をロードするのに対し、 [docs.astro.build](https://docs.astro.build) は最初の読み込み後に **78.7kb**（83%減）の JavaScript をロードします。 - -## VuePress vs. Astro - -[VuePress](https://vuepress.vuejs.org/guide/) は、Vue.js の作者が開発した、人気の高いドキュメント Web サイト生成ツールです。VuePress は Vue.js を使用して Web サイトの UI を生成し、Astro は React、Vue.js、Svelte、生の HTML テンプレートをサポートしています。 - -VuePress は、ドキュメントサイト用に設計されており、Astro ではサポートしていないドキュメントに特化した Web サイトの機能がいくつか組み込まれています。その代わり、Astro では、ドキュメントに特化した機能を公式の [`docs`](https://github.com/snowpackjs/astro/tree/main/examples/docs)テーマで提供しており、サイトに使用できます。この Web サイトは、そのテンプレートを使って作られています。 - -Vue.js の作者である Evan You 氏は現在、[VitePress](https://vitepress.vuejs.org/)という VuePress の新バージョンを開発しています。VuePress に代わるモダンなツールをお求めの方は、なぜ、VitePress がより良い選択肢なのか、[Evan 氏の投稿](https://github.com/snowpackjs/astro/issues/1159#issue-974035962)をご覧ください。 - -### VuePress と Astro のパフォーマンス比較 - -ほとんどの場合、Astro の Web サイトは VuePress の Web サイトよりも圧倒的に速く読み込まれます。これは、Astro がページから不要な JavaScript を自動的に外し、必要な個々のコンポーネントのみをハイドレーションするためです。この機能は、[パーシャルハイドレーション](/core-concepts/component-hydration)と呼ばれています。 - -VuePress はパーシャルハイドレーションに対応しておらず、ページコンテンツのほとんどが静的なものであっても、ユーザーがブラウザでページ全体を読み込んで再ハイドレーションするようになっています。これにより、ページの読み込みが遅くなり、Web サイトのパフォーマンスが低下します。VuePress では、この動作を無効にする方法はありません。 - -### ケーススタディ：ドキュメントサイトの構築 - -[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) は、VuePress で構築された、VuePress の公式ドキュメントサイトです。このサイトは、Astro の公式ドキュメントサイトと比較しても、十分に似たデザインと機能セットを提供しています。これにより、2 つのサイトビルダーを、この一般的なユースケースにおいて、**大雑把に実際のサイト**で比較できます。 - -- **Vuepress パフォーマンススコア**: 100 点満点中 63 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fvuepress.vuejs.org%2Fguide%2F) -- **Astro パフォーマンススコア**: 100 点満点中 99 点 [（テスト結果）](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started) - -このパフォーマンス差の大きな理由の 1 つは、Astro の JavaScript ペイロードの小ささです。[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) が最初のページ読み込みで **166kb** の JavaScript をロードするのに対し、 [docs.astro.build](https://docs.astro.build)は最初の読み込み後に **78.7kb**（全体で 53％の JavaScript 削減）の JavaScript をロードします。 - -## Zola vs. Astro - -Zola は、Rust を使った人気の高い高速な静的サイトジェネレーターです。 - -Zola は [Tera](https://tera.netlify.app/) を使って Web サイトを生成します。Astro は、お気に入りの UI コンポーネントライブラリ（React、Preact、Vue、Svelte など）や、HTML + JSX に似た組み込みのコンポーネント構文を使ってページを作成できます。Zola はモダンな UI コンポーネントを使った HTML のテンプレート化には対応していません。 - -### Zola と Astro のパフォーマンス比較 - -コンセプト的には、Zola は Astro の「クライアントサイドの JavaScript を最小限にする」という Web 開発のアプローチと一致しています。Zola と Astro は、どちらも似たような、デフォルトでは JavaScript を使用しないパフォーマンスを基本として提供します。 - -Astro は、JavaScript のビルド、バンドル、ミニファイをサポートしています。Zola では、JavaScript をバンドルして処理するために、webpack のような別のビルドツールを使用する必要があります。Astro では、ページから不要な JavaScript を自動的に外し、必要な個々のコンポーネントのみをハイドレーションします。この機能を[パーシャルハイドレーション](/core-concepts/component-hydration)と呼びます。Zola でもこの機能を実現することは可能ですが、Astro ではデフォルトでこの機能が組み込まれています。 diff --git a/docs/src/pages/ja/getting-started.md b/docs/src/pages/ja/getting-started.md deleted file mode 100644 index 8a7cbb768..000000000 --- a/docs/src/pages/ja/getting-started.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: はじめに -lang: ja ---- - -Astro（アストロ）は、モダンな静的サイトジェネレーターです。Astro については、[ホームページ](https://astro.build/)や[リリース記事](https://astro.build/blog/introducing-astro)をご覧ください。このページでは、Astro のドキュメントおよび関連リソースの概要を紹介します。 - -Astro の簡単な概要を知りたい方は[ホームページ](https://astro.build/)をご覧ください。 - -## Astro を試す - -もっとも簡単な Astro を試す方法は、あなたのマシンの新しいディレクトリで `npm init astro` を実行することです。新しい Astro プロジェクトを立ち上げる際には、CLI ウィザードがサポートしてくれます。 - -5 つの簡単なステップで Astro を使い始めるには、[クイックスタートガイド](/ja/quick-start)をご覧ください。 - -また、[インストールガイド](/ja/installation)では、Astro のセットアップ方法を詳しく解説しています。 - -## サンプルプロジェクト - -サンプルを使って Astro を学びたい方は、GitHub にある[全サンプル](https://github.com/withastro/astro/tree/main/examples)をご覧ください。 - -これらのサンプルは、`--template` という CLI フラグを付けて `npm init astro` を実行すると、ローカルマシンでチェックアウトできます。また、 `--template` フラグは、サードパーティのコミュニティテンプレートもサポートしています。 - -```bash -# 公式テンプレートを使用して、initウィザードを実行 -npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]. -# コミュニティテンプレートを使用して、initウィザードを実行 -npm init astro -- --template [GITHUB_USER]/[REPO_NAME]を実行します。 -npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example -``` - -### オンラインコードエディター - -ブラウザで Astro を使ってみたいという方は、[astro.new](https://astro.new/)にある UI を使ってすぐに新しい Astro プロジェクトを立ち上げられます。 - -Stackblitz、CodeSandbox、Gitpod、GitHub Codespaces などのオンラインコードエディターでも Astro を試せます。[サンプル集](https://github.com/snowpackjs/astro/tree/main/examples)にあるサンプルの中の「Open in Stackblitz」リンクをクリックしてください。また、[ここをクリック](https://stackblitz.com/fork/astro)すると、[Stackblitz](https://stackblitz.com/fork/astro)で新しいプロジェクトを始められます。 - -## Astro を学ぶ - -Astro には、さまざまなバックグラウンドを持った人が集まっており、学習スタイルもさまざまです。このセクションでは、より理論的なアプローチや実践的なアプローチなど、さまざまな学習スタイルをご紹介していますので、参考になれば幸いです。 - -- 実際にやってみて学びたいという方は、まず[サンプルライブラリ](https://github.com/withastro/astro/tree/main/examples)から始めてください。 -- また、コンセプトを段階的に学びたい方は、[基本コンセプトとガイド](/core-concepts/project-structure)をご覧ください。 - -他の慣れない技術と同様、Astro にも若干の習得が必要です。しかし、練習と忍耐力があれば、すぐに使いこなせるようになること間違いなしでしょう。 - -### `.astro` 構文の学習 - -Astro の学習を始めると、多くのファイルに `.astro` という拡張子がついているのを目にします。これは**Astro コンポーネント構文**といって、Astro がテンプレートとして使用する HTML に似た特殊なファイル形式です。HTML や JSX の経験がある人には馴染みやすいように設計されています。 - -[Astro コンポーネント](/core-concepts/astro-components)のガイドでは、Astro コンポーネント構文を紹介していますので、これを参考にしてください。 - -### API リファレンス - -このドキュメントセクションは、特定の Astro API の詳細を知りたい場合に役立ちます。たとえば、[設定リファレンス](/reference/configuration-reference)では、利用可能なすべての設定オプションがリストアップされています。[ビルトインコンポーネントリファレンス](/reference/builtin-components)では、`<Markdown />` や `<Code />` など、利用可能なすべてのコアコンポーネントがリストアップされています。 - -### バージョン管理されたドキュメント - -このドキュメントは、常に最新の安定版の Astro を反映しています。v1.0 になったら、バージョン管理されたドキュメントを見れるようになる予定です。 - -## 情報を入手する - -Astro チームからの最新情報は、[@astrodotbuild](https://twitter.com/astrodotbuild)の Twitter アカウントが公式に発信しています。 - -また、[Discord コミュニティ](https://astro.build/chat)の #announcements チャンネルにもリリースのお知らせを投稿しています。 - -すべてのリリースがブログ記事で紹介されるわけではありませんが、[Astro リポジトリの `CHANGELOG.md` ファイル](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)には、すべてのリリースの詳細な変更履歴が記載されています。 - -## 何か足りない？ - -ドキュメントに何か足りないところがあったり、わかりにくいところを見つけたら、改善のための提案を[ドキュメントの Issue として提出してください](https://github.com/withastro/astro/issues/new/choose)。または [@astrodotbuild](https://twitter.com/astrodotbuild) の Twitter アカウントにつぶやいてください。皆様のご意見をお待ちしております。 - -## クレジット - -このスタートアップガイドは、[React](https://reactjs.org/)のスタートアップガイドを元にしています。 diff --git a/docs/src/pages/ja/installation.md b/docs/src/pages/ja/installation.md deleted file mode 100644 index 80757433f..000000000 --- a/docs/src/pages/ja/installation.md +++ /dev/null @@ -1,179 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: インストール -description: npm、pnpm、YarnでのAstroのインストール方法 -lang: ja ---- - -新しいプロジェクトに Astro をインストールするには、いくつかの方法があります。 - -## 事前準備 - -- **Node.js** -`v14.15.0`、`v16.0.0`、またはそれ以上。 -- **テキストエディター** - [VS Code](https://code.visualstudio.com/) と [公式 Astro extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)をオススメします。 -- **ターミナル** - Astro は主にターミナルのコマンドラインからアクセスします。 - -解説のため、このドキュメントでは [`npm`](https://www.npmjs.com/) を使用しますが、npm の代わりに [`Yarn`](https://yarnpkg.com/) や [`pnpm`](https://pnpm.io/) を使用してもかまいません。 - -## ウィザードによる作成 - -新しいプロジェクトに Astro をインストールするには、`npm init astro`がもっとも簡単な方法です。ターミナルでこのコマンドを実行すると、新しいプロジェクトのセットアップを支援する`create-astro`インストールウィザードが起動します。 - -```shell -# npm -npm init astro - -# Yarn -yarn create astro - -# pnpm -pnpm create astro -``` - -[`create-astro`](https://github.com/withastro/astro/tree/main/packages/create-astro)ウィザードでは、[スターターテンプレート](https://github.com/withastro/astro/tree/main/examples)から好きなものを選べます。代わりに GitHub から自分の Astro プロジェクトを直接インポートもできます。 - -```bash -# 注: "my-astro-project" はあなたのプロジェクト名に置き換えてください。 - -# npm 6.x -npm init astro my-astro-project --template starter -# npm 7+ (追加でダブルダッシュが必要) -npm init astro my-astro-project -- --template starter -# Yarn -yarn create astro my-astro-project --template starter -# pnpm -pnpm create astro my-astro-project --template starter -# サードパーティのテンプレートを使用 -npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME] -# パスを指定してサードパーティのテンプレートを使用 -npm init astro my-astro-project -- --template [GITHUB_USER]/[REPO_NAME]/path/to/template -``` - -`create-astro` でプロジェクトを作成したら、npm やお好みのパッケージマネージャーを使って、プロジェクトの依存関係をインストールすることを忘れないでください。この例では、npm を使用します。 - -```bash -npm install -``` - -これで、Astro プロジェクトを[スタート](#astro-の開始)できます。Astro の実行に必要なファイルの準備ができたら、プロジェクトを[ビルド](#astro-のビルド)できます。 Astro はアプリケーションをパッケージ化し、静的ファイルを用意しますので、好きなホスティングサービスに[デプロイ](/guides/deploy)できます。 - -## 手動インストール - -Astro は、`create-astro`ウィザードを使わなくてもインストールできます。以下に、Astro を動作させるために必要な追加手順を示します。 - -### プロジェクトのセットアップ - -```bash -# 新しいディレクトリを作成し、その中に移動してください。 -mkdir my-astro-project -cd my-astro-project -``` - -プロジェクト名で空のディレクトリを作成し、その中に移動します。 - -### `package.json` の作成 - -```bash -# This command will create a basic package.json for you -npm init --yes -``` - -Astro は、npm パッケージ・エコシステム全体を扱うように設計されています。 -これは、プロジェクトのルートにある「package.json」と呼ばれるプロジェクト・マニフェストで管理されます。もし、`package.json`ファイルに慣れていないのであれば、[npm のドキュメント](https://docs.npmjs.com/creating-a-package-json-file)を参照することを強くオススメします。 - -### Astro のインストール - -上記の手順で、「package.json」ファイルのあるディレクトリが完成しました。これで、プロジェクト内に Astro をインストールできます。 - -```bash -npm install astro -``` - -次に、`npm init`が作成してくれた`package.json`ファイルの"scripts"セクションを、以下のように置き換えます。 - -```diff - "scripts": { -- "test": "echo \"Error: no test specified\" && exit 1" -+ "dev": "astro dev", -+ "build": "astro build", -+ "preview": "astro preview" - }, -} -``` - -[`dev`](#astro-の開始)コマンドは、Astro Dev Server（`http://localhost:3000`）を起動します。プロジェクトの準備ができたら、[`build`](#astro-のビルド)コマンドで、プロジェクトを`dist/`ディレクトリに出力します。Astro のデプロイについては、[デプロイガイド](/guides/deploy)をご覧ください。 - -### 最初のページを作る - -お気に入りのテキストエディターを開き、プロジェクト内に新規ファイルを作成します。 - -1. `src/pages/index.astro` に新しいファイルを作成する -2. 以下のスニペットをコピー＆ペーストする（`---`のダッシュも含みます） - -```astro ---- -// (---)のコードフェンスの間には、JS/TSコードが書かれています。 -// これらのコードはサーバー上でのみ実行されます！ -console.log('これはターミナルに表示されます') ---- - -<html> - <body> - <h1>Hello, World!</h1> - </body> -</html> - -<style lang='css||scss'> - body{ - h1{ - color:orange; - } - } -</style> - -<script> - // ここに書かれたJSコードは、すべてブラウザ上で実行されます。 - console.log('これはデベロッパーツールに表示されます') -</script> -``` - -上記は、Astro コンポーネント構文の一例で、HTML と JSX の両方で構成されています。 - -`src/pages`ディレクトリには、さらに多くのページを作成でき、Astro はそのファイル名を使ってサイトに新しいページを作成します。たとえば、`src/pages/about.astro`に（前のスニペットを再利用して）新しいファイルを作成すると、`http://localhost/about`という URL に新しいページが作成されます。 - -## [Astro の開始](#astro-の開始) - -```bash -npm run dev -``` - -これで Astro は、`http://localhost:3000`でアプリケーションのサービスを開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。 - -開発の進捗状況をローカルネットワーク上で共有したり、スマートフォンからアプリを確認したければ、以下の[snowpack](https://www.snowpack.dev/reference/configuration#devoptionshostname)オプションを`astro.config.mjs`に追加してください。 - -```js -devOptions: { - hostname: '0.0.0.0'; -} -``` - -## [Astro のビルド](#astro-のビルド) - -```bash -npm run build -``` - -このコマンドを実行すると、Astro はサイトを構築し、ディスクに直接保存するように指示します。 -`dist/`ディレクトリをみると構築されたアプリケーションが確認できます。 - -## 次のステップ - -これで開発を始める準備が整いました。 - -Astro がどのように機能しているかをもっとよく知ることを強くオススメします。そのためには、これらのドキュメントを探索することを検討してみてください。 - -📚 Astro のプロジェクト構造については、[プロジェクト構造ガイド](/core-concepts/project-structure)をご覧ください。 - -📚 Astro のコンポーネント構文については[Astro コンポーネントガイド](/core-concepts/astro-components)を参照してください。 - -📚 Astro のファイルベースのルーティングについては、[ルーティングガイド](core-concepts/astro-pages)を参照してください。 diff --git a/docs/src/pages/ja/quick-start.md b/docs/src/pages/ja/quick-start.md deleted file mode 100644 index bfb0e307f..000000000 --- a/docs/src/pages/ja/quick-start.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -layout: ~/layouts/MainLayout.astro -title: クイックスタート -lang: ja ---- - -```shell -# 必須条件: Node.jsが14.15.0+、または16+であることを確認する。 -node --version - -# 新しいプロジェクトディレクトリを作成し、その中に直接移動します -mkdir my-astro-project && cd $_ - -# 必要なファイルの準備 -npm init astro - -# 依存関係のインストール -npm install - -# 開発を始めよう -npm run dev -``` - -```shell -# 準備ができたら、`dist/`に静的サイトを構築します。 -npm run build -``` - -はじめて Astro をインストールして使用する場合は、[インストールガイド](/ja/installation)をご覧ください。 - -サンプルを見ながら学びたいという方は、GitHub にある[全サンプル](https://github.com/withastro/astro/tree/main/examples)をご覧ください。 `npm init astro -- --template "EXAMPLE_NAME"` を実行すれば、これらのサンプルをローカルにチェックアウトできます。 - -## プロジェクトの開始 - -ターミナルでプロジェクトのディレクトリに移動し、次のコマンドを入力します。 - -```bash -npm run dev -``` - -これで Astro は、 [http://localhost:3000](http://localhost:3000)で、アプリケーションの提供を開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。 - -サーバーは、あなたの`src/`ディレクトリにあるファイルの変更を常に監視しているので、開発中に変更してもアプリケーションを再起動する必要はありません。 - -## プロジェクトのビルド - -プロジェクトをビルドするには、あなたのディレクトリ内で、ターミナルに次のビルドコマンドを入力します。 - -```bash -npm run build -``` - -このコマンドを実行すると、Astro はサイトを構築し、ディスクに直接保存するように指示します。これで、`dist/`ディレクトリにアプリケーションができあがりました。 - -## プロジェクトのデプロイ - -Astro のサイトは静的なので、お好みのホストにデプロイできます。 - -- [AWS S3 bucket](https://aws.amazon.com/s3/) -- [Google Firebase](https://firebase.google.com/) -- [Netlify](https://www.netlify.com/) -- [Vercel](https://vercel.com/) -- もっと詳しい Astro のデプロイについては、[デプロイガイド](/guides/deploy)をご覧ください。 - -## 次のステップ - -これで開発を始める準備が整いました。 - -次のステップでは、Astro の仕組みをより深く理解することをオススメします。これらのドキュメントを探索することを検討してみてください。 - -📚 Astro のプロジェクト構造については、[プロジェクト構造ガイド](/core-concepts/project-structure)をご覧ください。 - -📚 Astro のコンポーネント構文については、[Astro コンポーネントガイド](/core-concepts/astro-components)を参照してください。 - -📚 Astro のファイルベースのルーティングについては、[ルーティングガイド](/core-concepts/astro-pages)を参照してください。 diff --git a/docs/src/pages/ja/themes.astro b/docs/src/pages/ja/themes.astro deleted file mode 100644 index 5a64cf826..000000000 --- a/docs/src/pages/ja/themes.astro +++ /dev/null @@ -1,53 +0,0 @@ ---- -import Layout from '../../layouts/MainLayout.astro'; -import Card from '../../components/Card.astro'; -import { Markdown } from 'astro/components'; -import themes from '../../data/themes.json'; -import components from '../../data/components.json'; ---- - -<Layout content={{ title: 'テーマ' }} hideRightSidebar> - <style> - .card-grid { - display: grid; - grid-column-gap: 15px; - grid-row-gap: 15px; - grid-auto-flow: dense; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - } - </style> - <Markdown> - ## 注目のテーマ - </Markdown> - <div class="card-grid"> - {themes.featured.map((item) => <Card data={item} />)} - </div> - <Markdown> - ## 公式テーマ - - Astro では、ドキュメントサイトやポートフォリオなど、いくつかの公式テーマを用意しています。 - </Markdown> - <div class="card-grid"> - {themes.official.map((item) => <Card data={item} />)} - </div> - <Markdown> - ## コミュニティテーマ - - コミュニティが開発したテーマをご覧ください。 - </Markdown> - <div class="card-grid"> - {themes.community.map((item) => <Card data={item} />)} - </div> - <Markdown> - ## 注目のパッケージ - - 私たちのパッケージエコシステムは成長し続けています。注目のコミュニティパッケージをご覧ください。コレクション全体は[npm](https://www.npmjs.com/search?q=keywords%3Aastro-component)で検索できます。 - </Markdown> - <div class="card-grid"> - {components.community.map((item) => <Card data={item} />)} - </div> - <Markdown> - > 自分のテーマを紹介したい場合は、[Discord でシェアしてください！](https://astro.build/chat) - > `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。 - </Markdown> -</Layout> |