#1 はじめてのIT勉強会 in 札幌(2024) - リーダブルコードを読んでみよう①

Transcript

1. リーダブルコードのお話 はじめてのIT勉強会(2024) in 札幌 #1 24.04.25
2. 自己紹介
3. 自己紹介 なまえ せんもん おしごと 募集中 特になし 「はじめて」の応援
4. Q. はじめてのIT勉強会とは
5. あらゆる「はじめて」を応援する気軽な勉強会 毎月定期開催される勉強会 札幌：第4木曜 19:00〜 & 仙台：第4水曜 19:00〜 より専門的な勉強会や技術に詳しい人の情報を得るための 練習ができる勉強会
6. 母語・母国語での 文書、読みやすく作れますか
7. Q1. どちらが「読みやすい」と感じますか A はじめてのIT勉強会は毎週第4木曜日に定 期開催する初心者を応援する勉強会です。 はじめてのことに気軽に挑戦できる場所と して2017年4月に仙台で初開催、7年を経 て、2024年4月から札幌での開催に繋がり ました。仙台では第4水曜日に開催してい ますので遊びに来てください。札幌開催 も、みなさま応援よろしくおねがいしま す。 B はじめてのIT勉強会は毎週第4木曜日に定 期開催する初心者を応援する勉強会です。 はじめてのことに気軽に挑戦できる場所と して2017年4月に仙台で初開催、7年を経 て、2024年4月から札幌での開催に繋がり ました。 仙台では第4水曜日に開催していますので 遊びにきてください。 札幌開催も、みなさま応援よろしくお願い します。
8. Q2. 書き手が「伝えたいこと」、一瞬でわかりますか とある場所を伝えたい 北海道の道庁所在地で、ビールやスキー場 に加え、巨大な雪や氷の彫刻が呼び物の毎 年恒例の雪まつりで有名です。 ビール醸造の歴史をたどるビール博物館に はビアガーデンがあり、テイスティングも できます。 1972 年冬季オリンピックのスキー場や ジャンプ台が市のあちこちに点在してお り、近くには有名なスキー場のニセコもあ ります。
9. Q2. 書き手が「伝えたいこと」、一瞬でわかりますか とある場所を伝えたい 北海道の道庁所在地で、ビールやスキー場 に加え、巨大な雪や氷の彫刻が呼び物の毎 年恒例の雪まつりで有名です。 ビール醸造の歴史をたどるビール博物館に はビアガーデンがあり、テイスティングも できます。 1972 年冬季オリンピックのスキー場や ジャンプ台が市のあちこちに点在してお り、近くには有名なスキー場のニセコもあ ります。 札幌市
10. Q2. 書き手が「伝えたいこと」、一瞬でわかりますか ただの問題文 北海道の道庁所在地で、ビールやスキー場 に加え、巨大な雪や氷の彫刻が呼び物の毎 年恒例の雪まつりで有名です。 ビール醸造の歴史をたどるビール博物館に はビアガーデンがあり、テイスティングも できます。 1972 年冬季オリンピックのスキー場や ジャンプ台が市のあちこちに点在してお り、近くには有名なスキー場のニセコもあ ります。 札幌市
11. Q3. 書き手が「伝えたいこと」、一瞬でわかりますか 確認お願いします
12. Q3. 書き手が「伝えたいこと」、一瞬でわかりますか 確認お願いします 読んでおいてください 指摘をください 調査して下さい
13. Q3. 書き手が「伝えたいこと」、一瞬でわかりますか 確認 抽象度が高く 文脈で意味がかわる
14. 遠回りしていますが、、
15. 文書やコードを書くときは 常に「人が読むこと」を意識する
16. 文書やコードを書くときは 他の人が最短時間で理解できる ように意識すると良いというお話
17. 「読めるコード」を書くために
18. 「伝わるコード」を書くために
19. リーダブルコードを読んでみよう
20. リーダブルコードを読んでみよう 伝わるコードとは？ 伝わるコードを書く意義は？ 伝わらないコードはなにが危険？
21. リーダブルコードを読んでみよう • 1章 理解しやすいコード • 2章 名前に情報を詰め込む • 3章 誤解されない名前 • 4章 美しさ • 5章 コメントすべきことを知る • 6章 コメントは正確で簡潔に • 7章 制御フローを読みやすくする
22. リーダブルコードを読んでみよう • 8章 巨大な式を分割する • 9章 変数と読みやすさ • 10章 無関係の下位問題を抽出する • 11章 一度に1つのことを • 12章 コードに思いを込める • 13章 短いコードを書く • 14章 テストと読みやすさ • 15章 「分／時間カウンタ」を 　　　設計・実装する
23. リーダブルコードを読んでみよう • 1章 理解しやすいコード • 2章 名前に情報を詰め込む • 3章 誤解されない名前 • 4章 美しさ • 5章 コメントすべきことを知る • 6章 コメントは正確で簡潔に • 7章 制御フローを読みやすくする
24. 伝わるコードを書く目的
25. 価値のあるコードを書くため
26. 価値のあるコードとは
27. 価値のあるコード = 実際に動くコード？
28. 価値のあるコード = 実際に動くコード？ 利用者の視点では 価値が高い!
29. 価値のあるコード = 実際に動くコード？ 利用者の視点では 価値が高い! 開発者の視点では 価値が低い...
30. 開発者の視点で考えていくと..
31. コーディング中の よくある悩みと現実（主観）
32. コードを書く時間よりも、 コードを読む時間の方が多い
33. • コードが汚い • 構造が理解できない • ドキュメントが未整備 • etc… コードの価値が低い状態とは...
34. ストレスとの戦い コードの価値が低いと...
35. • 不具合の修正ができない • 機能追加がスムースにできない • 新規参入メンバーが理解できない • 運用コストが雪だるま式に... コードの価値が低いと...
36. 技術的負債との戦い コードの価値が低い状態は...
37. 価値のあるコードとは
38. リーダブルコードを読んでみよう 正しく動作するコード
39. リーダブルコードを読んでみよう 正しく動作するコード 容易かつ正確に理解できるコード
40. リーダブルコードを読んでみよう 正しく動作するコード 容易かつ正確に理解できるコード 修正や拡張が容易なコード
41. 価値のあるコードを 書くための手法
42. 価値のあるコードを書くための手法 • テスト駆動開発（TDD） • アジャイル開発 ◦ スクラム ◦ XP • デザインパターン • 継続的インテグレーション（CI/CD） • 構造化プログラミング • オブジェクト指向 • etc...
43. 価値のあるコードを書くための手法 • テスト駆動開発（TDD） • アジャイル開発 ◦ スクラム ◦ XP • デザインパターン • 継続的インテグレーション（CI/CD） • 構造化プログラミング • オブジェクト指向 • etc... 超優秀な先人たちの叡智
44. 叡智の中で、 今日から誰でも実践できる手法
45. リーダブルコード
46. リーダブルコード 伝わるコードとは？ 伝わるコードを書く意義は？ 伝わらないコードはなにが危険？
47. 伝わりやすいコードを 書くための指針①
48. 価値のあるコードを書くための指針 まずは、 名前を改善しよう！
49. 汎用的な名前は避けましょう get, set, str, text, list, map, result, buf, temp, obj1, obj2, size, date, hoge, foo 意 味 を 明 確 に
50. 汎用的な名前は避けましょう get, set, str, text, list, map, result, buf, temp, obj1, obj2, size, date, hoge, foo 意 味 を 明 確 に
51. /** タイマークラス */ class Timer { void stop(); } プロダクトチームは、「タイマーアプリケーション」を開発していると想定してください 上記の、void stop() が提供している『機能』を予測してみてください！
52. /** タイマークラス */ class Timer { void stop(); } /** タイマークラス（改善案） */ class Timer { void kill(); void pause(); // resume() で処理を再開 } 終了するか、一時停止するか、 少しだけ『機能』の意図がより明確に 伝わるように書き換えてみました
53. 価値のあるコードを書くための指針 明瞭な言葉を使おう！
54. 伝わりやすいコードを 書くための指針②
55. 価値のあるコードを書くための指針 次に、 短い名前に気をつける！
56. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // 左右の値を入れ替える if( right < left ) { int tmp = right; right = left; left = tmp; }
57. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // 左右の値を入れ替える if( right < left ) { int tmp = right; right = left; left = tmp; } tmp は生存期間が短い 一時的な変数であることが 伝わるのでok
58. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // ユーザー情報の文字列化 String tmp = user.name(); tmp += “ “ + user.email(); … … … template.put(“user_info”, tmp); template.put(“server_info”, tmp);
59. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // ユーザー情報の文字列化 String tmp = user.name(); tmp += “ “ + user.email(); … … … template.put(“user_info”, tmp); template.put(“server_info”, tmp); 実装者が意図していない可能性のあるプログラムコードを 見つけてください（もしかしたらバグかも、という箇所です）
60. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // ユーザー情報の文字列化 String tmp = user.name(); tmp += “ “ + user.email(); … … … template.put(“user_info”, tmp); template.put(“server_info”, tmp); tmp は「ユーザー情報の文字列」なので、 server_info と関連付けることは違和感が....
61. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // ユーザー情報の文字列化 String tmp = user.name(); tmp += “ “ + user.email(); … … … template.put(“user_info”, tmp); template.put(“server_info”, tmp); tmp の生存期間が長い コードが長くなればなるほど、 後半では、tmp の存在が希薄になる
62. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // ユーザー情報の文字列化 String user_info = user.name(); tmp += “ “ + user.email(); … … … template.put(“user_info”, user_info); template.put(“server_info”, tmp);
63. スコープ（範囲）を意識する 短 い 名 前 に は 注 意 // ユーザー情報の文字列化 String user_info = user.name(); tmp += “ “ + user.email(); … … … template.put(“user_info”, user_info); template.put(“server_info”, tmp); 『変数』の意図がより明確に 伝わるように書き換えると Good！
64. 価値のあるコードを書くための指針 短い変数名を採用する場合は、 生存期間に注意しよう！
65. ループインデックスについても考える 短 い 名 前 に は 注 意 for(int i = 0; i < clubs.size(); i++){ for(int j = 0; j < clubs[i].members.size(); j++){ for(int k = 0; k < users.size(); k++){ if(clubs[i].members[k] == users[j]) System.out.plintln(“user[” + j + ... } } }
66. ループインデックスについても考える 短 い 名 前 に は 注 意 for(int i = 0; i < clubs.size(); i++){ for(int j = 0; j < clubs[i].members.size(); j++){ for(int k = 0; k < users.size(); k++){ if(clubs[i].members[k] == users[j]) System.out.plintln(“user[” + j + ... } } } users のインデックスは 本来、”k” であるが、取り違いが発生
67. 拡張for文で書き換えてみると.. 短 い 名 前 に は 注 意 for(Club club : clubs){ for(User member : club.members){ for(User user : users){ if(member == user) System.out.plintln(“user[” + user + ... } } }
68. 価値のあるコードを書くための指針 ループインデックスも明瞭な 命名をすることを意識しよう！ 拡張for分の利用なども検討余地あり！
69. 伝わりやすいコードを 書くための指針③
70. 価値のあるコードを書くための指針 より具体的な名前を採用する！
71. let endPointUrl = ‘hoge.com’; let replaceUrl = ‘fuga.com’; function replaceURL() { newURL = endPointUrl.toReplace(replaceUrl); } Q.雰囲気でコードの説明をしてみてください
72. Q.雰囲気でコードの説明をしてみてください let endPointUrl = ‘hoge.com’; let accessibleUrl = ‘fuga.com’; function replaceURL() { newURL = endPointUrl.toReplace(accessibleUrl); }
73. let endPointUrl = ‘hoge.com’; let replaceUrl = ‘fuga.com’; function replaceURL() { newURL = endPointUrl.toReplace(replaceUrl); } let endPointUrl = ‘hoge.com’; let accessibleUrl = ‘fuga.com’; function replaceURL() { newURL = endPointUrl.toReplace(accessibleUrl); } 処理に引っ張られた命名となっている 目的を加味した命名となっている
74. 価値のあるコードを書くための指針 処理の目的に沿った 具体的な命名を考えましょう！
75. 伝わりやすいコードを 書くための指針（その他）
76. 伝わりやすいコードを書くための指針（その他） 名前に単位を付与する startMs, elapsedMs, etc.. 名前に属性を付与する hasedPassword, plaintextPassword, etc.. 長過ぎる名前を避ける newNavigationControllerWrappingView ControllerForDataSourceOfClass() コーディングスタイルを 守る コーディング規約を読み、守る
77. まとめ
78. チームがルールを守ると読みやすくなる みんなが知っている ルールがあることで読みやすくなる • 段落を分ける • 句読点をつける • 行間を詰めすぎない • 字下げをする • etc… B はじめてのIT勉強会は毎週第4木曜日に定 期開催する初心者を応援する勉強会です。 はじめてのことに気軽に挑戦できる場所と して2017年4月に仙台で初開催、7年を経 て、2024年4月から札幌での開催に繋がり ました。 仙台では第4水曜日に開催していますので 遊びにきてください。 札幌開催も、みなさま応援よろしくお願い します。
79. 「単語が持つ情報」を意識すると読みやすくなる とある場所を伝えたい 北海道の道庁所在地で、ビールやスキー場 に加え、巨大な雪や氷の彫刻が呼び物の毎 年恒例の雪まつりで有名です。 ビール醸造の歴史をたどるビール博物館に はビアガーデンがあり、テイスティングも できます。 1972 年冬季オリンピックのスキー場や ジャンプ台が市のあちこちに点在してお り、近くには有名なスキー場のニセコもあ ります。 札幌市
80. 確認お願いします 読んでおいてください 指摘をください 調査して下さい 「目的が伝わる」と読みやすくなる
81. まとめ 価値のあるコード（伝わるコード）を書くための指針 • 明確な言葉、明瞭な単語を選ぶ • 汎用的な名前を避ける • 具体的な命名を行い、包括的にしすぎない • 大切な情報、重要な情報を追加する • スコープを意識した命名をする • 大文字やアンダースコアの使い方など、コーディングルールを守る
82. さいごに（一言）
83. 明日の自分は他人です 伝わりやすいコードは自分を救う
84. 次回の宣伝
85. ありがとうございました！