ブラウザAPIの活用

`fetch` API を使ったHTTPリクエスト

fetch APIは、HTTPリクエストを送信し、サーバーからのレスポンスを取得するための方法を提供します。非同期の通信が可能で、データの取得や送信を簡単に行えます。

基本的な使い方

javascript

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークエラー');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('エラーが発生しました:', error);
  });

上記の例では、指定したURLにHTTP GETリクエストを送信し、レスポンスのJSONデータを取得しています。fetch は Promise を返すため、.then() や .catch() を使って処理を続けます。

POSTリクエストfetch を使ってデータを送信することもできます。

javascript

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: '太郎', age: 30 })
})
  .then(response => response.json())
  .then(data => {
    console.log('データが送信されました:', data);
  })
  .catch(error => {
    console.error('エラー:', error);
  });

この例では、POST メソッドを使ってデータをサーバーに送信しています。headers でデータの形式を指定し、body で送信する内容を定義します。

ローカルストレージとセッションストレージ

ウェブブラウザには、データをクライアント側に保存するためのストレージ機能があります。localStorage と sessionStorage の2種類があり、それぞれの用途に応じてデータの永続化が可能です。

ローカルストレージ (localStorage)localStorage は、ブラウザを閉じてもデータが保持されるストレージです。キーと値のペアでデータを保存し、容量は数メガバイト程度です。

javascript

// データの保存
localStorage.setItem('username', '太郎');
// データの取得
let username = localStorage.getItem('username');
console.log(username); // 出力: 太郎
// データの削除
localStorage.removeItem('username');

セッションストレージ (sessionStorage)sessionStorage は、ページのセッションが続く限りデータが保持されます。タブやウィンドウを閉じるとデータは消去されます。

javascript

// データの保存
sessionStorage.setItem('sessionKey', 'セッションデータ');
// データの取得
let sessionData = sessionStorage.getItem('sessionKey');
console.log(sessionData); // 出力: セッションデータ
// データの削除
sessionStorage.removeItem('sessionKey');

使用例 ローカルストレージやセッションストレージは、ユーザーの設定や一時的なデータを保存するために便利です。例えば、ダークモードの設定を保存したり、フォームの一時的な入力データを保持したりする際に利用されます。

`Geolocation API` などのその他のAPI

JavaScriptでは、ブラウザが提供する様々なAPIを使ってデバイスの機能を活用することができます。その中でもよく使われる Geolocation API について紹介します。

Geolocation APIGeolocation API は、ユーザーの現在位置を取得するために使われます。位置情報は、ユーザーの許可を得てから取得する必要があります。

javascript

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    position => {
      console.log('緯度:', position.coords.latitude);
      console.log('経度:', position.coords.longitude);
    },
    error => {
      console.error('位置情報の取得に失敗しました:', error.message);
    }
  );
} else {
  console.error('このブラウザはGeolocationをサポートしていません。');
}

上記の例では、getCurrentPosition メソッドを使ってユーザーの現在位置を取得しています。取得した位置情報は、緯度と経度として表示されます。

その他のブラウザAPI

Notification API: ユーザーに通知を表示するためのAPIです。

javascript

if (Notification.permission === 'granted') {
  new Notification('こんにちは！新しいメッセージがあります。');
} else if (Notification.permission !== 'denied') {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      new Notification('通知が許可されました！');
    }
  });
}

Clipboard API: テキストをクリップボードにコピーするためのAPIです。

javascript

navigator.clipboard.writeText('コピーするテキスト').then(() => {
  console.log('テキストがクリップボードにコピーされました');
}).catch(err => {
  console.error('クリップボードへのコピーに失敗しました:', err);
});

ブラウザAPIのまとめ

ブラウザAPIを活用することで、ウェブページはより多機能でインタラクティブなものになります。fetch を使ったHTTPリクエストによるサーバー通信、localStorage や sessionStorage によるデータの保存、Geolocation API を使った位置情報の取得など、これらのAPIを使いこなすことで、ユーザー体験を向上させることができます。