2021/08/15

なぜJavaScriptを使うのかを勉強する。

@ 酒井悠宇

JavaScript

しまぶーのIT大学 JavaScript講座

「なぜJavaScript必要なのか」を簡単にまとめます。

JavaScriptが必要な理由

結論：ユーザーにwebサービスを快適に使用してもらう為にJavaScriptが必要

従来のweb

JavaScriptがなくてもHPが見れる。
レスポンスとして返しているのはHTMLファイル
ページを遷移するたびに再レンダリングされる。

JavaScriptがなくても、ユーザーのリクエストに対してHTMLファイルをサーバーからリクエストとして送ることで、ページを正しく表示することが可能。
しかしそれだと、表示に変更があるたびにサーバーから新しいHTMLファイルが送信されて、毎回ページのレンダリング(再読み込み)が起こってしまい不便。

JavaScriptを用いたweb

より体験がいい、快適なWebサイトが見られる。
レスポンスで返すのはJSON
ページ遷移時に最小限のレンダリング

レスポンスとして帰ってくるJSON(データのみが格納されてあるファイル)を元にDOM操作を行い、HTMLを書き換えることで画面描画を再現。
ページ遷移の際にいちいち再レンダリングが起きず、ユーザーが快適にアプリケーションを使用することができる。(Googleマップが例としてわかりやすい)

JavaScriptの仕事

データのやり取り

ブラウザで動くJavaScriptから直接データベースとやりとりできてしまうと、ハッカーとかから攻撃される可能性があって危険なので、JavaScriptでデータを持ってくる際は、webAPIを叩くことでバックエンドに「データ頂戴！」ってリクエストする感じになる。このwebAPIは、データベースからデータを持って来る以外に認証とかそんな感じの機能も搭載されているイメージ。

JavaScriptでwebAPIを叩いた時に帰ってくるのは「JSON」と呼ばれるデータ。
イメージはこんな感じ。本当にデータだけが格納されている。

{
  data: [
    {
      name: "",
      body: "",
      src: "",
    },
    {...},
    {...},
  ];
}

DOM操作

DOM(ドキュメントオブジェクトモデル)はHTMLをJavaScriptで書き換えるためのもの。

Document Object Modelは、マークアップがなされたリソースをリソース要素の木構造で表現し操作可能にする仕組み、またそのモデル。

JSONを使ってページを表示するには、JSONをHTMLに落とし込む必要がある。DOMを操作することでこれを実現する。HTMLのDOMをJavaScriptで取得して、JSONを元にそれをJavaScript書き換えて...みたいなイメージ。これによっていちいち再レンダリングの起きないwebを実現することができる。

JavaScriptはブラウザで動くオブジェクト指向言語だが、ブラウザ自体もオブジェクトで定義されている(windowオブジェクト)。この中に格納されてあるプロパティやメソッドにJavaScriptでアクセスすることによって、データのやり取りやDOM操作を行うことができる。

window.screen.width //ブラウザのビューポートの横幅を取得したり
window.location.reload //ブラウザを再読み込みしたり

DOM操作はwindowオブジェクトのプロパティのdocumentオブジェクトの中に格納されてあるプロパティやメソッドにアクセスすることで行うことができる。

window.document.getElementbyID //dom取得
window.document.createElement //dom作成

構文メモ

<高階関数とコールバック関数の違い>
・引数に関数を受け取る関数を高階関数という。
・引数に渡す関数のことをコールバック関数と言う。

ここまでのまとめ

JavaScriptを使わずとも、ユーザーのリクエストに応じたHTMLファイルをレスポンスとして返すことでページを正しく表示することが可能だが、それだと変更がある度にページが再読み込みされて不便。
JavaScriptでDOMを操作してページ遷移等を表現することで、ページのレンダリングを最小限にすることができ、より体験のいいWebサイトを作成することができる。

JavaScriptが必要なのは、「ユーザーにwebサービスを快適に使用してもらう為」

モダンJavaScriptの歴史を学ぶ

ReactやVue.jsやAngularはあくまでもHow(どのようにやるか)で、それよりも大事なのはWhy(なぜそれを使うのか)。
Howの知識は時代によって意外とすぐに移り変わったりする。今人気のあるReactだって、3~4年後には全く違う技術に置き換わっていることだってあり得る。
Howの知識しか持っていないと新しい技術が出てきても、それが「なぜ」必要なのかがわからないので、「今のままでいいじゃん」となりがち。
Whyをきちんと理解しておくと、その技術を使う必要性がわかる。だから時代にあった技術を選択することができる。
だからまずはWhyを理解するためにJavaScriptの歴史を学んでいく。

