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
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
110
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
490
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
860
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
730
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.8k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
5.3k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
Featured
See All Featured
Bash Introduction
62gerente
614
210k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Code Review Best Practice
trishagee
69
18k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Docker and Python
trallard
44
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A Tale of Four Properties
chriscoyier
160
23k
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だけではいろいろなアプリケーション の開発はできないので、自分で必要なものは探す必要 がある