高校生でも分かるAjax通信

こんにちは！プロ太です♪
今日は、ウェブサイトを動かす裏側で働く魔法のような技術、Ajax通信について説明します。難しそうに聞こえるかもしれませんが、実はとてもクールで役立つ技術なんです♪

よっ！！待ってました！！えぃじゃっくす通信やな？

OK！学ぶでぃ！

Contents

Ajax通信って何？
- Ajax通信の具体例
- なぜAjax通信が便利なの？
簡単なAjax通信のコード例
async/awaitを使って、Ajax通信をもっと簡単に！
- async/awaitって何？
- なぜasync/awaitを使うの？
async/awaitの使い方
まとめ

Ajax通信って何？

Ajax通信は、ページ全体を再読み込みせずに、ウェブページの一部だけを更新する技術です。例えるなら、お弁当箱の中身を全部入れ替えるのではなく、おかずの一つだけを交換するようなものです。

Ajax通信の具体例

SNSのいいね！ボタン
検索サイトの候補表示
オンラインショッピングの商品フィルター
Googleマップ
天気情報

これらは全て、ページ全体をリロードせずに一部だけ情報を更新しています。
すごいでしょう？

一部だけ情報を更新すると何が便利なん？

なぜAjax通信が便利なの？

速い: 必要な部分だけ更新するので、全体を読み込むより速いです。
スムーズ: ページがガクガクせずに、スムーズに動きます。
省エネ: サーバーやネットワークの負担が減ります。

上記３つだけでも、ネットを使ってる人からしたら嬉しいって思うよね。

なるほどな〜。そりゃ、たしかにそうだ！

簡単なAjax通信のコード例

以下は、ボタンをクリックすると天気情報を取得する簡単なAjax通信の例です。

document.getElementById('getWeather').addEventListener('click', function() {
  fetch('https://api.weather.com/tokyo')
    .then(response => response.json())
    .then(data => {
      document.getElementById('weather').textContent = '東京の天気: ' + data.weather;
    })
    .catch(error => console.error('エラー:', error));
});

この例では、ボタンをクリックすると天気情報を取得し、ページの一部を更新しています。ページ全体をリロードすることなく、新しい情報が表示されるんです。

では、コードを１行１行見ていきましょう♪

ちゃんと理解していくでぃ♪

１行目：イベントリスナーの設定

document.getElementById('getWeather').addEventListener('click', function() {

document.getElementById('getWeather')
→ページ上の「getWeather」というIDを持つ要素（おそらくボタン）を探して見つけます。
.addEventListener('click', function() { ... })
→このボタンがクリックされたときに、｛...｝の中のコードの内容をを実行するよう設定します。

つまり、「天気を取得するボタンが押されたら、この後の処理を始めてね」という指示です。

２行目：天気情報の取得開始

fetch('https://api.weather.com/tokyo')

fetch()
→インターネットを通じて情報を取りに行く関数です。
'https://api.weather.com/tokyo'
→天気情報を提供してくれるウェブサイトのアドレスです。

簡単に言えば、「https://api.weather.com/tokyo というお店に行って、東京の天気を聞いてきて」というお使いを頼んでいるんです。

３行目：受け取ったデータの処理（その1）

.then(response => response.json())

.then()
→「それから」という意味で、前の処理が終わった後にやることを指定します。
response => response.json()
→受け取った回答（response）をJSONというデータ形式に変換します。

お使いから帰ってきた人に「もらってきた情報を、みんなが理解できる形（JSON形式）に整理してね」と頼んでいるようなものです。

４〜６行目：データの表示

.then(data => {
      document.getElementById('weather').textContent = '東京の天気: ' + data.weather;
    })

.then(data => { ... })
→整理された情報を使って何かをします。
document.getElementById('weather')
→ページ上の「weather」というIDを持つ要素を見つけます。
'東京の天気: ' + data.weather
→「東京の天気: 」という文字の後に、取得した天気情報をくっつけます。
.textContent = ...:
→その要素の中身を書き換えます。

７行目：エラー処理

.catch(error => console.error('エラー:', error));

.catch(error => ...)
→もし途中で何か問題が起きたら、この部分が実行されます。
console.error('エラー:', error)
→ エラーの内容をコンソールという画面に表示します。

簡単に言うと、「もし途中で何かうまくいかなかったら、どんな問題があったのか教えてね」ということです。

なるほど〜。１行１行しっかりと見ていくと分かりやすいな〜。

async/awaitを使って、Ajax通信をもっと簡単に！

よっしゃ！これでAjax通信については完璧だぜぃ✨️

甘いですね。確かに理解はしたようですが、Ajax通信は、もっと簡単にかける方法があるんです！そこまではしっかりとマスターしておきましょう！

え〜まだあるの、、、。

Ajax通信をさらに簡単に書ける魔法の言葉、「async」と「await」について学んでいきましょう。難しそうに聞こえるかもしれませんが、使い方を覚えれば、コードがとってもスッキリ書けるんです。

async/awaitって何？

「async」と「await」は、JavaScriptで非同期処理（裏で何かが進行している間に他の作業ができる処理）を書くための新しい方法です。簡単に言えば、「待つ」という動作をより分かりやすく書けるようにするものです。

なぜasync/awaitを使うの？

読みやすい
→コードが順番に実行されているように見えるので、理解しやすいです。
エラー処理が簡単
→try-catchを使って、エラーを簡単に処理できます。
きれいなコード
→複雑な.then()の連鎖（thenをたくさん書くことなど）を避けられます。

へ〜。同じプログラム内容でも、違う書き方があるんか〜。そりゃ読みやすいほうがいいよな〜♪

async/awaitの使い方

１.asyncの使い方

「async」は関数の前につけて使います。これをつけることで、非同期通信の関数ですよ〜と分かります。そして、この関数の中で「await」が使えるようになります。

async function getTokyoWeather() {
  // この中でawaitが使えます
}

getTokyoWeatherという名前で関数を作っているけど、この名前は自分で決められるからね。

asyncって日本語で「非同期」って意味で、awaitは「待つ」って意味だよな。

２.awaitの使い方

「await」は、非同期処理（時間がかかる処理）の前につけて使います。awaitをつけると処理が終わるまで待ってくれます。

async function getTokyoWeather() {
  const response = await fetch('https://api.weather.com/tokyo');
  // fetchが終わるまで待ってから次の行に進みます
}

実際の例で見てみよう

さっきまで使っていた天気情報を取得するコードを、async/awaitを使って書き直してみましょう。

async function getTokyoWeather() {
  try {
    const response = await fetch('https://api.weather.com/tokyo');
    const data = await response.json();
    document.getElementById('weather').textContent = '東京の天気: ' + data.weather;
  } catch (error) {
    console.error('エラー:', error);
  }
}

document.getElementById('getWeather').addEventListener('click', getTokyoWeather);

このコードでは、

async function で非同期関数を定義しています。
await fetch(...) でデータの取得を待ちます。
await response.json() でJSONデータの解析を待ちます。
try-catch でエラー処理をしています。

従来のやり方との比較

// 従来の方法
fetch('https://api.weather.com/tokyo')
  .then(response => response.json())
  .then(data => {
    document.getElementById('weather').textContent = '東京の天気: ' + data.weather;
  })
  .catch(error => console.error('エラー:', error));

// async/awaitを使った方法
async function getTokyoWeather() {
  try {
    const response = await fetch('https://api.weather.com/tokyo');
    const data = await response.json();
    document.getElementById('weather').textContent = '東京の天気: ' + data.weather;
  } catch (error) {
    console.error('エラー:', error);
  }
}