Skip to content

i18n(ja): Update imports.mdx #9844

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.

Sign up for GitHub

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

Merged
yanthomasdev merged 4 commits into from
Oct 27, 2024
Merged

i18n(ja): Update imports.mdx #9844

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a06833f
82677457dd9189e501cb8c0191c1693f32cb11f6
morinokami Oct 27, 2024
fec2b45
1e261305a6094fb816f58e41ae09711f57aa055f
morinokami Oct 27, 2024
598df34
ba9fcbeb2d20046170397f766653c3bdffdb8ca0 and c75f2f6ca17ac2378e44b220…
morinokami Oct 27, 2024
bfcc672
Merge branch 'main' into i18n-ja-imports-3
yanthomasdev Oct 27, 2024
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
32 changes: 14 additions & 18 deletions src/content/docs/ja/guides/imports.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@ Astroは、標準で以下のファイル形式をサポートしています。
- Astroコンポーネント（`.astro`）
- Markdown（`.md`, `.markdown`など）
- JavaScript（`.js`、`.mjs`）
- TypeScript（`.ts`、`.tsx`）
- TypeScript（`.ts`）
- NPMパッケージ
- JSON（`.json`）
- JSX（`.jsx`、`.tsx`）
- CSS（`.css`）
- CSS Modules（`.module.css`）
- イメージとアセット（`.svg`、`.jpg`、`.png`など）
Expand All @@ -44,6 +43,12 @@ import { getUser } from './user.js';

JavaScriptは、通常のESMの`import`と`export`の構文でインポートできます。

:::note[JSXファイルのインポート]

JSXやTSXファイルをレンダリングするには、適切な[UIフレームワーク](/ja/guides/framework-components/)（[React](/ja/guides/integrations-guide/react/)、[Preact](/ja/guides/integrations-guide/preact/)、[Solid](/ja/guides/integrations-guide/solid-js/)）が必要です。Astroは`.js`や`.ts`ファイル内のJSXをサポートしていないため、必要に応じて`.jsx`か`.tsx`拡張子を使用してください。

:::


### TypeScript

Expand All @@ -70,21 +75,6 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx
<ReadMore>[AstroのTypeScriptサポート](/ja/guides/typescript/)の詳細はこちら。</ReadMore>


### JSX / TSX

```js
import { MyComponent } from './MyComponent.jsx';
```

Astroには、プロジェクトにJSX（`*.jsx`と`*.tsx`）ファイルのサポートが組み込まれています。JSXの構文は、自動的にJavaScriptにトランスパイルされます。

AstroはJSX構文を標準で理解できますが、React、Preact、Solidなどのフレームワークを適切にレンダリングするには、フレームワークのインテグレーションをインストールする必要があります。詳しくは、[インテグレーションガイド](/ja/guides/integrations-guide/)をご覧ください。

:::note
**Astroは`.js`/`.ts`ファイル内のJSXをサポートしません。** JSXは、`.jsx`と`.tsx`のファイル拡張子で終わるファイル内でのみ扱われます。
:::


### npmパッケージ

npmパッケージをインストールした場合、Astroでインポートできます。
Expand Down Expand Up @@ -121,6 +111,10 @@ import './style.css';

Astroは、CSSファイルをアプリケーションに直接インポートできます。インポートされたスタイルはエクスポートされませんが、インポートすることで自動的にそれらのスタイルがページに追加されます。これはデフォルトですべてのCSSファイルに対して機能し、プラグインによってSassやLessのようなコンパイル可能なCSS言語もサポートします。

<ReadMore>
CSSファイルのURLを直接参照したり、CSSを文字列としてインポートするなどの高度なCSSインポートの使用例については、[スタイリングガイド](/ja/guides/styling/#アドバンスド)を参照してください。
</ReadMore>


### CSSモジュール

Expand Down Expand Up @@ -153,6 +147,8 @@ import txtReference from './words.txt'; // txt === '/src/words.txt'

また、[ディレクトリ構造](/ja/basics/project-structure/#public)で説明されているように、画像は`public/`フォルダに配置するのも便利です。

<ReadMore>`?url`や`?raw`など、Viteのインポートパラメータを追加する方法については、[Viteの静的アセットの取り扱いガイド](https://ja.vite.dev/guide/assets)を参照してください。</ReadMore>

:::note
アクセシビリティの観点から、`<img>`タグに**altテキスト**を付加することが推奨されています！画像要素に`alt="役に立つ説明"`属性を追加することを忘れないでください。画像が単なる装飾である場合は、この属性を空で指定します。
:::
Expand All @@ -172,7 +168,7 @@ import logoUrl from '../../assets/logo.png?url';

この例では、開発者は`src/pages/about/company.astro`、`src/components/controls/Button.astro`、そして`src/assets/logo.png`間のツリーの関係を理解する必要があります。そして、`company.astro`ファイルが移動された場合、これらのインポートも更新しなければなりません。

インポートエイリアスは`tsconfig.json`または`jsconfig.json`のどちらかから追加できます。
インポートエイリアスは`tsconfig.json`から追加できます。

```json title="tsconfig.json" ins={5-6}
{
Expand Down