Soumettre la recherche
Mettre en ligne
Knockout を用いた大規模 JavaScript 開発
•
25 j'aime
•
10,308 vues
Kentaro Iizuka
Suivre
HTML5 Conference 2013 において発表したスライドです。 Knockout.js について簡単に説明しています。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 48
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
2016年を振り返る
2016年を振り返る
Kuniyoshi Tone
VimとRubyのアツい関係
VimとRubyのアツい関係
Misao X
Cakecon xoops cubeなのにcake-phpを使う
Cakecon xoops cubeなのにcake-phpを使う
ha1t
初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!
Yuriko Kamimori
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
Tomoki Maeda
うるう秒とタイムゾーン
うるう秒とタイムゾーン
ShinichiAoyagi
Visual Studio TypeScript npm WebPack
Visual Studio TypeScript npm WebPack
Akihiro Ehara
concrete5セミナー資料公開版
concrete5セミナー資料公開版
Hishikawa Takuro
Recommandé
2016年を振り返る
2016年を振り返る
Kuniyoshi Tone
VimとRubyのアツい関係
VimとRubyのアツい関係
Misao X
Cakecon xoops cubeなのにcake-phpを使う
Cakecon xoops cubeなのにcake-phpを使う
ha1t
初めてでもOK : )『concrete5』でサイトを作ろう!
初めてでもOK : )『concrete5』でサイトを作ろう!
Yuriko Kamimori
090821 Ruby Sapporo Night Ruby Cocoa
090821 Ruby Sapporo Night Ruby Cocoa
Tomoki Maeda
うるう秒とタイムゾーン
うるう秒とタイムゾーン
ShinichiAoyagi
Visual Studio TypeScript npm WebPack
Visual Studio TypeScript npm WebPack
Akihiro Ehara
concrete5セミナー資料公開版
concrete5セミナー資料公開版
Hishikawa Takuro
MVCフレームワークとの付き合い方
MVCフレームワークとの付き合い方
Kazuki Shibata
C++ REST SDKを使ってWebサービスを利用する
C++ REST SDKを使ってWebサービスを利用する
You&I
第十回ネットワークチーム講座資料
第十回ネットワークチーム講座資料
densan_teacher
OthloEvent #9 Xamarinハンズオン
OthloEvent #9 Xamarinハンズオン
Hidetsugu Tamaki
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
プロジェクト2B テーマ発表
プロジェクト2B テーマ発表
Kodai Takao
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
Hishikawa Takuro
Uwpでみるxaml入門
Uwpでみるxaml入門
Makoto Nishimura
“なめらか”なメトロスタイルアプリを作るために ~WinRT の非同期性を活用したアプリ開発~
“なめらか”なメトロスタイルアプリを作るために ~WinRT の非同期性を活用したアプリ開発~
ShinichiAoyagi
Ltctjs
Ltctjs
Hisashi Aruji
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Yukio Saito
The Way We Are Working On Our Website @とちぎRuby会議02
The Way We Are Working On Our Website @とちぎRuby会議02
Yoji Shidara
HTML5 conference 2013
HTML5 conference 2013
Takuo Kihira
レーザレンジスキャナーとWebGL
レーザレンジスキャナーとWebGL
edy555
とあるISPの異端者
とあるISPの異端者
Tomo Watanabe
Noc ltスライド
Noc ltスライド
Hirotaka Nakajima
Html5 conference 2013
Html5 conference 2013
Mitsue-Links
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
Futomi Hatano
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
フロントエンド技術の変遷
フロントエンド技術の変遷
Ryo Higashigawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Modern frontend overview_r3
Modern frontend overview_r3
makotunes
Contenu connexe
Tendances
MVCフレームワークとの付き合い方
MVCフレームワークとの付き合い方
Kazuki Shibata
C++ REST SDKを使ってWebサービスを利用する
C++ REST SDKを使ってWebサービスを利用する
You&I
第十回ネットワークチーム講座資料
第十回ネットワークチーム講座資料
densan_teacher
OthloEvent #9 Xamarinハンズオン
OthloEvent #9 Xamarinハンズオン
Hidetsugu Tamaki
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
プロジェクト2B テーマ発表
プロジェクト2B テーマ発表
Kodai Takao
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
Hishikawa Takuro
Uwpでみるxaml入門
Uwpでみるxaml入門
Makoto Nishimura
“なめらか”なメトロスタイルアプリを作るために ~WinRT の非同期性を活用したアプリ開発~
“なめらか”なメトロスタイルアプリを作るために ~WinRT の非同期性を活用したアプリ開発~
ShinichiAoyagi
Ltctjs
Ltctjs
Hisashi Aruji
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Yukio Saito
The Way We Are Working On Our Website @とちぎRuby会議02
The Way We Are Working On Our Website @とちぎRuby会議02
Yoji Shidara
Tendances
(12)
MVCフレームワークとの付き合い方
MVCフレームワークとの付き合い方
C++ REST SDKを使ってWebサービスを利用する
C++ REST SDKを使ってWebサービスを利用する
第十回ネットワークチーム講座資料
第十回ネットワークチーム講座資料
OthloEvent #9 Xamarinハンズオン
OthloEvent #9 Xamarinハンズオン
Prototyping with Sketch
Prototyping with Sketch
プロジェクト2B テーマ発表
プロジェクト2B テーマ発表
WordPress使いのためのconcrete5入門
WordPress使いのためのconcrete5入門
Uwpでみるxaml入門
Uwpでみるxaml入門
“なめらか”なメトロスタイルアプリを作るために ~WinRT の非同期性を活用したアプリ開発~
“なめらか”なメトロスタイルアプリを作るために ~WinRT の非同期性を活用したアプリ開発~
Ltctjs
Ltctjs
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
The Way We Are Working On Our Website @とちぎRuby会議02
The Way We Are Working On Our Website @とちぎRuby会議02
En vedette
HTML5 conference 2013
HTML5 conference 2013
Takuo Kihira
レーザレンジスキャナーとWebGL
レーザレンジスキャナーとWebGL
edy555
とあるISPの異端者
とあるISPの異端者
Tomo Watanabe
Noc ltスライド
Noc ltスライド
Hirotaka Nakajima
Html5 conference 2013
Html5 conference 2013
Mitsue-Links
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
Futomi Hatano
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
En vedette
(7)
HTML5 conference 2013
HTML5 conference 2013
レーザレンジスキャナーとWebGL
レーザレンジスキャナーとWebGL
とあるISPの異端者
とあるISPの異端者
Noc ltスライド
Noc ltスライド
Html5 conference 2013
Html5 conference 2013
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
HTML5 Conference 2015 悩める組込機器向けウェブコンテンツのパフォーマンス
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
Similaire à Knockout を用いた大規模 JavaScript 開発
フロントエンド技術の変遷
フロントエンド技術の変遷
Ryo Higashigawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Modern frontend overview_r3
Modern frontend overview_r3
makotunes
大規模Webを支えるAgileな技術
大規模Webを支えるAgileな技術
bash0C7
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
20150926 uwpストア攻略
20150926 uwpストア攻略
Makoto Nishimura
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Fumio SAGAWA
Html5 and Graphics
Html5 and Graphics
Masakazu Muraoka
Cloudflare Pages/Workersとは
Cloudflare Pages/Workersとは
Hiroshi Morishige
HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
C# 7 New Features
C# 7 New Features
Takaaki Suzuki
The History of Reactive Extensions
The History of Reactive Extensions
Yoshifumi Kawai
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
日本マイクロソフト株式会社
モダンJavaScript入門.pdf
モダンJavaScript入門.pdf
omochids0113
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
TypeScriptでCLIアプリケーション開発
TypeScriptでCLIアプリケーション開発
Shuto Suzuki
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Toshiaki Maki
Blazor 触ってみた
Blazor 触ってみた
Oda Shinsuke
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Akira Inoue
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
Similaire à Knockout を用いた大規模 JavaScript 開発
(20)
フロントエンド技術の変遷
フロントエンド技術の変遷
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Modern frontend overview_r3
Modern frontend overview_r3
大規模Webを支えるAgileな技術
大規模Webを支えるAgileな技術
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
20150926 uwpストア攻略
20150926 uwpストア攻略
次世代Web業務アプリケーション
次世代Web業務アプリケーション
Html5 and Graphics
Html5 and Graphics
Cloudflare Pages/Workersとは
Cloudflare Pages/Workersとは
HTML5 アプリ開発
HTML5 アプリ開発
C# 7 New Features
C# 7 New Features
The History of Reactive Extensions
The History of Reactive Extensions
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
モダンJavaScript入門.pdf
モダンJavaScript入門.pdf
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
TypeScriptでCLIアプリケーション開発
TypeScriptでCLIアプリケーション開発
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Spring Bootハンズオン ~Spring Bootで作る マイクロサービスアーキテクチャ! #jjug_ccc #ccc_r53
Blazor 触ってみた
Blazor 触ってみた
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Dernier
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Dernier
(8)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
Knockout を用いた大規模 JavaScript 開発
1.
Knockout を用いた 大規模 JavaScript
開発 iizukak HTML Conference 2013 LT大会
2.
突然ですが
3.
最近のフロントエンド開発
4.
複雑化・大規模化してますよね?
5.
大規模化するフロントエンド開発 を描いた16世紀の絵画
6.
バベルの塔 by ブリューゲル
7.
HTML5の塔 by ブリューゲル 疲れ果てたプログラマ達
8.
「バベルの塔は完成しない」 by 聖書
9.
バベルの塔 現在 : 1563 年 :
2013 年
10.
5世紀に渡る フロントエンド開発技術の飛躍的進歩により バベルの塔の実装が比較的楽になってきた
11.
16世紀にはなかった技術の一例
12.
MV* フレームワーク
13.
MV* フレームワーク ✤ ✤ デザインパターンに従ってコードを良いかんじに書くためのサポート をしてくれるフレームワーク デザインパターンはいろいろあり、フレームワーク自体もいろいろ種 類がある Backbone MVC : Model-View-Controller Knockout MVVM
: Model-View-ViewModel Angular MVW : Model-View-Whatever デザインパターンの例
14.
場面は転換し、
15.
とあるフロントエンド開発現場…
16.
スマホゲームの UI 開発を WebView
でやることに
17.
UI の八割方を WebView
で実装 ✤ 数百の HTML ファイル ✤ 数千行の SCSS ✤ ユーザーとのインタラクションが非常に多い ✤ 数万行の JavaScript
18.
Q: なにがネックになったか?
19.
A: データバインドの記述
20.
ユーザーとのインタラクション ✤ 最近はユーザがアプリを操作することによって変化したモデルの状態 をリアルタイムにビューに反映することが必須 ①つぶやき投稿 ユーザー ②イベント通知 ③モデルの 状態が変化 JS ④ビューに反映
21.
ユーザーとのインタラクション ✤ モデルとビューのデータの結びつき =「データバインド」 ✤ データバインドを自力で書くのは割と面倒 ✤ 同じようなコードを何度も書かなければならない ✤ コードの総量も増えがち
22.
どうすれば簡単に データバインドを書けるか
23.
MV* フレームワーク
24.
MV* フレームワーク ✤ MV* フレームワークの多くが、データバインド機能を提供 ✤ Angular
: デフォルトである ✤ Knockout : デフォルトである ✤ Backbone : Epoxy.js とか使ってやる
25.
MV* フレームワークは、データバインド機能を中心に、 コードを構造化する手助けをするライブラリなのかなと思ったり
26.
そんなわけで、ゲームUI開発に Knockout 使っています
27.
Knockout について
28.
特徴
29.
特徴 ✤ 1, データバインドが読みやすい ✤ 2, データバインドが書きやすい ✤ 3,
組み込みデータバインドでけっこういけている ✤ 4, 拡張が用意 ✤ 5, 公式チュートリアルがいけている
30.
1/5 データバインドが読みやすい
31.
データバインドが読みやすい Knockout の data-bind
の例 <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> ✤ ✤ HTML を見ればどこの要素が Knockout で操作されるか一目瞭然 data-* 属性は正当な HTML 属性のため、実装した HTML が validな HTML になり、気分がよい
32.
「コードは書く10倍読まれる」
33.
ぱっと見でのわかりやすさ重要
34.
2, データバインドが書きやすい
35.
データバインドが書きやすい ✤ Knockout ではデータバインドは、かんじで記述 ビュー <開始タグ data-bind="データバインドの種類:
適用する変数名"></終了タグ> JavaScript function コンストラクタ() { this.適用する変数 = ko.observable(); } ko.applyBindings(new コンストラクタ());
36.
3/5 組み込みのデータバインドが けっこういけている
37.
様々な種類のデータバインドが あらかじめ組み込まれている click binding クリックイベントをハンドリング css binding CSS
を適用 visible binding 表示・非表示切り替え if binding if 文による分岐
38.
4/5 拡張が容易
39.
カスタムバインディング ✤ ✤ 組み込みのデータバインドで物足りなくなったら、容易にデータバイ ンドの種類を増やせる スマホゲーム案件では、20個以上の拡張データバインドを実装
40.
5/5 公式チュートリアルがいけている
41.
対話形式でサクサク学べる
42.
興味を持ったら まずは公式チュートリアル
43.
まとめ
44.
Knockout を使ったら いいかんじに大規模JS開発できました
45.
21世紀のプログラマでよかった
46.
めでたしめでたし
47.
自己紹介
48.
@iizukak on Github,
Twitter
Télécharger maintenant