JavaScriptフレームワーク

jQuery

セレクタと言うものを使って、簡単に「いつどうされたらどうなるか」と言う処理を行うことが出来る技術。

Node.js

サーバーサイドのJavaScript技術。
ChromeJavaScriptエンジンV8を用いることで、サーバー側でJavaScriptアプリケーションの実行を行うためのエンジン。
ノンブロッキングI/Oとイベントループによって、非同期のイベント駆動の環境でスケーラブルなネットワークアプリケーションを構築するために設計されている。これはOSのスレッドが採用されている一般的な同時実行モデルとは対象的である。

Electron

ChromiumとNode.jsをランタイムとした、Web技術でデスクトップアプリケーションを作ることのできる技術。GitHubが開発した。
採用事例として、GitHubが開発したテキストエディタAtomMicrosoftオープンソーステキストエディタVisual Studio Codeがある。

JavaScriptフレームワーク

新技術が目白押し

JavaScriptフレームワークは、新技術が目白押しです。
たとえばAjaxjQueryのように、ブラウザで動かすためにもっとデザイナブルかつフレシキブルな効果を与えるものから、サーバーサイドのNode.js、Web技術でデスクトップアプリケーションを開発できるElectron、AltJSとして注目されるTypeScript、React + ReduxやVue.js + Vuexのようなモダンなフレームワークなど、多種多様です。
こうしたJavaScriptの最先端の技術は、今まさに開拓途上であり、数年後どうなっているかは分かりません。ですが、たくさんの応用技術があり、他の(サーバーサイドの)言語と比べても面白い分野ではないかと思います。

Vue.js

MVVM(Model-View-ViewModel)アーキテクチャに基づくフレームワーク
Webアプリケーション(特にサーバーサイド)にMVC(Model-View-Controller)が浸透しているが、クライアント側では、Webに表示させるだけ、という意味で、MVCのようなアーキテクチャは必要ないと考えられてきた。
だが、Webが高機能化する中で、何らかの形でWebページのフレームワークを作る必要がでてきた。それが、MVVMアーキテクチャである。
MVVMとはModel-View-ViewModelの略で、プログラムを「データを管理するもの(Model)」「画面表示に関するもの(View)」「データと表示の橋渡しをするもの(ViewModel)」に分けて考える。
MVVMの代表と言えるのがVue.jsである。

Vue.jsの基本

{{ massage }}はMustasheタグと呼ばれ、Mustasheというテンプレートエンジンで使われている特殊なタグ。Vue.jsでデータをはめ込むために利用する。
Vue.jsでもっとも重要なのは「Vue」というオブジェクト。これは、Vue.jsに用意されているViewModelオブジェクト。このVueオブジェクトを作成し、この中でデータと画面の表示を関連づけ、処理していく。
Vueの引数は、elが値を表示する対象となるタグ、dataが渡す値。dataはオブジェクトとして用意し、その中に値をまとめておく。

Backbone.js

WebアプリケーションではMVCアーキテクチャを良く採用しているが、JavaScriptの開発の場合、基本的にクライアント側でプログラムを作るため、データ管理の部分はサーバー側に処理を委ねるのが一般的だった。
こうした中、JavaScriptMVCフレームワークとして登場したBackbone.jsでは、「データベース部分を実装できない」という問題を、「REST」を利用してサーバー側とうまく連携することで解決した。
RESTは、ネットワーク上にあるリソースに決まった形式のURLでアクセスするための技術。このRESTによって、提供されるサービスでは、決まったURLにアクセスすることで必要なデータを取得したりできる。
Backbone.jsでは、データベース側にRESTサービスを指定することで、ネットワーク経由でデータアクセスを行う。こうすることで、「サーバー側データへのアクセス」というJavaScriptでは難しかったModelの部分を解決した。

Angular

Google中心のフレームワーク。Angularは1と2で大幅な変更が加わった。Angular 1はMVC(MVVM)フレームワークだったが、Angular 2はコンポーネント指向のフレームワークとなっている。
Angularは「フルスタック(Webアプリケーション開発に必要なものが全て揃っている)」と言われる。プログラム本体のみならず、テスト環境などまで全て一式揃っている。
また、TypeScriptを採用している。JavaScriptDartもサポートされているが、基本的なドキュメントやサンプルはすべてTypeScriptを前提にしている。TypeScriptを使うのが基本である。

コンポーネントの三要素

Angularは、「import」、「@Component」、「export」でソースコードを記述する。
importで必要なクラスをロードし、@Componentでコンポーネントの情報(selector:識別のための名前であるセレクタと、template:出力される内容を記述したテンプレート)を記述し、exportを実行することでコンポーネントを作成できる。

React

