SlideShare uma empresa Scribd logo
1 de 123
Baixar para ler offline
メンテナブルなJSってなんだろう
松元 @datomotu
2014/ 0 6 /1 4
自己紹介
名前
松元 大樹(まつもと だいき)@datomotu
出身
広島
好きな言語
JavaScript
好きななにか
運動、アクアリウム、カメラ、YouTube
サイボウズ株式会社(4年目)
松山開発部 PG
サイボウズについて
サイボウズについて
ちょこっと紹介させてください。
サイボウズについて
http://cybozu.co.jp/company/job/recruitment/business/
サイボウズについて
https://www.cybozu.com/jp/service/
今から話すこと
メンテナブルなJSを書くために
現在プロジェクトで行っている
取り組みの話
今から話すこと
メンテナブルなJSを書くために
現在プロジェクトで行っている
取り組みの話
TypeScriptの話は出てきません。
経緯
経緯
サイボウズ Office
経緯
サイボウズ Office
• ここ数年JSでの開発が増えている
経緯
サイボウズ Office
• ここ数年JSでの開発が増えている
• ライブラリのぞいて2万5千行くらい
経緯
0
5000
10000
15000
20000
25000
30000
合計
経緯
JSのメンテナンスコストが
日々増大していっている感じがする
経緯
JSのメンテナンスコストが
日々増大していっている感じがする
• スタイルがファイルによって異なる
• コードを探すのが大変
経緯
JSのメンテナンスコストが
日々増大していっている感じがする
• スタイルがファイルによって異なる
• コードを探すのが大変
• 影響範囲が予測できない
• JSのUnitテストがない
• コード変更が億劫に
経緯
要はメンテナブルじゃない!
経緯
要はメンテナブルじゃない!
メンテナブルにしたい!
経緯
要はメンテナブルじゃない!
メンテナブルにしたい!
メンテナブル化←イマココ
経緯
要はメンテナブルじゃない!
メンテナブルにしたい!
メンテナブル化
プロ生愛媛←イマココ
メンテナブルとは?
メンテナブルとは?
ちゃんとしてる
なんかいい感じ
メンテナブルとは?
読みやすい。変更しやすい。追加しやすい。
メンテナブルとは?
読みやすい。変更しやすい。追加しやすい。
• 読みやすい
• コードのスタイルが統一されている。
整っている。
メンテナブルとは?
読みやすい。変更しやすい。追加しやすい。
• 読みやすい
• コードのスタイルが統一されている。
整っている。
• 変更しやすい。追加しやすい。
• テスト
• ドキュメントがちゃんとしている
(賛否両論)
メンテナブルとは?
読みやすい。変更しやすい。追加しやすい。
• 読みやすい
• コードのスタイルが統一されている。
整っている。
• 変更しやすい。追加しやすい。
• テスト
• ドキュメントがちゃんとしている
(賛否両論)
読みやすい。を目指す
読みやすい。を目指す
状況
• スタイルガイドがゆるい
• その時代時代のスタイルで書かれている
• PGの数だけ存在しているコーディング
スタイル!
読みやすい。を目指す
行ったこと
• スタイルガイドの作成
• 静的解析
• 自動整形
読みやすい。を目指す
行ったこと
• スタイルガイドの作成
• 静的解析
• 自動整形
読みやすい。を目指す
– スタイルガイドの作成
スタイルガイドを
作成する必要がある?
読みやすい。を目指す
– スタイルガイドの作成
他所から輸入するのじゃだめ?
読みやすい。を目指す
– スタイルガイドの作成
他所から輸入するのじゃだめ?
NG
• 既存コードとの兼ね合い
読みやすい。を目指す
– スタイルガイドの作成
おれおれスタイルガイドを作ってから
チームに広める?
読みやすい。を目指す
– スタイルガイドの作成
おれおれスタイルガイドを作ってから
チームに広める?
NG
• 本当に良いスタイルなのか分からない
• 大変
読みやすい。を目指す
– スタイルガイドの作成
おれおれスタイルガイドを作ってから
チームに広める?
NG
• 本当に良いスタイルなのか分からない
• 大変
• おれが嫌われる・反感買う
• チームワーク崩壊の恐れ
読みやすい。を目指す
– スタイルガイドの作成
みんなで一緒に
スタイルガイドを作る?
読みやすい。を目指す
– スタイルガイドの作成
みんなで一緒に
スタイルガイドを作る?
• 本当にプロジェクトに合ったスタイルを
見つけられる
読みやすい。を目指す
– スタイルガイドの作成
みんなで一緒に
スタイルガイドを作る?
• 本当にプロジェクトに合ったスタイルを
見つけられる
• スタイルガイドの存在を脳裏に・・
• そういえばスタイルガイド決めたなー
• 自分たちで決めたルールだから守らねば!
読みやすい。を目指す
– スタイルガイドの作成
みんなで一緒に
スタイルガイドを作る?
• 本当にプロジェクトに合ったスタイルを
見つけられる
• スタイルガイドの存在を脳裏に・・
• そういえばスタイルガイド決めたなー
• 自分たちで決めたルールだから守らねば!
• おれが悪者にならない
読みやすい。を目指す
– スタイルガイドの作成
みんなで作ろう!スタイルガイド!
読みやすい。を目指す
– スタイルガイドの作成
作り方
• 各スタイルについて全員で議論
• 自分たちのスタイルガイドに記載する
べき内容なのか。
• どう記載するのがベストか。
読みやすい。を目指す
– スタイルガイドの作成
作り方
• 各スタイルについて全員で議論
• 自分たちのスタイルガイドに記載する
べき内容なのか。
• どう記載するのがベストか。
• 決まったスタイルは
即スタイルガイドに記載!
読みやすい。を目指す
– スタイルガイドの作成
読みやすい。を目指す
– スタイルガイドの作成
• 第I部 スタイルガイドライン
• 第II部 プログラミング実践
• 第III部 自動化
• 付録 A JavaScriptスタイルガイド
• 付録 B JavaScriptツール
読みやすい。を目指す
– スタイルガイドの作成
具体的な進め方
• 毎週1時間の輪講を行う
• 一回で1章くらい進む
• 1~4章なので4時間。約一ヶ月で完成する
読みやすい。を目指す
– スタイルガイドの作成
• 第I部 スタイルガイドライン
• 1~4章
• 第II部 プログラミング実践
• 5~12章
• 第III部 自動化
• 13~20章
読みやすい。を目指す
– スタイルガイドの作成
たとえば
読みやすい。を目指す
– スタイルガイドの作成
• ECMAScriptはキャメルケースで書か
れている
• 小文字で始まり、その後に頭文字が大文
字で単語が続く(LCC)
読みやすい。を目指す
– スタイルガイドの作成
• ECMAScriptはキャメルケースで書か
れている
• 小文字で始まり、その後に頭文字が大文
字で単語が続く(LCC)
• 一般論として、使用しているコア言語
に従った命名規則を常に使うべき
読みやすい。を目指す
– スタイルガイドの作成
• ECMAScriptはキャメルケースで書か
れている
• 小文字で始まり、その後に頭文字が大文
字で単語が続く(LCC)
• 一般論として、使用しているコア言語
に従った命名規則を常に使うべき
• Google SproutCore Dojoもほとん
どの状況でキャメルケース
読みやすい。を目指す
– スタイルガイドの作成
• 変数名は名詞で始まるようにすべき
• 名詞で始めることで変数を区別するのに
役立つ
読みやすい。を目指す
– スタイルガイドの作成
• 変数名は名詞で始まるようにすべき
読みやすい。を目指す
– スタイルガイドの作成
• 関数は動詞で始めるべき
読みやすい。を目指す
– スタイルガイドの作成
• 関数は動詞で始めるべき
読みやすい。を目指す
– スタイルガイドの作成
• 関数の先頭は動詞にすべき
• よく使われる動詞
動詞 意味
can ブーリアンを返す
has ブーリアンを返す
is ブーリアンを返す
get 非ブーリアンを返す
set 値を保存するために使
われる
読みやすい。を目指す
– スタイルガイドの作成
• 可能な限り変数名は短くすべき
読みやすい。を目指す
– スタイルガイドの作成
• 可能な限り変数名は短くすべき
• 変数名からデータ型が分かるとよい
• count,length,sizeは数値
• name,title,messageは文字列
• i,j,kはループの中で使用される
読みやすい。を目指す
– スタイルガイドの作成
• 可能な限り変数名は短くすべき
• 変数名からデータ型が分かるとよい
• count,length,sizeは数値
• name,title,messageは文字列
• i,j,kはループの中で使用される
• 無意味な名前は避けるべき
• foo,bar,temp
読みやすい。を目指す
– スタイルガイドの作成
このぐらい初歩的なところから議論
読みやすい。を目指す
– スタイルガイドの作成
読みやすい。を目指す
– スタイルガイドの作成
読みやすい。を目指す
– スタイルガイドの作成
大変だったところ
• 好みの違いによる論争議論
• インデントの好み
• function(){ vs function() { vs function () {
• “ vs ‘
• 議論の基準を設けた
• 既存コードの兼ね合い
• メリット・デメリット
• デグレリスク
• それでも決まらないときは多数決
読みやすい。を目指す
– スタイルガイドの作成
問題点
• メンテナブルJavaScriptⅠ部の
スタイルガイドラインの章だけでは網羅
できない
• 足りないスタイルガイドを列挙して議論する
読みやすい。を目指す
– スタイルガイドの作成
よかったところ
• スタイルで悩む時間がなくなる
• レビューしやすい
できた!
スタイルガイド!
やったー
でも
スタイルガイドに合わせて書くの
正直、めんどくさい
何が正解なのか忘れる。
機械的に確認できるところは
考えたくない!
読みやすい。を目指す
行ったこと
• スタイルガイドの作成
• 静的解析
• 自動整形
読みやすい。を目指す
– 静的解析
• JSHintを導入
• スタイルガイドに合わせてJSHintの
オプションを調整
読みやすい。を目指す
– 静的解析
• 開発環境で解析できるようにする
• Grunt
• CI(Jenkins)に乗せる
読みやすい。を目指す
– 静的解析
CIの解析では、既存のコードで
発生している警告をすべて無効化
.jshintrcファイル
読みやすい。を目指す
– 静的解析
既存のコードをコツコツ直して
警告を有効化していく
読みやすい。を目指す
– 静的解析
jshintでチェックできる
スタイルガイドは明示する
読みやすい。を目指す
– 静的解析
jshintでチェックできる
スタイルガイドは明示する
読みやすい。を目指す
– 静的解析
大変だったところ
• エラーですぎw
• 数え切れない
• 意味が分からない警告の調査
読みやすい。を目指す
– 静的解析
大変だったところ
• エラーですぎw
• 数え切れない
• 意味が分からない警告の調査
問題点
• 終わらない警告つぶし
• ローカルで走らせるのが手間
読みやすい。を目指す
– 静的解析
良かったところ
• 勉強になった。
• CIでよくないコードを教えてくれるよ
うになった。
深く考えなくても
一貫性あるコードが書ける!
jsHintさん細かいこと指摘しすぎ
めんどくさい
インデントとか、
一行の文字数とか
読みやすい。を目指す
• 行ったこと
• スタイルガイドの作成
• 静的解析
• 自動整形
読みやすい。を目指す
– 自動整形
• jsbeautifierを用意
• スタイルガイドに合わせて
オプションを設定
• gituhub
https://github.com/einars/js-beautify
• grunt-jsbeautifir
https://www.npmjs.org/package/grunt-
jsbeautifier
読みやすい。を目指す
– 自動整形
▼Online JavaScript beautifier
http://jsbeautifier.org/
読みやすい。を目指す
– 自動整形
問題点
• 差分が多いので危険
• コメントのインデントを縦にそろえてい
る個所が崩れる
• 問題個所がないか一応人力で確認する必
要がある
読みやすい。を目指す
– 自動整形
良かったところ
• 新規に書くコードはスタイルガイドに
合った整形を行ってからコミットできる
ようになった。
美しい!
整形素敵!
差分多すぎ
怖くてマージできない
メンテナブルとは?
読みやすい。変更しやすい。追加しやすい。
• 読みやすい
• コードのスタイルが統一されている。
整っている。
• 変更しやすい。追加しやすい。
• テスト
• ドキュメントがちゃんとしている
(賛否両論)
変更しやすい。追加しやすい。
を目指す
変更しやすい。追加しやすい。 を目指す
状況
• Seleniumを使ったテストはあるけど
JSのUnitテストは存在しない
• コードの書き方(知識)が人それぞれ
変更しやすい。追加しやすい。 を目指す
行ったこと
• Unitテスト
• 実践的JS勉強会
変更しやすい。追加しやすい。 を目指す
行ったこと
• Unitテスト
• 実践的JS勉強会
読みやすい。を目指す
– 静的解析
• Mocha + expect.js + Sinon.JS
でテストを書く
• Karmaで実行・レポーティング
読みやすい。を目指す
– 静的解析
• テストテンプレートを自動作成
するスクリプトを用意
• ボタン一つですぐテストを書き始められる
変更しやすい。追加しやすい。 を目指す
– テスト
テストで安心!
テスト書きやすい
コードって?
変更しやすいJSって?
変更しやすい。追加しやすい。 を目指す
行ったこと
• Unitテスト
• 実践的JS勉強会
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
• 第I部 スタイルガイドライン
• 1~4章
• 第II部 プログラミング実践
• 5~12章
• 第III部 自動化
• 13~20章
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
たとえば
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
• 他のイベントでも、ポップアップを表
示したくなったら?
• テストしにくい
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
改善1
アプリケーションロジックを切り離す
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
• showPopupのインタフェースから必要
なプロパティがわからない
• clientX, clientYしか使っていない
• テストしにくい
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
改善2
イベントオブジェクトを引き回さない
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
• テストに
MyApplication.showPopup(10, 10);
と書けて大勝利
• eventオブジェクトに触る関数は
イベントハンドラだけにするのがベスト
• stopPropagationとか
preventDefaultとかも
handleclickの中に
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
みたいな感じの輪講
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
• これは守ったほうが良いという内容は
スタイルガイドに記載
• スタイルガイド
+ プログラミング実践
• スタイルガイド
→ 総合的なコード規約
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
悪いところ
• 物足りない
変更しやすい。追加しやすい。 を目指す
– 実践的JS勉強会
良かったところ
• チームの最初の一歩にちょうど良い
• JS知識の底上げ
学び + 今後の話
学び
チームに浸透させるには
• 押しつけ感をださない
• できるところからこつこつじわじわと
• 自動化できるところは自動化しておく
• たまに煽る
今後やっていきたいこと①
• 引き続き
• 実践的JS勉強会
• jshint警告抑制を解除していく
• 無理そうなところは
インラインで警告抑制する
• 全体では有効にする
今後やっていきたいこと①
• 引き続き
• 実践的JS勉強会
• jshint警告抑制を解除していく
• 無理そうなところは
インラインで警告抑制する
• 全体では有効にする
• テストとかjshintを
開発環境で実行するのを
もっと簡単にしたい
今後やっていきたいこと②
• 整形を自動化できないか
今後やっていきたいこと②
• 整形を自動化できないか
• grunt-complexityで複雑なコード
がプッシュされたら警告
ありがとうございました。
2014/ 0 6 /1 4

Mais conteúdo relacionado

Mais procurados

使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかたHiroshi Urabe
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)Shin Takeuchi
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツevol-ni
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法Futomi Hatano
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Horiguchi Seito
 
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点Horiguchi Seito
 
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマットKenya Kodaira
 
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?Yuki Ishikawa
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトTakuma Nishiyama
 
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125Takeharu Igari
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化masaaki komori
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルMaaya Ishida
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成Kazuki Akiyama
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたItaru Kitagawa
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScripthideaki honda
 
マルチデバイス時代の高速化
マルチデバイス時代の高速化マルチデバイス時代の高速化
マルチデバイス時代の高速化Shin Takeuchi
 
SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!Atsushi Handa
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話井上 誠
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャMayu Kimura
 

Mais procurados (20)

使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
コーディングが上達するコツ
コーディングが上達するコツコーディングが上達するコツ
コーディングが上達するコツ
 
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
 
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
 
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
 
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイトWordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
 
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
 
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
マルチデバイス時代の高速化
マルチデバイス時代の高速化マルチデバイス時代の高速化
マルチデバイス時代の高速化
 
SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!SaCSS vol.56 こんなに素敵なBrackets!
SaCSS vol.56 こんなに素敵なBrackets!
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 

Destaque

大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話terurou
 
kintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツールkintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツールYasuharu Sakai
 
デブサミ2012 kintoneの表と裏 - 表編
デブサミ2012 kintoneの表と裏 - 表編デブサミ2012 kintoneの表と裏 - 表編
デブサミ2012 kintoneの表と裏 - 表編yo_waka
 
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
学生・生徒のうちにやっておきたいこと、挑戦しておきたいことllamakko_cafe
 
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発Narami Kiyokura
 
これだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVimこれだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVimarisu yano
 
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama 【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama 智治 長沢
 
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フローYuki Okada
 
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Kenji Otsuka
 
レッツゴーゆるふわ.Rb
レッツゴーゆるふわ.Rbレッツゴーゆるふわ.Rb
レッツゴーゆるふわ.RbHiroshi Ogino
 
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのことShin Semiya
 
Elastic beanstalk と Docker と Play
Elastic beanstalk と Docker と PlayElastic beanstalk と Docker と Play
Elastic beanstalk と Docker と PlayTakashi Kawachi
 
ネイティブコードを語る
ネイティブコードを語るネイティブコードを語る
ネイティブコードを語るKenji Imasaki
 
JavaScript基礎勉強会
JavaScript基礎勉強会JavaScript基礎勉強会
JavaScript基礎勉強会大樹 小倉
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseyoshikawa_t
 

Destaque (20)

大規模なJavaScript開発の話
大規模なJavaScript開発の話大規模なJavaScript開発の話
大規模なJavaScript開発の話
 
kintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツールkintoneの大規模フロントエンド開発とツール
kintoneの大規模フロントエンド開発とツール
 
デブサミ2012 kintoneの表と裏 - 表編
デブサミ2012 kintoneの表と裏 - 表編デブサミ2012 kintoneの表と裏 - 表編
デブサミ2012 kintoneの表と裏 - 表編
 
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
学生・生徒のうちにやっておきたいこと、挑戦しておきたいこと
 
フェリーのすゝめ
フェリーのすゝめフェリーのすゝめ
フェリーのすゝめ
 
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
 
これだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVimこれだけ知っときゃなんとかなるVim
これだけ知っときゃなんとかなるVim
 
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama 【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
【プロ生松山】1日に100回デプロイできる開発環境の作り方 #pronama
 
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
自社サービスkintoneをふんだんに活用したサイボウズの開発フロー
 
Jenkins 再入門
Jenkins 再入門Jenkins 再入門
Jenkins 再入門
 
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
 
レッツゴーゆるふわ.Rb
レッツゴーゆるふわ.Rbレッツゴーゆるふわ.Rb
レッツゴーゆるふわ.Rb
 
SWでKYT
SWでKYTSWでKYT
SWでKYT
 
ゆるふわCSS3
ゆるふわCSS3 ゆるふわCSS3
ゆるふわCSS3
 
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
開発効率とゲームの面白さをあげるために、私が同人ゲームのチーム開発でがんばった10個くらいのこと
 
Elastic beanstalk と Docker と Play
Elastic beanstalk と Docker と PlayElastic beanstalk と Docker と Play
Elastic beanstalk と Docker と Play
 
ネイティブコードを語る
ネイティブコードを語るネイティブコードを語る
ネイティブコードを語る
 
JavaScript基礎勉強会
JavaScript基礎勉強会JavaScript基礎勉強会
JavaScript基礎勉強会
 
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like databaseオフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
 
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
 

Semelhante a メンテナブルなJsってなんだろう

2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこるYusuke Yamamoto
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」Mori Kazue
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!FLOW web planning & design
 
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部Masahiro Wakame
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsYoshinori Kobayashi
 
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-nishio
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方girigiribauer
 
スケールしない広告サーバの作り方
スケールしない広告サーバの作り方スケールしない広告サーバの作り方
スケールしない広告サーバの作り方Innami Satoshi
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)Kenta Nakamura
 
自社開発をしていなかった会社が Python を選んだ理由
自社開発をしていなかった会社が Python を選んだ理由自社開発をしていなかった会社が Python を選んだ理由
自社開発をしていなかった会社が Python を選んだ理由Daisuke Komatsu
 
ギズモード・ジャパンのつくり方
ギズモード・ジャパンのつくり方ギズモード・ジャパンのつくり方
ギズモード・ジャパンのつくり方Six Apart KK
 
Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4kintone papers
 
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったことあなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったことMasaru Gushiken
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門Hidetaka Okamoto
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)Atsushi Ando
 
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかたふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかたYoshitaka Kawashima
 
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-jsKondo Hitoshi
 
