あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生プログラマーのAtieです！
今回もJSを学んできたのでそのアウトプットをしていきます！
今回は第二回目ですがもし第一回の記事を読んでいなければそちらのほうから読んでいただくとわかりやすいと思います！なぜJSが必要なのか？ (JS学習アウトプット)
今回は「JSのお仕事」ということでJSのお仕事(役割)について学んできました！
それでは！
前回の復習
従来のweb
- レスポンスがhtml
- ページ全体がレンダリング
現代のweb
- レスポンスがJSON
- 必要なところだけレンダリング
- リッチで使いやすい
JSのお仕事
JSのお仕事には主に二つあります
一つ目が
データのやり取り
二つ目が
DOM操作
です
順に解説していきます
データのやり取り
ではまずJSの一つ目のお仕事「データのやり取り」についてです
Twitterを例に解説していきます
まずはTwitterのhtmlの構造を見ていきましょう！(この構造とは限りませんし省略してあります)
<ul>
<li>
<div>
<img src="~">
<div>...</div>
</div>
</li>
</ul>
もし構造がこのようになっているとします
しかしこれだとスクロールすると新しいツイートが表示されないので
スクロールするとJSがwebAPIに「データが欲しいです！」と頼みに行きます
そしてwebAPIがDBなどにアクセスしてデータをとってきてJSに「ほれ！」とデータを渡します
そしてこの時に渡されるデータが「JSON」なのです
JSONについては前回学んだので説明は省きます
それでは渡されたJSONのデータを見てみましょう(これはあくまでも一例です本物のTwitterがこうだとは限りません)
{
"data" : [
{
"name": "～～",
"bady": "～～",
"src": "～～"
},
{
"name": "～～",
"bady": "～～",
"src": "～～"
},
{
"name": "～～",
"bady": "～～",
"src": "～～"
}
]
}
このようなデータになっていました！
しかしデータを受け取ったところでこのまま表示させるわけにはいきません
読みにくいのでhtmlに変換しますこれをパースといいます
パース自体は「解析」という意味で何もhtmlに変換することすべてがパースと呼ぶわけではありません
パースについてですがここからはDOM操作です
DOM操作
さぁ！先ほどwebAPIからjsonをもらうことができました！
「わーい！」
...
しかしまだ仕事は残っています
先ほど説明しましたがjsonをhtmlに変換して見やすくします
これをパースと呼びます
DOM操作の例を見るためにhtmlとjsonのデータを見てみます
<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" : [
{
"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がどんな働きをするのか理解しよう【ヤフー出身エンジニアが教える初心者向けプログラミング講座】