初心者でも分かる解説。JavaScriptってなんだ?

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
JavaScript image
イラストACの画像をもとに加工しています。

JavaScriptの超入門編です。初心者にも分かりやすく、専門用語を使わずに解説します。

これを読めば、JavaScriptの役割、jQueryのこと、最近よく聞くReact, Vue.jsのことも分かります。

『いまさら見直すのは恥ずかしい』という人にもオススメです。

今回は、JavaScriptの書き方とか具体的な手法は一切ありません。ただただ『JavaScriptってなにもの?』だけの話です。

役に立つかと言われれば、雑学に近いです。でも、ウェブサイトの技術の中でのJavaScriptの役割がはっきりと分かりますので、最後までお付き合いください。

JavaScriptとは?

JavaScriptは、HTML, CSSと並んで、Webサイト作成にはなくてはならない技術で、リッチな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)などの大規模・複雑な開発で使われる。

 

各ブラウザとそのバージョンが、それぞれの仕様の対応状況を確認することができる。

TC39(Technical Committee 39, 専門委員会39)

javaScriptの仕様の策定を行う専門委員会。Ecma InternationalはいろいろなTCを持っているので番号が振られている(javaScriptの仕様は39)。

作業中の内容や仕様などはGitHubで公開されていて確認できる。

作業は5ステージに分けて行い、すべてのステージが終了するとEcma Internationalが勧告する。

Strawman - Stage0 - たたき台・試案

どのような仕様を導入するか? 策定作業に入るか? を決める。

Proposal - Stage1 - 提案

仕様の策定作業の枠組みを作ったり、問題点の洗い出しを行う。

Draft - Stage2 - ドラフト(下書き・草案)

javaScriptを使ってじっさいに書く。プログラミングの書き方を決める。ドキュメントには『正確に』とあるので、あいまいなことは残さない。

Candidate - Stage3 - 候補

一般の開発者にドラフトを公開してフィードバックする。(お試し期間)

Finished - Stage4 - 完了

ECMAScriptの標準に追加できる準備ができている状態。いつでも勧告できることを表す。

 

各ブラウザは、勧告されるのを待っているわけではなく、独自に先行して導入することもある。その経過は誰でも確認できる

参考:TC39の公式ドキュメント

JavaScript, HTML, CSSの立ち位置

JavaScriptの組織の話をしましたが、さらに『JavaScriptとは?』を続けると、一部分の話になるのであまり良くありません。ここはあえてWebの全体像を話します。

JavaScript, HTML, CSSは、Webサイト作成では、

  • フロントサイド
  • フロントエンド

と言われます。

Webサイトは、見る側(ブラウザ)と見せる側(Webサーバー)が情報をやり取りすることでページが表示されます。

フロントエンドは見る側、ブラウザの技術になります。

  • ボタンやチェックボックスを表示(HTML)
  • 文字を大きくしたり色を変える(CSS)
  • コンテンツをマウスで動かす(JavaScript)

などできますね?

これらは全部、ブラウザが処理をしてユーザーに見せています。()内は何が仕事をしているかです。

ブラウザは優秀なんです。JavaScript, HTML, CSSの3つの仕事をこなしているのだから。

JavaScriptの機能、HTML, CSSとの関係

ブラウザからリクエストを受けて、Webサーバーから送られるデータはすべて構造文書(文字列)です。それがHTMLです。

(画像や動画などは、文書内のurlから、さらにリクエストを送信して取得します。)

HTMLをそのまま表示すると、分からない人には意味不明な、構造化されたデータが表示されるだけです。

HTMLの内容は、ブラウザを右クリックして、『ソースコードを表示』で見ることができます。

HTMLは、コンポーネント(文字・ボタン・テキストボックスなど)の種類と配置を決めています。

HTMLは、『家の土台と骨組み』です。一応、キッチン、リビング、収納、トイレ、バスルームなど、決められたところに配置はされてますが、それぞれの姿形は見えません。

