【簡単に】歴史と一緒に昨今のフロント事情を理解する

## こんな人向け
・何となく使っていたけどNode.jsをよく知らない人
・昔のJSならわかるけど最近のNodejsとやらは何なのか？という人
・ReactやVueなど、人気なフロントを触りたいからまず知りたい人
・フロントのフレームワークやライブラリが多くて整理したい知りたい人

## この記事に書いていないこと
・具体的なフレームワーク、ライブラリの使い方
・SPAの解説


## TL;DR
・ブラウザ戦争により分岐したJSたちを統一した規格でできている
・JavaScriptが便利すぎるので生まれたNode.jsは、サーバサイドでもJavaScriptを動くようにした
・フレームワークによって、HTML+CSS+JavaScriptのセットがより書きやすくなる
・TypeScriptをNode.jsでコンパイルしてJavaScriptにする


## 始まりはWebブラウザ
インターネットが初めて世に出回ってから、1990年代初頭に初めてWebブラウザ「`WWW`」が誕生しました。
他にも様々なブラウザが生まれる中、パワハラによってわずか10日間でJavaScriptという言語が開発され、JSを使ったブラウザである`NetscapeNavigator`が誕生しました。

>JavaScriptはネットスケープコミュニケーションズのブレンダン・アイクによって、1995年5月に10日間で開発された。上司からの指示に「Javaのような外観にしてくれ」「初心者に優しく」「Netscapeブラウザのほとんどなんでも制御できるように」との注文があった[2]。Netscape Navigator 2.0で実装された。

