Upgrade to Pro — share decks privately, control downloads, hide ads and more …

STEP UP プログラミング高速化 「君、プログラミング早いね」 / Step up! fast programming

nrs
January 15, 2019

STEP UP プログラミング高速化 「君、プログラミング早いね」 / Step up! fast programming

プログラミングを高速にするためのステップを解説するセミナーの資料です。
あとがき: https://nrslib.com/postscript-stepup-fast-programming/

元となった LT: https://speakerdeck.com/nrslib/you-write-a-program-fast
HP: https://nrslib.com/
Twitter: https://twitter.com/nrslib

以下資料中 URL
https://nrslib.com/csharp-to-typescript-interface/
https://nrslib.com/clean-architecture/

nrs

January 15, 2019
Tweet

More Decks by nrs

Other Decks in Programming

Transcript

  1. STEP UP プログラミング高速化
    Masanobu Naruse
    「君、プログラミング早いね」

    View full-size slide

  2. 君、プログラミング早いね

    View full-size slide

  3. 君、プログラミング早いね
    と、言われたことはありますか?

    View full-size slide

  4. 君、プログラミング早いね
    言われてみたいですよね?

    View full-size slide

  5. 話す内容

    View full-size slide

  6. プログラミングを
    早くするための
    ステップ

    View full-size slide

  7. STEP 1
    STEP 2
    STEP 3
    STEP 4
    4つのステップを確認しよう

    View full-size slide

  8. Step 1
    書いて覚える

    View full-size slide

  9. なんか
    遅いな
    プログラミング研修の一コマ

    View full-size slide

  10. 覗いてみよう
    プログラミング研修の一コマ

    View full-size slide

  11. private という
    単語すら
    コピペしてる
    プログラミング研修の一コマ

    View full-size slide

  12. Q. なぜコピペ?

    View full-size slide

  13. Q. なぜコピペ?
    A. 失敗が怖い

    View full-size slide

  14. 赤くて怖い

    View full-size slide

  15. 意味不明で怖い

    View full-size slide

  16. 総評
    コンパイルエラーは怖い

    View full-size slide

  17. 総評
    コンパイルエラーは怖い
    コピペすればエラーは起きない

    View full-size slide

  18. コピペすればエラーは起きない
    総評
    コンパイルエラーは怖い

    View full-size slide

  19. コピペは常に悪

    View full-size slide

  20. コピペは常に悪
    とまでは言わないけれど

    View full-size slide

  21. コピペは常に悪
    とまでは言わないけれど
    単語レベルなら書いた方が早い

    View full-size slide

  22. 画面上に常にコピペ元があるとは限らない

    View full-size slide

  23. 基礎的な構文は
    書けるようにしよう
    画面上に常にコピペ元があるとは限らない

    View full-size slide

  24. IDE は君の味方
    頼ってよし

    View full-size slide

  25. すらすら書けるまで
    ひたすら書いて
    トレーニングしよう

    View full-size slide

  26. Step 2
    丁寧に書く

    View full-size slide

  27. できましたー!! おー早いね!

    View full-size slide

  28. バグっとるやんけ

    View full-size slide

  29. 急いで書いたから・・・

    View full-size slide

  30. 急いで書くとバグるの?

    View full-size slide

  31. 急いで
    書いた
    丁寧に
    書いた
    作業時間:

    View full-size slide

  32. 急いで
    書いた
    丁寧に
    書いた
    早い
    作業時間:

    View full-size slide

  33. 急いで
    書いた
    丁寧に
    書いた
    バグ修正
    作業時間:

    View full-size slide

  34. 急いで
    書いた
    丁寧に
    書いた
    バグ修正
    早い
    作業時間:

    View full-size slide

  35. 丁寧に書くと
    遅い

    View full-size slide

  36. 丁寧に書くと
    遅い

    View full-size slide

  37. 丁寧に書くのに慣れていないから
    遅い

    View full-size slide

  38. 慣れるとどうなるか

    View full-size slide

  39. 急いで
    書いた
    丁寧に
    書いた
    バグ修正
    作業時間:

    View full-size slide

  40. 急いで
    書いた
    丁寧に
    書いた
    作業時間:
    バグ修正
    増加→

    View full-size slide

  41. 急いで
    書いた
    丁寧に
    書いた
    作業時間:
    バグ修正
    適当な書き方では頭の整理が
    できなくなり遅くなる
    増加→

    View full-size slide

  42. 急いで
    書いた
    丁寧に
    書いた
    バグ修正
    作業時間:
    適当な書き方では頭の整理が
    できなくなり遅くなる
    増加→
    ←減少

    View full-size slide

  43. 急いで
    書いた
    丁寧に
    書いた
    バグ修正
    作業時間:
    圧倒的
    適当な書き方では頭の整理が
    できなくなり遅くなる
    増加→
    ←減少

    View full-size slide

  44. もしも改修が必要になったら?

    View full-size slide

  45. 急いで
    書いた
    丁寧に
    書いた
    修正コスト
    作業時間:

    View full-size slide

  46. 急いで
    書いた
    丁寧に
    書いた
    修正コスト
    作業時間:
    早い

    View full-size slide

  47. 急いで
    書いた
    綺麗に
    書いた
    修正コスト
    作業時間:
    早い
    ソフトウェアは変化する
    ツケを誰かが払うときがくる

    View full-size slide

  48. だからこんなことが叫ばれます

    View full-size slide

  49. 綺麗なプログラムを書きなさい

    View full-size slide

  50. What is 綺麗?

    View full-size slide

  51. 各種原則に則って
    デザインパターンに当てはめて
    感嘆するような手法を生み出し

    View full-size slide

  52. 各種原則に則って
    デザインパターンに当てはめて
    感嘆するような手法を生み出し

    View full-size slide

  53. 誰にでも読みやすいコード

    View full-size slide

  54. 誰にでも読みやすいコード

    View full-size slide

  55. 自身が思う綺麗さについて
    妥協していないコード

    View full-size slide

  56. 自身が思う綺麗さについて
    妥協していないコード

    View full-size slide

  57. よい
    経験
    悪い
    経験

    View full-size slide

  58. よい
    経験
    悪い
    経験

    View full-size slide

  59. よい
    経験
    悪い
    経験
    よい経験は悪い経験に常に勝る

    View full-size slide

  60. よい
    経験
    悪い
    経験
    どんなときも
    自分ができる精一杯の
    丁寧なコードを書いて
    トレーニングしよう

    View full-size slide

  61. Step 3
    書き方を覚える

    View full-size slide

  62. プログラミングを
    遅くする原因は?
    Q.

    View full-size slide

  63. プログラミング中

    View full-size slide

  64. これはどこに
    書こうかな
    プログラミング中

    View full-size slide

  65. これはどこに
    書こうかな
    この書き方で
    いいのかな
    プログラミング中

    View full-size slide

  66. これはどこに
    書こうかな
    この書き方で
    いいのかな
    あの処理
    どこだっけ
    プログラミング中

    View full-size slide

  67. これはどこに
    書こうかな
    この書き方で
    いいのかな
    似たような
    処理ないかな
    あの処理
    どこだっけ
    プログラミング中

    View full-size slide

  68. プログラミングを
    遅くする原因は?
    Q.

    View full-size slide

  69. 迷いを無くす = 早くなる

    View full-size slide

  70. Q.
    底辺が3cm、高さが2cmの
    三角形の面積は?

    View full-size slide

  71. Q.
    底辺が3cm、高さが2cmの
    三角形の面積は?
    底辺 × 高さ ÷ 2

    View full-size slide

  72. 数学は公式
    プログラミングはパターン

    View full-size slide

  73. XXXXX のときは YYYYY する
    という引き出しを増やせば
    迷わなくなり早くなる

    View full-size slide

  74. デザインパターン

    View full-size slide

  75. デザインパターン
    ある問題を解決する実装のパターン
    GoF (Gang of four) が有名

    View full-size slide

  76. デザインパターン
    ある問題を解決する実装のパターン
    GoF (Gang of four) が有名
    覚えておくと
    適用できるときがある

    View full-size slide

  77. デザインパターン
    ある問題を解決する実装のパターン
    GoF (Gang of four) が有名
    覚えておくと
    適用できるときがある
    適用できないときもある

    View full-size slide

  78. 適用できないなら意味ないじゃん

    View full-size slide

  79. 適用できないなら意味ないじゃん

    View full-size slide

  80. 適用できないなら意味ないじゃん
    そのまま適用できないだけ
    応用したら適用できるかも

    View full-size slide

  81. Q. どのパターンにも当てはめられないときは?

    View full-size slide

  82. Q. どのパターンにも当てはめられないときは?
    A. おめでとう! 君のパターンを作るときだ

    View full-size slide

  83. 自分でパターンを作るときの糧として
    原則を学び
    皆の書き方を参考にする

    View full-size slide

  84. 原則
    単一責任の原則
    開放・閉鎖原則
    リスコフの置換原則
    デメテルの原則
    etc…

    View full-size slide

  85. 皆の書き方
    オープンソース
    プロダクトのコード
    技術書
    etc…
    ※玉石混合なので気を付けて

    View full-size slide

  86. 実装パターンについて学び
    原則について学び
    皆の書き方を見て学ぶ

    View full-size slide

  87. 実装パターンについて学び
    原則について学び
    皆の書き方を見て学ぶ
    Step 2 と平行すると効果は抜群

    View full-size slide

  88. ここまでのトレーニングを
    ひたすらこなせば
    かなり早くプログラムが
    書けるようになる

    View full-size slide

  89. でもまだ足りない

    View full-size slide

  90. 誰も追いつけない速度まで
    到達したい

    View full-size slide

  91. 指の速度には限界がある

    View full-size slide

  92. 指を使わなければいい

    View full-size slide

  93. Step 4
    プログラムをするプログラムを書く

    View full-size slide

  94. 似たような作業が何度も必要な
    コーディングは存在する

    View full-size slide

  95. 似たような作業が何度も必要な
    コーディングは存在する
    肩代わりするツールがあれば
    早く書ける

    View full-size slide

  96. 一般的な実例
    Snippet

    View full-size slide

  97. 一般的な実例
    スキャフォールディング

    View full-size slide

  98. Front
    Server
    C# json Typescript
    実プロダクトからの実例・その1

    View full-size slide

  99. Front
    Server
    C# json Typescript
    定義を書くのを一度にしたい
    実プロダクトからの実例・その1

    View full-size slide

  100. Front
    Server
    C# json Typescript
    定義を書くのを一度にしたい
    https://github.com/nrslib/NrsLib.CSharpToTypescriptInterface
    実プロダクトからの実例・その1

    View full-size slide

  101. 設計都合で
    作る必要のあるコード
    実プロダクトからの実例・その2

    View full-size slide

  102. 設計都合で
    作る必要のあるコード
    実プロダクトからの実例・その2

    View full-size slide

  103. 設計都合で
    作る必要のあるコード
    実プロダクトからの実例・その2
    必要なファイルが作られ
    正しく設定される
    https://nrslib.com/clean-architecture/

    View full-size slide

  104. ツールの副次的効果

    View full-size slide

  105. ツールを作ると
    Step 2 のトレーニングができる

    View full-size slide

  106. ツールを作ると
    Step 2 のトレーニングができる

    View full-size slide

  107. ツールを作ると
    Step 2 のトレーニングができる
    丁寧に

    View full-size slide

  108. ツールを作ると
    Step 2 のトレーニングができる
    Step 3 で学んだことが実験できる
    丁寧に

    View full-size slide

  109. ツールを作ると
    Step 2 のトレーニングができる
    Step 3 で学んだことが実験できる

    丁寧に

    View full-size slide

  110. ツールを作ると
    Step 2 のトレーニングができる
    Step 3 で学んだことが実験できる
    パターン・原則
    丁寧に

    View full-size slide

  111. ツールがないと
    皆に説明して
    設計を守ってもらう必要がある

    View full-size slide

  112. ツールがあれば
    説明不要で設計を守れる

    View full-size slide

  113. ツールを作るのが大変?

    View full-size slide

  114. 入力を解釈してデータを出力する

    View full-size slide

  115. 入力を解釈してデータを出力する
    いつもの仕事と変わりはない

    View full-size slide

  116. 作成時間
    プログラミング ツール

    View full-size slide

  117. 作成時間
    プログラミング ツール
    何度も作って早く作れるようになろう

    View full-size slide

  118. ツールが間違ってたら?

    View full-size slide

  119. ツールが間違ってたら?
    間違い方に法則がある

    View full-size slide

  120. ツールが間違ってたら?
    間違い方に法則がある
    対処のしようがある

    View full-size slide

  121. 実践の場をプロダクトだけにすると
    いつまでもトレーニングができない
    気軽にツールを作って
    トレーニングしよう
    Step 4 まとめ

    View full-size slide

  122. これらを実践して
    Step 1 : 書いて覚える
    Step 2 : 丁寧に書く
    Step 3 : 書き方を覚える
    Step 4 : プログラムをする
    プログラムを書く

    View full-size slide

  123. 君、プログラミング早いね

    View full-size slide

  124. 君、プログラミング早いね
    言われるようになろう

    View full-size slide

  125. だから他の人より大量に
    仕事任せるね!
    君、プログラミング早いね
    !?

    View full-size slide

  126. Step 1 : 書いて覚える
    Step 2 : 丁寧に書く
    Step 3 : 書き方を覚える
    Step 4 : プログラムをする
    プログラムを書く

    View full-size slide

  127. Auther nrs
    HomePage https://nrslib.com
    Twitter @nrslib

    View full-size slide