多分モダンなWebアプリ開発
M3 TechTalk #32 2014/10/31
中村 貴志

Webアプリの構成要素
• 開発環境
• IntelliJ IDEA
!
• サーバー
• SkinnyFramework
• Scala
• Scalatra
• Scalate
• ScalikeJDBC
• Sentry
• logback + janino, MDC
• フロント
• AngularJS
• karma + jasmine
• jshint
• grunt
• bower
• C3.js
• VD作業にGit利用
!
•

IntelliJ IDEA

IntelliJ IDEA
• Eclipseと比較
• EclipseのScalaはビルドが重すぎて使い物にならない
• Eclipseに比べて総合的に軽い
• １プロジェクト＝１ウインドウ
!
• 英単語のスペルチェックが便利
• 複数形も加味、キャメルケースでの単語区切りで判定
• Vim化プラグインもある
• IdeaVim http://plugins.jetbrains.com/plugin/164

SkinnyFramework
http://skinny-framework.org/
• 瀬良さん作のScalaによるWebフレームワーク
• Scala自体がLL的な表記で書きやすい
• 文字列、配列、Hash、Tuppleなどのリテラルが便利
• コレクションの操作がやりやすい
• SkinnyはいくつかのOSSを寄り集めて構成されている
• Scalatra ／ Scalate ／ ScalikeJDBC ／ ScalaTest
etc…

SkinnyFramework
http://skinny-framework.org/
• Scalatra : サーブレット周り
• 通常のservlet機能(web.xml)を使える
• 既存のサーブレットフィルタを利用
可能
• CRUD、REST-API、AngularJS向け
機能あり
• JSON、XMLでのレスポンスに対応
• 独自バリデーション機能
!
• Scalate : テンプレートエンジン
• テンプレートもScala
!
!
!
• ScalikeJDBC: DB周り
• ORM
• SQL Query Builder
• 素のSQL文を記載することもできる
• 複数DB接続に対応
• モデルのタイムスタンプ、
楽観ロック機能がある
!
• ScalaTest: テスト
• 単体・コントローラ・インテグレー
ションテスト
• DB周りのテストで試験によりデータ
が生成されてしまう
•

SkinnyFramework
http://skinny-framework.org/
• 利点
• 通常のwebフレームワークが分かれば普通
• 瀬良さんに聞けば分かる
• ScalikeJDBCも瀬良さんはコミッタ
• 必要があればPullRequestすれば取り込まれる
• 欠点
• コントローラの種類が色々あるので計画的に作成が必要
• 利用が少ないため未成熟な機能もある
!
• Qiita記事をどうぞ
• http://qiita.com/tags/skinnyframework

logback + janino
http://logback.qos.ch/manual/configuration.html#conditional
• janino : 軽量Javaコンパイラ
• logback.xml中にif文での
分岐を記載できる
• 環境ごとの差異を
１ファイルに記載できる
# 本番用ログ出力モードで起動
% java -DlogEnv=prod ～～

logback + MDC
(Mapped Diagnostic Contexts)
http://logback.qos.ch/manual/mdc.html
• スレッド中のログ出力に共通
の値を出力できる
• １リクエスト内の処理ログに
ユーザIDなどを出力できる

Sentry
• エラーログ記録Webサービス
• メール通知を代行してくれる
• logback、log4jにAppenderを設定するだけ
• 指定のログレベルでログ出力をするだけなので簡単
• Serviceクラスやユーティリティ処理のエラー時に
無理矢理メールを送る必要なし
• Httpリクエストを記録するためのServletListenerがある
• 導入方法の詳細は、社内wikiで。

AngularJS
• SPA(Single Page Application)を想定したJavaScriptフレームワーク
• v1.2系がIE7は非対応、IE8は辛うじて動く(IE8向けの注意点がある)
• v1.3系(最近リリース)は IE9以降のみ対応
!
• データバインドが柔軟
• JSオブジェクトの操作と画面制御を分けて考えやすい
• 役割を分けてモジュール分割しやすい
• Controller(メイン)、Service(ロジック)、Directive(表示制御)など
• モジュールごとにUnitTestを記述しやすい
• jQueryと組み合わせるので、jQueryの資源が使えるかも

AngularJS
• 今回はSPAにはしなかった
• IE8などの古いブラウザでの動きが心配
• アクセスのトラッキングを独自に検討したくなかった
（EOP、GA）
!
• おすすめ学習方法
• code-school AngularJS
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
!
• 書籍「AngularJS リファレンス」 の紹介記事
http://qiita.com/namutaka/items/bc34a22e00b1032ec351