Facebookが中心となって開発されているJavaScriptフレームワーク。Angularと同様、コンポーネント指向だが、よりシンプルで、画面表示(View)に特化して設計されている。
HTMLの要素をどう作成していくか、という点で、「JSX」という技術を使っている。JavaScriptを使ってHTMLの要素を生成する仕組みで、HTMLのタグとほとんど同じようなタグをJavaScriptソースコードに直接記述することもできる。
また、ソースコードJavaScriptに変換してコンパイルするトランスコンパイラ言語Babelを採用している。

AltJS

JavaScript代替言語とは

JavaScript代替言語は、AltJSとして知られ、「ブラウザで動くJavaScriptをもっと別の言語で書きたい」というニーズにこたえている。
たとえば、JavaScriptではプロトタイプベースの「とても特殊」なオブジェクト指向を用いるが、「C#Javaのような静的型付けのクラスベースなオブジェクト指向開発がしたい」というニーズが、特に会社のシステム開発などでは多く見られる。この時、AltJSのTypeScriptを使うことができる。
また、TypeScriptは単なるAltJSではなく、「JavaScriptフレームワークの採用言語」でもある。ここでは、GoogleFacebookなどが作ったAngularやReact/Vue.jsのような「クライアントサイドでのフレームワーク」を用いた時に、TypeScriptを使うことになる。特にAngularでは全面的にTypeScriptが採用されており、Angularを使う開発者は必然的にTypeScriptを学ばざるを得ない。

TypeScript

Microsoftによる、JavaScriptの代替言語。
JavaScriptがクラスベースではないプロトタイプベースのオブジェクト指向をするのに比べて、TypeScriptはクラスベースのオブジェクト指向を行うことが出来る。静的型付けであると考えて良い。
GoogleによるDartと言う似たような言語プロジェクトもある。

Dart

GoogleによるJavaScript代替言語。
大規模開発に不向きなJavaScriptの欠点をもっと見通しのいいものにするために設計されており、クライアントサイドだけでなくサーバーサイドでも利用できる。

Dart 2

TypeScriptに敗北したかと思いきや、GoogleDart 2を発表してDartを再起動した。
DartGoogleによるモバイルアプリケーションフレームワークのFlutterなどで使われている。

参考文献

JavaScript フレームワーク入門を参考にしています。

簡単な説明

JavaScriptフレームワーク

Bootstrap

綺麗なナビゲーション、フォーム、ボタンなどの部品が使える
レスポンシブデザイン(スマホでも同じページが綺麗に見れる)にも対応

jQuery

「いつどうなればどうなる」といったやり方で、デザイナブルにページの情報を変えられる
素のJavaScriptを触るよりも簡単で分かりやすい
僕はホームページでCSSやフォントをCookieを使って変更したり、ボタンクリックで要素を非表示にしたりするために使っていた
jQueryプラグインを使うことで、メニューなどのパーツをページに簡単に追加できる

Node.js

サーバーサイドのJavaScript環境。クライアントサイドだけではなくサーバーサイドでもJavaScriptを使う。
一部ではPHPRubyよりも流行っている

Vue.js, Angular, Reactなど

クライアントサイドのフレームワーク。MVVMあるいはコンポーネント指向。
学習コストが低く、手軽に使え、日本語の情報も多いVue.jsがおすすめ。

Vue.js

まず、div idタグでテンプレートとJavaScriptを紐づける
HTMLテンプレートの中のエレメントの子要素に、属性を付加する。
二重波かっこ{{ }}でテンプレートの中のメッセージを書く
v-onはイベントを処理する。省略形は@
v-bindはHTMLタグの属性値に変数名を割り当てる。省略形は:
v-modelはVueオブジェクトのデータとフォーム値を関係づける
ほかにもいろいろとv-からはじまる属性がある
JavaScriptの方で独自のコーディングをして、テンプレート内のメッセージを動的に変更したり色んなことができる。
複雑になってきたらCLIツールや複数の.vueファイルを用いてより高度な管理もできる。
ビルドしてindex.htmlとbuild.jsができたらそれを本番環境にデプロイする。

サーバーサイドレンダリング

サーバ側でDOMレンダリングを終えた上で、クライアントがアクセスした時点ですぐに画面描画が行えるようにする(サーバーサイドレンダリングSSR

状態管理

ストアに状態(データ)を保持する(状態管理)
Facebookにより提唱されたFluxの実装

AltJS(TypeScript, Dart, Elm)

TypeScriptなどはJavaScriptでクラスベースの静的型付け言語を実現する
TypeScriptではコンパイルされた後は型情報は残らず、コンパイルの時にチェックして通常のJavaScriptを吐く

npm

JavaScriptのパッケージ管理システム