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.5k
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
53
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.5k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
440
26新卒_総合職採用_会社説明資料
livesense
PRO
0
11k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
38k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
13k
中途セールス職_会社説明資料
livesense
PRO
0
270
EM候補者向け転職会議説明資料
livesense
PRO
0
130
Other Decks in Technology
See All in Technology
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
470
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
テストを軸にした生き残り術
kworkdev
PRO
0
210
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Navigating Team Friction
lara
189
15k
The Language of Interfaces
destraynor
161
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
4 Signs Your Business is Dying
shpigford
184
22k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Reviewing Like a Champion
maltzj
525
40k
We Have a Design System, Now What?
morganepeng
53
7.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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はでかい • 使い道がまだよくわからない