あいさつ
初めての人は初めまして！知っている人はこんにちは！
Atieです！
実は一度qiitaのアカウントを消したのですが「web系エンジニアになろう(勝又さん)」の本を読んで「qiitaのアカウントは必要」ということだったのでまた作りました！
qiitaでは主に学習のアウトプットをしていきます！
今回はJSのアウトプットをしていきます！JSはもともと学んでいたのですが「もう一度基礎からしたい！」と思ったのでしまぶーのIT大学さんの動画を参考に学ばせてもらいました！わかりやすくイラストも使っておりなおかつ「元Yahoo Japan!エンジニア」すごいですよね！さらに無料です！
いい時代になりました...
では！
なぜJSが必要なのか？
皆さんはなぜwebサイトにJSが必要かわかりますか？
「JSを学ぶのにそこから？」
と思った方「木を見て森を見ず」です
しまぶーのIT大学さんが言っていました
「普通学習するときは”文法”から入るけどそれはお勧めしない。まずは全体像をみて一つの技術を掘り下げていくほうが”文法”を使うタイミングなどがわかる」と
なのでまずは”文法”ではなく「なぜ必要なのか？」というところから学んでいきます
話を戻します
「JSはなぜ必要なのか？」わかりますか？
それは「JS未使用のwebサイト」と「AJAXを使ったwebサイト」の二つを解説する必要があるのでまずはそこから
JS未使用のwebサイト
最近はどんなwebサイトでもJSが使われるようになりました
それは便利だからです
どこが便利なのか？それは通信を見てもらうとわかると思います
JS未使用の通信
「example.comを見たい！」 → ブラウザがexample.com(サーバー)にreq(リクエスト)を送る → サーバーがres(レスポンス)を返す(htmlファイル) → ブラウザがhtmlファイルを受け取ってレンダリング(html,cssの支持通りにサイトを組み立てる)
大まかにこのような仕組みになっています(DBがどうのこうのなどは省略しています)
この方式だとページを移動するときにいちいちサイレンたリングしなければいけないので少し不便です
JS使用のwebサイト
では逆にJSを使っているwebサイトの通信はどうでしょうか
例として「ToDoListのwebアプリケーション」を見てみます
例えばタスクを追加するたびにページが再レンダリングされてはめんどくさいですよね？
さらにこの方法だと追加はできても個人個人で保存ができません
JSを使った場合はサーバーにreqを投げてDBに追加してもらったり消してもらったりしています(JSはセキュリティ上DBに直接操作することはできませんただNode.jsなどは例外)
こういうのを「AJAX」という
AJAXを使うことでページをいちいち再レンダリングせずに追加や削除ができます
このAJAXを使った最たる例が「Googl Map」です
自分は最近JSを学び始めたので昔のことは知りませんでしたが
昔のマップは画面に矢印が付いていてそれを押すことでその方向に移動する仕組みだったらしいです
そしてその移動するたびに再レンダリングが必要
しかし今のGoogle Mapは画面に矢印がなくさらに直感的に使えるようになっていますよね？そしていちいち再レンダリングすることもない
すごく使いやすいですよね！
従来のwebが
・JSがなくてもHPが見れる
・resで返されるのはhtmlファイル
・ページを移動するたびに再レンダリングする必要がある
JSを使ったwebサイトの仕組み
先ほどではJSが必要な理由について解説しました
ここでは具体的にどんな通信かを見ていきます
「example.comを見たい！」 → ブラウザがexample.com(サーバー)にreq(リクエスト)を送る → サーバーがres(レスポンス)を返す(htmlファイル) → ブラウザがhtmlファイルを受け取ってレンダリング(html,cssの支持通りにサイトを組み立てる)
ここまでは同じです
しかし「お問い合わせページに行きたい！」となったとき従来の方式ではもう一度上の方法が繰り返されますがJSを使うとresで返されるデータがhtmlではなくjsonというJSのデータが返ってきます
JSのデータとは配列などです
jsonデータの例
[
{"id":"1", "name":"dog"},
{"id":"2", "name":"cat"}
]
このようなデータがresで帰ってきます
AJAXを使用するとページを移動する際に「最低限」のレンダリングで済みます
例えば大体のHPの場合は「ヘッダー」と「フッター」は一緒のデザインになっていると思います
なのでメインであるところのみをレンダリングします
「フッター」と「ヘッダー」が再レンダリングされないので早いです
まとめ
JSを用いたweb
- より体験がいいwebサイトが見れる
- レスポンスで返すのは JSON
- ページ移動時に最低限のレンダリング (ほかにもたくさんありますがきりがないので...)
従来のweb
- JSがなくてもHPは見れる
- レスポンスとして返すのはhtmlファイル
- ページを移動するたびに再レンダリングされる
JSすごいですね！
最後に
ここまで見ていただきありがとうございます！
最後に動画のurlがあるので「JSを学んでみたい！」という方は動画を見て学ぶのがお勧めです！
ではまた！
AtieのTwitter
しまぶーのIT大学さんのTwitter
勝又健太さんのTwitter
学習,参考動画
【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】 しまぶーのIT大学さん