アプリ開発を効率化する方法あれこれ

アプリ開発を効率化する

方法あれこれ

面白法人カヤック　HTMLファイ部溝上篤司

アプリ開発を効率化する

方法あれこれ

面白法人カヤック　HTMLファイ部溝上篤司

アプリ開発に限らない

本日のアジェンダ

・良い名前、つけてますか？

・テスト、書いてますか？

・自動化、してますか？

・ツール、作ってますか？

の4本です。

自己紹介

Facebook : Atsushi MizoueTwitter : asion_m

・Vimが大好きで社内で

布教＆プラグイン作成なんかやってます・JavaScriptも大好きで最近仕事ではほとんどJSしか書いてません。

・麦酒が血液です。

自己紹介

部署名は冗談のようですが

本当です。

自己紹介

部署名は冗談のようですが

本当です。

※この部署名になってからHTML5の案件が激増したそうです

さて

本題です。

本題

良い名前、

つけてますか？

良い名前、つけてますか？

例えば

HTMLファイ部


どこからどう読んでもHTML５の制作を行う部署です。本当に（ｒｙ


では次の変数は

何をしてるか想像できるでしょうか？


では次の変数は

何をしてるか想像できるでしょうか？

var mvCnt;


想像される答え



・カウントアップ？・てかそもそもmvって何？・一体なんのカウントなんだ・・・



・カウントアップ？・てかそもそもmvって何？・一体なんのカウントなんだ・・・

前後のプログラムを見ないとわからん！


正解は


正解は

オブジェクトの移動(Move)を管理する

Controllerのインスタンスでした。


正解は



※制作者：過去の自分


正解は



※制作者：過去の自分

爆発すればいいのに


ちなみに


ちなみに

無駄にした時間は１時間でした。


今考えたような事

よくありませんか？


良い名前をつけておけば

考えたり、調べるのに使った時間は

必要なかったはず。


良い名前をつけておけば

考えたり、調べるのに使った時間は

必要なかったはず。

例えば

var moveCtrl;

わかりやすい名前は効率化の第一歩

良い名前をつければ

調べる時間が減る。


個人的な経験ですが、


個人的な経験ですが、

Webアプリは所謂普通のWebサイトより

更新頻度が高い。


故に


ただでさえ読む時間が長いプログラムを読む時間が

更に長くなる。


＝


キーを打つコストより理解にかかる時間のコストのほうが高くなる


キーを打つコストより理解にかかる時間のコストのほうが高くなる

※いくら名前が長くなろうが補完で大体なんとかなりますよね？


例


✕　var sp = new Sprite();◯　var sprite = new Sprite();

✕　var av = new Avatar();◯　var avatar = new Avatar();

✕　var ext = new ExternalInterface();◯　var external = new ExternalInterface();


省略形を

なるべく使わない。

※よく使われる省略形でもちょっと考えてみる。

さて

では次。

テスト駆動開発

テスト、

書いてますか？


「JavaScriptでテスト？」



「テスト書くの面倒臭くない？」




「”シンプル”だからテストはいいや」





「テストって

何書いていいかわからない」





「テストって

何書いていいかわからない」

「後で書くよ後で」


死亡フラグです。


テスト駆動開発(TDD)は

効率化の手法です。

TDDは効率化の手法

・JavaScriptこそテストを書かないと

やってられない




・テストを書かないほうが面倒臭い





・本当にシンプルですか？






・テストを書けないことは大抵書かない方が良い






・テストを書けないことは大抵書かない方が良い

・本当に後から書いたことありま

すか？


JavaScriptこそテストを書かないとやってられない



・実行環境を限定することが(まず)出来ない



・実行環境を限定することが(まず)出来ない・ブラウザを限定することも(大抵)出来ない



・実行環境を限定することが(まず)出来ない・ブラウザを限定することも(大抵)出来ない・例え限定出来たとしても




全対象に手作業でチェックする・・・だと・・・




全対象に手作業でチェックする・・・だと・・・

死亡フラグ


・テスト書かないほうが面倒臭い

