1. HTML5/JavaScript
開発環境
ベストプラクティス

2. 本間飛年
Hitoshi Honma

5. Developer
HTML/CSS/JS

8. 本日のテーマ

9. HTML5/JavaScriptの
ベストな開発環境

10. # シンプルなアプリ開発
# 中〜大規模サービス開発

11. # シンプルなアプリ開発
- ディベロッパー1名
- シンプルな機能
- モック制作

12. # 中〜大規模サービス開発
- ディベロッパー複数名
- 複雑かつ多機能
- 機能追加/修正が多い

13. # シンプルなアプリ開発

14. 現場の課題

15. いかに速く作るか…

16. Smart
① シンプルかつ直感的に

17. jQuery
DOM/Ajaxの制御

22. jQuery
• 直感的にコードを書ける
• コードが見やすくなる
• プラグインが充実

23. CreateJS
Canvas制御

27. CreateJS
• 直感的なCanvas制御
• ActionScript風に書ける
• Flash対応

28. Automation
② 自動化する

29. Sublime Text
テキストエディタ

31. Sublime Text
• シンプルで使いやすい
• 数多くの言語や技術に対応
• 高いカスタマイズ性

32. Grunt
タスクランナー

34. Grunt
• ファイル結合
• minify／gzip圧縮
• 自動ブラウザリロード

35. # 中〜大規模サービス開発

36. # 中〜大規模サービス開発
- ディベロッパー複数名
- 複雑かつ多機能
- 機能追加/修正が多い

37. 現場の課題

38. いかに速く作るか…

39. コードの
スパゲッティ化…

40. バグ/障害の多発…

41. Standardize
① コードを統一する

42. Guideline
コーディング規約

44. Guideline
• コードが見やすくなる
• 保守性が向上する
• 迷う時間が減る

45. Backbone.js
MVCフレームワーク

47. View
Model
Controller

48. View
Model
Router

49. Server
View
HTML
書換
変更
Model
Router

50. Backbone.js
• 書き方が統一される
• イベント駆動開発
• MVC的な設計

51. JsRender
JSテンプレートエンジン

53. Server
HTML
通信
書換
JS

54. Server
HTML
通信
書換
JS

55. 出力
Template
HTML
Server
変換
通信
JS

56. JsRender
• JSとHTMLを分離できる
• 書き方が統一される
• 機能が豊富

57. Test
② テストコードを書く

58. Jasmine
JSテストフレームワーク

60. Jasmine
• テストコードをラクに書ける
• RSpec風に書ける
• 便利なプラグインが多数

61. Sinon.JS
JSテストダブルライブラリ

63. Sinon.JS
• SpyやStubをラクに書ける
• TimerやServerのモック化
• Jasmine以外でも使える

64. Testem
JSテストランナー

66. Testem
• ブラウザリロード不要
• テスト環境をラクラク構築
• 複数ブラウザで自動テスト

67. Versioning
③ バージョン管理をする

68. Git
バージョン管理

72. Git
• ブランチをサクサク切れる
• 自由にコミットできる
• GitHubを使える

73. GitHub Enterprise
事業者向けGitHub

75. GitHub Enterprise
• 全技術者のスキルアップ
• 自己アピールの場ができる
• 情報やコードを共有しやすい

76. git-flow
Gitワークフロー

78. git-flow
• 設計を考えなくていい
• ブランチのカオス化を防ぐ
• ブランチ操作がラク

79. SourceTree
バージョン管理GUIアプリ

81. SourceTree
• GUIでカンタンな操作
• コマンドを覚えなくてもOK
• git-flow対応

82. まとめ

83. # シンプルなアプリ開発
jQuery
Sublime Text
CreateJS
Grunt

84. # 中〜大規模サービス開発
Guideline
Testem
Backbone.js
Git
JsRender
GitHub Enterprise
Jasmine
git-flow
Sinon.JS
SourceTree

85. Thanks!
ご清聴ありがとうございました。