`要素とJavaScriptモジュール：

2024-04-03

HTMLマークアップにおける<script>タグの配置

<head>要素内への配置

<script>タグを<head>要素内に配置すると、ページ読み込み時にJavaScriptコードが実行されます。これは、ページ全体の動作に関わるスクリプトを記述する場合に適しています。

<head>
  <title>JavaScript Example</title>
  <script>
    // 全体の動作に関わるJavaScriptコード
  </script>
</head>

利点:

ページ読み込み時にスクリプトが実行されるため、ページ全体の動作に影響を与えるスクリプトに適している
DOMContentLoadedイベントが発生する前に実行されるため、ページ全体の初期化処理などに利用できる

ページ読み込み速度が遅くなる可能性がある
スクリプトエラーが発生した場合、ページ全体の表示に影響を与える

<body>要素内への配置

<body>
  <h1>Hello, World!</h1>
  <script>
    // h1要素のスタイルを変更するJavaScriptコード
    const h1 = document.querySelector('h1');
    h1.style.color = 'red';
  </script>
</body>

ページ読み込み速度に影響を与えない
特定の要素に関連するスクリプトを記述しやすい

<script>タグには、以下の属性を設定できます。

type: スクリプトのMIMEタイプを指定します。JavaScriptの場合は"text/javascript"を指定します。
src: 外部ファイルからJavaScriptコードを読み込む場合に指定します。
async: 非同期読み込みを指定します。
defer: スクリプトの読み込みを遅延させ、DOMContentLoadedイベント発生後に実行することを指定します。

これらの属性を使い分けることで、より効率的にJavaScriptコードを実行することができます。

まとめ

<script>タグの配置場所は、スクリプトの役割や動作に影響を与えます。上記の内容を参考に、状況に応じて適切な配置場所を選択してください。

<head>要素内への配置

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>JavaScript Example</title>
  <script>
    // ページ全体の動作に関わるJavaScriptコード
    console.log('Hello, World!');
  </script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>JavaScript Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    // h1要素のスタイルを変更するJavaScriptコード
    const h1 = document.querySelector('h1');
    h1.style.color = 'red';
  </script>
</body>
</html>

外部ファイルからの読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>JavaScript Example</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

非同期読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>JavaScript Example</title>
  <script src="script.js" async></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

遅延読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>JavaScript Example</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

これらのコードを参考に、さまざまな配置方法を試してみてください。

<script>タグの配置方法：その他の方法

<noscript>要素の使用

JavaScriptが無効になっている場合にのみ表示されるコンテンツを記述する場合、<noscript>要素を使用できます。

<noscript>
  <p>JavaScriptが無効になっているため、このコンテンツは表示されません。</p>
</noscript>

JavaScriptモジュールの使用

ES6以降では、JavaScriptモジュールを使用してコードを分割して読み込むことができます。モジュールを使用すると、コードをより効率的に管理することができます。

<script type="module" src="module.js"></script>

フレームワークの使用

ReactやVue.jsなどのJavaScriptフレームワークを使用している場合は、フレームワークが提供する機能を使用してJavaScriptコードを記述することができます。

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>

<script>
  const App = () => {
    return <h1>Hello, World!</h1>;
  };

  ReactDOM.render(<App />, document.getElementById('app'));
</script>