Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JS Framework入門(2018)
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
airhand
April 11, 2022
Programming
0
77
JS Framework入門(2018)
Slideshareより移行
airhand
April 11, 2022
Tweet
Share
More Decks by airhand
See All by airhand
Docker 入門
airhand
0
99
ansible入門
airhand
0
260
Other Decks in Programming
See All in Programming
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
600
AI & Enginnering
codelynx
0
110
組織で育むオブザーバビリティ
ryota_hnk
0
170
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
2.4k
CSC307 Lecture 05
javiergs
PRO
0
500
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
200
高速開発のためのコード整理術
sutetotanuki
1
390
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
nrslib
2
1.8k
Kotlin Multiplatform Meetup - Compose Multiplatform 외부 의존성 아키텍처 설계부터 운영까지
wisemuji
0
190
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
160
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
970
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
Featured
See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3k
The Limits of Empathy - UXLibs8
cassininazir
1
210
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
450
Exploring anti-patterns in Rails
aemeredith
2
250
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.9k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
51
The Curious Case for Waylosing
cassininazir
0
230
How STYLIGHT went responsive
nonsquared
100
6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
910
Ruling the World: When Life Gets Gamed
codingconduct
0
140
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
270
Transcript
JS Framework 入門 社内勉強会資料
Webフロントエンドの世界は 流行り廃りが激しい
参考 https://medium.com/japan/2 016年にjavascriptを学ぶとこ んな感じ-b969f5767d7c
JSバージョン ECMAScript 5 ES2015 (ES6) ES2016 ...
AltJS TypeScript CoffeeScript
トランスパイラ ブラウザによっては、特定バージョンのJSをサポート していない場合があるため、Babelなどで新しい記法 をES5に変換したりする また、TypeScriptといったJSに静的型付け機能を入れ たものがある こちらもそのままではブラウザが解釈できないので、 最終的にはJSに変換される コンパイル :
ソースコード -> 実行ファイル トランスパイル : ソースコード -> ソースコード
CSS Sass(Scss) Less PostCSS
タスクランナー Grunt Gulp Webpack (どちらかというとアセットバンドラー)
皆大好きjQuery jQueryはDOMに問い合わせるクエリという意味でつ けられた 元々jSelectと命名する予定だったらしい ブラウザに依存せずに共通処理でDOMの選択が出来 て、 他にも機能が豊富に追加されたために人気を得た
jQuery <div id="foo"></div> <script> $(function(){ $("#foo").html("<p>jQueryでタグ作成</p>"); }); </script> シンプルなものならこれでも十分だが 変数が変わる度に、DOMの値を直接変更する必要が
ある ロジックと表示の管理が分離できない
多様なフレームワーク React Vue.js Angular Aurelia データバインディング機能を備えているため、 JavaScriptオブジェクトのステータスを変更するとそ れがDOMに反映される
React Facebook製。表示に特化しているのでフレームワー クというよりライブラリに近い 従来のように直接htmlを記述することはなく、JS内 にJSXというXMLに近い構文で記載する いわゆる古い実装方法とだいぶかけ離れたことをする 必要があり、学習コストが高い 一から環境を用意するのは厳しいがボイラープレート 生成ツールが用意されている
Vue.js Reactと比べて後発のフレームワーク カバーする範囲はReactに近いため、コアは表示に特 化している ECMAScript 5で動作するため、IE9以上のブラウザを 標準サポート htmlをテンプレートとして使用できるため、学習曲 線はゆるやか PHPフレームワーク
Laravelに組み込まれている
Angular Google製のフレームワーク AngularJS (v1) Angular (v2 - ) v2以降をAngularと呼称する AngularJSと互換性が保たれていなかったりする
React、Vue.jsと異なり、コアに様々な機能が搭載さ れている TypeScriptの使用が推奨されている
Aurelia AngularJSの開発者が作成したフレームワーク all-in-oneなので、Angularに近い この中では最も後発 コントリビュータの数でもAngular、Vue.jsを上回る ほどコミュニティが急成長している TypeScriptもしくは次世代のECMAScriptを使用 htmlテンプレート
demo js-framework-samples
まとめ Angular AureliaなどのAll-in-oneフレームワークは必 要な機能は大抵揃っているが、選択ができないところ がネックか React、Vue.jsだけではいろいろなアプリケーション の開発はできないので、自分で必要なものは探す必要 がある