Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

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

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

  面白法人カヤック HTMLファイ部
              溝上篤司
アプリ開発に限らない
  アプリ開発を効率化する
    方法あれこれ

    面白法人カヤック HTMLファイ部
                溝上篤司
本日のアジェンダ

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

Les vidéos YouTube ne sont plus prises en charge sur SlideShare

Regarder la vidéo sur YouTube

Les vidéos YouTube ne sont plus prises en charge sur SlideShare

Regarder la vidéo sur YouTube

Consultez-les par la suite

1 sur 107 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (17)

Les utilisateurs ont également aimé (20)

Publicité

Similaire à アプリ開発を効率化する 方法あれこれ (20)

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

  1. 1. アプリ開発を効率化する 方法あれこれ 面白法人カヤック HTMLファイ部 溝上篤司
  2. 2. アプリ開発に限らない アプリ開発を効率化する 方法あれこれ 面白法人カヤック HTMLファイ部 溝上篤司
  3. 3. 本日のアジェンダ ・良い名前、つけてますか? ・テスト、書いてますか? ・自動化、してますか? ・ツール、作ってますか? の4本です。
  4. 4. 自己紹介 Facebook : Atsushi Mizoue Twitter : asion_m ・Vimが大好きで社内で 布教&プラグイン作成なんかやってます ・JavaScriptも大好きで最近仕事では ほとんどJSしか書いてません。 ・麦酒が血液です。
  5. 5. 自己紹介 部署名は 冗談のようですが 本当です。
  6. 6. 自己紹介 部署名は 冗談のようですが 本当です。 ※この部署名になってから HTML5の案件が激増したそうです
  7. 7. さて 本題です。
  8. 8. 本題 良い名前、 つけてますか?
  9. 9. 良い名前、つけてますか? 例えば HTMLファイ部
  10. 10. 良い名前、つけてますか? どこからどう読んでも HTML5の制作を行う部 署です。 本当に(ry
  11. 11. 良い名前、つけてますか? では次の変数は 何をしてるか 想像できるでしょうか?
  12. 12. 良い名前、つけてますか? では次の変数は 何をしてるか 想像できるでしょうか? var mvCnt;
  13. 13. 良い名前、つけてますか? 想像される答え
  14. 14. 良い名前、つけてますか? 想像される答え ・カウントアップ? ・てかそもそもmvって何? ・一体なんのカウントなんだ・・・
  15. 15. 良い名前、つけてますか? 想像される答え 前後の ・カウントアップ? プログ ・てかそもそもmvって何? ラムを ・一体なんのカウントなんだ・・・ 見ない とわか らん!
  16. 16. 良い名前、つけてますか? 正解は
  17. 17. 良い名前、つけてますか? 正解は オブジェクトの移動(Move)を管理する Controllerのインスタンスでした。
  18. 18. 良い名前、つけてますか? 正解は オブジェクトの移動(Move)を管理する Controllerのインスタンスでした。 ※制作者:過去の自分
  19. 19. 良い名前、つけてますか? 正解は オブジェクトの移動(Move)を管理する Controllerのインスタンスでした。 ※制作者:過去の自分 爆発すればいいのに
  20. 20. 良い名前、つけてますか? ちなみに
  21. 21. 良い名前、つけてますか? ちなみに 無駄にした時間は 1時間でした。
  22. 22. 良い名前、つけてますか? 今考えたような事 よくありませんか?
  23. 23. 良い名前、つけてますか? 良い名前をつけておけば 考えたり、調べるのに使った時間は 必要なかったはず。
  24. 24. 良い名前、つけてますか? 良い名前をつけておけば 考えたり、調べるのに使った時間は 必要なかったはず。 例えば var moveCtrl;
  25. 25. わかりやすい名前は効率化の第一歩 良い名前をつければ 調べる時間が減る。
  26. 26. わかりやすい名前は効率化の第一歩 個人的な経験ですが、
  27. 27. わかりやすい名前は効率化の第一歩 個人的な経験ですが、 Webアプリは 所謂普通の Webサイトより 更新頻度が高い。
  28. 28. わかりやすい名前は効率化の第一歩 故に
  29. 29. わかりやすい名前は効率化の第一歩 ただでさえ読む時間が長い プログラムを読む時間が 更に長くなる。
  30. 30. わかりやすい名前は効率化の第一歩 =
  31. 31. わかりやすい名前は効率化の第一歩 キーを打つコストより 理解にかかる時間の コストのほうが高くなる
  32. 32. わかりやすい名前は効率化の第一歩 キーを打つコストより 理解にかかる時間の コストのほうが高くなる ※いくら名前が長くなろうが 補完で大体なんとかなりますよね?
  33. 33. わかりやすい名前は効率化の第一歩 例
  34. 34. 良い名前、つけてますか? ✕ var sp = new Sprite(); ◯ var sprite = new Sprite(); ✕ var av = new Avatar(); ◯ var avatar = new Avatar(); ✕ var ext = new ExternalInterface(); ◯ var external = new ExternalInterface();
  35. 35. 良い名前、つけてますか? 省略形を なるべく使わない。 ※よく使われる省略形でも ちょっと考えてみる。
  36. 36. さて では次。
  37. 37. テスト駆動開発 テスト、 書いてますか?
  38. 38. テスト駆動開発 「JavaScriptでテスト?」
  39. 39. テスト駆動開発 「JavaScriptでテスト?」 「テスト書くの面倒臭くない?」
  40. 40. テスト駆動開発 「JavaScriptでテスト?」 「テスト書くの面倒臭くない?」 「”シンプル”だからテストはいいや」
  41. 41. テスト駆動開発 「JavaScriptでテスト?」 「テスト書くの面倒臭くない?」 「”シンプル”だからテストはいいや」 「テストって 何書いていいかわからない」
  42. 42. テスト駆動開発 「JavaScriptでテスト?」 「テスト書くの面倒臭くない?」 「” シンプル”だからテストはいいや」 「テストって 何書いていいかわからない」 「後で書くよ後で」
  43. 43. テスト駆動開発 死亡フラグです。
  44. 44. テスト駆動開発 テスト駆動開発 (TDD)は 効率化 の手法です。
  45. 45. TDDは効率化の手法 ・JavaScriptこそテストを書かないと やってられない
  46. 46. TDDは効率化の手法 ・JavaScriptこそテストを書かないと やってられない ・テストを書かないほうが面倒臭い
  47. 47. TDDは効率化の手法 ・JavaScriptこそテストを書かないと やってられない ・テストを書かないほうが面倒臭い ・本当にシンプルですか?
  48. 48. TDDは効率化の手法 ・JavaScriptこそテストを書かないと やってられない ・テストを書かないほうが面倒臭い ・本当にシンプルですか? ・テストを書けないことは大抵書かない方が良い
  49. 49. TDDは効率化の手法 ・JavaScriptこそテストを書かないと やってられない ・テストを書かないほうが面倒臭い ・本当にシンプルですか? ・テストを書けないことは大抵書かない方が良い ・本当に後から書いたことありま すか?
  50. 50. TDDは効率化の手法 JavaScriptこそテストを書かないとやってられない
  51. 51. TDDは効率化の手法 JavaScriptこそテストを書かないとやってられない ・実行環境を限定することが(まず)出来ない
  52. 52. TDDは効率化の手法 JavaScriptこそテストを書かないとやってられない ・実行環境を限定することが(まず)出来ない ・ブラウザを限定することも(大抵)出来ない
  53. 53. TDDは効率化の手法 JavaScriptこそテストを書かないとやってられない ・実行環境を限定することが(まず)出来ない ・ブラウザを限定することも(大抵)出来ない ・例え限定出来たとしても
  54. 54. TDDは効率化の手法 JavaScriptこそテストを書かないとやってられない ・実行環境を限定することが(まず)出来ない ・ブラウザを限定することも(大抵)出来ない ・例え限定出来たとしても 全対象に手作業でチェックする ・・・だと・・・
  55. 55. TDDは効率化の手法 JavaScriptこそテストを書かないとやってられない 死亡 ・実行環境を限定することが(まず)出来ない ・ブラウザを限定することも(大抵)出来ない フラ ・例え限定出来たとしても 全対象に手作業でチェックする ・・・だと・・・ グ
  56. 56. TDDは効率化の手法 ・テスト書かないほうが面倒臭い JavaScriptの実行環境は(ほぼ)ブラウザ。
  57. 57. TDDは効率化の手法 ・テスト書かないほうが面倒臭い JavaScriptの実行環境は(ほぼ)ブラウザ。 アップデートのたびに何ら つまり かの方法で動作チェックをしなけれ ばならない。
  58. 58. TDDは効率化の手法 ・テスト書かないほうが面倒臭い 死亡 JavaScriptの実行環境は(ほぼ)ブラウザ。 フラ アップデートのたびに何ら つまり ばならない。 グ かの方法で動作チェック をしなけれ
  59. 59. TDDは効率化の手法 ・本当にシンプルですか? なぜシンプルだと思ったのでしょうか。
  60. 60. TDDは効率化の手法 ・本当にシンプルですか? なぜシンプルだと思ったのでしょうか。 誰かに「シンプルだから〜」と 言われた場合、
  61. 61. TDDは効率化の手法 ・本当にシンプルですか? なぜシンプルだと思ったのでしょうか。 誰かに「シンプルだから〜」と 言われた場合、 まず間違いなく シンプルではない。
  62. 62. TDDは効率化の手法 ・本当にシンプルですか? なぜシンプルだと思ったのでしょうか。 誰かに「シンプルだから〜」と 言われた場合、 まず間違いなく シンプルではない。 (少なくともプログラムは)
  63. 63. TDDは効率化の手法 ・本当にシンプルですか? なぜシンプルだと思ったのでしょうか。 死亡 誰かに「シンプルだから〜」と フラ 言われた場合、 グ まず間違いなく シンプルではない。 (少なくともプログラムは)
  64. 64. TDDは効率化の手法 ・テストを書けないことは書かない方が良い 何のテストを書けばいいか わからないということは
  65. 65. TDDは効率化の手法 ・テストを書けないことは書かない方が良い 何のテストを書けばいいか わからないということは 今から何をするか よくわかってない
  66. 66. TDDは効率化の手法 ・テストを書けないことは書かない方が良い 何のテストを書けばいいか 死亡 わからないということは フラ 今から何をするか グ よくわかってない
  67. 67. TDDは効率化の手法 ・本当に後で書いたことありますか? 後から書くテストは非常に書きにくいです。
  68. 68. TDDは効率化の手法 ・本当に後で書いたことありますか? 後から書くテストは非常に書きにくいです。 なぜなら
  69. 69. TDDは効率化の手法 ・本当に後で書いたことありますか? 後から書くテストは非常に書きにくいです。 なぜなら ・やる気がでない
  70. 70. TDDは効率化の手法 ・本当に後で書いたことありますか? 後から書くテストは非常に書きにくいです。 なぜなら ・やる気がでない ・そもそもテストが書きにくい
  71. 71. TDDは効率化の手法 ・本当に後で書いたことありますか? 後から書くテストは非常に書きにくいです。 なぜなら ・やる気がでない ・そもそもテストが書きにくい ・「 動いてるからいいや」
  72. 72. TDDは効率化の手法 ・本当に後で書いたことありますか? 後から書くテストは非常に書きにくいです。 死亡 なぜなら ・やる気が フラ でない グ ・そもそもテストが書きにくい ・「 動いてるからいいや」
  73. 73. TDDは効率化の手法 TDDは数々の死亡フラグを 回避する手段を与えてくれます。
  74. 74. TDDは効率化の手法 TDDは数々の死亡フラグを 回避する手段を与えてくれます。 例: Q.「このメソッドの使い方がわからん」
  75. 75. TDDは効率化の手法 TDDは数々の死亡フラグを 回避する手段を与えてくれます。 例: Q.「このメソッドの使い方がわからん」 テスト見ろ」 A.「
  76. 76. TDDは効率化の手法 が、しかし
  77. 77. TDDは効率化の手法 コード全てに対して テストを書くのは 結構非効率です。
  78. 78. TDDは効率化の手法 テストを書かなくてもいいもの
  79. 79. TDDは効率化の手法 テストを書かなくてもいいもの ・ロールオーバみたいに 使い古されてる ・jQueryなどの一般的なライブラリ ・既にテストが書かれているもの ・アクセサーなど超簡単なもの
  80. 80. TDDは効率化の手法 テストを書かなくてもいいもの しかし書いた方がいい、 と思えば書いた方がいい。 ※例えば「怪しい・・・」 と思った箇所だけ書く等
  81. 81. TDDは効率化の手法 個人的なおすすめ
  82. 82. TDDは効率化の手法 個人的なおすすめ Jasmine http://pivotal.github.com/jasmine/
  83. 83. TDDは効率化の手法 Jasmineは
  84. 84. TDDは効率化の手法 Jasmineは ・読みやすい ・お手軽 ・必要な物が揃ってる です。
  85. 85. TDDは効率化の手法 Jasmineは ・読みやすい ・お手軽 ・必要な物が揃ってる です。 ※あくまで個人の感想です ※用法容量を守ってお使いください。
  86. 86. TDDは効率化の手法 実際にやってみる
  87. 87. 実際にやってみる http://www.youtube.com/watch? v=iD4SgRFGltw
  88. 88. さて お分かりいただけたでしょうか。
  89. 89. 自動化、 してますか?
  90. 90. 自動化、してますか? ・js作成時にテンプレートを適用 ・js保存時にgjslintを実行 ・js上でコマンド実行で テストのテンプレートを作成 etc...
  91. 91. 自動化、してますか? 自動化出来ることは 徹底的に自動化 する。
  92. 92. 自動化、してますか? 自分のやり方から最適な「自動化」を考える ・保存してミニファイ  → 保存したらミニファイ ・html書いてcss書く  → htmlからcssのスケルトンをつくる ・jsファイル作ってテスト用ファイルもつくる  → jsからテストテンプレートを作る
  93. 93. 自動化、してますか? http://www.youtube.com/watch? v=uxHv7nwYFko&feature=youtu.be
  94. 94. では ツールの作り時は いつなのか。
  95. 95. ツール、作ってますか? 「なんかこれ 前もやったな・・・」 「面倒臭いな・・・」 「誰かに やって欲しい・・・」 などなど
  96. 96. ツール、作ってますか? 「でも 作る時間ないし・・・」
  97. 97. ツール、作ってますか? 個人的なおすすめの方法
  98. 98. ツール、作ってますか? 個人的なおすすめの方法 1日30分〜1時間くらい ツール作成に当てる。
  99. 99. ツール、作ってますか? Q.「仕事の時間なのに・・・?」
  100. 100. ツール、作ってますか? A.画面を見られても プログラム書いてる ようにしか見えないので 大丈夫(ry
  101. 101. ツール、作ってますか? その他の解決方法 ・作ったものを 共有する ・意見を取り入れ 徐々に汎用的にする ・息抜きにつくる( どうせ30分 などなど
  102. 102. ツール、作ってますか? 今使った30分の元が 将来取れる想定なら 何も迷う必要はない。
  103. 103. まとめ ・命名はすっごい大事 ・テスト書くプログラマは良いプログラマ ・自動化するとめっちゃ楽 ・ツール作ると楽しいよ!
  104. 104. 自動化ツール 制作した自動化ツール色々 (ほぼvim https://github.com/AtsushiM
  105. 105. ご清聴ありがとうございました!

×