Skip to content
Open
Show file tree
Hide file tree
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
4 changes: 2 additions & 2 deletions src/content/docs/ja/basics/astro-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Astroコンポーネントは非常に柔軟です。多くの場合、Astroコ

Astroコンポーネントについて知っておくべきもっとも重要なことは、**クライアント上でレンダリングされない**ということです。コンポーネントはビルド時または[サーバーサイドレンダリング(SSR)](/ja/guides/on-demand-rendering/)によりオンデマンドにレンダリングされます。コンポーネントのフロントマターの内部にJavaScriptコードを含められますが、それらはすべて、ユーザーのブラウザに送られる最終的なページからは取り除かれます。その結果、デフォルトではJavaScriptが含められることはなく、より高速なサイトが実現します。

Astroコンポーネントがクライアントサイドでインタラクティビティを必要とする場合は、[標準のHTML`<script>`タグ](/ja/guides/client-side-scripts/)や[UIフレームワークのコンポーネント](/ja/guides/framework-components/#インタラクティブなコンポーネント)を追加できます。
Astroコンポーネントがクライアントサイドでインタラクティビティを必要とする場合は、[標準のHTML`<script>`タグ](/ja/guides/client-side-scripts/)や[UIフレームワークのコンポーネント](/ja/guides/framework-components/#hydrating-interactive-components)を追加できます。

クライアントサイドでパーソナライズされた動的なコンテンツをレンダリングする必要があるコンポーネントの場合、[サーバーディレクティブ](/ja/reference/directives-reference/#サーバーディレクティブ)を追加することでサーバーレンダリングを遅延させることができます。これらの「サーバーアイランド」は、コンテンツが利用可能になった時点でレンダリングされ、ページ全体の読み込みを遅らせることはありません。

Expand Down Expand Up @@ -72,7 +72,7 @@ AstroコンポーネントスクリプトはTypeScriptで記述されており

ここにプレーンなHTMLを書けば、そのコンポーネントはAstroのページでインポートされて使用される際にそのHTMLをレンダリングします。

ただし、[Astroのコンポーネントテンプレート構文](/ja/reference/astro-syntax/)は、**JavaScriptの式**、Astroの[`<style>`](/ja/guides/styling/#astroでのスタイリング)と[`<script>`](/ja/guides/client-side-scripts/#astroでscriptを使用する)タグ、**インポートしたコンポーネント**、[**特別なAstroディレクティブ**](/ja/reference/directives-reference/)もサポートしています。コンポーネントスクリプトで定義されたデータと値をコンポーネントテンプレートで使用することで、動的に作成されたHTMLを生成できます。
ただし、[Astroのコンポーネントテンプレート構文](/ja/reference/astro-syntax/)は、**JavaScriptの式**、Astroの[`<style>`](/ja/guides/styling/#styling-in-astro)と[`<script>`](/ja/guides/client-side-scripts/#client-side-scripts)タグ、**インポートしたコンポーネント**、[**特別なAstroディレクティブ**](/ja/reference/directives-reference/)もサポートしています。コンポーネントスクリプトで定義されたデータと値をコンポーネントテンプレートで使用することで、動的に作成されたHTMLを生成できます。

```astro title="src/components/MyFavoritePokemon.astro"
---
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ja/basics/astro-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Astroは`src/pages/`ディレクトリで次のファイルタイプをサポー

Astroは、**ファイルベースルーティング**と呼ばれるルーティング手法を採用しています。 `src/pages/`ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。

また、[動的ルーティング](/ja/guides/routing/#動的ルーティング)を使用して、1つのファイルから複数のページを生成できます。これにより、[コンテンツコレクション](/ja/guides/content-collections/)や[CMS](/ja/guides/cms/)など、特別な`/pages/`ディレクトリの外にコンテンツがあっても、ページを作成できます。
また、[動的ルーティング](/ja/guides/routing/#dynamic-routes)を使用して、1つのファイルから複数のページを生成できます。これにより、[コンテンツコレクション](/ja/guides/content-collections/)や[CMS](/ja/guides/cms/)など、特別な`/pages/`ディレクトリの外にコンテンツがあっても、ページを作成できます。

<ReadMore>[Astroのルーティング](/ja/guides/routing/)について詳しくみる。</ReadMore>

Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/ja/basics/layouts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import ReadMore from '~/components/ReadMore.astro'

レイアウトコンポーネントがページシェルを含んでいる場合、レイアウトコンポーネントの`<html>`タグは他の全てのタグの親である必要があります。

レイアウトコンポーネントは一般的にプロジェクト内の`src/layouts`ディレクトリに配置されますが、これは必須ではなく、プロジェクト内のどこに置いても構いません。レイアウトコンポーネントをページと同じ場所に置くこともでき、その場合は[レイアウト名の先頭に`_`を付けます](/ja/guides/routing/#ページの除外)。
レイアウトコンポーネントは一般的にプロジェクト内の`src/layouts`ディレクトリに配置されますが、これは必須ではなく、プロジェクト内のどこに置いても構いません。レイアウトコンポーネントをページと同じ場所に置くこともでき、その場合は[レイアウト名の先頭に`_`を付けます](/ja/guides/routing/#excluding-pages)。


## レイアウトのサンプル
Expand Down Expand Up @@ -66,7 +66,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';

## Markdownのレイアウト

ページレイアウトは、ページフォーマットをもたない[MarkdownページとMDXページ](/ja/guides/markdown-content/#markdownページとmdxページ)に対して特に便利です。
ページレイアウトは、ページフォーマットをもたない[MarkdownページとMDXページ](/ja/guides/markdown-content/#individual-markdown-pages)に対して特に便利です。

Astroでは、`layout`というフロントマターの特別なプロパティを使用して、ページのレイアウトとして使用する`.astro`コンポーネントを指定できます。

Expand Down Expand Up @@ -111,7 +111,7 @@ const { frontmatter } = Astro.props;
</html>
```

`MarkdownLayoutProps`または`MDXLayoutProps`を使用して、レイアウトの[`Props`型](/ja/guides/typescript/#コンポーネントprops)を設定できます。
`MarkdownLayoutProps`または`MDXLayoutProps`を使用して、レイアウトの[`Props`型](/ja/guides/typescript/#component-props)を設定できます。

```astro title="src/layouts/BaseLayout.astro" ins={2,4-9}
---
Expand Down Expand Up @@ -191,7 +191,7 @@ Astro.props = {
```

:::note
MarkdownとMDXのレイアウトは、ファイルが[エクスポートしたプロパティ](/ja/guides/markdown-content/#エクスポートしたプロパティ)のすべてに`Astro.props`からアクセスできますが、**いくつかの重要な違いがあります**。
MarkdownとMDXのレイアウトは、ファイルが[エクスポートしたプロパティ](/ja/guides/markdown-content/#importing-markdown)のすべてに`Astro.props`からアクセスできますが、**いくつかの重要な違いがあります**。

* 見出し情報(つまり`h1 -> h6`要素)は、`getHeadings()`関数ではなく、`headings`配列を介して利用できます。

Expand Down
Loading
Loading