HTML5/JavaScript

開発環境
ベストプラクティス
本間飛年
Hitoshi Honma
Developer
HTML/CSS/JS
本日のテーマ
HTML5/JavaScriptの

ベストな開発環境
# シンプルなアプリ開発

# 中〜大規模サービス開発
# シンプルなアプリ開発
- ディベロッパー1名

- シンプルな機能
- モック制作
# 中〜大規模サービス開発
- ディベロッパー複数名

- 複雑かつ多機能
- 機能追加/修正が多い
# シンプルなアプリ開発
現場の課題
いかに速く作るか…
Smart
① シンプルかつ直感的に
jQuery
DOM/Ajaxの制御
jQuery
• 直感的にコードを書ける
• コードが見やすくなる

• プラグインが充実
CreateJS
Canvas制御
CreateJS
• 直感的なCanvas制御
• ActionScript風に書ける

• Flash対応
Automation
② 自動化する
Sublime Text
テキストエディタ
Sublime Text
• シンプルで使いやすい
• 数多くの言語や技術に対応

• 高いカスタマイズ性
Grunt
タスクランナー
Grunt
• ファイル結合
• minify/gzip圧縮

• 自動ブラウザリロード
# 中〜大規模サービス開発
# 中〜大規模サービス開発
- ディベロッパー複数名

- 複雑かつ多機能
- 機能追加/修正が多い
現場の課題
いかに速く作るか…
コードの
スパゲッティ化…
バグ/障害の多発…
Standardize
① コードを統一する
Guideline
コーディング規約
Guideline
• コードが見やすくなる
• 保守性が向上する

• 迷う時間が減る
Backbone.js
MVCフレームワーク
View

Model

Controller
View

Model

Router
Server

View

HTML

書換

変更

Model

Router
Backbone.js
• 書き方が統一される
• イベント駆動開発

• MVC的な設計
JsRender
JSテンプレートエンジン
Server

HTML

通信

書換

JS
Server

HTML

通信

書換

JS
出力
Template

HTML

Server
変換

通信

JS
JsRender
• JSとHTMLを分離できる
• 書き方が統一される

• 機能が豊富
Test
② テストコードを書く
Jasmine
JSテストフレームワーク
Jasmine
• テストコードをラクに書ける
• RSpec風に書ける

• 便利なプラグインが多数
Sinon.JS
JSテストダブルライブラリ
Sinon.JS
• SpyやStubをラクに書ける
• TimerやServerのモック化

• Jasmine以外でも使える
Testem
JSテストランナー
Testem
• ブラウザリロード不要
• テスト環境をラクラク構築

• 複数ブラウザで自動テスト
Versioning
③ バージョン管理をする
Git
バージョン管理
Git
• ブランチをサクサク切れる
• 自由にコミットできる

• GitHubを使える
GitHub Enterprise
事業者向けGitHub
GitHub Enterprise
• 全技術者のスキルアップ
• 自己アピールの場ができる

• 情報やコードを共有しやすい
git-flow
Gitワークフロー
git-flow
• 設計を考えなくていい
• ブランチのカオス化を防ぐ

• ブランチ操作がラク
SourceTree
バージョン管理GUIアプリ
SourceTree
• GUIでカンタンな操作
• コマンドを覚えなくてもOK

• git-flow対応
まとめ
# シンプルなアプリ開発
jQuery

Sublime Text

CreateJS

Grunt
# 中〜大規模サービス開発
Guideline

Testem

Backbone.js

Git

JsRender

GitHub Enterprise

Jasmine

git-flow

Sinon.JS

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

Dot_fes2013