一方、家の屋根、外壁、内装など、住めるような形に肉付けするのはCSSです。CSSは、コンポーネントのサイズ・色・形などの装飾を担当します。

そして、家だけ立派にしても豊かな生活はできません。家具・家電など生活の『動き』を用意する必要があります。それがJavaScriptです。

JavaScriptは、コンポーネントに動きをつけて、リッチなWebサイトに仕上げます。

  • クリックしたら色を変える
  • ドラッグ&ドロップでコンポーネントを動かす

など多彩です。最近はWebアプリと言って、Webサイトをアプリケーションとして使うことができます。Webアプリのタッチ(マウス)操作の中核がJavaScriptです。

下のコンテンツはちょっとしたJavaScriptの動きです。

スマホ・タブレットなら、タッチしてそのまま指を動かす(フリック)と、『サンプル』が指についてきます。

PCのマウスなら、クリックしてそのまま動かす(ドラッグする)と、『サンプル』がマウスについてきます。

サンプル

上下はスクロールで動きづらいです。これはバグです。あくまでサンプルなので完璧にはしていません。

このように、JavaScriptはユーザーの操作に関連することをフロントサイドで担当します。

JavaScriptライブラリについて

JavaScriptには、いろいろな種類のライブラリがあります。それらのほとんどは、無料で使えます。(ライセンスはあるので注意が必要です。)

代表的なものだけいくつか紹介します。

jQuery

JavaScriptをかんたんに実装するためのライブラリです。もとのJavaScriptよりもかんたんな書き方を提供します。

2015年までは、『JavaScriptといえばjQuery』というほど一番有名で、使うことも多かったライブラリです。

ただし、2015年のJavaScriptの大きな変化でjQueryの存在感が無くなってきました。理由には次のようなものがあります。

  • ES2015の勧告で、JavaScript自身の仕様が大きく変わり、プログラミングがしやすくなった。
  • JavaScriptのフレームワークが続々と登場し、JavaScriptを直接編集する機会が減った
  • SPA(Single Page Application)という、ページ遷移を行わない技術が発展し、Webアプリが大型化・複雑化した。(フレームワークが活気づいたのもこのため)

2018年の現在では、『jQuery不要論』が出てくるまでになっています。ただし、これは、SPAなどの先端技術を使っている側から見た意見が多数で、現実には、直接JavaScriptを編集する機会は多いです。

とくに、あまり高度な技術を必要としないWebサイトを作成する場合などは、jQueryを使った方がよい場合もあります。

でも、いまからWebを学ぼうという人は、jQueryよりもあとで紹介するフレームワークなどを学ぶ方がよいです。

不要論は言いすぎな部分もありますが、将来的には使わなくなる可能性は大なので。

React

Reactは、Facebookが開発したUI(ユーザインタフェース)開発のためのJavaScriptフレームワークです。オープンソースなので、誰でも自由に使えます。

UIは、使う人の目に見える部分のことで、具体的にはHTML・CSS・JavaScriptが担当します。

フレームワークとは、プログラムの型(フレーム)のことで、基本的な機能はすべてフレームワークで用意されています。

開発者は、オリジナルの機能だけを作れば良いので、いちから作る必要はなく、開発が楽になります。

これまで、それぞれHTML, CSS, JavaScriptを書いていたものを、半自動的に用意されたプログラム(テンプレート)をカスタマイズして開発していきます。

HTML文をそのままコードに書ける(JSX)など、JavaScriptのDOM操作を格段にしやすくしました。というか、HTML文をそのまま書いてしまうので、DOM操作とは?とか学ばなくていいです。

Reactはプログラミングも簡潔に書けるので、小規模・シンプルなものから、大型・複雑なWebアプリの開発まで使われます。

また、導入がかんたんで、既存コードの一部分に利用することもできます。(jQueryとの共存も可)

最近(2018年末)では、WordPressが5.0にアップデートしてReactを採用しました。

WordPressは、JavaScriptの部分ではかなり遅れていました。いまでも、がっつりjQueryを使って直接JavaScriptを書くことも多いです。