アジャイルとは?
アジャイルとは?アジャイルとは?
アジャイルとは?bj yan
 

Semelhante a メンテナブルなJsってなんだろう (20)

2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる2013年3月20日 Tech Compass #tecomp #きのこる
2013年3月20日 Tech Compass #tecomp #きのこる
 
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
 
コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!コードをさわらずにビジネスサイトを作ろう!
コードをさわらずにビジネスサイトを作ろう!
 
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
TypeScript 型定義ファイルのある開発 TypeScript勉強会 VSハッカソン倶楽部
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
 
Vi Boot Camp #1
Vi Boot Camp #1Vi Boot Camp #1
Vi Boot Camp #1
 
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
 
スケールしない広告サーバの作り方
スケールしない広告サーバの作り方スケールしない広告サーバの作り方
スケールしない広告サーバの作り方
 
20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)20140913 ディレクション講演資料(山盛り)
20140913 ディレクション講演資料(山盛り)
 
自社開発をしていなかった会社が Python を選んだ理由
自社開発をしていなかった会社が Python を選んだ理由自社開発をしていなかった会社が Python を選んだ理由
自社開発をしていなかった会社が Python を選んだ理由
 
ギズモード・ジャパンのつくり方
ギズモード・ジャパンのつくり方ギズモード・ジャパンのつくり方
ギズモード・ジャパンのつくり方
 
Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4Kintonecafé埼玉vol.4
Kintonecafé埼玉vol.4
 
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったことあなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
あなたも出来る!webエンジニアがSwiftでリリースするためにやったこと
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
 
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
doshirouto2014のcssだけを改造して子テーマを作る、最速手抜きカスタマイズ (初級)
 
ふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかたふつうの受託開発チームのつくりかた
ふつうの受託開発チームのつくりかた
 
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
 
Swift afterbeginner
Swift afterbeginnerSwift afterbeginner
Swift afterbeginner
 
アジャイルとは?
アジャイルとは?アジャイルとは?
アジャイルとは?
 

メンテナブルなJsってなんだろう

Notas do Editor

  1. 世界中のチームワークを良くすること Mission  世界中のチームワーク向上に貢献する Vision 世界で一番使われるグループウェアメーカーになる CoreValue 顧客体験のすべてにおいて「Fast&Easy+Entertain」を
  2. 新卒サイトのキャプチャ 世界中のチームワークを良くすること Mission  世界中のチームワーク向上に貢献する Vision 世界で一番使われるグループウェアメーカーになる CoreValue 顧客体験のすべてにおいて「Fast&Easy+Entertain」を
  3. グループウェア ホームページのキャプチャ
  4. コードを書くときにこれが原因でどんなやりにくさがあるか  探すのが大変とか。影響範囲がわからない。JSのUnitテストはない  周りに合わせてスタイルを整える
  5. コードを書くときにこれが原因でどんなやりにくさがあるか  探すのが大変とか。影響範囲がわからない。JSのUnitテストはない  周りに合わせてスタイルを整える
  6. 既存のコードを確認 多数決
  7. 問題を強調(覚えきれねぇ) CIにのせる
  8. えらーでまくる
  9. どういう方針で進めていくか