イイダリョウのブログ。APIでDOMに読み込むJS「JSON未遂事件簿」の続きです。JSON(ジェイソン)はJSの連想配列(オブジェクト)とよく似たとても馴染深いデータ形式。前回はっぴいえんどアルバム情報を多次元配列にしてDOMに読み込みました。APIで読み込んでみます。Notation」の略。オブジェクトはプロパティとメソッドでできていると説明しましたが、これは狭義の意味で、広義では「配列」も「連想配列」もオブジェクトの一種です。Notationは「表記法」という意味でJSONは「ジャバスクリプトのオブジェクトの表記法」とうい意味です。「前回」の最後に触れたように、JSONはJSの多次元配列とよく似ています。※参考:JSONファイルの書式はっぴいえんどの多次元配列をJSON化する前回作成したはっぴいえんどアルバム情報の多次元配列をJSON化するとこうなります。あと、ななんとJSONにはコメントを含むことはできないようです!!削除しました。NxWorldさあ、完成したJSONデータをファイルとして保存しましょう。JSONの拡張子は.jsではなく.jsonです。今回はhappyend.jsonというファイル名にしました。これをサーバ上にアップします。/jsonなどわかりやすいディレクトリ名をつけるといいでしょう。*1非同期通信:AjaxとはJSONファイルから読み込んだデータを使ってページの一部(=DOM)のみを変更します。※参考:DOMとはページ全体をリロードせずページの一部のみを変更する技術を「Ajax(エイジャックス)」と言います。Javascript+XML」の略です。2005年、Ajaxを使ったGoogleマップが登場し、世のWebクリエイターに衝撃を与えました(ページリロードせずに地図のスクロールや拡大縮小ができた)。Language」の略でExtensibleは「拡張可能」という意味です。LanguageはHTMLのMLと一緒で「マークアップ言語」。全体で「拡張可能なマークアップ言語」という意味になります。XMLはHTMLのような決まったタグ名ではなく独自のタグを作ることができます。これがデータを扱うのに向いています。Ajaxという言葉ができた2005年頃のデータはXMLが主流でした。現在はJSONの方が主流になってきていますが、言葉としてはXMLの「X」が残り続けているわけです。Ajaxの中で一番重要な単語は頭の「Asynchronous」で「非同期な」という意味です。XMLをざっくり「データ」と意訳するとAjaxは「ジャバスクリプトとデータによる非同期通信」といった意味になります。非同期通信によってページ全体ではなく必要最低限のデータ読み込みになるためユーザーの操作が快適になるわけです。API)JSONファイルを読み込む方法はいくつかあります。API2005年当初は「XMLHttpRequest()」メソッドしか方法がありませんでした。記述量はとても多いです。一つ一つを見ていくと、データ読み込み時に何が行われているのかより深く理解できそうです。名前に「XML」とありますがこれは命名時の事情で、実際にはJSONファイルも読み込むことができます。Qiita次のjQueryの登場によってAjaxは革命的に扱いやすくなりました。API」は最近生JSに標準で加わった書き方です。jQeuryほどではないにしてもXMLHttpRequest()に比べるとかなりシンプルになってきたようです。Interface」。プログラムでアプリを操作するためのインターフェイス(接点)、といった意味です。APIを試してみたく思います。APIはこのような書式です。Qiitaいつものように外側から紐解いてみましょう。()メソッドのあとにthen()メソッドが数珠つなぎになっていてjQueryのメソッドチェーンのようです。()メソッドの引数にはjsonファイルのURLが、2つのthen()メソッドの引数には処理が書かれます。//処理});then()メソッドの引数の中には共に無名関数が入っています。//処理});1つ目のthen()の無名関数の引数はresponseオブジェクトが入ります。この無名関数のブロックには戻り値でresponseオブジェクトのデータ型を指定するメソッドが入ります。Textが指定できます。2つ目のthen()の無名関数の引数は上のthen()の戻り値のデータ型が入ります。このデータ型に変換されたデータがブロックの中の処理に使われます。冒頭のコードはresponse.text()でtext型のデータに変換されます。APIで読み込んでみます。CodePen.コードはこうなります。false);変数urlにjsonファイルのURLを入れます変数btnにダミーで作ったid#btnのDOMを紐づけています。引数はjsonファイルのURL。()でtext形式の戻り値を返す。2つ目のthen()でアラートでtextを表示。先ほどのアラートはデータ全体がそのまま表示されていました。中の値を一つ一つ取り出せるとより実用的です。先ほどのコードはテキスト形式text()で読み込みましたが、値を読むにはJSON形式json()にします。json[キー];});1つ目のthen()の戻り値のtext()をjson()に変更2つ目のthen()の無名関数の引数にjsonをいれる。処理をしたいオブジェクトにjsonを代入し[キー]でキーの値を呼び出す。});最初の例text()をjson()に変更json[0]["title"]で、jsonファイル内の1つ目の配列(1stアルバム)のタイトルtitleの値を呼び出す。innerHTMLでボタンのテキストがタイトルの値に変更されるアルバム情報全部を表示するデータを値単位で取り出せたので、「前回」のコードを改造して外部JSONファイルのはっぴいえんどアルバム情報全部を表示できそうですね。CodePen.できました!「前回」と全く同じ形ではっぴいえんどのアルバム情報を表示しています!コードはこのようになります。</section></div></section>まず、HTMLは前回と全く同じです。JSがちょっと違います。});前回、冒頭に多次元配列で直接書いてあったはっぴいえんどのアルバム情報は今回は変数urlで外部JSONファイル化しています。先ほどのコードにあったクリックイベントは削除しています。データ形式も引き続きjson()です。2つ目のthen()の中に前回のコードを入れています(詳しくは前回参照)が、一部を書き換えています。前回のアルバム情報を入れていた変数albumsの部分をjsonに書き換えています。これによって変数albumsではなく外部JSONファイルに値を読みにいくわけです。最後に本当は前回の投稿でここまでたどり着きたかったのですが、あまりに前提知識が少なかったため、ここまでかかってしまいました。*2やったことはHTMLのタグとテキストを分離テキストをJS内でデータ化データをJSから外部JSONファイルに分離JSONファイルの読み込みです。単なるテキストから再利用性、拡張性の高いデータに生まれ変わったと思います!今、自分がブログで並行して進めているコンテンツは最終的にJSONデータ連携に繋がっていきそうな予感がしており、大きな一歩を踏めたと思っています。01:32Tweet関連記事2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。ChartsをQuickにStartするQiitaアドベントカレンダー「JavaScript2」12日目の記事です。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。