JavaScriptの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。
これを読めば、JavaScriptの役割、jQueryのこと、最近よく聞くReact, Vue.jsのことも分かります。
『いまさら見直すのは恥ずかしい』という人にもオススメです。
今回は、JavaScriptの書き方とか具体的な手法は一切ありません。ただただ『JavaScriptってなにもの？』だけの話です。
役に立つというより雑学です。でも、ウェブサイトの技術の中でのJavaScriptの役割がはっきりと分かりますので、最後までお付き合いください。
JavaScriptとは？
JavaScriptは、HTML, CSSと並んで、Webサイト作成でなくてはならない技術で、リッチなサイトを作成するのに必要なプログラム言語です。
（『リッチな』の意味は後で説明します。）
Ecma International（エクマ・インターナショナル）という電子通信に関する標準化団体がECMAScript（エクマ・スクリプト）として、標準化作業を進めています。
ブラウザを開発している各社は、この標準仕様に従ってブラウザに実装します。
ただし、ECMAScriptは独自の機能拡張を禁止していないので、Googleやマイクロソフトなどは、自社のJavaScriptエンジンで独自の機能を実装することもあります。
策定
どのような機能をつけるのか考えて、実装してテストする。既存機能の拡張や削除もある。
勧告
完成した新機能などの仕様を公表して、各ブラウザの開発元に対応するように促す。
ECMAScript（エクマスクリプト）
JavaScriptの仕様のこと。Ecma International（エクマ・インターナショナル）がJavaScriptの書き方を決めている（仕様の策定・勧告）。
実質的な策定作業はTC39が行い、それに基づいてEcma Internationalが勧告する。勧告されると『ES20**（年代）』という名称がつけられる。
Ecma Internationalは、もともとヨーロッパの電子通信に関する標準化団体なので、JavaScriptだけを扱っているわけではない。
ES2015（ES6）
2015年に策定された第6版のこと。JavaScriptの従来の書き方から大幅に改善されたので、インターネット上の情報も多い。
ES2015から1年ごとに仕様を勧告することになったので、公式の名称では版数を使うのをやめた。（ES6は昔の言い方の名残り。正式なドキュメントには書いてある。）
ES6という呼び方は、変化の過渡期なので許されているだけ。
ES2016
2016年に勧告された仕様。ES7という表現が見られるが、ES2016のほうが分かりやすいのでES6ほど一般的じゃない。
ES5
2015年に大幅な変更が行われる前のJavaScriptの仕様。第5版。2009年に勧告。現在、どんなに古いバージョンのブラウザでも動かすことができる基準になっている。
JavaScriptのトランスパイルが簡単にできるようになったので、すべてのブラウザに対応できるJavaScriptの呼び方として使われる。
（トランスパイルは別のバージョンのJavaScriptのプログラムに変換すること。）
ESNext
次世代のJavaScriptの仕様のこと。まだ勧告されていなくてTC39で策定中の仕様のことを指す。
すべてのブラウザが対応していないES2015以降を指して使っていることも多い。
トランスパイルが簡単になったので、Reactなどのフレームワークや、Node.jsのプラグイン開発など、ESNextでプログラミングすることが当たり前になっている。
次世代の仕様なので、短くかんたんに書けることも多く、SPA（Single Page Application）などの大規模・複雑な開発で使われる。
もちろん、Nextの範囲はES20**がリリースされるごとに変わる。その状況は下記リンクにある。
TC39（Technical Committee 39, 専門委員会39）
ECMAScriptの仕様の策定を行う専門委員会。Ecma InternationalはいろいろなTCを持っているので番号が振られている（ECMAScriptの仕様は39）。
作業中の内容や仕様などはGitHubで公開されていて確認できる。
作業は5ステージに分けて行い、すべてのステージが終了するとEcma Internationalが勧告する。
| Stage 0 | Strawman たたき台・試案 | どんな仕様を導入するか？ 策定作業に 入るか？ を決める。 |
| Stage 1 | Proposal 提案 | 仕様の策定作業の枠組みを作ったり問 題点の洗い出しを行う。 |
| Stage 2 | Draft 下書き・草案 | JavaScriptでじっさいに書く。 プログラミングの書き方を決める。 ドキュメントには『正確に』とあるの で、あいまいなことは残さない。 |
| Stage 3 | Candidate 候補 | 一般の開発者にドラフトを公開してフ ィードバックする。 （お試し期間） |
| Stage 4 | Finished 完了 | ECMAScriptの標準に追加できる準備 ができている状態。 いつでも勧告できることを表す。 |
各ブラウザは、勧告されるのを待っているわけではなく、独自に先行して導入することもある。その経過は誰でも確認できる。
JavaScript, HTML, CSSの立ち位置
JavaScriptの組織の話をしましたが、さらに『JavaScriptとは？』を続けると、一部分の話になるのであまり良くありません。ここはあえてWebの全体像を話します。
JavaScript, HTML, CSSは、Webサイト作成では
- フロントサイド
- フロントエンド
と言われます。
Webサイトは、見る側（ブラウザ）と見せる側（Webサーバー）が情報をやり取りすることでページが表示されます。
フロントエンドは見る側、ブラウザの技術になります。
- ボタンやチェックボックスを表示（HTML）
- 文字を大きくしたり色を変える（CSS）
- コンテンツをマウスで動かす（JavaScript）
などできますね？
これらは全部、ブラウザが処理をしてユーザーに見せています。
（カッコ内は何が仕事をしているか）
ブラウザは優秀です。HTML, CSS, JavaScriptの3つの仕事をこなしているんだから。
JavaScriptの機能、HTML, CSSとの関係
ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて文書（文字列）で、それがHTMLです。
（画像や動画などは、文書内のurlから別リクエストで取得。）
HTMLはブラウザとWebサーバーの間でやりとりするファイルのフォーマットです。
HTMLをそのまま表示すると、分からない人には意味不明なものが表示されるだけです。
HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。
HTMLは『家の土台と骨組み』です。キッチン、収納、トイレなど決められたところに配置しますがそれだけです。
HTMLはコンポーネントの種類と配置を決める。
文字、ボタン、テキストボックスなどHTMLに配置するものを『コンポーネント』という。
HTMLが発展するにしたがって、文書だけではなくいろいろな表現ができるようになった。
一方、家の見た目を良くするのがCSSです。
CSS（Cascading Style Sheets）は、コンポーネントのサイズ・色・形などの装飾を担当。
JavaScriptはプログラム言語
家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。
JavaScriptはコンポーネントに動きをつけて、リッチなWebサイトに仕上げます。
- クリックしたら色を変える
- ドラッグ&ドロップでコンポーネントを動かす
など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ（マウス）操作の中核がJavaScriptです。
HTML, CSS, JavaScriptのなかで、JavaScriptだけはプログラミング言語です。
JavaScriptを書くのはプログラミングですが、HTML, CSSは文書を書くだけなのでプログラミングではありません。
（HTML, CSSの作成はWordで文書を書くのと同じ。）
下のコンテンツはちょっとしたJavaScriptの動きです。
スマホ・タブレットなら、タッチしてそのまま指を動かす（フリック）と、『サンプル』が指についてきます。
PCのマウスなら、クリックしてそのまま動かす（ドラッグする）と、『サンプル』がマウスについてきます。
上下はスクロールで動きづらいです。これはバグです。あくまでサンプルなので完璧にはしていません。
このように、JavaScriptはユーザーの操作に関係することをフロントサイドで担当します。
JavaScriptライブラリについて
JavaScriptには、いろいろな種類のライブラリがあります。それらのほとんどは、無料で使えます。（ライセンスはあるので注意が必要。）
代表的なものだけいくつか紹介します。
jQuery
jQueryは、もとのJavaScriptよりシンプルな書き方を提供するライブラリです。
『JavaScriptといえばjQuery』というほど一番有名で、使うことも多かったライブラリです。
ただし、2015年の大きな変化でjQueryの存在感が無くなってきました。
- ES2015の勧告でJavaScriptの仕様が大きく変わり、プログラミングしやすくなった。
- JavaScriptのフレームワークが続々と登場し、JavaScriptを直接編集する機会が減った。
- ページ遷移を行わない、SPA（Single Page Application）技術が発展しWebアプリが大型化・複雑化した。（フレームワークが活気づいたのもこのため）
2018年現在、『jQuery不要論』が出るほどですが、SPAなどの先端技術を使っている側から見た意見で、現実には、直接JavaScriptを編集する機会は多いです。
また、あまり高度な技術を必要としないWebサイトを作成するときは、jQueryを使った方がいい場合もあります。
でも、いまからWebを学ぼうという人は、あとで紹介するフレームワークなどを学ぶ方がいいです。
不要論は言いすぎな部分もありますが、フレームワークでの開発はいまやプログラミングの主流なので。
React
Reactは、Facebookが開発したUI（ユーザインタフェース）開発のためのJavaScriptライブラリです。オープンソースなので、誰でも自由に使えます。
Reactはフレームワークと言われますが正確にはライブラリです。
ライブラリとしては便利な機能がたくさん用意されているのでフレームワークに見られています。
（UIは使う人の目に見える部分のことで、具体的にはHTML・CSS・JavaScriptが担当。）
開発者はいちから作る必要はなく、オリジナルの機能だけを作ればいいので楽です。
DOM操作がかんたん
これまで、それぞれHTML, CSS, JavaScriptを書いていたものを、あらかじめ用意されたプログラム（テンプレート）をカスタマイズして開発していきます。
HTML文をそのままコードに書ける（JSX）など、JavaScriptのDOM操作を格段にしやすくしました。というか、HTML文を書いてしまえば勝手にDOMまわりをやってくれるので学習コストが低いです。
Reactはプログラミングも簡潔なので、小規模・シンプルなものから、大型・複雑なWebアプリの開発まで使われます。
また、導入がかんたんで、既存コードの一部分に利用することもできます。（jQueryとの共存も可）
WordPressも採用
最近（2018年末）では、WordPressが5.0にアップデートしてReactを採用しました。
WordPressは、JavaScriptの部分ではかなり遅れていました。今でもがっつりjQueryを使って直接JavaScriptを書くことも多いです。
（PHPが中心でJavaScriptには力を入れてない。）
そのWordPressですら採用するのですから、これからのJavaScriptはこういうフレームワークが中心になることは確実です。というかなっています。
フロントエンド開発を勉強したい人にすすめるとしたら、僕はReactを推します。
ただし、開発環境などを用意するなど、生のJavaScriptのように『HTML, CSSの合間にちょっとしたプログラミング』というレベルでは書けないので、がっつりプログラミングに入っていく覚悟は必要です。
サーバーサイドに朗報。Laravelと共存可
Reactは、サーバーサイドのフレームワークLaravelのフロント部分に組み込むこともできます。
『AnglarやVue.jsみたいながっつりフロントサイドはちょっと...』と思っているサーバーサイドエンジニアには朗報です。
React単体では最小構成になっていて、フレームワークと言えるほどの機能を持っていない。
（だからReact自身はUIライブラリと言っている。）
Reduxなどほかのライブラリと合わせて使うことが一般的。
インストールしたら、基本機能はすべてそろっているAnglarとは対照的なところ。
DOM（Document Object Model）
htmlのタグや属性の情報をメモリ上に展開したもの。オブジェクト（変数）でhtmlタグの内容が参照できる。
htmlに限らず、xmlなどのマークアップ言語全般に関する規定。W3Cから勧告されている。
ツリーの構成をしているので、DOMツリーとも呼ばれる。
JavaScriptでhtmlの情報をあつかうときは、DOMにアクセスしている。
Angular
Angularは、以前はAngularJSと呼ばれた、Googleとコミュニティーが開発したフロントサイド（UI）のフレームワークです。これもオープンソースです。
フレームワークとは、プログラムの型（フレーム）のことで、基本的な機能はすべてフレームワークで用意されています。
ReactはJavaScriptのコードの中にHTMLを書き込んでいくイメージですが、Anglarは、HTML文の中にプログラムが動くための記号を埋め込んでいくイメージです。
（Larabelのbladeテンプレートみたいなものと言えば、サーバーサイドエンジニアには分かりやすい。）
そして、その記号に対応するプログラムを用意する必要があります。
HTMLの中の記号とデータ（プログラム）が相互に連動している、双方向バインディングが特長です。
- HTMLが変わったらデータも変わる。
- データが変わったらHTMLも変わる。
ReactはプログラムからHTMLを作っていくので、データ -> HTMLの片方向バインディングになる。
バインド（bind）
束縛、拘束、結びつき。あるものを結びつけること、ものをいう。
データバインディング: データとデータと関連付ける
コンポーネントを組み合わせて作る
Anglarでは、HTMLとプログラム（正確にはクラス）がセットになったコンポーネントが数多く用意されていて、これらを組み合わせてWebサイトを作っていきます。
あまり高機能なものが必要のないWebサイトや、小規模なWebアプリの開発には向いていません。
Reactを使ったりjQueryを使うほうが早い場合があります。じっさい、大規模・高機能Webアプリ開発での事例が多いです。
ここ5、6年の開発で、トップを走り続けているフレームワーク・ライブラリの1つです。
Anglarは、正確にはJavaScriptではなく、TypeScriptのフレームワークです。名前から『JS』が無くなったのはそのためです。
TypeScriptは、JavaScriptと同じECMAScriptをもとに作られたプログラム言語なので、JavaScriptで書いてもほぼ正常に動きます。ただし、jQueryとの併用はできません。
学習コストは高め
HTMLと関連するプログラム（クラス）がない動きません。また、クラスベースなのでオブジェクト指向も知らないといけません。そのほかの基本機能も身につけないといけないので、Reactよりも学習コストは高いです。
個人的な意見ですが、『Larabelみたいなものがフロントエンドにもあるんだ。』です。
（サーバーサイド出身なのでフロントエンドの状況にうとかった）
でも、HTML, CSS, JavaScriptの知識がそれなりの人には、便利なフレームワークです。
標準コンポーネントが充実しているので、ある程度はそれでこと足りるでしょう。ハイレベルなことを最初からもつ必要はないです。そのときになったら学べばいいので。
いちばん必要な能力は、『効率的にドキュメント・リファレンスを読んで、かたちにする力』です。
フロントエンド出身のエンジニアよりも、サーバーサイドエンジニアの方がすんなりと入っていけます。
サーバーサイドでは、JavaやPHPなど、フレームワークや周辺のライブラリを使った開発に慣れています。
（15年くらい前からサーバーサイドの開発の中心はフレームワーク）
それがフロントエンドの現場に導入されたと考えれば違和感がありません。
逆に言うと、このようなフレームワーク中心の開発に慣れてしまえば、フロントエンドのエンジニアもサーバーサイドに入っていきやすくなります。
（オブジェクト指向（クラス）がフロントエンドにも入ったことで、Java, PHPとの違いが無くなってきた。）
フロントエンドとサーバーサイドの垣根が無くなってきたのがここ数年の動きです。
Vue.js
2017年ごろから一番勢いのあるUIのフレームワークです。アリババが開発しました。
一言で言えば『中国製Anglar』です。『Anglarに触発された（Anglarから引き抜かれた？）多国籍チームが中国企業から出した製品』が当てはまるかも。
（Anglarからすると『パクられた！』かもしれませんが。）
コアメンバーには、GoogleでAnglarを使った開発をしていたエンジニアもいます。
AnglarとReactのいいとこ取り
後発でもAnglarに負けてません。Anglarよりも軽量でコードもシンプルです。Anglarの高機能の部分を削り、作りやすさを追求したのもうなずけます。
インストール時は最小構成にして、ほかのライブラリで補うようにしているところはReactと似ています。
Reactのコンパクトさ、ほかの環境との共存ができる自由さと、Anglarのフレームワークとしての構成の良さをブレンドした位置づけです。
（ReactのJSXを使うことができるライブラリもある。）
小規模・シンプルなものの開発から、大規模・複雑なものの開発まで幅広い事例が急激に増えています。Anglarに比べてお手頃なところがその理由でしょう。
- 学習コストが低い（シンプル）。
- Anglarと似ているので、開発者がAnglarに移行しやすい。
- jQueryなどほかのライブラリとの共存ができる。
- 部分的にVue.jsを使うこともできる。
- Larabelフレームワーク内でサポートされている。（Larabel + Vue.js環境が可）。
- WordPressでも共存ができる。
フレームワーク入門ならAnglarよりもVue.js
Anglarは優秀なフレームワークですが、ほかのライブラリと共存がむずかしく、どうしてもAnglar中心に作ることになります。
また、既存システムからの移行も難しいです。そしてAnglarは、基本機能が豊富なので中小規模ではその優秀さを活かしきれません。
フロントエンドのフレームワークの仕組みが知りたい、経験してみたいという人にはAnglarよりもVue.jsをおすすめします。
ただし前提条件として、HTML, CSS, JavaScriptは中レベル以上の知識が必要です。（公式ドキュメントにも書いてあります。）
2018/12現在、Githubのスター数はReactを超えて1位になっています。
でもGoogleトレンドで比較すると、日本、世界ともにReactの独壇場でVue.jsとAnglarは目くそ鼻くそです。ただし、日本は世界と比べて若干Vue.jsが多いですが。
また、最近のQiitaではVue.jsの情報が多いです。体感としてもVue.jsの情報はAnglarを凌いでいるように感じます。
（ReactとVue.jsがツートップに見える。）
どうもVue.jsは、日本とごく一部だけが盛り上がっているように感じます。
そもそも世界は（日本も相対的にはそうですが）、Reactとその周辺でできていることを、わざわざ別のものでする必要はないと思っているのでしょう。
事業として導入する場合は、ReactをやめてVue.jsを使う圧倒的な理由がないです。でも作りやすさという点で、フレームワークとして劣っているとは思いません。ドキュメントもすらすら読めたので。
Nuxt.jsというフレームワークもあります。Vue.jsで最低限必要な周辺ライブラリとVue.jsをパッケージにしたフレームワークです。
Vue.jsが最小限の機能なので、フレームワークらしく少し機能を増やしています。
自分が欲しいソースコードのプロジェクトを、コマンド1つでかんたんに作れます。開発環境構築のコストはほぼ0です。
あらかじめ必要なものはそろっているので、Vue.jsよりも親切・丁寧ですが、Anglarとの差別化が無くなっています。
Nuxt.jsは、Vue.jsの公式ではありません。開発はまったくの別プロジェクトです。
Node.js
サーバーサイドのプログラムをJavaScriptで作るためのフレームワークです。
リッチなWebサイトを作るには、サーバーサイドでプログラムを書く必要がありますが、フロントサイドとサーバーサイドでは必要な技術が違います。それぞれ専門の技術者がいるのが当たり前。
（代表的なサーバーサイドのプログラム言語はPHPやJavaなど。）
そうなると、ひとつのWebサイトを作るのに最低2人の専門家が必要です。もしくは、かけ持ちでできる人を連れてくるか。
これをもっと効率的にするために、フロントサイドの技術（JavaScript）で、サーバーサイドのプログラムも作ってしまおうと開発されたのがNode.jsです。
これで、フロントサイドの技術者だけでWebサイトが作れるようになりました。
Node.jsはWeb開発で必須
しかし今は、これとは違う意味で重要なポジションになっていて、Node.jsはフロントエンド開発のフレームワークやライブラリのコア機能になっています。
React, Anglar, Vue.jsのコード・リソースは、Node.jsのパッケージ管理コマンドnpmで提供されています。
そのほか、Webpack, Gulpなどのビルドツール・タスクランナーもnpmで提供されています。
フロントエンド開発のツールはnpmで提供されていると言っても過言ではありません。フロントエンドエンジニアで知らない人・使えない人はいないでしょう。
（逆に言うと知らない・使えない人はバッタ者。）
最近では、SPA、SSRが注目されています。
これらの技術を使うのにもNode.jsは必ず必要です。
| SPA | Single Page Application Webページを遷移するたびにリクエストを送信せずに、1つのWebページですべてを表示する。 （疑似的にページ遷移を行う。） |
| SSR | Server Side Rendering DOMからHTMLを作成する（レンダリング）作業を、ブラウザではなくサーバーで行ない、ブラウザは結果だけを表示する高速化の技術。 |
まとめ
JavaScriptはWebサイトの中核の技術です。Webサイト作成で本格的なプログラミングをするのに最初に使うプログラム言語でもあります。
Webデザインに関わる人、Webデザイナーを目指す人は、HTMLやCSSとは違って、必ず習得する必要はありません。しかし、もっとも身近なプログラミング言語なので、かんたんなものは作れると良いです。
フロントエンジニアを目指す人は、とりあえず、
- HTML, CSS, JavaScriptの基本（スペシャリストじゃなくていい）
- React, Vue.jsの使い方。フレームワークの仕組みを学ぶ
- Node.jsの使い方。npmコマンドの使い方
- Webpackなどのツールの使い方。フロントエンドの開発環境の構築方法を学ぶ
- jQueryの使い方。
（上から順に優先順位が高い。2, 3, 4は同時進行または順不同。）
あたりを学んでいけば、フロントエンジニアとしてやっていけると思います。
（Anglarは学習コストが高いので保留です。Vue.jsで感覚をつかんでからでも遅くありません。）
