関西オープンフォーラム2015 サイボウズ株式会社 大阪開発部 ブース出展資料 1. kintoneの大規模フロントエンド開発を支えるツール 2. 大阪オフィスが梅田阪急ビルに移転 3. サイボウズとは？ 4. kintoneとは？ 6. 効率的に開発したい！でも、発生する問題（その1） 7. メンテナンスにコストがかかる例 8. Closure Compiler で静的型付け 9. 効率的に開発したい！でも、発生する問題（その2） 10. Closure Library 11. Closure Templates 12. Closure Linter 13. 早く動作するようにしたい！でも、発生する問題 14. Closure Compiler で最適化＆圧縮 15. JavaScriptについてまとめると… 17. 大規模CSS 18. Sass + autoprefixer 19. sample 21. ツールでは解決できないこと

1. kintoneの大規模フロントエンド開発を支える
ツール
2015年11月
関西オープンフォーラム2015
サイボウズ株式会社 大阪開発部

2. サイボウズとは？
▌11月2日、大阪オフィス（開発/営業）が梅田阪急ビルに移転しました。

3. サイボウズとは？
▌「チームあるところ サイボウズあり」
• チームを支援するWebサービスを作っている会社
• cybozu.com
• Office
• Garoon
• kintone
• メールワイズ
• サイボウズLive

4. kintoneとは？
▌業務アプリを自由に作れるcybozu.com上のクラウドサービス
• https://kintone.cybozu.com/
• ドラッグ＆ドロップでアプリを簡単に作れる
• JavaScript ＋ Java＋ MySQL
• 2015年11月現在、エンジニア17名（東京12名、大阪5名）
• JavaScript 32万行、Java 23万行（テストコード含む）
• ブラウザテスト 1000件、APIテスト 1600件、
Javaユニットテスト 3700件、JavaScriptユニットテスト4500件

5. 大規模JavaScript開発

6. 効率的に開発したい！でも、発生する問題
▌JavaScriptはスクリプト言語なので、不具合やコードの異常が、コードを
実行するまでわからない。
▌JavaScriptは動的型付けなので、エンジニアがコードから型をよみとらな
ければならない。

7. function alertBoolean(isBoolean) {
if (isBoolean) {
alert("It is true.");
} else {
alert("It is false.");
}
}
alertBoolean(false); // It is false.
alertBoolean("false"); // It is true.
関数を変更する場合、
どのような引数が渡されるのか
調べる必要がある
関数を利用する場合、
どのような引数を渡せば正しく
動作するのか、関数の中身を
把握する必要がある
▌サンプル
メンテナンスにコストがかかる例

8. Closure Compiler で静的型付け
▌コードを実行する前に問題を発見できる。
/**
* @param {boolean} isBoolean
*/
function alertBoolean(isBoolean) {
if (isBoolean) {
alert("It is true.");
} else {
alert("It is false.");
}
}
alertBoolean(false); // It is false.
alertBoolean("false"); // COMPILE ERROR!!
期待する変数の型を限定するので、
それを前提にコードを変更できる
→ 調べるコストが減る！
間違った使い方をしても、コードを
実行する前に気づくことができる
→ 実行するコストが減る！

9. 効率的に開発したい！でも、発生する問題
▌JavaScriptは書き方の自由度が高い。kintoneチームは人数も多い。
人によって書き方が変わると、コードを読む時のコストが上がる。
▌できるだけ同じようなコードは書きたくない。重複メソッドはバグの素。

10. Closure Library
▌Closure Tools の一つであり、包括的なJavaScriptライブラリ
• ライブラリでできることはライブラリに任せる
• Closure Compiler と相性◎
→ ライブラリを使いこなすことで効率的かつ統一的なコードがかける

11. Closure Templates
▌動的なUI生成システム
• HTMLやUIパーツを再利用可能な塊として扱える
• Java と JavaScript から利用できる
• パーツ自体はHTMLを拡張したような形で、書きやすく読みやすい
→ 再利用によって、同じような異なるコードを防ぐことができる

12. Closure Linter
▌JavaScript のファイルをチェックしてくれる
• セミコロンはある？
• 規約と異なる書き方されてない？
• JsDoc のアノテーションが正しく書けてる？
• などなど
→ 人による細かいミスを事前に防ぐことができる

13. 早く動作するようにしたい！でも、発生する問題
▌JavaScriptはブラウザが読み込んで実行する。読み込むコード量が多い
と、ダウンロードに時間がかかってしまう。

14. Closure Compiler で最適化＆圧縮
/**
* @param {boolean} isBoolean
*/
function alertBoolean(isBoolean) {
if (isBoolean) {
alert("It is true.");
} else {
alert("It is false.");
}
}
alertBoolean(false); // It is false.
alertBoolean(true); // It is true.
function a(b){b?alert("It is
true."):alert("It is false.")}
a(!1);a(!0);
Before (239byte) After (72byte)
読み込み量が減らせる！

15. JavaScriptについてまとめると・・・
▌静的型付 ＋ 圧縮 ＋ 最適化したいから Closure Compiler
▌Closure Compiler と一緒に利用するため Closure Library
▌Closure Library と相性の良い Closure Template で DOM生成
▌コード規約を仕組みで縛るために Closure Linter
kintone チームでは git commit ごとに Closure Linter、
git push ごとに Closure Compiler と ユニットテスト が実行されて、
コードの健全性が守られている

16. 大規模CSS開発

17. 大規模CSS
▌CSSでよく現れる問題
• マジックナンバー：意味のわからないpx指定などが増える
• いろんなブラウザで同じようなスタイルにするために、大量の記述が必
要なことがある
• 再利用ができなく、冗長したスタイルが増える
→ 大規模にしてメンテナンスコストが爆発する！

18. Sass + autoprefixer
▌Sass
• 変数や計算が利用できる → 値に意味をもたせられる
• ネスト構造で直感的なスタイル指定 → 整理しやすい
• コンポネント化が可能 → 再利用ができる
▌autoprefixer
• 一つのスタイルからすべてのブラウザに必要なスタイルを生成してくれる
→ 実装が楽になり、メンテナンスコストが減る！
→ 人が書くことによるミスを防げる！

19. ▌サンプル
$great-color: #0a3c59; // 変数を定義
%common-border { // 再利用のためのスタイル定義
border: 1px solid $great-color; // 変数を利用
}
.common-button {
@extend %common-border; // %common-border を呼び出す
}
.big-button {
@extend %common-border; // %common-border を呼び出す
border-radius: 6px;
&:hover { // ネスティングを利用
color: $great-color; // 変数を利用
}
}

20. ツールだけでは解決できないこと

21. ツールだけでは解決できないこと
▌たとえコンポーネントとして再利用できる状態にあったとしても、その存在を
知らなければ再利用することはできない
▌すぐれた変数名・関数名はそれだけでコードを読みやすくするが、名前を
決めるのはツールではない
▌大きな設計までは面倒を見てくれない
エンジニア一人一人がツールを効率的に利用しつつ、コードを綺麗に保つ
意識を持つ
チームは、各エンジニアが良いパフォーマンスを出せるように改善に取り組む

22. ご清聴ありがとうございました！