JS Framework入門(2018)

Slideshareより移行

Transcript

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だけではいろいろなアプリケーション の開発はできないので、自分で必要なものは探す必要 がある