JavaScriptの実行環境は（ほぼ）ブラウザ。




つまりアップデートのたびに何らかの方法で動作チェックをしなければならない。




つまりアップデートのたびに何らかの方法で動作チェックをしなければならない。

死亡フラグ



なぜシンプルだと思ったのでしょうか。



なぜシンプルだと思ったのでしょうか。誰かに「シンプルだから〜」と言われた場合、




まず間違いなく

シンプルではない。





シンプルではない。（少なくともプログラムは）





シンプルではない。（少なくともプログラムは）

死亡フラグ


・テストを書けないことは書かない方が良い

何のテストを書けばいいかわからないということは




今から何をするか

よくわかってない




今から何をするか

よくわかってない

死亡フラグ


・本当に後で書いたことありますか？

後から書くテストは非常に書きにくいです。



後から書くテストは非常に書きにくいです。なぜなら




・やる気がでない





・そもそもテストが書きにくい






・「動いてるからいいや」






・「動いてるからいいや」

死亡フラグ


TDDは数々の死亡フラグを

回避する手段を与えてくれます。




例：Q.「このメソッドの使い方がわからん」




例：Q.「このメソッドの使い方がわからん」

A.「テスト見ろ」


が、しかし


コード全てに対してテストを書くのは

結構非効率です。


テストを書かなくてもいいもの



・ロールオーバみたいに使い古されてる・jQueryなどの一般的なライブラリ・既にテストが書かれているもの・アクセサーなど超簡単なもの



しかし書いた方がいい、

と思えば書いた方がいい。

※例えば「怪しい・・・」

と思った箇所だけ書く等


個人的なおすすめ


個人的なおすすめ

Jasminehttp://pivotal.github.com/jasmine/


Jasmineは


Jasmineは

・読みやすい・お手軽・必要な物が揃ってるです。


Jasmineは

・読みやすい・お手軽・必要な物が揃ってるです。

※あくまで個人の感想です

※用法容量を守ってお使いください。


実際にやってみる

実際にやってみる

http://www.youtube.com/watch?v=iD4SgRFGltw

さて

お分かりいただけたでしょうか。

自動化、

してますか？

自動化、してますか？

・js作成時にテンプレートを適用

・js保存時にgjslintを実行

・js上でコマンド実行で

テストのテンプレートを作成

etc...


自動化出来ることは

徹底的に自動化

する。


自分のやり方から最適な「自動化」を考える

・保存してミニファイ

　→　保存したらミニファイ

・html書いてcss書く

　→　htmlからcssのスケルトンをつくる

・jsファイル作ってテスト用ファイルもつくる

　→　jsからテストテンプレートを作る

などなど


http://www.youtube.com/watch?v=uxHv7nwYFko&feature=youtu.be

では

ツールの作り時はいつなのか。

ツール、作ってますか？

「なんかこれ前もやったな・・・」

「面倒臭いな・・・」

「誰かにやって欲しい・・・」

などなど


「でも作る時間ないし・・・」


個人的なおすすめの方法


個人的なおすすめの方法

1日30分〜1時間くらい

ツール作成に当てる。


Q.「仕事の時間なのに・・・？」


A.画面を見られても

プログラム書いてる

ようにしか見えないので大丈夫（ｒｙ


その他の解決方法

・作ったものを共有する

・意見を取り入れ徐々に汎用的にする

・息抜きにつくる（どうせ30分

などなど


今使った３０分の元が

将来取れる想定なら

何も迷う必要はない。

まとめ

・命名はすっごい大事

・テスト書くプログラマは良いプログラマ

・自動化するとめっちゃ楽

・ツール作ると楽しいよ！

自動化ツール

制作した自動化ツール色々（ほぼvimhttps://github.com/AtsushiM

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

アプリ開発を効率化する方法あれこれ

Documents

Transcript of アプリ開発を効率化する方法あれこれ

アプリ開発を効率化する 方法あれこれ

Documents

Transcript of アプリ開発を効率化する 方法あれこれ

アプリ開発を効率化する方法あれこれ

Transcript of アプリ開発を効率化する方法あれこれ