イイダリョウのブログ。JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿...)2018-07-31JS多次元配列に入れたデータをDOMに入力する(JSON未遂事件簿...)JSはじめに、今回はJSONにあまり触れていません!WordPress等で日々サーバサイドやデータベースの便利さを感じつつ...そういえばJSとよく似たJSON(ジェイソン)というデータ形式があったな。これを使えばクライアントサイドでもグラフやゲームやインタラクティブコンテンツやらを作れそうだ、と思い浮び調べ始めたところ...前提知識不足すぎて知りたいことが数珠つなぎ!数週間も沼にハマってました。JSの多次元配列でやりたいことを実現してみた。はっぴいえんどのアルバム情報を入れるHTMLの中身を空にする。※参考:ネイティブJSやってみたシリーズqiita.comHTMLではっぴいえんどのアルバムを入力したった!まずは手頃なところで、アルバム3枚で解散した「はっぴいえんど」の情報をHTMLで表現。CodePen.コードはこんなです。クモのようにコツコツとこれ、3枚だからまだそんなに苦にならないけど、例えばビートルズ*3の全アルバムの場合は十数枚あるんでもっとキツそうです。ホワイトアルバムなんて2枚組ですからね。この曲名をJSの配列に移してみましょう。配列はナンバリングでアクセスする「配列」とキー名でアクセスする「連想配列」の2種類がありますね。値};//アクセス連想配列名[キー]配列は[]カッコ、連想配列は{}カッコです。配列のカウントは1ではなく0から始まります。[0]は1番目という意味。配列の中に配列を入れ子できて、これを「多次元配列」と言います。値];//アクセス配列名[1][0]2番目のキーの中の1番目のキーの値にアクセス。エクセルでいう「行」と「列」みたいなイメージです。連想配列の場合はこうなります。値};//アクセス連想配列名[キー][キー]これもキーの中の連想配列のキーの値にアクセス。配列と連想配列の混合もできます。値];//アクセス連想配列名[1][キー]配列2番目の中のキーの値にアクセス。多次元配列にはっぴいえんどのアルバム情報を入れる1枚目のアルバムはこのようになります。最初のHTMLに比べるもタグが無いため、見た目がスッキリ。修正もしやすそうです。]}変数album1の中に連想配列タイトルtitle、発売日release、曲名trackを入れる。曲名trackの値には配列で11曲の曲名を入れるHTMLの中身を空にする。データをすべて配列に写したら、HTML内の情報は空っぽにしてしまいましょう。</section></div>曲名.trackはol要素ですが中のリストliは空にしました。アルバムによって曲数が違うので、曲数分ループしながら追加しようと思います。配列のデータをDOMに入れる次に配列データの内容をDOMに入れ込みます。クモのようにコツコツとこのように書きます。CodePen.「HTML」「JS」タブを切り替えてみてください。HTMLの中身は空っぽなのにJSの配列のアルバム1枚目のデータが表示されていますね!しかしながら、アルバム2枚目、3枚目を増やすときに、このコードをコピペして、変数名を打ち替えて...ふーむ、この量産はまた冗長の「にほひ」がしてきますね。ビートルズ全アルバムなんか作ってらんないし、修正が生じたら修正箇所が倍々ゲームです。各アルバムのデータを一つの配列に統合まず、アルバムデータ自体も変数album1といちいち番号を打つのは手間です。打ち間違わないよう神経を使うしね。そこで、全体を配列の中にに入れてみます。外側に全体を包む変数albumsを作り、この中に配列を入れます。全体としてはこうなります。]}]これで「i番目のアルバム」と配列数をカウントしながらループ処理ができると良さげです。HTML上のテンプレも先ほどの曲名リストliの様にループで増やせばいいので1枚分にしちゃいましょう。</section></div></section>さらにコンパクト!アルバム枚数分ループしながら配列データをDOMに入れる!まず先ほどのHTMLのテンプレート.album一式をアルバム枚数分-1枚ループして複製したい。spec.appendChild(clone);}変数specに.specセレクタを取得for文で配列albumsの配列をアルバム枚数-1枚分ループ(変数iのカウントを1から始める)*4変数cloneに変数specの最初の子要素firstElementChild(.albumセレクタ)を複製(cloneNode(true))する*5変数specに変数cloneを最後に追加する(appendChild())これでテンプレがアルバムと同じ3つに増えた。次に繰り返し使うセレクタを変数に入れて取得しよう。querySelectorAllは複数ある要素を全て取得し、配列に入れる。trackセレクタを取得この取得は最初のテンプレ複製後に実行しないともともとの1つしかない挙動になったので注意。最後にDOMにデータを入力。}for文で配列albumsの配列数(アルバム数)分ループタイトル:変数specTitleのi番目に配列albumsのi番目のtitleキーを入れる(innerHTML)販売日:変数specReleaseのi番目に配列albumsのi番目のreleaseキーを入れる(innerHTML)曲名:for文で配列albumsのi番目のtrackキーの配列数(曲数)分ループ。曲数カウントの変数はtにしてみた。CodePen.「HTML」「JS」タブを切り替えてみてください。冒頭に触れたJSONですが、こんな書式です。"でくくられている部分。外部ファイルとして独立し、拡張子は.jsonになります。これによってPHPなどのサーバサイドからもアクセスや操作が容易になります。データにするとHTMLテキストよりも拡張性や再利用性が高まるわけです。次回は外部JSONファイルとして切り出して、アクセスしてみたく思います!昔からJSONはjQueryならシンプルな書式でアクセスできたようだけど、触る機会はなかった。調べたところ、最近は他にもいろんな書き方が増えてきたようです。どれが一番ベターなのか検証したい。それでは!※参考:ネイティブJSやってみたシリーズqiita.com*1:本当は13日の金曜日にちなんで投稿しようと思ってたw*2:関係ないけど学生時代コピーバンドやってました。松本隆のドラム大好きです。22:45Tweet関連記事2019-08-17【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)Vue.jsシリーズ続きです。前回はコンポーネントでハローワール...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。