More than 3 years have passed since last update.

JSのお仕事　(JSアウトプット2)

Last updated at 2020-12-01Posted at 2020-12-01

##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生プログラマーのAtieです！
今回もJSを学んできたのでそのアウトプットをしていきます！
今回は第二回目ですがもし第一回の記事を読んでいなければそちらのほうから読んでいただくとわかりやすいと思います！なぜJSが必要なのか？　(JS学習アウトプット)
今回は「JSのお仕事」ということでJSのお仕事(役割)について学んできました！
それでは！

##前回の復習

従来のweb

レスポンスがhtml
ページ全体がレンダリング

現代のweb

レスポンスがJSON
必要なところだけレンダリング
リッチで使いやすい

#JSのお仕事
JSのお仕事には主に二つあります
一つ目が
###データのやり取り
二つ目が
###DOM操作
です

順に解説していきます

##データのやり取り
ではまずJSの一つ目のお仕事「データのやり取り」についてです
Twitterを例に解説していきます

まずはTwitterのhtmlの構造を見ていきましょう！(この構造とは限りませんし省略してあります)

home.html

<ul>
    <li>
        <div>
            <img src="~">
        <div>...</div>
        </div>
    </li>
</ul>

もし構造がこのようになっているとします
しかしこれだとスクロールすると新しいツイートが表示されないので
スクロールするとJSがwebAPIに「データが欲しいです！」と頼みに行きます
そしてwebAPIがDBなどにアクセスしてデータをとってきてJSに「ほれ！」とデータを渡します
そしてこの時に渡されるデータが「JSON」なのです
JSONについては前回学んだので説明は省きます

それでは渡されたJSONのデータを見てみましょう(これはあくまでも一例です本物のTwitterがこうだとは限りません)

data.json

{
    "data" : [
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        }
    ]
}

このようなデータになっていました！
しかしデータを受け取ったところでこのまま表示させるわけにはいきません
読みにくいのでhtmlに変換しますこれをパースといいます
パース自体は「解析」という意味で何もhtmlに変換することすべてがパースと呼ぶわけではありません
パースについてですがここからはDOM操作です

##DOM操作
さぁ！先ほどwebAPIからjsonをもらうことができました！
「わーい！」
...
しかしまだ仕事は残っています
先ほど説明しましたがjsonをhtmlに変換して見やすくします
これをパースと呼びます

DOM操作の例を見るためにhtmlとjsonのデータを見てみます

home.js

<li>
    <div>
        <img src="data[0].src">  <!--jsonデータの0番目のsrcのデータがここに入る-->
        <h1>data[0].name</h1>    <!--jsonデータの0番目のnameのデータがここに入る-->
        <p>data[0].bady</p>      <!--jsonデータの0番目のbadyのデータがここに入る-->
    </div>
</li>

data.json

{
    "data" : [
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        },
        {
            "name": "～～",
            "bady": "～～",
            "src": "～～"
        }
    ]
}