そのWordPressですら採用するのですから、これからのJavaScriptはこういうフレームワークが中心になることは確実です。というかすでに中心になっています。

フロントエンド開発を勉強したい人にすすめるとしたら、僕はReactを推します。

ただし、開発環境などを用意するなど、生のJavaScriptのように『HTML, CSSの合間にちょっとしたプログラミング』というレベルでは書けないこともあるので、がっつりプログラミングに入っていく覚悟は必要です。

Reactは、単体では最小構成のインストールになっていて、フレームワークと言えるほどの機能を持っていないと言われます。Reduxなどほかのライブラリと合わせて使うことが一般的です。

インストールしたら、基本機能はすべてそろっているAnglarとは対照的なところです。その意味で、ReactはフレームワークではなくUIのライブラリと言われることもあります。

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年のUI開発で、トップを走り続けているフレームワーク・ライブラリの1つです。

Anglarは正確にはJavaScriptではなく、TypeScriptのフレームワークです。名前から『JS』が無くなったのはそのためです。

TypeScriptは、JavaScriptと同じECMAScriptをもとに作られたプログラム言語なので、JavaScriptで書いてもほとんどは正常に動きます。ただし、jQueryとの併用はできません。

HTMLと関連するプログラム(クラス)がないと動かすことができないので、最初の学習コストは高いです。

クラスベースなので、オブジェクト指向も知らないといけません。そのほかの基本機能も身につけないといけないので、Reactよりも学習コストは高いです。

ぼくの個人的な意見ですが、『Larabelみたいなものがフロントエンドにもあるんだ。』です。

(サーバーサイド出身なのでフロントエンドの状況にうとかった)

でも、HTML, CSS, JavaScriptの知識がすべて平均50点の人には、便利なフレームワークです。

標準コンポーネントがすでに充実しているので、ある程度はそれでこと足りるでしょう。ハイレベルなことを最初からもつ必要はないです。そのときになったら学べばいいと思います。

もしかすると一番必要な能力は、『効率的にドキュメント・リファレンスを読んで、かたちにする力』かもしれません。

フロントエンド出身のエンジニアよりも、サーバーサイドエンジニアの方がすんなりと入っていけます。

サーバーサイドでは、JavaやPHPなど、フレームワークや周辺のライブラリを使った開発に慣れています。

(15年くらい前からサーバーサイドの開発の中心はフレームワーク)

それがここ数年、フロントエンドの現場に導入されたと考えれば違和感がありません。

逆に言うと、このようなフレームワーク中心の開発に慣れてしまえば、フロントエンドのエンジニアもサーバーサイドに入っていきやすくなります。

(オブジェクト指向(クラス)がフロントエンドにも入ったことで、Java, PHPとの違いが無くなってきた。)

フロントエンドとサーバーサイドの垣根が無くなってきたのがここ数年の動きです。

Vue.js

2017年ごろから一番勢いのあるUIのフレームワークです。アリババが開発しました。

一言で言えば『中国製Anglar』です。『Anglarに触発された(Anglarから引き抜かれた?)多国籍チームが中国企業から出した製品』が当てはまるかもしれません。

(Anglarからすると『パクられた!』かもしれませんが。)

コアメンバーには、GoogleでAnglarを使った開発をしていたエンジニアもいます。

後発でもAnglarに負けてません。Anglarよりも軽量でコードもシンプルです。Anglarの高機能さをもっとシンプルにして、作りやすさを追求したのもうなずけます。

インストール時は最小構成にして、ほかのライブラリで補っていけるようにしているところはReactと似ています。

Reactのコンパクトさ、ほかの環境との共存ができる自由さと、Anglarのフレームワークとしての構成の良さをブレンドした位置づけです。

(ReactのJSXを使うことができるライブラリもあります。)

