【学習ログ】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 には JSON と JavaScript オブジェクトを相互に変換できる メソッドを持った 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つのチャプターで初心者向けの内容が 終わりますが、気を抜かずに学習を進めたいと思います。
最後までご覧頂きありがとうございました。