このセクションでは、HTML5仕様で定義されているWeb APIを紹介します。これらのWeb APIを使用すると、WebアプリケーションでWebブラウザが提供する最新の機能を利用できます。
セクション1. クライアントストレージ
- Cookie – HTTP Cookieと、JavaScriptを使用してCookieをより効果的に管理する方法について学びます。
- localStorage –
Storage型を紹介し、localStorageを使用してクライアント側のデータを保存する方法を示します。 - sessionStorage – sessionStorageを使用してセッションのデータを保存する方法を示します。
- IndexedDB – IndexedDBについて学び、オンラインとオフラインで動作するWebアプリケーションを作成するためにそれを使用する方法を学びます。
セクション2. ドラッグアンドドロップAPI
- ドラッグアンドドロップAPI – WebアプリケーションでWebブラウザのドラッグアンドドロップ機能を使用できるようにします。
- FileReader API – FileReader APIを紹介し、それをドラッグアンドドロップAPIと組み合わせて、画像アップロードアプリケーションを構築する方法を示します。
セクション3. Geolocation API
- Geolocation API – ユーザーの現在の場所を取得する方法を学びます。
セクション4. Notification API
- Notification API – デスクトップ通知をユーザーに表示する方法を学びます。
セクション5. History API
- pushState – history.pushState() メソッドを使用する方法を学びます。
セクション6. ネットワークリクエスト
- Fetch API – Webブラウザからリモートリソースへの非同期リクエストを作成する方法を学びます。
- Fetch & CORS – CORS（クロスオリジンリソース共有）を理解します。CORSは、オリジンが異なるオリジンへのリクエストをすることを防ぐセキュリティ機能です。
- Fetch & ダウンロード進捗状況の追跡 – Fetch APIを使用してファイルをダウンロードし、ReadableStreamオブジェクトを使用してダウンロード進捗状況を追跡する方法を学びます。
- AbortController – AbortController APIを使用してWebリクエストをキャンセルする方法を調べます。
セクション7. ダイアログとポップオーバーAPI
- Dialog API – HTMLネイティブ要素 <dialog> を使用してダイアログを作成し、Dialog APIを使用してダイアログの表示を制御する方法を示します。
- Popover API – Popover APIを使用してポップオーバーを作成する方法を学びます。
セクション8. Canvas API
- 基本的なCanvas – HTML5の <canvas> 要素と、Canvas APIを使用して図形を描画する方法について学びます。
- 塗りつぶされた長方形を描画 – fillRect() メソッドを使用して塗りつぶされた長方形を描画する方法を示します。
- アウトライン付きの長方形を描画 – strokeRect() メソッドを使用してアウトライン付きの長方形を描画する方法を学びます。
- キャンバス上の長方形領域を消去 –
clearRect()メソッドを使用して、長方形領域のピクセルを透明な黒に設定する方法を示します。 - 線を描画 – ある点から別の点に線を描画します。
- テキストを描画 – テキスト文字列をキャンバスに描画する方法を示します。
- 移動 – キャンバスの原点を新しい位置に移動する方法を学びます。
- 回転 – 回転変換を追加して、描画オブジェクトを回転させます。
- 拡大縮小 – キャンバスユニットを水平方向または垂直方向に拡大縮小する変換を追加します。
このチュートリアルは役に立ちましたか？
