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
AngularJS #TechLunch
Search
Livesense Inc.
PRO
April 21, 2014
Technology
0
45
AngularJS #TechLunch
AngularJS
2012/08/01 (水) @ Livesense TechLunch
発表者:塩足 拓也
Livesense Inc.
PRO
April 21, 2014
Tweet
Share
More Decks by Livesense Inc.
See All by Livesense Inc.
27新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
0
2.4k
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
51
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.5k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
440
26新卒_総合職採用_会社説明資料
livesense
PRO
0
11k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
37k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
13k
中途セールス職_会社説明資料
livesense
PRO
0
260
EM候補者向け転職会議説明資料
livesense
PRO
0
130
Other Decks in Technology
See All in Technology
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
230
roppongirb_20250911
igaiga
0
200
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.3k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
200
人工衛星のファームウェアをRustで書く理由
koba789
11
7k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
300
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
130
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
210
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bash Introduction
62gerente
615
210k
Git: the NoSQL Database
bkeepers
PRO
431
66k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Transcript
Takuya Shiotari
JavaScriptMVCフレームワーク Framework UI Bindings Composed Views Web Presentation Layer Plays
Nicely With Others Backbone.js ✗ ✗ ✓ ✓ SproutCore 1.x ✓ ✓ ✗ ✗ Sammy.js ✗ ✗ ✓ ✓ Spine.js ✗ ✗ ✓ ✓ Cappuccino ✓ ✓ ✗ ✗ Knockout.js ✓ ✗ ✓ ✓ Javascript MVC ✗ ✓ ✓ ✓ Google Web Toolkit ✗ ✓ ✗ ✗ Google Closure ✗ ✓ ✓ ✗ Ember.js ✓ ✓ ✓ ✓ Angular.js ✓ ✗ ✓ ✓ Batman.js ✓ ✗ ✓ ✓
AngularJSとは • Googleとコミュニティによって開発されている • オープンソースのJavaScriptMVCフレームワー ク • 最新バージョンは1.0.2
特徴 • HTMLのシンタックスを拡張し、HTML自体をテ ンプレート言語として使うことができる • 双方向データバインディングでUI(View)からの データとJavaScriptオブジェクト(Model)を自動 的に同期する • 直感的なコントローラ
テンプレートとしてのHTML HTML仕様と互換性をもつアプリ固有の要素、属 性、クラスタイプなどで既存のHTMLを拡張
双方向データバインディング UIでの変更をモデルに、モデルでの変更をUIに自 動的に反映する
コントローラ DOM構造と一致した変数スコープ
HTMLで再利用できるコンポー ネント カスタム要素や属性によって、動作を追加したり DOM を変更するなど、HTML のシンタックスを拡 張する手段を提供
フィルタリング |演算子でパイプラインのようにフィルタを追加でき る
考察 • フレームワーク独自の定型的なコードがほとんど無 いので、やりたいことに注力できる • HTMLがそのままテンプレートになっているので、 JavaScriptを読み込めない環境(robotとか)には不 向き • 属性部分にコードを埋めることが出来るのは良い
がやり過ぎは禁物 • minifyで77KBはでかい • 使い道がまだよくわからない