Excelでjsonファイルのデータ作ろうぜ（おまけ）

2024年7月23日 14:11

はろはろ、わたしです。
最近こいつを見てる人がそこそこいまして、、

おまけでちょこっとjavascriptの中身書こうかなぁとか思いました次第。

とはいえ？私はjavascript完全に理解したマン（SNS的表現
なので、わたしはこうやって使ったよ程度に見てもらえると助かります。
（プログラミングは進化がえぐいので、「もっと簡単にできるやろ」みたいな気持ちになることが多々ある）

で、どこから書くよ？
ま、jsの中身だけ書くか。
まずはね、作成したjsonファイルを持たすためのエリアを作成しますよ。
よいっと

var qadata = new XMLHttpRequest();

XMLHttpRequext()でファイルを管理できるようです（雑
で、このqadataというエリア（エリアと呼んでいいのかはわかってない）
・・qadataというエリアにjsonファイルの中身をペタッとしたいのです。

qadata.open('GET', 'qa.json');
qadata.send();

こんな感じでいけるです。
1行目は何をするか、これだと
「qa.jsonファイルをGETしてこい！」
って意味です。
2行目は実行！っていう意味であってるかな？
でこちらでqa.jsonファイルを見れるように処理が行われます。
ぴぽぴぽぴぽぴぽーー
で、終了したら次の処理を行いたいのでよっこらせ

    qadata.onreadystatechange = () => {
        let htmlData = '';
        if (qadata.readyState == 4 && qadata.status == 200) {

qadata.onreadystatechange = () =>{
こちらは、えっと、、
qadata.send()で処理が行われますね。
今回はjsonファイルを取りに行っております。
で、その読み込みが終了したり、エラーが起きたり、、要はステータスが変わったら動く処理です。

let htmlData ='';
こちらはリターン用の文字列を保管するエリアです。
わたしの知識上、Html文を作成→ウェブページに後つけみたいな感じで張り付けるという認識ですので、それ用のエリアですね。
（ちょっと書く位置おかしかったなｗ

if (qadata.readyState == 4 && qadata.status == 200)
qadata.onreadystatechangeは、qadataのステータスが変更されたときに処理が実行されるのですが、
radyState
→通信状態を持ってます。４は通信が終了した状態です。
status
→俗にいう戻り値ですね。202は正常終了です。
ということで通信が終了していて、その通信が正常終了したときに処理を行うよということです。

で、実際の処理はこんな感じですよ

            let jsonData0 = JSON.parse(qadata.responseText);
            for (let j = 0; j < jsonData0.length; j++) {
                let htmlA = '<h2 style="margin-top: 50px">'
                    + jsonData0[j].name
                    + '</h2>';
                for (let k = 0; k < jsonData0[j].nakami.length; k++) {
                    let htmlB = '<div class="qaitemset"><div class="toumei"><label class="qlabel"><input type="checkbox" name="test" id="show"><h3>Ｑ：'
                        + jsonData0[j].nakami[k].q
                        + '</h3></label><label class="hidelabel"><p class="qa_answer" style="margin-top: 10px"> Ａ：'
                        + jsonData0[j].nakami[k].a +
                        '</p>';
                    htmlB += '</label ></div ></div >';
                    htmlA += htmlB;
                }
                htmlData += htmlA;
            }

varとletの使い分け方がよくわからん💩
→重複を許すか否かだけでしたわ。

まずはですね、qadataに拾いに行ってもらいましたjsonファイルのデータをjson形式に変換してもらっております。
（うーん、、json形式で受ける方法もありそうなんだよなぁ、、）

let jsonData0 = JSON.parse(qadata.responseText);

これですね。
JSON.parse(テキスト)
これで、受信したテキストをJSONデータとして扱えるように加工してもらいます。
これをしますと、データをちゃんとJSONデータとして扱うことができるようになるんですね。
で、次。for文

            for (let j = 0; j < jsonData0.length; j++) {
                let htmlA = '<h2 style="margin-top: 50px">'
                    + jsonData0[j].name
                    + '</h2>';

　　　　　　　　　　//ちょっと省略

                htmlData += htmlA;
            }

はい、ちょっと汚いね。えへ。
ここで以前作成したjsonファイルもおいておきますね。

[
  {
    "name": "このアプリについて",
    "nakami": [
      {
        "q": "どういったことができますか？",
        "a": "こんなことができます"
      },
      {
        "q": "○○ですか？",
        "a": "××ができます"
      },
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  },
  {
    "name": "○○について",
    "nakami": [
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  }
]

こんな感じですね。
では見ていきますよ。

まずはこれ
jsonData0.length
これ、何を見ているかと言いますとね、
jsonファイルの一番上位の配列の数を見ています。
えーっと、、こうや！

えっとですね、、最初と最後の［］に囲まれている｛｝の数がいくつあるかですね。
その｛｝の中に何が入っているとかは全然気にせずに、［］のすぐ下にある｛｝がいくつあるかを見ています。
この例ですと、２つです。
なので、２回処理が行われます。（for文の書き方説明は省略）
実行される処理がこいつ

                let htmlA = '<h2 style="margin-top: 50px">'
                    + jsonData0[j].name
                    + '</h2>';

　　　　　　　　　　//ちょっと省略

                htmlData += htmlA;

はぁ、飽きてきたｗ
わかりますかね、HTMLを記述しております。
htmlAという（適当命名）エリアに
<h2 style="margin-top: 50px"> + jsonData0[j].name + </h2>
を入れております。
jsonData0[j].nameは、最初のjは０なので、、
jsonData0[0].name
こちら、配列０個め（先頭）のnameの要素という意味です。
今回のjsonファイルでいうと、、

[
  {
    "name": "このアプリについて",
    "nakami": [
      {
        "q": "どういったことができますか？",
        "a": "こんなことができます"
      },
      {
        "q": "○○ですか？",
        "a": "××ができます"
      },
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  },
  {
    "name": "○○について",
    "nakami": [
      {
        "q": "質問",
        "a": "回答"
      }
    ]
  }
]

「このアプリについて」というテキストになります。
なので、

<h2 style="margin-top: 50px">このアプリについて</h2>
こんな文字列が入っているということです。

あぁ、説明へたくそすぎる(´・ω・`)
じゃぁ、今説明したforの中にあるforについてみていくよ

for (let k = 0; k < jsonData0[j].nakami.length; k++) {
    let htmlB = '<div class="qaitemset"><div class="toumei"><label class="qlabel"><input type="checkbox" name="test" id="show"><h3>Ｑ：'
      + jsonData0[j].nakami[k].q
      + '</h3></label><label class="hidelabel"><p class="qa_answer" style="margin-top: 10px"> Ａ：'
      + jsonData0[j].nakami[k].a +
      '</p>';
     htmlB += '</label ></div ></div >';
     htmlA += htmlB;
}

次は、

jsonData[0]。上の絵で言うところの黄色い部分、その中にあるnakamiという奴の中身（配列）の個数だけ繰り返します。
今回だと３回ですね。
で、作っているテキストがこんな感じです

<div class="qaitemset">
 <div class="toumei">
  <label class="qlabel">
   <input type="checkbox" name="test" id="show">
    <h3>
      Ｑ：jsonData0[j].nakami[k].q
    </h3>
   </label>
  <label class="hidelabel">
   <p class="qa_answer" style="margin-top: 10px">
      Ａ：jsonData0[j].nakami[k].a
   </p>
  </label >
 </div >
</div >

heml完全に理解したマンなので、雑です。えへ。

前回掲載したこんな風に枠でかこった形にしたいので、ちょっとdivとかがあります。
classはcssで作っとります（css完全に理解しry
あと、最初はQだけを表示しておいて、クリックするとAが表示される形にしたかったので、ちょっと汚くなっております。

jsonData0[j].nakami[k].q と jsonData0[j].nakami[k].a
これらにはえー、今回だとjはまだ0が入ってますね。
kも初期値が0なので、0が入っております。なので
こう！
jsonData0[0].nakami[0].q
と
jsonData0[0].nakami[0].a

jsonData[0]が

この絵だと黄色いところ、
その中のnakamiエリアにある配列の0個め
先頭の部分。の「q」と「a」の中身を指しています。
なので、作成されるテキストは

<div class="qaitemset">
 <div class="toumei">
  <label class="qlabel">
   <input type="checkbox" name="test" id="show">
    <h3>
      Ｑ：どういったことができますか？
    </h3>
   </label>
  <label class="hidelabel">
   <p class="qa_answer" style="margin-top: 10px">
      Ａ：こんなことができます
   </p>
  </label >
 </div >
</div >

こんな感じのテキストができます
（改行は見やすくするために入れております）

はい、で、このテキストを

         htmlA += htmlB;

htmlAにインクリメント（+=）しております。
便利ですねぇ、インクリメント。・・・インクリメントって呼んでいいのか？
ま、htmlAに入っているテキストの後ろに今作ったテキストをくっつけております。
なので、こんな感じ

<h2 style="margin-top: 50px">このアプリについて</h2>
<div class="qaitemset">
 <div class="toumei">
  <label class="qlabel">
   <input type="checkbox" name="test" id="show">
    <h3>
      Ｑ：どういったことができますか？
    </h3>
   </label>
  <label class="hidelabel">
   <p class="qa_answer" style="margin-top: 10px">
      Ａ：こんなことができます
   </p>
  </label >
 </div >
</div >

で、できるわけですね。
後はこれらの処理がそれぞれのqaデータと見出しがなくなるまで繰り返すといい感じにHTMLデータを作ってくれるはずであります。

良い感じのHTMLデータが完成しましたら、Webページに張り付けましょう。

js側の記述はこれだけでok

var qaitemset = document.getElementById('qaitemSet');
if (htmlData == '') {
    qaitemset.innerHTML = 'よみこみにしっぱいしました'
} else {
    qaitemset.innerHTML = htmlData;
}

getElementByIdで表示先のHTMLにあるIDを検索しております。
(今回はqaitemSetって名前)
で、
HTML側は「id="qaitemSet"」っていう要素を、セットしたい場所に記述するだけです
例：<div id="qaitemSet">
あ、「<script src="ファイル名.js"></script>」の記述も忘れないようにね！

最後に
記述するのはこの中です。
初期化処理でよく使われているやつですね。

document.addEventListener('DOMContentLoaded', function () {
　　//この中に処理を書くよ
});

・・・ふぅ、、
色々完全に理解したマンの能力ではこの程度の説明が限界だよ☆
javascript関連の説明はほかのところにごろっごろに転がっているからそちらの方が優しいと思うよ。
（ユーザがたくさんいる言語の強みですな）
ちなみに私の弱点はweb系だよ　;つД｀)

はぁつかれたｗ
おまけと言いながら大ボリュームだよ！
コード書いて少し経っちゃったから「何だっけ？」がいっぱいでなかなか苦戦しましたわ。
ではでは。

この記事が気に入ったらサポートをしてみませんか？