JavaScriptの誕生

JavaScriptは Netscape Communications と Sun Microsystems によって1995年12月に発表された。
Netscape Navigator(ブラウザの名前)2.0に実装された。
作者はNetscapeの技術者ブレンダン・アイク

JavaScriptの豆知識

JavaScriptは元々LiveScriptと言う名前だったが、Sun Microsystemsのプログラミング言語Javaが当時大きな注目を浴びており、Netscapeが業務提携していたこともあった為、JavaScriptに変更された。
1996年にMicrosoftのInternet Explorer 3.0 に搭載され、JavaScriptは急速に発展し始める。しかし、Netscape と互いに独自の機能追加を行なっていた為、開発者はそれぞれに合うサイトを作る必要があった。

ECMAScriptの誕生

開発者にとってあまりよくない状況を打開する為に、NetscapeはJavaScriptを国際的な標準化団体Ecma Internationalに提出した。その結果、1997年6月にECMAScriptの第1版が公開された。

ECMAScriptの豆知識

2015年に第6版(ES6とかES2015とか呼ばれてるあれ)が公開され、そのリリースからは年号が使われるようになった。なので、ES6の表記は間違っており、正解はES2015となる。

ECMAScriptって何？

ECMAScriptとは、JavaScriptの中核となる言語仕様のこと

<JavaScriptの環境の話>
一口にJavaScriptといってもいろんな実行環境がある。例えばNode.jsがわかりやすいが、ブラウザ上のJavaScriptには存在したUIを操作するための機能がNode.jsにはない。逆もまた然り。

<ECMAScriptとJavaScript>

JavaScript の標準化が行われ基本となる仕様が ECMAScript という名前で定められました。 ECMAScript は定期的に改定が行われています。 ECMAScript はあくまで基本部分の仕様であり、 ECMAScript で定められ基本た仕様に基づいて各社が実装を行ったものが JavaScript となります。

第一次ブラウザ戦争

1990年代後半はNetscapeとInternet Explorerが激しいシェア争いを繰り広げた。このシェア争いのことを「第一次ブラウザ戦争」と言う。結果はInternet Explorerが勝利することとなった。

JavaScriptへの失望

JavaScript起因のクラッシュや悪用ウイルスが多発。不快なアニメーションも多く、JavaScript機能自体をオフにする人も珍しくなかった。
また同時期に「FLash」が現れ、当時動作が軽いアニメーションということで流行った。(「赤い部屋」とか「恐怖の館」とか)

JavaScriptの復権

Microsoftが開発したAjaxによって、高機能なWebアプリケーション開発言語として再び注目を集めた。特にGoogle Maps は非常に話題になった。

JQueryの誕生

2006年にJQueryが誕生。「write less, do more」というキャッチコピーにもある通り、少ない記述で多くの実装ができる為、たくさんの開発者に使われた。
またブラウザ間の差異を吸収できたのも便利だった。

第二次ブラウザ戦争

2000年後半から、Internet Explorer、Google Chrome、Firefox、Operaの5択のシェア争いが行われた。2012年、ChromeはFirefoxに追いつき、2014年には揺るぎない地位を築いて、第二次ブラウザ戦争は終結した。

Server Side JavaScript の動き

JavaScriptを使用する際、バックエンドをPHP等の他の言語で構築しなければならないことが不便だという理由から、サーバーサイドでもJavaScriptを使えるようにしようという動きがあった。
2009年1月、Mozillaのエンジニアkevin dangoorがServerJS というプロジェクトを立ち上げた。しかしサーバーサイドでJavaScriptを使うにはさまざまなAPIが不足していた。

ServerJSからCommonJSへの改名

せっかくいろんなAPIを作るなら、サーバーサイドだけでなくていろんなところで使えた方がいいよね。という考えから、2009年8月、より広い範囲のAPIを対象とすることを示すために、現在のCommonJSへと改名された。

CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。

https://ja.wikipedia.org/wiki/CommonJS

次回はモジュールにとかからまとめていきたいと思います！
最後までごらんいただきありがとうございました！