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

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

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

アプリ開発に限らない
アプリ開発を効率化する
方法あれこれ

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

本日のアジェンダ

・良い名前、つけてますか？
・テスト、書いてますか？
・自動化、してますか？
・ツール、作ってますか？
の4本です。

自己紹介

Facebook : Atsushi Mizoue
Twitter : 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などの一般的なライブラリ
・既にテストが書かれているもの
・アクセサーなど超簡単なもの


しかし書いた方がいい、
と思えば書いた方がいい。

※例えば「怪しい・・・」
と思った箇所だけ書く等


個人的なおすすめ


個人的なおすすめ

Jasmine
http://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分
などなど


今使った３０分の元が
将来取れる想定なら
何も迷う必要はない。

まとめ

・命名はすっごい大事
・テスト書くプログラマは良いプログラマ

・自動化するとめっちゃ楽
・ツール作ると楽しいよ！

自動化ツール

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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Andere mochten auch

Andere mochten auch (20)

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

Ähnlich wie アプリ開発を効率化する方法あれこれ (20)