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
airhand
April 11, 2022
Programming
0
75
JS Framework入門(2018)
Slideshareより移行
airhand
April 11, 2022
Tweet
Share
More Decks by airhand
See All by airhand
Docker 入門
airhand
0
94
ansible入門
airhand
0
260
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
0
330
ふつうの技術スタックでアート作品を作ってみる
akira888
1
1.3k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
610
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.5k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
テスト駆動Kaggle
isax1015
1
620
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Building Adaptive Systems
keathley
43
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Making Projects Easy
brettharned
116
6.3k
Designing for Performance
lara
610
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Embracing the Ebb and Flow
colly
86
4.8k
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だけではいろいろなアプリケーション の開発はできないので、自分で必要なものは探す必要 がある