フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。

【学習ログ】MDN JavaScript チュートリアル (10 回目)

はじめに

この記事は、JavaScript チュートリアルの学習ログです。

学習したもの

MDN にある JavaScriptチュートリアルを学習しました。


MDN JavaScript コーナー

チュートリアル
  ┣ 完全な初心者向け
  ┃
  ┣ 中級者向け
  ┃ ┣ クライアントサイド Web API
  ┃ ┃ ┣ Web API の紹介(本日の学習箇所)
  ┃ ┃ ┣ 文章の操作
  ┃ ┃ ┣ サーバからのデータ取得
  ┃ ┃ ┣ サードパーティ API
  ┃ ┃ ┣ 絵を描く
  ┃ ┃ ┣ 動画と音声の API
  ┃ ┃ ┗ クライアント側でのデータ保存
  ┃ ┃
  ┃ ┣ JavaScript 「再」入門
  ┃ ┣ JavaScript のデータ構造
  ┃ ┣ 等価比較と同一性
  ┃ ┗ クロージャ
  ┃
  ┗ 上級者向け


概要

チュートリアルで習った事の概要は下記の通りです。

Web API の紹介

Web API とは何か、どう動くのか、どう使うのかなど API について知る。

ノート・メモ

  • API(Application Programming Interfaces)

    • 開発者が複雑な機能をより簡単に作成できるよう、プログラミング言語から提供される 構造です。複雑なコードを抽象化し、それにかわる簡潔な構文を提供します。
  • クライアントサイド JavaScript での API

    • JavaScript 本体の一部ではなく、JavaScript 言語のコアの上に築かれた物です。 それらはおおよそ二つのカテゴリに分けられます。

      • ブラウザ API
        Web ブラウザに組込まれていて、ブラウザやコンピュータの環境の情報を取得し、 これを使って役に立つややこしい事を行えるようにするものです。

      • サードパーティ API
        デフォルトではブラウザに組込まれておらず、普通はコードと情報を Web のどこか から読み込まねばなりません。

  • JavaScriptAPI とその他 JavaScript ツールの関係(おさらい)

    • JavaScript
      ブラウザに組込まれた高レベル言語で、Web ページやアプリに機能を実装するのに 使えます。ブラウザ以外のプログラミング環境でも使用できる。

    • ブラウザ API
      ブラウザに組込みの JavaScript 言語の上にある構造で、何かの機能をもっと簡単に 実装できるようにします。

    • サードパーティ API
      サードパーティのプラットフォーム (TwitterFacebook) 上に作られた構造で、 それらのプラットフォームの機能を Web ページで利用できるようにします。

    • JavaScript ライブラリ
      多くは、独自の関数 を含んだ一つか複数の JavaScript ファイルで、Web ページに くっつけることでスピードアップしたり共通の機能を書いたりできるものです。

    • JavaScript フレームワーク
      ライブラリの一階層上にあたり、JavaScript フレームワーク (例えば Angular や Ember) は HTML や CSSJavaScript、インストールして一から Web アプリ ケーションを作成するのに使えるその他もろもろの技術がパッケージ化されている 場合が多いです。

  • 一般的なブラウザ API のカテゴリー

    • ブラウザで読み込んだ文書を操作するための API
    • サーバからデータ取得をする API
    • グラフィックスを描画したり操作する API
    • 動画と音声の API
    • バイス API
    • クライアント側でのデータ保持 API
  • 一般的なサードパーティ API の例

  • API を利用するときは、一つ以上の JavaScript オブジェクトを通じて API とやりとり し、オブジェクトは API が使用するデータ(オブジェクトのプロパティとして持つ)や API が提供する機能(オブジェクトメソッドとして持つ)の容れ物として使われます。

  • 他の関数の引数として引き渡される関数の事をコールバック関数と呼びます。

  • API を使うときは、その API の入口がどこなのかしっかり確認するべき。 ただし、当然 API によって入口は違う。

  • API コードを書き込むための固有のコンテキストを作成しなければならないものがよく あります。

  • 状態の変化を捉えるのにイベントを使います。

  • WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です。

分かった事

  • API について、どんな種類があるか・どんな使われ方をしているのかが大枠で理解出来 ました。

分からなかった事

  • チュートリアルの途中で Google Maps API を使用したプロゴラムの説明があったが、 よくわからなかった。オブジェクトを作成して、API が提供する機能の容れ物として いるのは分かったけど、そこから先がわからない。

まとめ

途中分からない部分があったりしましたが、「細かい所までよく理解できなくてもあとで 詳しく説明する予定だから心配しないで大丈夫」との事だったので、気にせずどんどん 進めたいと思います。

最後までご覧頂きありがとうございました。