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

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

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

はじめに

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

学習したもの

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


MDN JavaScript コーナー

チュートリアル
  ┣ 完全な初心者向け
  ┃ ┣ JavaScript の第一歩
  ┃ ┣ JavaScript の構成要素
  ┃ ┃
  ┃ ┗ JavaScript オブジェクトの紹介
  ┃   ┣ オブジェクトの基本
  ┃   ┣ 初心者のためのオブジェクト指向 JavaScript
  ┃   ┣ オブジェクトプロトタイプ
  ┃   ┣ JavaScript の継承
  ┃   ┣ JSON データの操作(本日の学習箇所)
  ┃   ┣ オブジェクト構築の実践
  ┃   ┗ 評価:バウンスボールのデモへの機能の追加
  ┃
  ┣ 中級者向け
  ┗ 上級者向け


概要

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

JSON データの操作

JSON内のデータの扱い方、JSON の作成方法について学習。

ノート・メモ

JSON データの操作

  • JSON ( JavaScript Object Notation )

    • テキストベースの構造データ表現フォーマット。一般的にはウェブアプリケーション でデータを転送する場合に使用されます。

    • JavaScript オブジェクトの構文に従ったテキストベースのフォーマットです。

    • JavaScript とは独立して扱われることがあり、多くのプログラミング言語環境には JSON を読み込む(パースする)ことや生成する機能があります。

    • JSON データへアクセスしたい場合は、JavaScript オブジェクトへ変換する必要が あります。JavaScript には JSONJavaScript オブジェクトを相互に変換できる メソッドを持った JSON というグローバルなオブジェクトがあります。

    • JSON はファイルとして保存可能。MIME type が application/json で .json という 拡張子のついたテキストファイル。

  • JSON の注意事項

    • JSON はただのデータフォーマットなので、プロパティのみを含むことができ、 メソッドを含むことはできません。

    • JSON では文字列とプロパティ名をダブルクォートで括る必要があります。シングル クォートで括ることはできません。

    • 1 つだけカンマやコロンが抜けているだけで無効な JSON になりえます。なので、 使用しているデータが有効であるかについては注意してみなければなりません (機械的に作った JSON のほうが、プログラムに問題がなければ、エラーは少なく 済みます)。

    • JSON は配列やオブジェクトに限らず JSON内に含むことができるデータ型のデータ だけでも有効な JSON となります。

    • プロパティがクォートで括られていない JavaScript コードと異なり、JSON では、 クォートされた文字列だけがプロパティとして使われます。

  • JSON を取得するには、XMLHttpRequest (しばしば XHR と呼ばれる) という API を 使用します。これは非常に便利な JavaScript オブジェクトで、JavaScript を使用 してサーバからリソース (例:画像、テキスト、JSON、さらには HTML スニペットなど) を取得するネットワークリクエストを行うことができます。つまりページ全体を再読み 込みせずに、小さな部分のコンテンツを更新することができます。

// 取得したい JSON があるURLを変数へ代入する
var requestURL = 'リクエストを送る先のURL';
// 新しいリクエストオブジェクトを作成する
var request = new XMLHttpRequest();
// 新しいリクエストを開始する
request.open('GET', requestURL);
  • ブラウザには組込みの JSON オブジェクトが備わっていて、これは以下二つのメソッド を備えています:

    • parse(): JSON文字列を引数に取り、それに対する JavaScript オブジェクトを返します。

    • stringify(): オブジェクトを引数に取り、等価な JSON文字列形式を返します。

分かった事

  • プログラム内で JSON を扱う方法が分かりました。

分からなかった事

  • 分からなかった事というか、 JSON 自体の記述をチャプター内であまりしていないので 徐々に記述を繰り返して理解したいと考えています。

まとめ

今回は JSON の扱い方を主に学習しました。残り2つのチャプターで初心者向けの内容が 終わりますが、気を抜かずに学習を進めたいと思います。

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