karma + jasmine
• AngularJSの標準テスト機能
• karma : テストランナー
• jasmine : テストフレームワーク (= junit,spec)
• protractor : seleniumでのテスト(使っていない)
!
• テスト結果をjunitと同じ形式で出力できるので、
Jenkinsとも組み合わせられる

jshint
• JavaScriptの静的解析
• Eclipseでwarningを出してくれる感じ
• コードの書き方がぶれない。
• 文字列は「”」or「'」を統一など
• 「;」忘れを指摘
• など
• gruntにテスト結果をjunitと同じ形式で出力できるので、
Jenkinsとも組み合わせられる

grunt
• フロントエンド開発でのタスクランナー
• Javaでいうant・maven、Rubyでいうrake
• CoffeeやSASSなどのコードを変換するタスクに使う
• Markdownをhtml化するのに使ったりもできる
• ファイルの更新をトリガとして処理を行うことができる
15

grunt
• grunt live によるモックサーバーが便利
• node.jsベースのhttpサーバーが起動
• WebAPIのスタブを静的ファイルとして用意できる
• ソースを保存すると自動でブラウザがリロード
• 同時にjshintとUnitテストが実行される
!
• VD作業はこのモック起動で確認
• すごくやりやすかったと好評
16

bower
• JavaScript、CSSのライブラリ管理ツール
• Javaでいう maven、Rubyでいうgem、PerlでいうPCL
• 依存関係を自動で解釈してファイルを取得してくれる
• リソースの依存関係が明確になる
• grunt プラグイン (grunt-bower-task)
• 取得したファイルなどを決まった規則で配置できる
• 外部リソースの管理をルール化できる
!
• 参考記事
• http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308
• http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537

bower
% cat bower.json
{
"name": "myappp",
"version": "0.0.0",
!
"dependencies": {
"jquery-ui": "~1.11.2"
}
}
!
% bower install
jquery-ui#1.11.2
bower_components/jquery-ui
"## jquery#2.1.1
!
jquery#2.1.1
bower_components/jquery
!
% grunt bower:install
Running "bower:install" (bower) task
>> Cleaned target dir app/vendor
>> Installed bower packages
>> Copied packages to app/vendor
!
Done, without errors.
!
!
% find app/vendor/ -type f
!
app/vendor/jquery-ui/jquery-ui.js
app/vendor/jquery/jquery.js
!
!
!
!

C3.js
http://c3js.org/
• D3.jsをベースにしたJavaScriptでのグラフライブラリ
• きれいで動きのあるグラフが簡単に作れる

C3.js
http://c3js.org/
• 横軸をシーケンシャルに補間してくれる
['x', '2013-01-01', '2013-01-03', '2013-01-08'],
[‘d1', 30, 100, 250],
[‘d2', 130, 200, 150]
NG

C3.js
http://c3js.org/
• 横軸をシーケンシャルに補間してくれる
['x', '2013-01-01', '2013-01-03', '2013-01-08'],
[‘d1', 30, 100, 250],
[‘d2', 130, 200, 150]
OK

C3.js
http://c3js.org/
chart = c3.generate({
data: {
url: '/data/c3_test.json',
mimeType: 'json'
},
keys: {
x: 'name',
value: ['upload', 'download'],
}
});
/data/c3_test.json • JSONからグラフが作れる
[
{name: 'aaa', upload: 800, download: 500},
{name: 'bbb', upload: 600, download: 600},
{name: 'ccc', upload: 400, download: 800},
{name: 'ddd', upload: 400, download: 750}
]
• DBからMapの配列でデータを取得
してJSON化するだけで使える
• csvの読み込みもできる
• 帳票の結果をグラフ化するのに
も使えるかも

VD作業にGit利用
• SourceTreeを使ってもらった
• 初期の構成はこちらで準備
• コンフリクトなどが起きたらEngで対応
• gruntのモック起動用のWindows batchを作っておく

VD作業にGit利用
• VDで使うブランチは１つだけ
• VD作業の区切りでEngがdevelopにマージした後に、
design用ブランチを進める
• VD作業では、pull → 修正 → commit → pushを繰り返すのみ
develop
design

まとめ
• IntelliJ：Eclipseから乗り換えたい
• SkinnyFramework：いいよ
• logback：機能知らなすぎた…
• grunt：覚えると便利
• AngularJS：なかなかいい
• c3.js：使える

以上です
!
コメントをどうぞ