[Wikipedia](https://ja.wikipedia.org/wiki/JavaScript#%E8%AA%95%E7%94%9F)より引用

つまりJavaScriptはブラウザ上で動く、というよりブラウザを動かしたいがために生まれたわけです。
当時のプログラミング言語としてJavaが圧倒的人気を誇っており、↑の会社がOracleの前身会社と提携していたとかでこんな名前の言語になりました。
新米エンジニアがよく混乱する「JavaScriptはJavaとは同じじゃないの！？」はこれが原因ですね。

またこういった背景から、JavaScriptを動かすC言語製のエンジン[`SpiderMonkey`](https://ja.wikipedia.org/wiki/SpiderMonkey)は、ブラウザを構成する要素として後々に引き継がれていき、今ではFireFoxに導入されています。
同様に、C++製のJavaScriptエンジン[`V8`](https://ja.wikipedia.org/wiki/V8_(JavaScript%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3))はChromeなどに搭載されています。

各ブラウザについて、こちらがとても分かりやすので是非。

https://qiita.com/umashiba/items/8cb47825624c5cb043d6


## 多くのWebブラウザ
今でも多くのWebブラウザが開発されています。

https://shiftasia.com/ja/column/2022%E5%B9%B46%E6%9C%88web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%B7%E3%82%A7%E3%82%A2/

Chrome, Safari, Edge, FireFox, IE...
今でこそIEはサポートが終わりましたが、いまだに[ActiveX](https://ja.wikipedia.org/wiki/ActiveX)資産を抱えてしまっている古株大手は頭を抱えているのでしょうか。

・ChromiunであるChromeやEdge
・FireFox
・Safari
に分けたとしてもまだ統一はされておらず、これらだけでもレンダリングエンジンやJSエンジンは別物を使用しています。加えてこれら以外にもブラウザは多く存在しています。

多くのブラウザが開発されることで、JavaScriptに似た言語がでてきたり
各ブラウザごとに仕様の異なるJavaScriptを起用するようになったため、標準化が行われ
[`ECMAScript`](https://www.javadrive.jp/javascript/ini/index11.html)という規格が誕生しました。
みなさんが何となく触れているJSは、そのほとんどがおそらくECMAScriptです。

同じようにJavaScriptの規格として`CommonJS`というものもありますが、これは`import`の方法などに関する規格となっており、どちらかというと「書き方」の規格です。
比べEMCAScriptは言語そのものの規格であり、もういっそJavaScriptのバージョン名という感じです。

https://qiita.com/kusahaeru/items/5318a7fa048e7185077d

言語にはバージョンがあります。
Python2.x / 3.x、Java8や11などのように、バージョンによって使える文法が変わります。
JavaScript、すなわちECMAScriptも同様にバージョンがあります。
最新のバージョンは`ECMAScript2023`です。略して`ES2023`とか、もっと略して`ES23`とかって使われます。
ES2023での新機能については以下をどうぞ。過去バージョン分のリンクもあって見やすいです。

https://qiita.com/rana_kualu/items/84f66fe970f7feccf367



余談ですが、ブラウザの歴史について詳しくはこちらがまとまっていて分かりやすいです。

https://www.rescue-center.jp/elementary/vol20.html


## Node.jsの誕生
ブラウザの中にJavaScriptエンジンがあり、エンジンがあればJavaScriptは動きます。
そして、JavaScriptはとても扱いやすく書きやすく大変人気な言語でした。（ブラウザでの言語がJS一択だったから人気だった可能性もありますが。）

であれば、いっそサーバサイドでもJavaScriptを使えるのではないか、という発想のもと
Chromeなどに搭載されているV8エンジンを丸ごと内包した、JavaScriptの実行環境をサーバで動かそう、という`Node.js`という実行環境が2009年に誕生しました。

実行環境なので、そういう空間があるものだと思ってください。Node.jsという言語ではありません。
JavaScriptを実行できるツール一式をまとめてNode.jsと呼んでいるだけです。

`ノード`という言葉の意味

https://www.kagoya.jp/howto/it-glossary/server/node/

これにより、ブラウザ上のJSからサーバへアクセスし、サーバ上でもJSが動いて結果を返す
といった奇妙な構図が完成します。


余談ですが、JavaScriptの歴史についてはこちらがまとまっていてよかったです。

https://zenn.dev/naoki_mochizuki/articles/46928ccb420ee733f78f


## フロントフレームワークの充実
Webページは基本的に、HTML+CSS+JavaScriptで作られます。
基本的にはクライアントサイドのJavaScriptがWebサーバやAPサーバと情報をやり取りし、それはNode.jsがあってもなくても変わりません。

今まではJavaScriptをより書きやすくするためにjQueryなどのライブラリを
HTML+CSSをより完結にするためにサーブレットによって、JSPやJSF、はたまたthymeleafなどを使っていました。

が、デザインを統一したい、より簡単に記述したい等の要求に答え
JavaScriptのライブラリとして[`React`](https://ja.wikipedia.org/wiki/React#%E6%AD%B4%E5%8F%B2)が生まれます。
2012年あたりからInstagramで使われているみたいですね。

これはJSXという記法で、HTMLの塊をJS関数が返してくれる、みたいに書けます。
```sample.jsx
import React from "react";
import ReactDOM from "react-dom/client";

// HTMLの塊を返却する関数
const Greeter = (props) => {
  return (
    <h1>{props.greeting}</h1>
  );
};

// HTMLのパーツとして、Greeter関数を使う
const App = () => {
  return <Greeter greeting="Hello, world!" />;
};

// アプリ本体
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

これにより、HTMLとJSをわざわざ2ファイルに（またはとても簡潔に）記述することができるようになりました。
よくある間違いが、Reactは別にNode.jsのフレームワークだとかではなく、普通のJSのライブラリです。
無論昨今はTypescriptないしNode.jsと一緒に使うことが多いですが。。

似たように、今度はライブラリではなく、フレームワークとして
`Angular`、`Vue`が作られます。
これらももちろんJavaScriptのフレームワークです。

Node.jsというかnpmなしでJS + Reactをやってみたい方はこちらをご参考にどうぞ。

https://wellknowledge.org/node-js-react/


## TypeScript爆誕
さて、開発における不便がどうのだとか、型がどうのだとか、[こういった背景](https://ja.wikipedia.org/wiki/TypeScript#%E8%83%8C%E6%99%AF)でTypeScriptという言語が誕生しました。

ちょっとソースわすれましたが、これは`JavaScriptの欠点を補った言語`であったり`最も完成された言語`だとか評価されています。

ちなみに私個人はVanillaが好きです
（フレームワークなしのJavaScriptのことをVanillaと呼ぶそうです:[理由](https://zenn.dev/seya/articles/66809b3d59151c)）

TypeScriptはTypeScriptで書かれたコンパイラでコンパイルでき、コンパイル後はJavaScriptになります。
Node.jsの誕生によって、基本的にNode.jsでTypeScriptをコンパイル等して動かすのが主流となりました。

そうなると必然`TypeScript+ライブラリ、フレームワーク`といった構図になり
Node.jsのパッケージ管理コマンドであるnpmを通してReactやVueなどのサポートが行われるようになりました。

## 昨今のテンプレ
テンプレ的に`Node.js + TypeScript + React`が多く使われています。
これらは
・TypeScriptで
・JSX等の記述方式で
(+ ReactのUIコンポーネントである[mui](https://mui.com/)等で、洗練されたデザインに)
Webアプリのフロント開発ができるためです。

また、Node.jsの機能の一つで、簡易的にWebサーバを立ち上げ`localhost:3000`とかでフロントの様子を見ながら開発でき
ソースを直したらすぐlocalhostに反映してくれる`ホットリロード機能`もついています。

しかし`npm run start`などでよく起動する方法はあくまで開発中に楽をするためのもので
`npm run start`とは、`package.json`に書かれた`script`セクションの`start`で設定したコマンドを起動しているだけ、です。
だから
```package.json
...略
"scripts": {
  "start": "echo 'test'"
},
...略
```
とかってなっていると、別にサーバは起動しません。
加えてcreate-react-app初期設定でのnpm run startでは、本番環境に向けてビルドをするように言われます。
![スクリーンショット 2023-04-15 0.23.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/0716484a-33d4-738b-3186-b70c7ffa8237.png)

本番環境用にビルドすると、SPAのため1枚のindex.htmlと、複数の普通のjsファイルたちが出来上がります。
![スクリーンショット 2023-04-15 0.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453310/e67d6b9a-c315-29b6-f079-5fc17bc5a3d5.png)
これをクライアントに配信し、Webブラウザで見るわけです。
HTML+CSS+JavaScriptという構造は変わっていません。

## その他関連するもの
紹介した以外にも、React等とは異なる攻め方をした[WebComponent](https://qiita.com/hedrall/items/f2ebb5338f79007083a3)はYoutubeなどで使われていますし
フロントでどんな言語でも扱えるようになる[WebAssembly](https://zenn.dev/hodagi/articles/4925afbeb3c4dc)も最近流行が来ていると思ってます。

ほかにも[肉まん](https://qiita.com/shadowTanaka/items/5fb99819629dcaab3e05)やNodejsをひっくり返す[deno](https://qiita.com/azukiazusa/items/8238c0c68ed525377883)など、さまざまな技術が開発されています。

CSS関連では[SCSS](https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe)や、[TailWind](https://qiita.com/Yuki_Oshima/items/708986d62ea3a773d6a5)など

他にもUIコンポーネントのライブラリ等をなるべく多く知っておきたいですね。

## おわりに
旧時代のJavaScript生書きからjQueryの時代を経て、フロントSPA+Docker+API等のマイクロサービスな時代になっています。
どんどんアップデートしていきたいですね。

具体的なフレームワーク、ライブラリの使い方については別の記事で紹介します。