Skip to content

i18n(ja): Update client-side-scripts.mdx #7004

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 2 commits into from
Feb 24, 2024
Merged

i18n(ja): Update client-side-scripts.mdx #7004

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
997e257
i18n(ja): Update client-side-scripts.mdx
morinokami Feb 24, 2024
ce6a8b6
Merge branch 'main' into i18n-ja-client-side-scripts-0
yanthomasdev Feb 24, 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
5 changes: 3 additions & 2 deletions src/content/docs/ja/guides/client-side-scripts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ description: >-
Astroコンポーネントに追加する方法
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

標準的なHTMLの`<script>`タグを使用すれば、React・Svelte・Vue等の[UIフレームワーク](/ja/guides/framework-components/)を利用せずにインタラクティブ性をAstroコンポーネントへ追加できます。これによってブラウザ上で実行されるJavaScriptを送信してAstroコンポーネントに機能を追加できるようになります。

Expand Down Expand Up @@ -88,7 +89,7 @@ Astroがスクリプトを処理しないようにするには、`is:inline`デ
Astroは、状況によってはスクリプトタグを処理しません。特に、`<script>`タグに`type="module"`や`src`以外の属性を追加すると、Astroはそのタグを`is:inline`ディレクティブがあるかのように扱います。スクリプトがJSX式で記述されている場合も同様です。
:::

📚 `<script>` タグで利用可能なディレクティブについてもっと知りたい場合は、[テンプレートディレクティブ](/ja/reference/directives-reference/#script--style-directives)を参照してください。
<ReadMore>`<script>` タグで利用可能なディレクティブについてもっと知りたい場合は、[ディレクティブリファレンス](/ja/reference/directives-reference/#script--style-directives)ページを参照してください。</ReadMore>
Comment on lines -91 to +92
Copy link
Copy Markdown
Member Author

@morinokami morinokami Feb 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

本来の差分は <ReadMore> タグの追加だけなのですが、英語版と見比べて少し訳がおかしかったため、訳文自体に微調整も加えています。英語版の文章は以下となります:

See our directives reference page for more information about the directives available on <script> tags.


### ページにJavaScriptファイルを含める

Expand Down Expand Up @@ -190,7 +191,7 @@ Webコンポーネント標準を使うことで独自の動作をするHTML要
1. `document.querySelector()`を使って全ページを検索する変わりに、`this.querySelector()`を使えば検索範囲が現在のカスタム要素のインスタンスに限られます。これにより、一回で一つのコンポーネントだけを操作しやすくなります。
2. `<script>`は一度だけしか実行されませんが、ブラウザはページ上の`<astro-heart>`を見つける度にカスタム要素の`constructor()`メソッドを実行します。これにより、ページで複数回コンポーネントを使用する場合でも一つのコンポーネントを安全に記述できます。

📚 [web.dev’s Reusable Web Components guide](https://web.dev/custom-elements-v1/)と[MDN’s introduction to custom elements](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements)から多くのカスタム要素について学ぶことができます。
<ReadMore>[web.devの再利用可能なウェブコンポーネントガイド](https://web.dev/articles/custom-elements-v1?hl=ja)と[MDNのカスタム要素の紹介](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements)で、カスタム要素について詳しく学べます。</ReadMore>
Comment on lines -193 to +194
Copy link
Copy Markdown
Member Author

@morinokami morinokami Feb 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

こちらも「多くのカスタム要素について」などは誤訳に近い感じだったため、訳文の微調整を加えています。英語版はこちら:

You can learn more about custom elements in web.dev’s Reusable Web Components guide and MDN’s introduction to custom elements.


### フロントマター変数をスクリプトに渡す

Expand Down