SlideShare a Scribd company logo
HTML5/JavaScript

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

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

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

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

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

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

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

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

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

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

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

Model

Controller
View

Model

Router
Server

View

HTML

書換

変更

Model

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

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

HTML

通信

書換

JS
Server

HTML

通信

書換

JS
出力
Template

HTML

Server
変換

通信

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

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

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

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

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

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

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

• ブランチ操作がラク
SourceTree
バージョン管理GUIアプリ
Dot_fes2013
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!
ご清聴ありがとうございました。

More Related Content

PDF
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
PDF
アプリ開発も出来るイマドキのWeb技術入門(エンジニア適職フェアWeb技術入門セミナー)
PDF
React.js + Flux
PDF
AngularJS 概説
PPTX
【ABC2014Spring LT】AngularJSでWEBアプリ開発
PDF
About rails 3
PDF
Angular#Kanazawa
PDF
Concurrent Programm in JavaScript
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
アプリ開発も出来るイマドキのWeb技術入門(エンジニア適職フェアWeb技術入門セミナー)
React.js + Flux
AngularJS 概説
【ABC2014Spring LT】AngularJSでWEBアプリ開発
About rails 3
Angular#Kanazawa
Concurrent Programm in JavaScript

What's hot (20)

PPTX
Concurrent Programming in JavaScript
PDF
Angular1&2
PDF
AngularJSからReactに移ったケースの話
PPTX
Hello, React!! まで導く Reactの基礎
PDF
Flux react現状確認会
PDF
5分でクラウド対応メモ帳アプリを作る(PotatoTips#2 LT)
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
PDF
サーバ管理はサーバレスで
PDF
なぜ人は必死でjQueryを捨てようとしているのか
PDF
( ゚∀゚)o彡° Flux! Flux!
PDF
Angular2
PDF
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
PPTX
Reactつかってみた
PDF
Browser oh browser browser
PDF
俺とAngular JS 2
PDF
【CodeCamp】JavaScriptの教科書サンプル
KEY
goog.require()を手書きしていいのは小学生まで
PPTX
Alt2016
PDF
Word bench埼玉2017年2月
PDF
TypeScript補完計画 for Sublime Text 2
Concurrent Programming in JavaScript
Angular1&2
AngularJSからReactに移ったケースの話
Hello, React!! まで導く Reactの基礎
Flux react現状確認会
5分でクラウド対応メモ帳アプリを作る(PotatoTips#2 LT)
SIROK技術勉強会 #1 「Reactってなんだ?」
サーバ管理はサーバレスで
なぜ人は必死でjQueryを捨てようとしているのか
( ゚∀゚)o彡° Flux! Flux!
Angular2
Movable Type から BOT を作ろう! ~ Data API と Microsoft BOT Framework ~
Reactつかってみた
Browser oh browser browser
俺とAngular JS 2
【CodeCamp】JavaScriptの教科書サンプル
goog.require()を手書きしていいのは小学生まで
Alt2016
Word bench埼玉2017年2月
TypeScript補完計画 for Sublime Text 2
Ad

Viewers also liked (17)

PDF
front_server20131218
PPTX
AmebaソーシャルゲームにおけるR活用の体制と事例のご紹介
PDF
20131107 cwt2013-wdkz
PDF
20141106_cwt-zenmyo-naito
PDF
STF20131030chrome
PDF
Abc2013 autumn fujiwara
PDF
12 cyberagent
PPTX
DSS2013CA
PPTX
進化ゲーム理論の枠組みを用いたソーシャルゲームにおけるユーザの利他的行動の分析
PDF
刊行記念セミナー「HBase徹底入門」
PDF
Apache Flume 1.5を活⽤したAmebaにおけるログのシステム連携
PDF
Presto in my_use_case
PDF
Amebaにおけるログ解析基盤Patriotの活用事例
PDF
サイバーエージェントにおけるデータの品質管理について #cwt2016
PDF
Presto As A Service - Treasure DataでのPresto運用事例
PDF
爆速クエリエンジン”Presto”を使いたくなる話
PDF
Amebaにおけるレコメンデーションシステムの紹介
front_server20131218
AmebaソーシャルゲームにおけるR活用の体制と事例のご紹介
20131107 cwt2013-wdkz
20141106_cwt-zenmyo-naito
STF20131030chrome
Abc2013 autumn fujiwara
12 cyberagent
DSS2013CA
進化ゲーム理論の枠組みを用いたソーシャルゲームにおけるユーザの利他的行動の分析
刊行記念セミナー「HBase徹底入門」
Apache Flume 1.5を活⽤したAmebaにおけるログのシステム連携
Presto in my_use_case
Amebaにおけるログ解析基盤Patriotの活用事例
サイバーエージェントにおけるデータの品質管理について #cwt2016
Presto As A Service - Treasure DataでのPresto運用事例
爆速クエリエンジン”Presto”を使いたくなる話
Amebaにおけるレコメンデーションシステムの紹介
Ad

Similar to Dot_fes2013 (20)

PPTX
HTML5 クロスプラットフォームアプリ開発の現実解
PDF
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
PPTX
これからのNOTESモバイルアプリはこう作れ
PDF
なぜ Enterprise は Sencha を選ぶのか?
KEY
Html5時代のクリエイターのあり方
PPTX
テスト
PDF
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
KEY
パンダの会 Html5概説
PDF
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
PDF
Ignite UI 2012 最新情報 jQuery Mobile 編
KEY
スマートフォンアプリケーション開発の最新動向
PPT
60分でわかるレスポンシブWebデザイン[セミナー資料]
KEY
HTML5時代のwebクリエイターに必要なこと
PDF
2011年マイクロソフト テクノロジー振り返り~開発編~
PDF
Attractive HTML5
PDF
PDF
Xamarin 概要 2014年08月版
PDF
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
PDF
20140902 HTML5認定試験紹介資料
PPTX
Phone gap+javascriptスマホアプリ開発(入門編)
HTML5 クロスプラットフォームアプリ開発の現実解
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
これからのNOTESモバイルアプリはこう作れ
なぜ Enterprise は Sencha を選ぶのか?
Html5時代のクリエイターのあり方
テスト
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
パンダの会 Html5概説
HTML5 の Web制作を 確実に楽にする最新の アドビWeb制作ツール for HTML5 Carnival Fukuoka
Ignite UI 2012 最新情報 jQuery Mobile 編
スマートフォンアプリケーション開発の最新動向
60分でわかるレスポンシブWebデザイン[セミナー資料]
HTML5時代のwebクリエイターに必要なこと
2011年マイクロソフト テクノロジー振り返り~開発編~
Attractive HTML5
Xamarin 概要 2014年08月版
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
20140902 HTML5認定試験紹介資料
Phone gap+javascriptスマホアプリ開発(入門編)

More from cyberagent (20)

PDF
WWW2019で見るモバイルコンピューティングの技術と動向 山本悠ニ
PDF
Web フィルタリング最前線: 「「検閲回避」回避」 角田孝昭
PDF
WebにおけるHuman Dynamics 武内慎
PDF
Webと経済学 數見拓朗
PDF
Data Engineering Meetup #1 持続可能なデータ基盤のためのデータの多様性に対する取り組み
PDF
継続的な開発スタイル AbemaTVのiOSアプリを週1でリリースしている話
PDF
AbemaTVにおける推薦システム
PDF
AbemaTV レコメンド開発エンジニアによる RecSys 2018 参加レポート
PDF
機械学習エンジニアを見せたAWSの再:発明とは? 〜re:Invent 2018 参加レポート〜
PPTX
インターネットテレビ局「AbemaTV」プロダクトの変遷
PDF
番組宣伝に関するAbemaTV分析事例の紹介
PDF
WWW2018 論文読み会  Webと経済学
PDF
WWW2018 論文読み会 WebにおけるHuman Dynamics
PDF
WWW2018 論文読み会 Web Search and Mining
PDF
サイバーエージェントの機械学習エンジニアが体験したGoogle I/O 2018
PDF
ログ解析基盤におけるストリーム処理パイプラインについて
PDF
Orion an integrated multimedia content moderation system for web services
PDF
Orion an integrated multimedia content moderation system for web services
PDF
「これ危ない設定じゃないでしょうか」とヒアリングするための仕組み @AWS Summit Tokyo 2018
PPTX
"マルチメディア機械学習" の取り組み
WWW2019で見るモバイルコンピューティングの技術と動向 山本悠ニ
Web フィルタリング最前線: 「「検閲回避」回避」 角田孝昭
WebにおけるHuman Dynamics 武内慎
Webと経済学 數見拓朗
Data Engineering Meetup #1 持続可能なデータ基盤のためのデータの多様性に対する取り組み
継続的な開発スタイル AbemaTVのiOSアプリを週1でリリースしている話
AbemaTVにおける推薦システム
AbemaTV レコメンド開発エンジニアによる RecSys 2018 参加レポート
機械学習エンジニアを見せたAWSの再:発明とは? 〜re:Invent 2018 参加レポート〜
インターネットテレビ局「AbemaTV」プロダクトの変遷
番組宣伝に関するAbemaTV分析事例の紹介
WWW2018 論文読み会  Webと経済学
WWW2018 論文読み会 WebにおけるHuman Dynamics
WWW2018 論文読み会 Web Search and Mining
サイバーエージェントの機械学習エンジニアが体験したGoogle I/O 2018
ログ解析基盤におけるストリーム処理パイプラインについて
Orion an integrated multimedia content moderation system for web services
Orion an integrated multimedia content moderation system for web services
「これ危ない設定じゃないでしょうか」とヒアリングするための仕組み @AWS Summit Tokyo 2018
"マルチメディア機械学習" の取り組み

Dot_fes2013