---
title: クライアントサイド Web API
slug: Learn/JavaScript/Client-side_web_APIs
tags:
  - API
  - CodingScripting
  - DOM
  - JavaScript
  - Landing
  - WebAPI
  - グラフィック
  - データ
  - メディア
  - モジュール
  - 初心者向け
  - 学習
  - 記事
translation_of: Learn/JavaScript/Client-side_web_APIs
---
<div>{{LearnSidebar}}</div>

<p class="summary">Web サイトやアプリケーション用にクライアント側の JavaScript を書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p>

<h2 id="前提条件">前提条件</h2>

<p>このモジュールをよく理解するためには、ここまでの一連の JavaScript に関するモジュール (<a href="/ja/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p>

<p><a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p>

<div class="note">
<p><strong>注記</strong>: もし自分のファイルを作成できないようなデバイス上で作業しているなら、大半のコード例を <a href="http://jsbin.com/">JSBin</a> や  <a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインプログラム作成・実行環境で試してみることもできます。</p>
</div>

<h2 id="ガイド">ガイド</h2>

<dl>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></dt>
 <dd>まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API が何なのか、どんな使い方があるのかも見ていきます。</dd>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文章の操作</a></dt>
 <dd>Web ページやアプリを書く場合に、最も多く必要になるのは Web 文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これは HTML とスタイルに関する情報を {{domxref("Document")}} オブジェクトを使いまくって操作するための一連の API です、を用いて行ないます。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。</dd>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></dt>
 <dd>また別に、モダンな Web サイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 {{domxref("XMLHttpRequest")}} と <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> について見ていきます。</dd>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></dt>
 <dd>これまでに説明した API はブラウザに組込まれていますが、全ての API が組込まれているのではありません。グーグルマップや Twitter、Facebook、ペイパルなど、多くの巨大な Web サイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログに twitter のタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者に Facebook でログインできたり)するための API を提供しています。この記事ではブラウザ API とサードパーティ API の違いを見ていき、典型的な後者の使い方をお見せします。</dd>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></dt>
 <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics) 言語から、HTML の {{htmlelement("canvas")}} キャンバス要素に描画するための API まで (<a href="/ja/docs/Web/API/Canvas_API">キャンバス API </a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバス API への導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></dt>
 <dd>HTML5 には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自 API を備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd>
 <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保存</a></dt>
 <dd>モダンなブラウザには、Web サイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd>
</dl>