diff options
Diffstat (limited to 'files/ja/web/html/element/script/index.html')
| -rw-r--r-- | files/ja/web/html/element/script/index.html | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/files/ja/web/html/element/script/index.html b/files/ja/web/html/element/script/index.html new file mode 100644 index 0000000000..09a6afe979 --- /dev/null +++ b/files/ja/web/html/element/script/index.html @@ -0,0 +1,233 @@ +--- +title: '<script>: スクリプト要素' +slug: Web/HTML/Element/script +tags: + - HTML + - HTML スクリプト + - 'HTML:スクリプト対応要素' + - 'HTML:フローコンテンツ' + - 'HTML:メタデータコンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Script + - Web + - ウェブ + - スクリプト + - 要素 +translation_of: Web/HTML/Element/script +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML の <code><script></code> 要素</strong>は、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。</span> <code><script></code> 要素は <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> の GLSL shader プログラミング言語、 <a href="/ja/docs/Glossary/JSON">JSON</a> 等の他の言語にも使用することができます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><code>text/javascript</code> などの動的スクリプト</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>を受け入れるすべての要素、または<a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt> + <dd> + <p>クラシックスクリプトでは、 <code>async</code> 属性があると、クラシックスクリプトが利用可能になったらすぐに並行して読み込み、解析と評価を行います。</p> + + <p><a href="/ja/docs/Web/JavaScript/Guide/Modules">モジュールスクリプト</a>では、 <code>async</code> 属性があると、スクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。</p> + + <p>この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような<strong>パーサーブロック JavaScript</strong> を排除することを可能にします。 <code>defer</code> はこの場合に同様の効果があります。</p> + + <p>これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。</p> + + <p>ブラウザーの互換性の状況については{{anch("Browser compatibility", "ブラウザーの互換性")}}をご覧ください。 <a href="/ja/docs/Games/Techniques/Async_scripts">asm.js 向け非同期スクリプト</a>もご覧ください。</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>通常の <code>script</code> 要素は標準の {{Glossary("CORS")}} チェックに通らないスクリプトに対して、 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a>をご覧ください。</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd> + <p>この論理属性は、スクリプトを文書の解析完了後かつ {{event("DOMContentLoaded")}} が発生する前に実行することをブラウザーに示します。</p> + + <p><code>defer</code> 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 <code>DOMContentLoaded</code> イベントの発生が抑制されます。</p> + + <div class="warning"> + <p>この属性は、 <code>src</code> 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。</p> + + <p><code>defer</code> 属性は<a href="/ja/docs/Web/JavaScript/Guide/Modules">モジュールスクリプト</a>には効果がありません。 — 既定で延期が行われます。</p> + </div> + + <p><code>defer</code> 属性のあるスクリプトは、文書に現れた順に実行されます。</p> + + <p>この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような、<strong>パーサーブロッキング JavaScript</strong> を排除することができるようになります。 <code>async</code> はこの場合と似た効果があります。</p> + </dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。 <a href="/ja/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> をご覧ください。</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>この論理属性は、 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 モジュール</a>に対応するブラウザーでスクリプトを実行するべきではないことを示します。要するに、モジュール式の JavaScript コードをサポートしない古いブラウザー向けのフォールバックスクリプトを提供するために使用できます。</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src コンテンツセキュリティポリシー</a>内のスクリプトをホワイトリストに入れるための暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>スクリプトを読み込んだり、スクリプトがリソースを読み込んだりする際に、どの<a href="/ja/docs/Web/API/Document/referrer">リファラー</a>を送信するかを示します。 + <ul> + <li><code>no-referrer</code>: {{HTTPHeader("Referer")}} ヘッダーは送信しません。</li> + <li><code>no-referrer-when-downgrade</code> (既定値): {{HTTPHeader("Referer")}} ヘッダーは、{{Glossary("origin", "オリジン")}}に {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) がない場合には送信しません。</li> + <li><code>origin</code>: 送信するリファラーを、参照しているページのオリジン ({{Glossary("protocol", "スキーム")}}、{{Glossary("host", "ホスト")}}、{{Glossary("port", "ポート番号")}}) のみに制限します。</li> + <li><code>origin-when-cross-origin</code>: 異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポート番号に制限します。同一オリジンへの移動では、リファラーのパスも含めます。</li> + <li><code>same-origin</code>: リファラーは<a href="/en-US/docs/Web/Security/Same-origin_policy">同一オリジン</a>には送信しますが、オリジン間リクエストにはリファラー情報を含めません。</li> + <li><code>strict-origin</code>: プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信しますが、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) には送信しません。</li> + <li><code>strict-origin-when-cross-origin</code>: 同一オリジンのリクエストを行う際は URL 全体を送信しますが、プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信し、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) にはヘッダーを送信しません。</li> + <li><code>unsafe-url</code>: リファラーはオリジン<em>および</em>パスを含みます (ただし、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/hash">フラグメント</a>、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/password">パスワード</a>、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/username">ユーザー名</a>は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>注</strong>: 既定値および <code>referrerpolicy</code> に対応していない場合の代替値は空文字列 (<code>""</code>) です。 <code>referrerpolicy</code> が <code><script></code> 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は <code>no-referrer-when-downgrade</code> と同等のものとして扱われます。</p> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd> + <p>この属性は外部スクリプトの <abbr>URI</abbr> を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。</p> + + <ul> + <li><strong>省略または JavaScript の MIME タイプ:</strong> これはスクリプトが JavaScript であることを示します。 HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザーでは埋め込まれている、あるいは (<code>src</code> 属性で) インポートされたコードのスクリプト言語を指定していました。JavaScript の MIME タイプは<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">仕様書に掲載されています</a>。</li> + <li><strong><code>module</code>:</strong> コードを JavaScript モジュールとして扱います。スクリプトの処理は、<code>charset</code> および <code>defer</code> 属性の影響を受けません。 <code>module</code> の利用についての情報は、 <a href="/ja/docs/Web/JavaScript/Guide/Modules">JavaScript モジュール</a>をご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジン間のフェッチに CORS プロトコルの使用を必要とします。</li> + <li><strong>その他の値:</strong> このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。 <code>src</code> 属性は無視されます。</li> + </ul> + </dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨属性</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>存在する場合、値は ASCII で大文字小文字を区別せずに "<code>utf-8</code>" と一致する文字列でなければなりません。 <code>charset</code> 属性は、文書が UTF-8 でなければならないこと、および <code>script</code> 要素が文書から文字エンコーディングを継承することから、指定する必要はありません。</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd><code>type</code> 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。しかし、 <code>type</code> 属性とは異なり、この属性に指定可能な値が標準化されませんでした。代わりに <code>type</code> 属性を使用してください。</dd> +</dl> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code>async</code> 属性または <code>defer</code> 属性を持たないスクリプトは、インラインスクリプト同様に、ブラウザーがページの解析を続けるより先に、ただちに読み込みおよび実行されます。</p> + +<p>スクリプトは <code>text/javascript</code> の MIME タイプで提供するべきですが、ブラウザーは寛大であり、画像 (<code>image/*</code>)・動画 (<code>video/*</code>)・音声 (<code>audio/*</code>)・<code>text/csv</code> のタイプで提供されたスクリプトに限りブロックします。スクリプトがブロックされると、 {{event("load")}} イベントではなく {{event("error")}} イベントが発生します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使い方</h3> + +<p>これらの例は <code><script></code> 要素を使用して (外部の) スクリプトをインポートする方法を紹介します。</p> + +<pre class="brush: html notranslate"><script src="javascript.js"></script> +</pre> + +<p>また、以下の例は <code><script></code> 要素内に (インライン) スクリプトを置く方法を示します。</p> + +<pre class="brush: html notranslate"><script> + alert("Hello World!"); +</script></pre> + +<h3 id="モジュールフォールバック">モジュールフォールバック</h3> + +<p>{{htmlattrxref("type", "script")}} 属性で <code>module</code> の値に対応しているブラウザーは、 <code>nomodule</code> 属性の付いたスクリプトを無視します。これによって、モジュールスクリプトを提供しつつ、非対応のブラウザーの場合は <code>nomodule</code> でマークされたフォールバックスクリプトを提供することもできます。</p> + +<pre class="brush: html notranslate"><script type="module" src="main.js"></script> +<script nomodule src="fallback.js"></script></pre> + +<h3 id="Embedding_data_in_HTML" name="Embedding_data_in_HTML">HTML へのデータの埋め込み</h3> + +<p>また、 <code><script></code> 要素を使用して、 <code>type</code> 属性に JavaScript 以外の有効な MIME タイプを指定することで、サーバー側で表現したデータを HTML に埋め込むこともできます。</p> + +<pre class="brush: html notranslate"><code><!-- Generated by the server --> +<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script> + +<!-- Static --> +<script> + const userInfo = JSON.parse(document.getElementById("data").text); + console.log("User information: %o", userInfo); +</script></code> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>{{HTMLAttrxRef("charset", "script")}} 属性を削除</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.script", 2)}}</div> + +<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> + +<p><code>async</code> 属性に対応していない古いブラウザーでは、パーサーによって挿入されたスクリプトはパーサーをブロックします。スクリプトによって挿入されたスクリプトは、 IE および WebKit では非同期的に実行されますが、 Opera およびバージョン4より前の Firefox では同期的に実行されます。 Firefox 4 では、スクリプトが生成したスクリプトの <code>async</code> DOM プロパティの既定値が <code>true</code> であるため、既定の動作が IE や WebKit の動作に一致します。</p> + +<p><code>document.createElement("script").async</code> が <code>true</code> と評価されるブラウザー (Firefox 4 など) で、スクリプトによって挿入された外部スクリプトを挿入順に実行することを要求するには、順序を制御したいスクリプトに対して <code>async="false"</code> を設定します。</p> + +<div class="warning"> +<p>非同期スクリプトから <code>document.write()</code> を呼び出さないでください。 Firefox 3.6 では <code>document.write()</code> を呼び出すと予期せぬ影響をもたらします。Firefox 4 では <code>async</code> スクリプトから <code>document.write()</code> を呼び出しても効果がありません (エラーコンソールに警告を出力することを除く)。</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <code><script></code> and <code><link></code> node event compatibility chart</a></li> + <li><a href="https://flaviocopes.com/javascript-async-defer/">Flavio Copes' article on loading JavaScript efficiently and explaining the differences between <code>async</code> and <code>defer</code></a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Modules">JavaScript モジュール</a>ガイド</li> +</ul> |