fetch 関数

JavaScript においてサーバーと通信を行うために使われる関数です。
例えば、ウェブサイトがデータベースから情報を取得したり、他の外部APIからデータを取得する際に使います。

1. fetch関数の基本的な使い方

fetch 関数は、あるURL（例えばAPIのエンドポイント）にリクエストを送り、そのレスポンスを受け取ります。

fetch('https://api.example.com/data')
  .then(response => response.json())  // 1. サーバーのレスポンスをJSON形式に変換
  .then(data => console.log(data))    // 2. データをコンソールに表示
  .catch(error => console.error('Error:', error));  // 3. エラー処理

ステップごとの解説

fetch('https://api.example.com/data')
fetch 関数はURLを指定してサーバーにリクエストを送ります。
このリクエストは非同期で行われるので、すぐにレスポンスが返ってくるわけではありません。
結果を待ってから次の処理が実行されます。

.then(response => response.json())
fetch がサーバーからのレスポンスを受け取ると、そのレスポンスは response オブジェクトとして返されます。
通常、APIからのデータはJSON形式（JavaScript Object Notation）なので、response.json() を使ってデータをJavaScriptオブジェクトに変換します。

.then(data => console.log(data))
変換されたデータが data に格納されます。
この data を使って画面に表示したり、他の処理を行います。
ここでは console.log(data) によって、データをブラウザのコンソールに表示しています。

.catch(error => console.error('Error:', error))
ネットワークエラーやリクエストの失敗が起きた場合、 .catch() でエラー処理を行います。
エラーが発生した場合は console.error でエラーメッセージが表示されます。

2. 非同期処理の理解

fetch は非同期処理です。
これにより、リクエストが完了するまでウェブページ全体が待たされることなく、他の処理が続行されます。
非同期処理には Promise という仕組みが使われており、.then() や .catch() で結果やエラーを処理します。

3. fetchの使い方の応用

fetch はデータの取得だけでなく、データの送信にも使えます。
例えば、新しいデータをサーバーに送信したい場合、POST メソッドを使います。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })  // 送信するデータをJSON形式に変換
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));

fetch 関数を使って画面共通部分を複数の画面に表示させる

fetch を利用して、外部のHTMLファイルやテンプレートを取得し、それを各ページに動的に埋め込むという方法です。
具体的な例としては以下の通りです。

1. 共通のヘッダーをHTMLファイルに分ける

まず、共通のヘッダー部分を独立したHTMLファイルとして用意します。
例えば、header.html というファイルに次のようなコードを記述します。

<!-- header.html -->
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

2. JavaScriptでfetch関数を使ってヘッダーを読み込む

各ページに fetch を使って header.html を読み込み、その内容を指定した場所に挿入します。
例えば、次のように main.js というファイルにスクリプトを書きます。

// main.js
document.addEventListener('DOMContentLoaded', () => {
  // ヘッダーを読み込み、挿入する要素を指定
  fetch('header.html')
    .then(response => response.text())  // レスポンスをテキスト形式で取得
    .then(data => {
      document.getElementById('header-placeholder').innerHTML = data;  // HTML要素に挿入
    })
    .catch(error => console.error('Error loading header:', error));
});

3. 各ページでヘッダーのプレースホルダーを用意する

各HTMLページに、ヘッダーが挿入されるためのプレースホルダーを設置します。

<!-- home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
  <script src="main.js" defer></script>
</head>
<body>
  <!-- ここにヘッダーが挿入される -->
  <div id="header-placeholder"></div>

  <main>
    <h2>Welcome to the Home Page</h2>
    <p>This is the home page content.</p>
  </main>
</body>
</html>

他のページ（about.html, contact.html など）も同様に、<div id="header-placeholder"></div> を使ってヘッダーを挿入する箇所を指定します。

この方法のメリット

コードの再利用: ヘッダーのHTMLを1つのファイルにまとめておくことで、各ページごとにヘッダーを記述する手間が省けます。
メンテナンス性の向上: ヘッダーの内容を変更したい場合、header.html ファイルだけを更新すれば、全てのページに変更が反映されます。
動的なコンテンツの挿入: fetch を使えば、外部ファイルだけでなく、APIや他の動的なデータをページに組み込むことも可能です。

注意点

fetch は非同期で動作するため、ヘッダーがすぐに表示されないことがありますが、DOMContentLoaded イベント内で呼び出しているので、ページが読み込まれたら自動的に挿入されます。
外部リソースの読み込みには、サーバー側の設定やセキュリティポリシーに関する注意が必要です。
ローカルファイルでテストする際は、セキュリティ制限でうまく動作しないこともあるので、サーバー上で確認すると良いでしょう。
このように、fetch を使うことで共通のヘッダーを効率的に複数の画面に表示させることができます。

まとめ

fetch はサーバーからデータを取得したり、データを送信するために使います。
非同期処理なので、リクエストが完了するまで待たされることなく他の処理が進行します。
.then() でレスポンスを処理し、 .catch() でエラー処理を行います。
fetch 関数を使ってHTMLの画面共通部分を複数の画面に表示させることができます。