小規模・シンプルなものの開発から、大規模・複雑なものの開発まで幅広い事例が急激に増えています。Anglarに比べてお手頃なところがその理由でしょう。

  • 学習コストが低い(シンプル)
  • Anglarと似ているので、Anglarに移行しやすい
  • jQueryなどほかのライブラリとの共存ができる
  • 部分的にVue.jsを使うこともできる
  • Larabelフレームワーク内でサポートされている。(Larabel + Vue.js環境が可)
  • WordPressでも共存ができる

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を使う圧倒的な理由が必要です。でも作りやすさという点で、フレームワークとして劣っているとは思いません。ドキュメントもすらすら進められたので。

Googleトレンド

Qiita

GitHub

Nuxt.jsというフレームワークもあります。これは、Vue.jsで最低限必要な周辺ライブラリとVue.jsをパッケージにしたフレームワークです。

Vue.jsが最小限の機能なので、もう少しフレームワークらしく機能を増やしています。

自分が欲しいソースコードのプロジェクトを、コマンド1つでかんたんに作れます。開発環境構築のコストはほぼ0です。

あらかじめ必要なものはそろっているので、Vue.jsよりも親切・丁寧ですが、Anglarとの差別化が無くなっています。

Nuxt.jsは、Vue.jsの公式ではありません。開発はまったくの別プロジェクトです。

Node.js

サーバーサイドのプログラムをJavaScriptで作るためのフレームワークです。

リッチなWebサイトを作るには、サーバーサイドでプログラムを書く必要があります。代表的なプログラム言語は、PHPやJavaなどです。

今でもそうですが、フロントサイドとサーバーサイドでは、必要な技術が違います。それぞれ専門の技術者がいるのが当たり前です。

そうなると、1つのWebサイトを作るのに最低2人の専門家が必要です。もしくは、かけ持ちで両方できる、スーパーな人を連れてくるかです。

これをもっと効率的にするために、フロントサイドの技術(JavaScript)で、サーバーサイドのプログラムも作ってしまおうと開発されたのがNode.jsです。

これで、フロントサイドの技術者だけでWebサイトが作れるようになりました。

しかし現在は、これとは違う意味で重要なポジションになっています。Node.jsは、フロントエンド開発のフレームワークやライブラリのコア機能になっています。

React, Anglar, Vue.jsの開発リソースは、Node.jsのパッケージ管理コマンドのnpmで提供されています。

そのほか、Webpack, Gulpなどのビルドツール・タスクランナーもnpmで提供されています。

フロントエンド開発のツールはnpmで提供されていると言っても過言ではありません。フロントエンドエンジニアで知らない人・使えない人はいないでしょう。

最近では、SPA(Single Page Application)、SSR(Server Side Rendering)が注目されています。

これらの技術を使うにもNode.jsは必ず必要になります。

SPA: Webページを遷移するたびにリクエストを送信せずに、1つのWebページですべてを表示する。(疑似的にWebページの遷移を行う)

SSR: DOMからHTMLを作成する(レンダリング)作業を、ブラウザではなくサーバーで行ない、ブラウザは結果だけを表示する高速化の技術。

まとめ

JavaScriptは、Webサイトの中核の技術です。Webサイト作成で本格的なプログラミングをするのに、最初に使うプログラム言語でもあります。

Webデザインに関わる人、Webデザイナーを目指す人は、HTMLやCSSとは違って、必ず習得する必要はありません。しかし、もっとも身近なプログラミング言語なので、かんたんなものは作れると良いです。

フロントエンジニアを目指す人は、とりあえず、

  1. HTML, CSS, JavaScriptの基本(スペシャリストじゃなくていい)
  2. React, Vue.jsの使い方。フレームワークの仕組みを学ぶ
  3. Node.jsの使い方。npmコマンドの使い方
  4. Webpackなどのツールの使い方。フロントエンドの開発環境の構築方法を学ぶ
  5. jQueryの使い方。

(上から順に優先順位が高い。2, 3, 4は同時進行または順不同。)

あたりを学んでいけば、フロントエンジニアとしてやっていけると思います。

(Anglarは学習コストが高いので保留です。Vue.jsで感覚をつかんでからでも遅くありません。)

JavaScriptの本
post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。


javaScriptの本4選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!