第14章ネットワーク

XMLHttpRequest

XMLHttpRequestは以前からある、ブラウザに組み込まれたWeb APIです。非同期的にサーバとの通信を行うことができます。

// XMLHttpRequestを使ってGETリクエストを送る例
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    // レスポンスが帰ってきたときの処理
    if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response); // サーバからのレスポンスが表示される
    }
};
xhr.send();

Fetch API

Fetch APIはXMLHttpRequestのモダンな代替手段で、Promiseベースで動作します。

// Fetch APIを使ってGETリクエストを送る例
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data); // サーバからのレスポンスが表示される
    })
    .catch(error => {
        console.error('エラー:', error);
    });

HTTPメソッドの理解

GET: データを取得する。
POST: 新しいデータを作成する。
PUT: 既存のデータを更新または置換する。
DELETE: データを削除する。

// Fetch APIでPOSTリクエストを送る例
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: 'Taro',
        age: 25
    })
});

エラーハンドリング

ネットワークリクエストは多くの理由で失敗する可能性があります。適切なエラーハンドリングは必須です。

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);
    });

非同期処理との連携

特にFetch APIやXMLHttpRequestは非同期的に動作するため、async/awaitやPromiseとの組み合わせが頻繁に行われます。

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('データの取得に失敗:', error);
    }
}

fetchData();

WebSocket

WebSocketは、サーバーとクライアント間でリアルタイムの双方向通信を行うためのプロトコルです。

// WebSocketの簡単な例
var socket = new WebSocket('ws://example.com/socketserver');

socket.onopen = function(event) {
    // 接続開始時の処理
    socket.send('こんにちは、サーバー!');
};

socket.onmessage = function(event) {
    console.log('サーバーからのメッセージ:', event.data);
};

socket.onerror = function(error) {
    console.error('WebSocket エラー:', error);
};

ブラウザ情報の取得

特定のブラウザやデバイスの特性に合わせてウェブコンテンツをカスタマイズする際に役立ちます。JavaScriptを使用して、クライアントサイドで以下のような情報を取得できます。

navigatorオブジェクト

このオブジェクトは、ブラウザの情報にアクセスするための多くのプロパティとメソッドを提供します。

// ブラウザの名称
console.log(navigator.appName); 

// ブラウザのバージョン
console.log(navigator.appVersion); 

// ユーザーエージェント文字列
console.log(navigator.userAgent); 

// プラットフォーム（OS）
console.log(navigator.platform);

ユーザーエージェントの解析

navigator.userAgentは、ブラウザやデバイスに関する情報を含む文字列を返します。この文字列を解析することで、使用しているブラウザやデバイスの種類を判別できます。

var userAgent = navigator.userAgent;

if (userAgent.indexOf('Chrome') > -1) {
    console.log('Google Chromeを使用しています');
} else if (userAgent.indexOf('Firefox') > -1) {
    console.log('Firefoxを使用しています');
}
// ... その他のブラウザの判別処理

画面解像度の取得

window.screenオブジェクトを使用して、ディスプレイの解像度や利用可能な画面領域などの情報を取得できます。

// 画面の幅と高さ
console.log(screen.width + "x" + screen.height);

// 利用可能な画面の幅と高さ
console.log(screen.availWidth + "x" + screen.availHeight);

ブラウザの言語設定

ブラウザの言語設定は、コンテンツをユーザーの言語に合わせて表示する際に役立ちます。

// ブラウザの言語設定
console.log(navigator.language || navigator.userLanguage);

ネットワーク状態の取得

navigator.onLineを使用して、ユーザーがオフラインかオンラインかをチェックできます。

if (navigator.onLine) {
  console.log('オンラインです');
} else {
  console.log('オフラインです');
}

Geolocation

navigator.geolocationを使って、ユーザーの現在の地理的位置を取得できます（ユーザーの許可が必要）。

navigator.geolocation.getCurrentPosition(function(position) {
  console.log('緯度:', position.coords.latitude, '経度:', position.coords.longitude);
});

ウィンドウサイズの取得

window.innerWidthおよびwindow.innerHeightで、ブラウザウィンドウのサイズを取得できます。

console.log('ウィンドウの幅:', window.innerWidth);
console.log('ウィンドウの高さ:', window.innerHeight);

クッキーの有効/無効

navigator.cookieEnabledで、クッキーが有効かどうかをチェックできます。

if (navigator.cookieEnabled) {
  console.log('クッキーが有効です');
} else {
  console.log('クッキーが無効です');
}

タッチイベントのサポート

デバイスがタッチイベントをサポートしているかどうかをチェックできます。

if ('ontouchstart' in window) {
  console.log('タッチイベントをサポートしています');
}

練習問題1.

JavaScriptを使用して、ユーザーがオンラインかオフラインかを判定し、その結果をウェブページ上に表示するプログラムを作成してください。

練習問題2.

以下のURLからJSONデータを取得し、その中のtitleの一覧をウェブページ上にリストとして表示するプログラムを作成してください。

https://jsonplaceholder.typicode.com/posts

練習問題3.

ユーザーから位置情報の許可を得て、その緯度と経度をウェブページ上に表示するプログラムを作成してください。また、ユーザーが位置情報の取得を拒否した場合は、「位置情報の取得が拒否されました」というメッセージを表示してください。

第14章 ネットワーク