![やっちゃえkntone developer[公開用]](https://cdn.slidesharecdn.com/ss_thumbnails/kintonefornigata-160208012436-thumbnail.jpg?width=640&height=640&fit=bounds)
kintoneの大規模フロントエンド開発とツール
- 1.
- 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.
- 6.
- 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.
- 10. Closure Library ▌Closure Toolsの一つであり、包括的なJavaScriptライブラリ • ライブラリでできることはライブラリに任せる • Closure Compiler と相性◎ → ライブラリを使いこなすことで効率的かつ統一的なコードがかける
- 11. Closure Templates ▌動的なUI生成システム • HTMLやUIパーツを再利用可能な塊として扱える •Java と JavaScript から利用できる • パーツ自体はHTMLを拡張したような形で、書きやすく読みやすい → 再利用によって、同じような異なるコードを防ぐことができる
- 12. Closure Linter ▌JavaScript のファイルをチェックしてくれる •セミコロンはある？ • 規約と異なる書き方されてない？ • JsDoc のアノテーションが正しく書けてる？ • などなど → 人による細かいミスを事前に防ぐことができる
- 13.
- 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.
- 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.