##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生プログラマーの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": "～～"
        }
    ]
}

htmlにはコメントを書いたのでhtmlファイルとjsonのデータを見比べてみてください
わかりやすいと思います
このようにhtmlをjsonに変換することをパースと呼びましたがこのようなことがDOM操作です

パースが終わることで新しいデータが読み込まれ新しい投稿が表示されます

##まとめ
今回のまとめです！

JSのお仕事

データのやり取り
DOM操作

データのやり取りではJSがwebAPIにデータを取りに行きます
DOM操作ではとってきたjsonデータをhtmlに変換します(パースします)
この二つが主なJSのお仕事です

データのやり取りには

保存する
ローカルに保存する
cookie
なども含まれています

DOM操作では

追加
変更
削除
などもしています

##最後に
ここまで読んでいただきありがとうございました
次回は実際にコードを書いてみます！
それでは！また次回に！

前回

AtieのTwitter
しまぶーのIT大学さんのTwitter
##参考
【基礎から学ぶ JavaScript 入門 #2】Twitterを例にJavaScriptがどんな働きをするのか理解しよう【ヤフー出身エンジニアが教える初心者向けプログラミング講座】