Enviar pesquisa
Carregar
メンテナブルなJsってなんだろう
•
132 gostaram
•
31,605 visualizações
Daiki Matsumoto
Seguir
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 123
Baixar agora
Baixar para ler offline
Recomendados
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Mais conteúdo relacionado
Mais procurados
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Takeharu Igari
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
マルチデバイス時代の高速化
マルチデバイス時代の高速化
Shin Takeuchi
SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!
Atsushi Handa
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
Mais procurados
(20)
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
コーディングが上達するコツ
コーディングが上達するコツ
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
マルチデバイス時代の高速化
マルチデバイス時代の高速化
SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Destaque
大規模なJavaScript開発の話
大規模なJavaScript開発の話
terurou
kintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツール
Yasuharu Sakai
デブサミ2012 kintoneの表と裏 - 表編
デブサミ2012 kintoneの表と裏 - 表編
yo_waka
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
llamakko_cafe
フェリーのすゝめ
フェリーのすゝめ
Kazunori Hamamoto
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
Narami Kiyokura
これだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVim
arisu yano
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
智治 長沢
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Yuki Okada
Jenkins 再入門
Jenkins 再入門
Jumpei Miyata
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
Kenji Otsuka
レッツゴーゆるふわ.Rb
レッツゴーゆるふわ.Rb
Hiroshi Ogino
SWでKYT
SWでKYT
You&I
ゆるふわCSS3
ゆるふわCSS3
Mitsuru Ogawa
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
Shin Semiya
Elastic beanstalk と Docker と Play
Elastic beanstalk と Docker と Play
Takashi Kawachi
ネイティブコードを語る
ネイティブコードを語る
Kenji Imasaki
JavaScript基礎勉強会
JavaScript基礎勉強会
大樹 小倉
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
アシアル株式会社
Destaque
(20)
大規模なJavaScript開発の話
大規模なJavaScript開発の話
kintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツール
デブサミ2012 kintoneの表と裏 - 表編
デブサミ2012 kintoneの表と裏 - 表編
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
フェリーのすゝめ
フェリーのすゝめ
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
これだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVim
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
Jenkins 再入門
Jenkins 再入門
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
レッツゴーゆるふわ.Rb
レッツゴーゆるふわ.Rb
SWでKYT
SWでKYT
ゆるふわCSS3
ゆるふわCSS3
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
Elastic beanstalk と Docker と Play
Elastic beanstalk と Docker と Play
ネイティブコードを語る
ネイティブコードを語る
JavaScript基礎勉強会
JavaScript基礎勉強会
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
Semelhante a メンテナブルなJsってなんだろう
2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
Yusuke Yamamoto
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
FLOW web planning & design
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
Masahiro Wakame
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
Yoshinori Kobayashi
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
nishio
Vi Boot Camp #1
Vi Boot Camp #1
Shinya Hayakawa
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
スケールしない広告サーバの作り方
スケールしない広告サーバの作り方
Innami Satoshi
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
Kenta Nakamura
自社開発をしていなかった会社が Python を選んだ理由
自社開発をしていなかった会社が Python を選んだ理由
Daisuke Komatsu
ギズモード・ジャパンのつくり方
ギズモード・ジャパンのつくり方
Six Apart KK
Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4
kintone papers
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
Masaru Gushiken
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
Atsushi Ando
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
Yoshitaka Kawashima
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Kondo Hitoshi
Swift afterbeginner
Swift afterbeginner
Kiminari Homma
アジャイルとは?
アジャイルとは?
bj yan
Semelhante a メンテナブルなJsってなんだろう
(20)
2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
Vi Boot Camp #1
Vi Boot Camp #1
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
スケールしない広告サーバの作り方
スケールしない広告サーバの作り方
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
自社開発をしていなかった会社が Python を選んだ理由
自社開発をしていなかった会社が Python を選んだ理由
ギズモード・ジャパンのつくり方
ギズモード・ジャパンのつくり方
Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Swift afterbeginner
Swift afterbeginner
アジャイルとは?
アジャイルとは?
メンテナブルなJsってなんだろう
1.
メンテナブルなJSってなんだろう 松元 @datomotu 2014/ 0
6 /1 4
2.
自己紹介 名前 松元 大樹(まつもと だいき)@datomotu 出身 広島 好きな言語 JavaScript 好きななにか 運動、アクアリウム、カメラ、YouTube サイボウズ株式会社(4年目) 松山開発部
PG
3.
サイボウズについて サイボウズについて ちょこっと紹介させてください。
4.
サイボウズについて http://cybozu.co.jp/company/job/recruitment/business/
5.
サイボウズについて https://www.cybozu.com/jp/service/
6.
今から話すこと メンテナブルなJSを書くために 現在プロジェクトで行っている 取り組みの話
7.
今から話すこと メンテナブルなJSを書くために 現在プロジェクトで行っている 取り組みの話 TypeScriptの話は出てきません。
8.
経緯
9.
経緯 サイボウズ Office
10.
経緯 サイボウズ Office • ここ数年JSでの開発が増えている
11.
経緯 サイボウズ Office • ここ数年JSでの開発が増えている •
ライブラリのぞいて2万5千行くらい
12.
経緯 0 5000 10000 15000 20000 25000 30000 合計
13.
経緯 JSのメンテナンスコストが 日々増大していっている感じがする
14.
経緯 JSのメンテナンスコストが 日々増大していっている感じがする • スタイルがファイルによって異なる • コードを探すのが大変
15.
経緯 JSのメンテナンスコストが 日々増大していっている感じがする • スタイルがファイルによって異なる • コードを探すのが大変 •
影響範囲が予測できない • JSのUnitテストがない • コード変更が億劫に
16.
経緯 要はメンテナブルじゃない!
17.
経緯 要はメンテナブルじゃない! メンテナブルにしたい!
18.
経緯 要はメンテナブルじゃない! メンテナブルにしたい! メンテナブル化←イマココ
19.
経緯 要はメンテナブルじゃない! メンテナブルにしたい! メンテナブル化 プロ生愛媛←イマココ
20.
メンテナブルとは?
21.
メンテナブルとは? ちゃんとしてる なんかいい感じ
22.
メンテナブルとは? 読みやすい。変更しやすい。追加しやすい。
23.
メンテナブルとは? 読みやすい。変更しやすい。追加しやすい。 • 読みやすい • コードのスタイルが統一されている。 整っている。
24.
メンテナブルとは? 読みやすい。変更しやすい。追加しやすい。 • 読みやすい • コードのスタイルが統一されている。 整っている。 •
変更しやすい。追加しやすい。 • テスト • ドキュメントがちゃんとしている (賛否両論)
25.
メンテナブルとは? 読みやすい。変更しやすい。追加しやすい。 • 読みやすい • コードのスタイルが統一されている。 整っている。 •
変更しやすい。追加しやすい。 • テスト • ドキュメントがちゃんとしている (賛否両論)
26.
読みやすい。を目指す
27.
読みやすい。を目指す 状況 • スタイルガイドがゆるい • その時代時代のスタイルで書かれている •
PGの数だけ存在しているコーディング スタイル!
28.
読みやすい。を目指す 行ったこと • スタイルガイドの作成 • 静的解析 •
自動整形
29.
読みやすい。を目指す 行ったこと • スタイルガイドの作成 • 静的解析 •
自動整形
30.
読みやすい。を目指す – スタイルガイドの作成 スタイルガイドを 作成する必要がある?
31.
読みやすい。を目指す – スタイルガイドの作成 他所から輸入するのじゃだめ?
32.
読みやすい。を目指す – スタイルガイドの作成 他所から輸入するのじゃだめ? NG • 既存コードとの兼ね合い
33.
読みやすい。を目指す – スタイルガイドの作成 おれおれスタイルガイドを作ってから チームに広める?
34.
読みやすい。を目指す – スタイルガイドの作成 おれおれスタイルガイドを作ってから チームに広める? NG • 本当に良いスタイルなのか分からない •
大変
35.
読みやすい。を目指す – スタイルガイドの作成 おれおれスタイルガイドを作ってから チームに広める? NG • 本当に良いスタイルなのか分からない •
大変 • おれが嫌われる・反感買う • チームワーク崩壊の恐れ
36.
読みやすい。を目指す – スタイルガイドの作成 みんなで一緒に スタイルガイドを作る?
37.
読みやすい。を目指す – スタイルガイドの作成 みんなで一緒に スタイルガイドを作る? • 本当にプロジェクトに合ったスタイルを 見つけられる
38.
読みやすい。を目指す – スタイルガイドの作成 みんなで一緒に スタイルガイドを作る? • 本当にプロジェクトに合ったスタイルを 見つけられる •
スタイルガイドの存在を脳裏に・・ • そういえばスタイルガイド決めたなー • 自分たちで決めたルールだから守らねば!
39.
読みやすい。を目指す – スタイルガイドの作成 みんなで一緒に スタイルガイドを作る? • 本当にプロジェクトに合ったスタイルを 見つけられる •
スタイルガイドの存在を脳裏に・・ • そういえばスタイルガイド決めたなー • 自分たちで決めたルールだから守らねば! • おれが悪者にならない
40.
読みやすい。を目指す – スタイルガイドの作成 みんなで作ろう!スタイルガイド!
41.
読みやすい。を目指す – スタイルガイドの作成 作り方 • 各スタイルについて全員で議論 •
自分たちのスタイルガイドに記載する べき内容なのか。 • どう記載するのがベストか。
42.
読みやすい。を目指す – スタイルガイドの作成 作り方 • 各スタイルについて全員で議論 •
自分たちのスタイルガイドに記載する べき内容なのか。 • どう記載するのがベストか。 • 決まったスタイルは 即スタイルガイドに記載!
43.
読みやすい。を目指す – スタイルガイドの作成
44.
読みやすい。を目指す – スタイルガイドの作成 • 第I部
スタイルガイドライン • 第II部 プログラミング実践 • 第III部 自動化 • 付録 A JavaScriptスタイルガイド • 付録 B JavaScriptツール
45.
読みやすい。を目指す – スタイルガイドの作成 具体的な進め方 • 毎週1時間の輪講を行う •
一回で1章くらい進む • 1~4章なので4時間。約一ヶ月で完成する
46.
読みやすい。を目指す – スタイルガイドの作成 • 第I部
スタイルガイドライン • 1~4章 • 第II部 プログラミング実践 • 5~12章 • 第III部 自動化 • 13~20章
47.
読みやすい。を目指す – スタイルガイドの作成 たとえば
48.
読みやすい。を目指す – スタイルガイドの作成 • ECMAScriptはキャメルケースで書か れている •
小文字で始まり、その後に頭文字が大文 字で単語が続く(LCC)
49.
読みやすい。を目指す – スタイルガイドの作成 • ECMAScriptはキャメルケースで書か れている •
小文字で始まり、その後に頭文字が大文 字で単語が続く(LCC) • 一般論として、使用しているコア言語 に従った命名規則を常に使うべき
50.
読みやすい。を目指す – スタイルガイドの作成 • ECMAScriptはキャメルケースで書か れている •
小文字で始まり、その後に頭文字が大文 字で単語が続く(LCC) • 一般論として、使用しているコア言語 に従った命名規則を常に使うべき • Google SproutCore Dojoもほとん どの状況でキャメルケース
51.
読みやすい。を目指す – スタイルガイドの作成 • 変数名は名詞で始まるようにすべき •
名詞で始めることで変数を区別するのに 役立つ
52.
読みやすい。を目指す – スタイルガイドの作成 • 変数名は名詞で始まるようにすべき
53.
読みやすい。を目指す – スタイルガイドの作成 • 関数は動詞で始めるべき
54.
読みやすい。を目指す – スタイルガイドの作成 • 関数は動詞で始めるべき
55.
読みやすい。を目指す – スタイルガイドの作成 • 関数の先頭は動詞にすべき •
よく使われる動詞 動詞 意味 can ブーリアンを返す has ブーリアンを返す is ブーリアンを返す get 非ブーリアンを返す set 値を保存するために使 われる
56.
読みやすい。を目指す – スタイルガイドの作成 • 可能な限り変数名は短くすべき
57.
読みやすい。を目指す – スタイルガイドの作成 • 可能な限り変数名は短くすべき •
変数名からデータ型が分かるとよい • count,length,sizeは数値 • name,title,messageは文字列 • i,j,kはループの中で使用される
58.
読みやすい。を目指す – スタイルガイドの作成 • 可能な限り変数名は短くすべき •
変数名からデータ型が分かるとよい • count,length,sizeは数値 • name,title,messageは文字列 • i,j,kはループの中で使用される • 無意味な名前は避けるべき • foo,bar,temp
59.
読みやすい。を目指す – スタイルガイドの作成 このぐらい初歩的なところから議論
60.
読みやすい。を目指す – スタイルガイドの作成
61.
読みやすい。を目指す – スタイルガイドの作成
62.
読みやすい。を目指す – スタイルガイドの作成 大変だったところ • 好みの違いによる論争議論 •
インデントの好み • function(){ vs function() { vs function () { • “ vs ‘ • 議論の基準を設けた • 既存コードの兼ね合い • メリット・デメリット • デグレリスク • それでも決まらないときは多数決
63.
読みやすい。を目指す – スタイルガイドの作成 問題点 • メンテナブルJavaScriptⅠ部の スタイルガイドラインの章だけでは網羅 できない •
足りないスタイルガイドを列挙して議論する
64.
読みやすい。を目指す – スタイルガイドの作成 よかったところ • スタイルで悩む時間がなくなる •
レビューしやすい
65.
できた! スタイルガイド! やったー
66.
でも スタイルガイドに合わせて書くの 正直、めんどくさい
67.
何が正解なのか忘れる。
68.
機械的に確認できるところは 考えたくない!
69.
読みやすい。を目指す 行ったこと • スタイルガイドの作成 • 静的解析 •
自動整形
70.
読みやすい。を目指す – 静的解析 • JSHintを導入 •
スタイルガイドに合わせてJSHintの オプションを調整
71.
読みやすい。を目指す – 静的解析 • 開発環境で解析できるようにする •
Grunt • CI(Jenkins)に乗せる
72.
読みやすい。を目指す – 静的解析 CIの解析では、既存のコードで 発生している警告をすべて無効化 .jshintrcファイル
73.
読みやすい。を目指す – 静的解析 既存のコードをコツコツ直して 警告を有効化していく
74.
読みやすい。を目指す – 静的解析 jshintでチェックできる スタイルガイドは明示する
75.
読みやすい。を目指す – 静的解析 jshintでチェックできる スタイルガイドは明示する
76.
読みやすい。を目指す – 静的解析 大変だったところ • エラーですぎw •
数え切れない • 意味が分からない警告の調査
77.
読みやすい。を目指す – 静的解析 大変だったところ • エラーですぎw •
数え切れない • 意味が分からない警告の調査 問題点 • 終わらない警告つぶし • ローカルで走らせるのが手間
78.
読みやすい。を目指す – 静的解析 良かったところ • 勉強になった。 •
CIでよくないコードを教えてくれるよ うになった。
79.
深く考えなくても 一貫性あるコードが書ける!
80.
jsHintさん細かいこと指摘しすぎ めんどくさい
81.
インデントとか、 一行の文字数とか
82.
読みやすい。を目指す • 行ったこと • スタイルガイドの作成 •
静的解析 • 自動整形
83.
読みやすい。を目指す – 自動整形 • jsbeautifierを用意 •
スタイルガイドに合わせて オプションを設定 • gituhub https://github.com/einars/js-beautify • grunt-jsbeautifir https://www.npmjs.org/package/grunt- jsbeautifier
84.
読みやすい。を目指す – 自動整形 ▼Online JavaScript
beautifier http://jsbeautifier.org/
85.
読みやすい。を目指す – 自動整形 問題点 • 差分が多いので危険 •
コメントのインデントを縦にそろえてい る個所が崩れる • 問題個所がないか一応人力で確認する必 要がある
86.
読みやすい。を目指す – 自動整形 良かったところ • 新規に書くコードはスタイルガイドに 合った整形を行ってからコミットできる ようになった。
87.
美しい! 整形素敵!
88.
差分多すぎ
89.
怖くてマージできない
90.
メンテナブルとは? 読みやすい。変更しやすい。追加しやすい。 • 読みやすい • コードのスタイルが統一されている。 整っている。 •
変更しやすい。追加しやすい。 • テスト • ドキュメントがちゃんとしている (賛否両論)
91.
変更しやすい。追加しやすい。 を目指す
92.
変更しやすい。追加しやすい。 を目指す 状況 • Seleniumを使ったテストはあるけど JSのUnitテストは存在しない •
コードの書き方(知識)が人それぞれ
93.
変更しやすい。追加しやすい。 を目指す 行ったこと • Unitテスト •
実践的JS勉強会
94.
変更しやすい。追加しやすい。 を目指す 行ったこと • Unitテスト •
実践的JS勉強会
95.
読みやすい。を目指す – 静的解析 • Mocha
+ expect.js + Sinon.JS でテストを書く • Karmaで実行・レポーティング
96.
読みやすい。を目指す – 静的解析 • テストテンプレートを自動作成 するスクリプトを用意 •
ボタン一つですぐテストを書き始められる
97.
変更しやすい。追加しやすい。 を目指す – テスト
98.
テストで安心!
99.
テスト書きやすい コードって?
100.
変更しやすいJSって?
101.
変更しやすい。追加しやすい。 を目指す 行ったこと • Unitテスト •
実践的JS勉強会
102.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会
103.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 •
第I部 スタイルガイドライン • 1~4章 • 第II部 プログラミング実践 • 5~12章 • 第III部 自動化 • 13~20章
104.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 たとえば
105.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会
106.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 •
他のイベントでも、ポップアップを表 示したくなったら? • テストしにくい
107.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 改善1 アプリケーションロジックを切り離す
108.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会
109.
• showPopupのインタフェースから必要 なプロパティがわからない • clientX,
clientYしか使っていない • テストしにくい 変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会
110.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 改善2 イベントオブジェクトを引き回さない
111.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会
112.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 •
テストに MyApplication.showPopup(10, 10); と書けて大勝利 • eventオブジェクトに触る関数は イベントハンドラだけにするのがベスト • stopPropagationとか preventDefaultとかも handleclickの中に
113.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 みたいな感じの輪講
114.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 •
これは守ったほうが良いという内容は スタイルガイドに記載 • スタイルガイド + プログラミング実践 • スタイルガイド → 総合的なコード規約
115.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 悪いところ •
物足りない
116.
変更しやすい。追加しやすい。 を目指す – 実践的JS勉強会 良かったところ •
チームの最初の一歩にちょうど良い • JS知識の底上げ
117.
学び + 今後の話
118.
学び チームに浸透させるには • 押しつけ感をださない • できるところからこつこつじわじわと •
自動化できるところは自動化しておく • たまに煽る
119.
今後やっていきたいこと① • 引き続き • 実践的JS勉強会 •
jshint警告抑制を解除していく • 無理そうなところは インラインで警告抑制する • 全体では有効にする
120.
今後やっていきたいこと① • 引き続き • 実践的JS勉強会 •
jshint警告抑制を解除していく • 無理そうなところは インラインで警告抑制する • 全体では有効にする • テストとかjshintを 開発環境で実行するのを もっと簡単にしたい
121.
今後やっていきたいこと② • 整形を自動化できないか
122.
今後やっていきたいこと② • 整形を自動化できないか • grunt-complexityで複雑なコード がプッシュされたら警告
123.
ありがとうございました。 2014/ 0 6
/1 4
Notas do Editor
世界中のチームワークを良くすること Mission 世界中のチームワーク向上に貢献する Vision 世界で一番使われるグループウェアメーカーになる CoreValue 顧客体験のすべてにおいて「Fast&Easy+Entertain」を
新卒サイトのキャプチャ 世界中のチームワークを良くすること Mission 世界中のチームワーク向上に貢献する Vision 世界で一番使われるグループウェアメーカーになる CoreValue 顧客体験のすべてにおいて「Fast&Easy+Entertain」を
グループウェア ホームページのキャプチャ
コードを書くときにこれが原因でどんなやりにくさがあるか 探すのが大変とか。影響範囲がわからない。JSのUnitテストはない 周りに合わせてスタイルを整える
コードを書くときにこれが原因でどんなやりにくさがあるか 探すのが大変とか。影響範囲がわからない。JSのUnitテストはない 周りに合わせてスタイルを整える
既存のコードを確認 多数決
問題を強調(覚えきれねぇ) CIにのせる
えらーでまくる
どういう方針で進めていくか
Baixar agora