Soumettre la recherche
Mettre en ligne
大規模なJavaScript開発の話
•
70 j'aime
•
12,086 vues
T
terurou
Suivre
大なごやJS#3(2012/07/21)で使ったスライドです。割と「当たり前のこと」をまとめなおしただけな感じです。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 30
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
Hironori Washizaki
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
増田 亨
例外設計における大罪
例外設計における大罪
Takuto Wada
Redmineサーバ統合事例
Redmineサーバ統合事例
Yuuki Nara
概念モデリング再入門 + DDD
概念モデリング再入門 + DDD
Hiroshima JUG
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
Keisuke Tameyasu
Recommandé
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
ソフトウェアパターン概論およびパターンを活用したアーキテクチャ設計
Hironori Washizaki
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
増田 亨
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
3週連続DDDその2 深いモデルの探求(ドメイン駆動設計 第3部)
増田 亨
例外設計における大罪
例外設計における大罪
Takuto Wada
Redmineサーバ統合事例
Redmineサーバ統合事例
Yuuki Nara
概念モデリング再入門 + DDD
概念モデリング再入門 + DDD
Hiroshima JUG
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
振り返り(アジャイルレトロスペクティブズ)
振り返り(アジャイルレトロスペクティブズ)
Keisuke Tameyasu
3週連続DDDその3 ドメイン駆動設計 戦略的設計
3週連続DDDその3 ドメイン駆動設計 戦略的設計
増田 亨
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
PFD(Process Flow Diagram)の書き方紹介
PFD(Process Flow Diagram)の書き方紹介
Noriyuki Mizuno
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
Akkaで分散システム入門
Akkaで分散システム入門
Shingo Omura
LINE開発の舞台裏とプロダクトマネージャー
LINE開発の舞台裏とプロダクトマネージャー
LINE Corporation
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
Study Group by SciencePark Corp.
アジャイル開発を支えるアーキテクチャ設計とは
アジャイル開発を支えるアーキテクチャ設計とは
Yusuke Suzuki
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
フィーチャモデルの描き方
フィーチャモデルの描き方
H Iseri
Jbossとtomcatの性能を比べてみた
Jbossとtomcatの性能を比べてみた
Yuki Obara
最適なOpenJDKディストリビューションの選び方 #codetokyo19B3 #ccc_l5
最適なOpenJDKディストリビューションの選び方 #codetokyo19B3 #ccc_l5
Takahiro YAMADA
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
Takuya Sato
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
豆寄席 (株式会社豆蔵)
DeNAの品質を支えるQAの取り組み 〜標準化から実践まで〜
DeNAの品質を支えるQAの取り組み 〜標準化から実践まで〜
Tetsuya Kouno
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
増田 亨
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
増田 亨
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
Satoshi Kubo
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
実践的な設計って、なんだろう?
実践的な設計って、なんだろう?
増田 亨
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
Contenu connexe
Tendances
3週連続DDDその3 ドメイン駆動設計 戦略的設計
3週連続DDDその3 ドメイン駆動設計 戦略的設計
増田 亨
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
PFD(Process Flow Diagram)の書き方紹介
PFD(Process Flow Diagram)の書き方紹介
Noriyuki Mizuno
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
増田 亨
Akkaで分散システム入門
Akkaで分散システム入門
Shingo Omura
LINE開発の舞台裏とプロダクトマネージャー
LINE開発の舞台裏とプロダクトマネージャー
LINE Corporation
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
Study Group by SciencePark Corp.
アジャイル開発を支えるアーキテクチャ設計とは
アジャイル開発を支えるアーキテクチャ設計とは
Yusuke Suzuki
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
フィーチャモデルの描き方
フィーチャモデルの描き方
H Iseri
Jbossとtomcatの性能を比べてみた
Jbossとtomcatの性能を比べてみた
Yuki Obara
最適なOpenJDKディストリビューションの選び方 #codetokyo19B3 #ccc_l5
最適なOpenJDKディストリビューションの選び方 #codetokyo19B3 #ccc_l5
Takahiro YAMADA
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
Takuya Sato
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
豆寄席 (株式会社豆蔵)
DeNAの品質を支えるQAの取り組み 〜標準化から実践まで〜
DeNAの品質を支えるQAの取り組み 〜標準化から実践まで〜
Tetsuya Kouno
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
増田 亨
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
増田 亨
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
Satoshi Kubo
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
増田 亨
実践的な設計って、なんだろう?
実践的な設計って、なんだろう?
増田 亨
Tendances
(20)
3週連続DDDその3 ドメイン駆動設計 戦略的設計
3週連続DDDその3 ドメイン駆動設計 戦略的設計
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
PFD(Process Flow Diagram)の書き方紹介
PFD(Process Flow Diagram)の書き方紹介
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
Akkaで分散システム入門
Akkaで分散システム入門
LINE開発の舞台裏とプロダクトマネージャー
LINE開発の舞台裏とプロダクトマネージャー
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
WPFの画面をWebブラウザのように拡大・縮小に追従させる方法(オートスクロールバー付き)
アジャイル開発を支えるアーキテクチャ設計とは
アジャイル開発を支えるアーキテクチャ設計とは
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
フィーチャモデルの描き方
フィーチャモデルの描き方
Jbossとtomcatの性能を比べてみた
Jbossとtomcatの性能を比べてみた
最適なOpenJDKディストリビューションの選び方 #codetokyo19B3 #ccc_l5
最適なOpenJDKディストリビューションの選び方 #codetokyo19B3 #ccc_l5
設計と実装で 抑えておきたい サービスクラスと例外
設計と実装で 抑えておきたい サービスクラスと例外
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
DeNAの品質を支えるQAの取り組み 〜標準化から実践まで〜
DeNAの品質を支えるQAの取り組み 〜標準化から実践まで〜
ドメイン駆動設計 の 実践 Part3 DDD
ドメイン駆動設計 の 実践 Part3 DDD
ソフトウェア設計の学び方を考える
ソフトウェア設計の学び方を考える
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
実践的な設計って、なんだろう?
実践的な設計って、なんだろう?
Similaire à 大規模なJavaScript開発の話
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
terurou
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
Narami Kiyokura
TDDBC osaka 2012/06/02
TDDBC osaka 2012/06/02
Hiro Yoshioka
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Akira Inoue
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
設計/ドメイン設計(5) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第27回】
設計/ドメイン設計(5) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第27回】
Tomoharu ASAMI
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
Taiji Miyabe
Cedec2012 ai-contest-design-patterns-principles
Cedec2012 ai-contest-design-patterns-principles
Hironori Washizaki
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624
Yusuke Suzuki
作る人から作りながら運用する人になっていく
作る人から作りながら運用する人になっていく
Ryo Mitoma
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Daizen Ikehara
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
terurou
Agile Japan 2010 「変化を受け入れるアジャイルなプロジェクトマネジメントと現場 <ツール・環境篇>」
Agile Japan 2010 「変化を受け入れるアジャイルなプロジェクトマネジメントと現場 <ツール・環境篇>」
Yusuke Suzuki
つぶLT20121215
つぶLT20121215
遼一 杉浦
実装(1) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第30回】
実装(1) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第30回】
Tomoharu ASAMI
デブサミ2013【15-D-4】Opsから挑むDevOps
デブサミ2013【15-D-4】Opsから挑むDevOps
Developers Summit
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Similaire à 大規模なJavaScript開発の話
(20)
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
大規模なギョームシステムにHaxeを採用してみた話
大規模なギョームシステムにHaxeを採用してみた話
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
TDDBC osaka 2012/06/02
TDDBC osaka 2012/06/02
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
設計/ドメイン設計(5) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第27回】
設計/ドメイン設計(5) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第27回】
Java fx勉強会lt 第8回
Java fx勉強会lt 第8回
Cedec2012 ai-contest-design-patterns-principles
Cedec2012 ai-contest-design-patterns-principles
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
企業におけるSpring@日本springユーザー会20090624
企業におけるSpring@日本springユーザー会20090624
作る人から作りながら運用する人になっていく
作る人から作りながら運用する人になっていく
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
DLR言語によるSilverlightプログラミング
DLR言語によるSilverlightプログラミング
Agile Japan 2010 「変化を受け入れるアジャイルなプロジェクトマネジメントと現場 <ツール・環境篇>」
Agile Japan 2010 「変化を受け入れるアジャイルなプロジェクトマネジメントと現場 <ツール・環境篇>」
つぶLT20121215
つぶLT20121215
実装(1) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第30回】
実装(1) 【クラウドアプリケーションのためのオブジェクト指向分析設計講座 第30回】
デブサミ2013【15-D-4】Opsから挑むDevOps
デブサミ2013【15-D-4】Opsから挑むDevOps
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Plus de terurou
Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話
terurou
自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話
terurou
Computation Expressions for Haxe
Computation Expressions for Haxe
terurou
デンキヤギの採用の考え方
デンキヤギの採用の考え方
terurou
Vue.jsをhaxeで
Vue.jsをhaxeで
terurou
MQTTとAMQPと.NET
MQTTとAMQPと.NET
terurou
altJSの選び方
altJSの選び方
terurou
DataGridを自前実装する話
DataGridを自前実装する話
terurou
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
terurou
動的なILの生成と編集
動的なILの生成と編集
terurou
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
terurou
Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSILver.2012/06/09
terurou
Metro Style AppsでMSIL
Metro Style AppsでMSIL
terurou
Yet Another DLR for Silverlightの試作
Yet Another DLR for Silverlightの試作
terurou
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
terurou
CommonJSの話
CommonJSの話
terurou
Scala×silverlight
Scala×silverlight
terurou
Iron Python / Iron Ruby で .NET Programming
Iron Python / Iron Ruby で .NET Programming
terurou
クラウドGPS(仮)
クラウドGPS(仮)
terurou
Silverlight 4 のはなし
Silverlight 4 のはなし
terurou
Plus de terurou
(20)
Webブラウザ上で動作する帳票エンジンを作る話
Webブラウザ上で動作する帳票エンジンを作る話
自社サービスでDurable Functionsを採用した話
自社サービスでDurable Functionsを採用した話
Computation Expressions for Haxe
Computation Expressions for Haxe
デンキヤギの採用の考え方
デンキヤギの採用の考え方
Vue.jsをhaxeで
Vue.jsをhaxeで
MQTTとAMQPと.NET
MQTTとAMQPと.NET
altJSの選び方
altJSの選び方
DataGridを自前実装する話
DataGridを自前実装する話
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
オブジェクト指向の皮をかぶった関数型プログラミング言語 Haxe
動的なILの生成と編集
動的なILの生成と編集
FIRST STEP to Haxe/JavaScript
FIRST STEP to Haxe/JavaScript
Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSILver.2012/06/09
Metro Style AppsでMSIL
Metro Style AppsでMSIL
Yet Another DLR for Silverlightの試作
Yet Another DLR for Silverlightの試作
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
スマートフォン×Cassandraによるハイパフォーマンス基盤の構築事例
CommonJSの話
CommonJSの話
Scala×silverlight
Scala×silverlight
Iron Python / Iron Ruby で .NET Programming
Iron Python / Iron Ruby で .NET Programming
クラウドGPS(仮)
クラウドGPS(仮)
Silverlight 4 のはなし
Silverlight 4 のはなし
大規模なJavaScript開発の話
1.
大規模な JavaScript開発の話 terurou/YAGI.Teruo
2.
自己紹介
2
3.
terurouです。 • Web・GUI・分散処理を手広くやってます –
Windows 8(Metro Style Apps), Silverlight, JavaScript, Android, … – Cassandra, 自作KVS, AWS, … – DataGridの自作に定評があるらしいです • フロントエンド寄りのアーキテクチャの設計が 割と得意です – MVC/MVVM, Client-side Cache, 通信, … 3
4.
大規模なJavaScript開発とは?
4
5.
私の大規模プロジェクト経験 • 大規模なJavaScriptプロジェクト経験は2回 –
似たところではSilverlightの大規模プロジェクトも • 全て業務系システム開発プロジェクト – Web/ゲーム系のことはわからないです – 基本的なことは同じだと思いますが… 5
6.
私の関わった大規模JavaScript開発(1) • SaaS セルフカスタマイズエンジン
– Salseforce.comみたいなやつ • 5人体制(JS担当者は2名) – プロジェクト全体では50名体制 • 開発規模:数万行(記憶があいまい) – ライブラリ未使用、フルスクラッチ – 現在のスキルであれば25K行程度で作れそう 6
7.
私の関わった大規模JavaScript開発(2) • SaaS フレームワーク
– 現在進行中 • 6人体制(JS担当者は3名) – プロジェクト全体では最大30名程度になる? • 開発規模は30K行程度に収まる? – Ext.JS利用、DataGrid自作 7
8.
「大規模」の定義が難しいですが… • 単純にステップ数が多いアプリケーション –
並みの規模だとJS単体で10K行は超えない – cybozu.comがJS単体で65K行程度らしい • http://b.hatena.ne.jp/articles/201112/6709 • 開発人員が多い – プロジェクト全体では数十名規模とか… 8
9.
大規模プロジェクトでのチーム構成 • PMO(Project Management
Office) – プロジェクト管理 • 共通基盤チーム – フレームワーク開発、インフラ整備など • アプリケーションチーム(業務チーム) – 機能設計、実装など – このチームが一番人数が多くなるはず • その他に企画、品質管理、保守運営など 9
10.
大規模プロジェクトでのチーム構成 • PMO(Project Management
Office) – プロジェクト管理 • 共通基盤チーム ← 今回話す範囲 – フレームワーク開発、インフラ整備など • アプリケーションチーム(業務チーム) – 機能設計、実装など – このチームが一番人数が多くなるはず • その他に企画、品質管理、保守運営など 10
11.
大規模プロジェクトでの 基盤開発で意識すべきこと
11
12.
大規模プロジェクトならでは「急所」 • どうしても「変更」に対して弱くなりがち –
チーム制による分業のため、変更発生時には 関係各所との調整が必要 • 人数が多い分だけオーバーヘッドが大きくなる – 問題の発覚が遅くなるほど影響が大きくなり、 最悪のケースはプロジェクトが頓挫することも • プロジェクトメンバのスキルのばらつき – 対策をしなければ、生産性、品質、保守性に 大きな影響が出てしまう 12
13.
どのように「急所」に向き合うか • 早期の技術検証/プロトタイピング –
プロジェクトの序盤に問題点をクリアしておけば、 後から変更をする必要がない • 「できていいことだけができる」環境を作る – コードの品質(保守性・可読性)がメンバーの スキルに影響されないようにする – 品質が高レベルで安定していれば、もし変更が 必要になっても対応しやすい 13
14.
技術検証/プロトタイピングで注意すること • 些細なことでも必ず検証するのが理想 –
「実現できるはず」という思い込みをしていても、 実は実現できないことは多々ある • あまり作りこみ過ぎない – 所詮は検証用、書き捨てコードでOK • 目的(何を検証したいのか)を見失わない – 実装可能? パフォーマンス? 生産性? ユーザビリティ? … 14
15.
「できていいことだけができる」環境 • プロジェクトに特化したフレームワークを作り、
実装パターンを単一化/テンプレート化する – 「穴埋め実装すればアプリが作れます!」 – 必要な機能を提供しつつ、不要な機能は隠す • 汎用化≒複雑化、保守性・学習性が落ちる • OSSのフレームワークを導入しただけではダメ • 規約での制限は最後の手段 – コードの品質が実装スキル、規約の理解度に 依存してしまう 15
16.
ちょっと難しく書きすぎた… • 一人プロジェクトと大差はない –
「画面ごとに実装方法やクラス構成が違う」とか わざわざやらないよね • 大規模開発は小規模開発のサブセット – と、前に誰かが言っていたような気がする – 「自分ならこう書く」を分業体制でやるためには 段取りが必要 – どれだけうまく環境構築しても、基盤チームの 実力以上の品質にはならない 16
17.
JavaScriptでの大規模開発
17
18.
JavaScriptは大規模開発に向いていない • 言語仕様が柔軟すぎる –
「クラス的なもの」ですら書き方がいくらでもある – prototypeを拡張/改変できる • ECMAScript 5なら制限できるけど… • モダンな書き方をするとコードが冗長に – var前置、stacktrace対策(function名を明記) • そもそもGUIを作るにはAPIが貧弱 – jQuery UIやExt.JS等の範囲内ならよいが… 18
19.
JavaScriptエンジニアが少ない問題 • 「jQueryできます!」とか言われましても… –
案件によってはそれでもいいのだけど… – それで済む時はJavaScript部分は小規模… • そもそもJavaScriptは難しい – prototype型のオブジェクト指向言語 – HTML/CSS、クロスブラウザ、ブラウザハック – GUI実装パターン(MVC)の知識 – など、覚えないといけないこと沢山 19
20.
柔軟すぎる言語仕様への対策 • JavaScriptを生成する言語の採用 –
CoffeeScript, Haxe(, JSX, and more) – 個人的にはHaxe押し • JavaScriptで開発する場合、モジュールや クラスの書き方は必ず統一する – 開発ガイドやコーディング規約書が必須 – jsdocコメントも必須にすべき • Closure Compilerがコメントを元にチェックしてくれる 20
21.
Haxe • 静的型付けのオブジェクト指向言語 –
C#やActionScript3(ECMAScript4)に似た構文 – 型安全、コンパイル時の型チェック – 型推論や構造的部分型などの機能のおかげで JavaScriptより簡潔にコードを書ける • インライン展開やマクロにより、現実的には 人の手では行えない最適化が可能 • コンパイルが速い 21
22.
Haxeで解決できるJavaScriptあるある 1. ライブラリの関数の定義変更が発生 2. 呼び出し側を1か所だけ直し忘れる 3.
忘れたころにバグに遭遇… – 原因がわかりにくいパターン 一方Haxeはコンパイラが修正漏れを検出した 22
23.
JavaScript MVC • ViewとModelを分離することで分業しやすい
– デザイナとプログラマ – JavaScriptハッカーとプログラマ • 難しいViewはJavaScriptハッカーに委ねる • 保守性・可読性の向上 • MVCライブラリはいろいろある – Backbone.js, Ember.js, Spine, AngularJS, … 23
24.
MVCライブラリだけでは足りない部分 • Modelのモジュール構成 –
Template Methodパターン – Facade/Mediatorパターン – Factory Method/Abstract Factoryパターン – Observerパターン(MVCライブラリ未使用時) • プロジェクト固有の処理 – 入力チェック – 通信処理(特にエラー処理) 24
25.
View(GUIコンポーネント)の細かいテクニック • invalidate(遅延描画) –
GUIコンポーネントを作るときに必須 – 描画パフォーマンスが改善 • 不要な描画処理を走らせないようにする • 部分描画と組み合わせるとなお良い – ActionScript, iOS, Android, Windows, …など、 どれでも用意されている – JavaScriptでの解説を見かけたことがない… 25
26.
invalidateを使うと改善できる例 • プロパティを変更する毎に描画処理が
呼ばれてしまい、パフォーマンスに影響が function Box() {/*省略*/ } Box.prototype = { setWidth: function (width) { this._width = width; this._draw(); }, setHeight: function (height) { /*プロパティ更新後、描画*/ }, setFillColor: function (color) { /*プロパティ更新後、描画*/ }, setBorderColor: function (color) { /*プロパティ更新後、描画*/ }, _draw : function (style) { /*描画処理*/ } } 26
27.
invalidateを実装する function Box()
{/*省略*/ } Box.prototype = { setWidth: function (width) { • setTimeoutで描画処理を this._width = width; this._invalidate(); 遅延 }, /*中略*/ • 何度invalidateを呼んでも invalidate: function() { if (!this._drawer) { drawは一回だけ実行 var self = this; this._drawer = function () { this._draw(); this._drawer = null; }; setTimeout(this._drawer , 0); } }, _draw : function (style) {/*描画処理*/ } } 27
28.
まとめ
28
29.
まとめ • 一人開発でも複数人開発でもやることには
大差はない – ただし人数が多い分だけ修正する際のコストが 増加するので、段取りには注意する • JavaScriptは柔軟すぎる言語仕様の割には 冗長なコードになりがち – 可能であれば、JavaScriptを生成する言語の 採用を検討したほうが良い(Haxeとか) 29
30.
ご清聴ありがとうございました
30
Télécharger maintenant