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
69
株式会社リブセンス・転職会議 採用候補者様向け資料
livesense
PRO
0
13
株式会社リブセンス 会社説明資料(報道関係者様向け)
livesense
PRO
0
1.4k
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
390
26新卒_総合職採用_会社説明資料
livesense
PRO
0
8.8k
株式会社リブセンス会社紹介資料 / Invent the next common.
livesense
PRO
1
27k
26新卒_Webエンジニア職採用_会社説明資料
livesense
PRO
1
12k
中途セールス職_会社説明資料
livesense
PRO
0
250
EM候補者向け転職会議説明資料
livesense
PRO
0
120
Other Decks in Technology
See All in Technology
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
130
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
340
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
960
GitHub Copilot の概要
tomokusaba
1
140
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
250
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
150
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
660
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
120
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Writing Fast Ruby
sferik
628
62k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Site-Speed That Sticks
csswizardry
10
670
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Making Projects Easy
brettharned
116
6.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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はでかい • 使い道がまだよくわからない