イマドキのjs frameworkを紹介します

1. JS Framework 入門
社内勉強会資料

2. Webフロントエンドの世界は
流行り廃りが激しい

3. 参考
https://medium.com/japan/2
016年にjavascriptを学ぶとこ
んな感じ-b969f5767d7c

4. JSバージョン
ECMAScript 5
ES2015 (ES6)
ES2016 ...

5. AltJS
TypeScript
CoffeeScript

6. トランスパイラ
ブラウザによっては、特定バージョンのJSをサポート
していない場合があるため、Babelなどで新しい記法
をES5に変換したりする
また、TypeScriptといったJSに静的型付け機能を入れ
たものがある
こちらもそのままではブラウザが解釈できないので、
最終的にはJSに変換される
コンパイル : ソースコード -> 実行ファイル
トランスパイル : ソースコード -> ソースコード

7. CSS
Sass(Scss)
Less
PostCSS

8. タスクランナー
Grunt
Gulp
Webpack (どちらかというとアセットバンドラー)

9. 皆大好きjQuery
jQueryはDOMに問い合わせるクエリという意味でつ
けられた
元々jSelectと命名する予定だったらしい
ブラウザに依存せずに共通処理でDOMの選択が出来
て、
他にも機能が豊富に追加されたために人気を得た

10. jQuery
<div id="foo"></div>
<script>
$(function(){
$("#foo").html("<p>jQueryでタグ作成</p>");
});
</script>
シンプルなものならこれでも十分だが
変数が変わる度に、DOMの値を直接変更する必要が
ある
ロジックと表示の管理が分離できない

11. 多様なフレームワーク
React
Vue.js
Angular
Aurelia
データバインディング機能を備えているため、
JavaScriptオブジェクトのステータスを変更するとそ
れがDOMに反映される

12. React
Facebook製。表示に特化しているのでフレームワー
クというよりライブラリに近い
従来のように直接htmlを記述することはなく、JS内
にJSXというXMLに近い構文で記載する
いわゆる古い実装方法とだいぶかけ離れたことをする
必要があり、学習コストが高い
一から環境を用意するのは厳しいがボイラープレート
生成ツールが用意されている

13. Vue.js
Reactと比べて後発のフレームワーク
カバーする範囲はReactに近いため、コアは表示に特
化している
ECMAScript 5で動作するため、IE9以上のブラウザを
標準サポート
htmlをテンプレートとして使用できるため、学習曲
線はゆるやか
PHPフレームワーク Laravelに組み込まれている

14. Angular
Google製のフレームワーク
AngularJS (v1)
Angular (v2 - )
v2以降をAngularと呼称する
AngularJSと互換性が保たれていなかったりする
React、Vue.jsと異なり、コアに様々な機能が搭載さ
れている
TypeScriptの使用が推奨されている

15. Aurelia
AngularJSの開発者が作成したフレームワーク
all-in-oneなので、Angularに近い
この中では最も後発
コントリビュータの数でもAngular、Vue.jsを上回る
ほどコミュニティが急成長している
TypeScriptもしくは次世代のECMAScriptを使用
htmlテンプレート

16. demo
js-framework-samples

17. まとめ
Angular AureliaなどのAll-in-oneフレームワークは必
要な機能は大抵揃っているが、選択ができないところ
がネックか
React、Vue.jsだけではいろいろなアプリケーション
の開発はできないので、自分で必要なものは探す必要
がある