rabbit-slide-Piro-readable-code-workshop-2022-08-04-introduction 2022.08.04

Sign up to get free protection for your applications and to get access to all the features.
data/introduction.rab ADDED
@@ -0,0 +1,1228 @@
1
+ = リーダブルコードの意義と、実践の方法
2
+
3
+ : author
4
+ 結城洋志
5
+ : institution
6
+ 株式会社クリアコード
7
+ : content-source
8
+ リーダブルコード演習
9
+ : date
10
+ 2022-08-04
11
+ : allotted-time
12
+ 90m
13
+ : theme
14
+ clear-code
15
+
16
+ = 全体の流れ
17
+
18
+ * 1日目(本日)
19
+ * 予習:実行性能について
20
+ * 前半:概要と進め方の説明
21
+ * 後半:チームで実装
22
+ * 2日目(明日)
23
+ * 前半:チーム同士で実装を交換、\n
24
+    続きを実装
25
+ * 後半:全体で結果を共有
26
+
27
+ == ノート
28
+
29
+ まず最初に、全体の大まかな予定を示すが、ここはサッと流す。
30
+ 進行の進行度合いによっては、実装作業の時間を長めに取る可能性があることを伝える。
31
+
32
+
33
+ = 講師紹介
34
+
35
+ (('tag:center'))(('tag:margin-bottom * 2'))
36
+ 結城洋志(ゆうき ひろし)\n
37
+ aka Piro
38
+
39
+ * 株式会社クリアコード所属
40
+ * FirefoxやThunderbirdの\n
41
+ 法人サポートに従事
42
+ * トラブルの原因や対策を探るため\n
43
+ ソースコードを調査することが多い
44
+
45
+ == ノート
46
+
47
+ Mozilla FirefoxはWebブラウザー。
48
+ Mozilla Thunderbirdはメールクライアント。
49
+
50
+ 開発元のMozillaは、企業ユーザーからのトラブル問い合わせなどに回答するサービスは提供していない。
51
+ そのため、クリアコードのような事業者が、ある意味で勝手にサポートサービスを行っている。
52
+ クリアコードは10人未満の小規模事業者で、エンドユーザーからの電話問い合わせに対応するといったビジネスはできないので、そうではなく、企業の情報システム担当者や、大学であればシステム管理者といったレベルの方が、ある程度までは自分達で対応した上で、それでもまだ分からないことを問い合わせる(エスカレーションする)先としてテクニカルサポートを提供している。
53
+
54
+ FirefoxもThunderbirdも、自分達が作っている物ではないし、作っている人達は企業ユーザーの実際の利用の仕方を知らないので、企業ユーザー向けの技術資料といった物も特にない。
55
+ よって、問い合わせを受ける度にソースコードを読んで調査することになる。
56
+ 「リーダブルなコード」の恩恵を非常に強く受ける立場だと言える。
57
+
58
+ = アジェンダ
59
+
60
+ * ((*講座の目的*))を確認
61
+ * リーダブルコードの\n
62
+ ((*必要性*))を確認
63
+ * リーダブルコードの\n
64
+ ((*実践方法*))を紹介
65
+ * 実践方法を((*練習*))(('note:(次のコマから)'))
66
+
67
+ == ノート
68
+
69
+ サッと流す。
70
+
71
+
72
+ = 講座の目的
73
+
74
+ * ((*リーダブルコード*))を\n
75
+ ((*日常的に書く*))上での\n
76
+ ((*基礎となる考え方*))\n
77
+ を実践し、持ち帰る
78
+
79
+ == ノート
80
+
81
+ サッと流す。
82
+
83
+ = 目的でないこと
84
+
85
+ * テクニックをたくさん覚える
86
+ * 難しいプログラムを実装する
87
+ * プログラムを速く実装する
88
+ * 高性能なプログラムを実装する
89
+ * 奇抜な方法で目立つ
90
+
91
+ == ノート
92
+
93
+ サッと流す。
94
+
95
+ =  
96
+
97
+ == ノート
98
+
99
+ 講義の目的を伝えたということで、ここからは講義の本体。
100
+
101
+
102
+ = そもそもの話
103
+
104
+ * リーダブルコードはなぜ必要か
105
+ * 何の役に立つのか?
106
+
107
+ == ノート
108
+
109
+ サッと流す。
110
+
111
+ = リーダブルコードが必要な理由
112
+
113
+ * 既存のコードを読んで\n
114
+ ((*素早く内容を把握したい*))
115
+ * 既存のコードに\n
116
+ ((*素早く手を加えたい*))
117
+ * ((*開発速度*))を落としたくない
118
+
119
+ == ノート
120
+
121
+ サッと流す。
122
+
123
+ = 「速度」?
124
+
125
+ * 「読みやすさに気をつけたら\n
126
+  開発スピードが\n
127
+  落ちそう……」
128
+ * 「読みやすい書き方にしたら\n
129
+  実行スピードが\n
130
+  落ちそう……」
131
+
132
+ == ノート
133
+
134
+ サッと流す。
135
+
136
+ = むしろ「読みにくいと開発が遅くなる」
137
+
138
+ * 既存のコードを\n
139
+ 理解しにくいと……
140
+ * 修正・機能追加に時間がかかる\n
141
+ (('note:(理解しないと変更できない)'))
142
+ * 後退バグが発生しやすい\n
143
+ (('note:(理解しないまま変更すると問題発生)'))
144
+
145
+ (('tag:center'))
146
+ →((*コストがかかる*))
147
+
148
+ == ノート
149
+
150
+ 後退バグとは、今まで期待通りに動いていた物が、別の変更の影響によって、期待通りには動かなくなってしまう、という種類の不具合のこと。
151
+
152
+
153
+ = 時間が経つほど影響大
154
+
155
+ # image
156
+ # src = images/readable-code-reasonability.svg
157
+ # relative_width = 90
158
+
159
+ (('tag:center'))
160
+ (('note:(注意:グラフではなく概念図です)'))
161
+
162
+ == プロパティー
163
+
164
+ : enable-title-on-image
165
+ false
166
+
167
+ == ノート
168
+
169
+ グラフ風の図
170
+ グラフの縦軸は開発スピードで、上に行くほど爆速、下に行くほど停滞。
171
+ グラフの横軸は時間経過。
172
+
173
+ 読みやすさを考えずにコードを書き散らかすと、最初のうちは開発速度が爆速だけれども、時間経過に伴って、やがて急速に開発スピードが落ちて、進捗が悪くなってくる。
174
+ 読みやすさを考えながらコードを書くと、慣れないうちは平均的に少し開発速度が遅くなるけど、時間が経過しても、開発スピードが落ちにくく、進捗も悪くなりにくい。
175
+
176
+ これはいろんな人が言っている。
177
+ 「読みやすさ」よりもう少し広く「内部品質の高さ」「保守性の高さ」という切り口の話になるけれど、「保守性を犠牲にして開発する場合と、保守性を高く保って開発する場合に、曲線が交差する点(つまり損益分岐点)には1ヵ月くらいで到達する」と言われている。
178
+
179
+ 1ヵ月という数字の出典:
180
+ 質とスピード(2020秋100分拡大版) / Quality and Speed 2020 Autumn Edition
181
+ https://speakerdeck.com/twada/quality-and-speed-2020-autumn-edition
182
+
183
+ この事実を無視して、読みにくいコードのままで開発を続けながら〆切を守ろうとすると、徹夜や連勤といったことになって、自分の命を削ることになる。
184
+ あるいは、増員をするために人件費が増える。
185
+
186
+ = つまり
187
+
188
+ * 現実的なコストの範囲で
189
+ * 既存のコードを継続的に、\n
190
+ 無理なく改良・修正したい
191
+
192
+ (('tag:center'))
193
+ →なので、リーダブルコード
194
+
195
+ == ノート
196
+
197
+ ここはサッと流す。
198
+
199
+ = 既存のコードを読んだり手を加えたりする場面
200
+
201
+ (('note:在学中だとどんな場面がありそう?'))
202
+
203
+ == ノート
204
+
205
+ 2人くらい受講者の人の意見を聞いてみる。
206
+
207
+ = 既存のコードに手を加える場面
208
+
209
+ * ((*複数人*))で研究
210
+ * 共同研究、院生と学部生で分担
211
+ * 自分の研究を((*発展*))
212
+ * 修士で作った物を博士で使う
213
+ * 途中で((*方針修正・転換*))
214
+ * 先輩の研究を((*参照*))
215
+
216
+ == ノート
217
+
218
+ 受講者から出てこなかった物について述べる。
219
+
220
+ = 既存のコードを読む場面
221
+
222
+ * ((*論文に含まれるコード*))\n
223
+ を読むとき
224
+ * 自分が誰かの論文を読むとき
225
+ * 自分の論文が誰かに読まれるとき
226
+
227
+ (('note:コードがリーダブルだと参照されやすくなるかも……'))
228
+
229
+ == ノート
230
+
231
+ 受講者から出てこなかった物について述べる。
232
+
233
+
234
+ = 営利企業ではどうか
235
+
236
+ * 分かる人が1人しかいない→危険
237
+ * 実装者が抜けたら詰む
238
+ * 変更できてもものすごくコストがかかる
239
+
240
+ (('wait'))
241
+ (('tag:center'))
242
+ ↓\n
243
+ チームで開発し、\n
244
+ チームの誰でも作業を引き継げる\n
245
+ 状態にしておきたい
246
+
247
+ == ノート
248
+
249
+ 有名なのはスクウェアのファイナルファンタジー1~3のメインプログラマーだったナーシャ・ジベリ氏。
250
+ ファミコンの時代(30年くらい前)に「すごいテクニックを駆使して、ハードウェア性能を超えているとしか思えないような物凄い演出を実現した」ということで知られている。
251
+ 彼が書くコードは非常に難解だったそうで、バグが多かったままの発売も多かった(本人でなければデバッグできなかった)とか。
252
+
253
+ ビジネスが個人に強く依存することは、企業にとってはリスクなので、基本的には避けたいことだと言える。
254
+
255
+
256
+ =  
257
+
258
+ == ノート
259
+
260
+ リーダブルコードの意義について説明した。
261
+ ここからは、どうやればリーダブルコードを書けるか、実践できるかの話。
262
+
263
+ プログラムを勢いで書いた後で、リーダブルに書き直すのは、実際やると大変。
264
+ それよりは、日々プログラムを書くにあたって、息を吸うようにリーダブルなコードを書けることが理想。
265
+ どうすればそんな風になれるのか?
266
+
267
+
268
+ = リーダブルコードの実践
269
+
270
+ (('note:どうすれば無理なく実践できる?'))
271
+
272
+ = リーダブルコードの実践
273
+
274
+ コードを((*読む*))\n
275
+ 習慣を作る
276
+
277
+ = 読む?書くじゃないの?
278
+
279
+ * リーダブルコードを書くには\n
280
+ コードを読むことが欠かせない
281
+ * なぜ?
282
+
283
+ (('wait'))
284
+ (('tag:center'))
285
+ ↓\n
286
+ 書いている最中は\n
287
+ ((*読みやすさ・読みにくさ*))\n
288
+ を実感しにくいから
289
+
290
+ == ノート
291
+
292
+ ……という説明だけでは実感が湧かないと思うので、ここからは例を示す。
293
+
294
+ = 実際のコードで考えてみる
295
+
296
+ * Excelワークシートの生成で\n
297
+ 見出しセルを結合する関数
298
+
299
+ # image
300
+ # src = images/xlsx.png
301
+ # relative_width = 90
302
+
303
+ == プロパティー
304
+
305
+ : enable-title-on-image
306
+ false
307
+
308
+ == ノート
309
+
310
+ (自己紹介で触れた場合)自分は業務でFirefoxの法人運用のサポートをしている。
311
+ このExcelワークシートは、「Firefoxの自動更新」という設定項目に対して、選択肢が「1. 自動更新します」「2. 自動更新を停止します」の2つがある、といった要領で、企業での運用でよく求められるカスタマイズ内容とその設定方法を表にした物。お客さん向けの資料。
312
+
313
+ カスタマイズ項目の情報は、Gitで管理しやすいようにテキストファイルを原本としている。
314
+ それを元に、プログラムで自動的にExcelワークシートを作るようにしている。
315
+
316
+ これから紹介するのは、そのプログラムの一部の話。
317
+
318
+
319
+ = やりたいことを言語化してみる
320
+
321
+ 関数 項目の見出し列(B~C)のセルを結合する(行番号, 項目):
322
+ 項目の選択肢の数が1以下だったら:
323
+ 何もせず終了
324
+ そうでないなら(選択肢が2つ以上あるなら)、
325
+ 「見出し列の定義の配列」の全要素について、 要素の番号 を使って:
326
+ シートの範囲を結合(
327
+ 開始行 → 行番号,
328
+ 開始列 → 要素の番号,
329
+ 終了行 → 行番号 + 選択肢の数 - 1,
330
+ 終了列 → 要素の番号)
331
+
332
+ == ノート
333
+
334
+ これは、「こういう手順でこういうことをやろう」という擬似コード。
335
+ 「関数名」の所だけ述べてサッと先に進め、ここからは表と擬似コードを並べて説明する。
336
+
337
+ = 項目の見出し列の……
338
+
339
+ # image
340
+ # src = images/xlsx-01.png
341
+ # relative_width = 90
342
+
343
+ == プロパティー
344
+
345
+ : enable-title-on-image
346
+ false
347
+
348
+ == ノート
349
+
350
+ 「項目の見出し列」というのは、この図で赤く囲った部分のこと。
351
+
352
+ = セルを結合する
353
+
354
+ # image
355
+ # src = images/xlsx-02.png
356
+ # relative_width = 90
357
+
358
+ == プロパティー
359
+
360
+ : enable-title-on-image
361
+ false
362
+
363
+ == ノート
364
+
365
+ 「セルを結合」というのは、この図で赤く囲った部分のこと。
366
+ この図では3行分が結合されている。
367
+
368
+ = 見出し列の定義の配列
369
+
370
+ # image
371
+ # src = images/xlsx-03.png
372
+ # relative_width = 90
373
+
374
+ == プロパティー
375
+
376
+ : enable-title-on-image
377
+ false
378
+
379
+ == ノート
380
+
381
+ 「見出し列の定義の配列」は、図の右上に示したような物が別途定義されているイメージ。
382
+ この配列の要素がそれぞれB列とC列に対応している。
383
+
384
+ = シートの範囲を指定して結合
385
+
386
+ # image
387
+ # src = images/xlsx-04.png
388
+ # relative_width = 90
389
+
390
+ == プロパティー
391
+
392
+ : enable-title-on-image
393
+ false
394
+
395
+ == ノート
396
+
397
+ 「シートの範囲を結合」という部分で、行番号と列番号を使って範囲を指定し、セルを結合する。
398
+ これは、ライブラリがそのようなAPIを提供している。
399
+
400
+ ここまでの話を頭に入れた上で、実際にコードを書いたらどうなるだろうか。
401
+
402
+
403
+ = 実際のコード
404
+
405
+ def m(s, n, i):
406
+ if len(i['o']) <= 1:
407
+ return
408
+ s2 = s.s
409
+ for i2, c in enumerate(hcol):
410
+ s2.merge_range(n, i2,
411
+ n + len(i['o']) - 1, i2,
412
+ '')
413
+
414
+ == ノート
415
+
416
+ リーダブルな書き方が身に着いていない人が書くコードは、こういう感じになることがある。
417
+ Pythonだと思って読んで欲しい。
418
+ 変数名は短くて、名前に意味は無い。
419
+
420
+ = 書いた本人の視界
421
+
422
+ 関数 項目の見出し列(B~C)のセルを結合する(行番号, 項目):
423
+ 項目の選択肢の数が1以下だったら:
424
+ 何もせず終了
425
+ そうでないなら(選択肢が2つ以上あるなら)、
426
+ 「見出し列の定義の配列」の全要素について、
427
+ 要素の番号 を使って:
428
+ シートの範囲を結合(開始行番号, 開始列番号,
429
+ 開始行番号 + 選択肢の数 - 1, 終了列番号)
430
+ ----------------------------------------------------------
431
+ def m(s, n, i):
432
+ if len(i['o']) <= 1:
433
+ return
434
+ s2 = s.s
435
+ for i2, c in enumerate(hcol):
436
+ s2.merge_range(n, i2,
437
+ n + len(i['o']) - 1, i2,
438
+ '')
439
+
440
+ == ノート
441
+
442
+ 書いた本人の頭の中には、上半分のイメージがある。
443
+ それと無意識で照らし合わせているので、コードの意味が分かるという状態。
444
+ 脳が無意識に補完するので、読みにくさに気付けない
445
+ 書いてある以上の事を「読み取って」いる
446
+
447
+ では、「頭の中のイメージ」を共有していない人が見ると、どうなるか。
448
+ それを次に示す。
449
+
450
+
451
+ = 第三者の視界
452
+
453
+ def m(s, n, i):
454
+ if len(i['o']) <= 1:
455
+ return
456
+ s2 = s.s
457
+ for i2, c in enumerate(hcol):
458
+ s2.merge_range(n, i2,
459
+ n + len(i['o']) - 1, i2, '')
460
+ ------------------------------------------------
461
+ 関数 何か(何か, 何か, 何か):
462
+ 何かの数が1以下だったら:
463
+ 何もせず終了
464
+ そうでないなら、
465
+ 何か = 何かが保持している何か
466
+ 何かについて、 何か を使って:
467
+ 何かの範囲を結合(何か, 何か,
468
+ 何か + 何か - 1, 何か)
469
+
470
+ (('note:前情報無しだと、意味ある情報を読み取るのは困難……'))
471
+
472
+ == ノート
473
+
474
+ さっきの「頭の中にあるイメージ」を共有していない人が上のコードを読んでも、下に書いた程度のことしか分からない。
475
+ 「何か」ばっかりで、まるで意味が分からない。
476
+ コードを後から引き継いだ人が読んだときや、コードを書いた本人でも1年後に読み返したときには、こうなりがち。
477
+
478
+ こういう状態で「不具合を直す」「壊さないように改修する」というのは非常に難しい。
479
+ そのため、プロはこういうのを見ると悪態をつきがち。
480
+
481
+
482
+ = リーダブルなコードの場合
483
+
484
+ def try_merge_item_heading(self, row, item):
485
+ if len(item['options']) <= 1:
486
+ return
487
+ sheet = self.sheet
488
+ for index, _column in enumerate(HEADING_COLUMNS):
489
+ sheet.merge_range(row, index,
490
+ row + len(item['options']) - 1, index,
491
+ '')
492
+ -----------------------------------------------------------
493
+ 関数 項目の見出しセルを結合してみる(自分, 行, 項目):
494
+ 項目の選択肢の数が1以下だったら:
495
+ 何もせず終了
496
+ そうでないなら、
497
+ シートは自分が保持している
498
+ 見出しの列 の全項目について、 番号 を使って:
499
+ シートの、範囲を結合( 行, 番号,
500
+ 行 + 項目の選択肢の数 - 1, 番号,
501
+ '')
502
+
503
+ (('note:先の例よりは意味のある情報を読み取れるはず'))
504
+
505
+ == ノート
506
+
507
+ 変数や関数の名前が適切に付けられていると、漢文の読み下しや、ふりがなが振られた文章のように、何を書いてあるかをある程度読み取れるようになる。
508
+ 周辺のコードや、実際の出力結果と見比べて、処理の意図する所をより正確に把握していく必要はあるが、それでも、スタート地点でだいぶ助かるのは間違いない。
509
+
510
+ 結城が業務でFirefoxやThunderbirdのソースコードを調査するときも、こういう要領で未知のソースコードを読み進めていっている。
511
+ OSSのソースコードは比較的リーダブルであることが多い。
512
+ それは、様々なバックグラウンドを持つ人々が、散発的に開発に関われる状態にするにあたって、ソースとは別の詳細な設計資料などを用意したり、内容を更新し続けたりすることに、充分なコストをかけられないから。
513
+ 営利企業でもそこは変わらないが、OSSの場合は「お金をそんなにかけられない」という問題がよりシビアなので、リーダブルなコードにする圧力が働きやすい。
514
+
515
+
516
+ = よく聞く話
517
+
518
+ * 手紙を書いたら一晩寝かせろ!
519
+ * 試験の回答文は、最後に\n
520
+ もう一回読み返せ!
521
+
522
+ (('tag:center'))
523
+ ((*前提を知らない読み手*))\n
524
+ の気持ちになろう
525
+
526
+
527
+ == ノート
528
+
529
+ 毎回一晩待つ訳にもいかない。
530
+ 一晩待たずに「まっさらな頭で読む」状態に近付けるには、訓練がいる。
531
+ 「前提知識を共有していない読み手」の感覚になって読むというのは、意識して実行しないと、なかなかできない。
532
+
533
+ それを身に着けるには、実際にプログラムを「読む」癖を付けるしかない。
534
+ 読み手視点で「もっとこう書いてあったら読みやすいのに」と思えるようになれば、自分がコードを書くときもそれを意識できるようになる。はず。
535
+
536
+
537
+
538
+ =  
539
+
540
+ == ノート
541
+
542
+ リーダブルコードをどうやれば実践できるかについて、短い例を使って説明した。
543
+ 今度は、もっと実際のケースに近い「コードを読む状況」を体験してもらう。
544
+
545
+
546
+ = 実際のコードを読んでみよう
547
+
548
+ Excelのワークシートを\n
549
+ 自動生成するPythonスクリプト
550
+
551
+ # image
552
+ # src = images/xlsx.png
553
+ # relative_width = 90
554
+
555
+ == プロパティー
556
+
557
+ : enable-title-on-image
558
+ false
559
+
560
+ == ノート
561
+
562
+ 先ほど例で示した物なので、ここはサッと流す。
563
+
564
+ = ビジネス上の要件
565
+
566
+ * Firefoxを法人運用向けに\n
567
+ 設定したい
568
+ * 設定を一覧で管理したい
569
+ * 「自動更新:有効/無効」など
570
+ * 顧客ごとに設定内容を変えたい
571
+ * バージョンごとの変化を見たい
572
+ * Firefox 78からFirefox 91の間で\n
573
+ 追加された設定、廃止された設定
574
+
575
+ == ノート
576
+
577
+ ソフトウェアの法人運用、ということについて簡単に紹介する。
578
+ お客さんはFirefoxの詳細に詳しいわけでないので、「情報を一覧できる」「何がどう変化したかを把握できる」資料を用意できることにはビジネス上の価値がある。
579
+
580
+ = 元々はExcelワークシートを手作りしていた
581
+
582
+ * Gitでバージョン管理しにくい
583
+ * 同じ変更内容を複数顧客の\n
584
+ ワークシートに反映するのに\n
585
+ 手間がかかる
586
+
587
+ どうにかしたかった
588
+
589
+ == ノート
590
+
591
+ 詳しくは説明せず、とにかく面倒・ミスが発生しやすかったということを伝える。
592
+
593
+ = 自動化を図った
594
+
595
+ * 資料自体を\n
596
+ バージョン管理しやすく
597
+ * プレーンテキスト形式のソースから\n
598
+ Excelワークシートを自動生成
599
+ * 1. 設定項目の定義
600
+ * 2. 前バージョンのFirefox用の設定情報
601
+ * 3. 今バージョンのFirefox用の設定情報
602
+ * 初版はPythonに慣れた人が実装
603
+
604
+ == ノート
605
+
606
+ 作業の負担を減らすために、「項目の定義の原本」と「そのお客さんの前のバージョンのFirefox用の設定情報」と「そのお客さんの新しいバージョンのFirefox用の設定情報」の3つを組み合わせてExcelワークシートを出力するようにした。
607
+ 以上の前提を頭に入れた上で、スクリプトそのものを見てもらう。
608
+
609
+ = 読んでみよう1
610
+
611
+ build-xlsx-((*1*)).py\n
612
+ (('note:ざっと見て概要を掴んでみよう'))
613
+
614
+ == ノート
615
+
616
+ 5分くらい時間を取る。
617
+ 熟読はしなくていいので、「なんとなくこの辺はこういうことをしていそうだな」ということを読み取ってもらう。
618
+ 各自で目を通してもらった後で、講師側で概要を説明する。
619
+
620
+ 15-31:ライブラリの読み込み。
621
+ 36-76:定数の定義。
622
+ 81-98:ユーティリティ的な関数の定義。
623
+ 100-142:ヘッダ行の出力部。
624
+ 144-201:各項目の行の出力部。ここの中は詳細はあえて説明しない。後で受講者の方自身で探してもらうため。
625
+ 202:凡例を出力。
626
+ 207-245:スクリプトの実行時に、コマンドライン引数で指定された内容に基づいてファイルを探してきて読み込む。
627
+
628
+ = ポイント
629
+
630
+ * 少数の短い関数
631
+ * 分かりやすい名前付け
632
+ * 列番号はべた書き
633
+
634
+ == ノート
635
+
636
+ 書籍「リーダブルコード」に書かれていることに概ね合致している。
637
+
638
+ = 試しに探してみよう1
639
+
640
+ * 「...→...での変更」の列に\n
641
+ 「新規」と出力する条件は\n
642
+ どこで判定している?
643
+
644
+ == ノート
645
+
646
+ 正解は、173-186行目の部分。
647
+ 「廃止扱いになっていなくて(173、176)、今バージョンのFirefoxの設定の中に情報があって(178)、前バージョンのFirefoxの設定の中に情報が無い(181)」場合に、「新規」と出力される。
648
+
649
+ = 試しに読んでみよう2
650
+
651
+ build-xlsx-((*2*)).py\n
652
+ (('note:第三者が手を加えた物'))
653
+
654
+ == ノート
655
+
656
+ 5分くらい時間を取る。
657
+ 熟読はしなくていいので、「なんとなくこの辺はこういうことをしていそうだな」ということを読み取ってもらう。
658
+ 各自で目を通してもらった後で、講師側で概要を説明する。
659
+ 大部分は先のバージョンから変わっていない。
660
+ 大きく変わっているのは、以下の2つの部分。
661
+
662
+ 117-159:ヘッダ行の出力部。
663
+ 161-249:各項目の行の出力部。ここの中は詳細はあえて説明しない。後で受講者の方自身で探してもらうため。
664
+
665
+ ぱっと見で分かるとおり、各項目の行の出力部の行数がグッと増えている。
666
+
667
+ = 改修の経緯
668
+
669
+ * 要件が増えた
670
+ * 比較対象の数が可変になった
671
+ * 改修前:「Firefox 78」と\n
672
+     「Firefox 91」
673
+ * 改修後:「Firefox 78」と\n
674
+     「Firefox 91(デスクトップPC)」\n
675
+     「Firefox 91(ノートPC)」...
676
+ * 行数は約1.2倍に増加
677
+
678
+ == ノート
679
+
680
+ これはPythonに詳しくなかった講師が、要件に沿って出力を変えようとして、見よう見まねで改修を行った結果。
681
+ 元々は「前バージョンの情報」と「今バージョンの情報」だけでよかったのが、「今バージョンの情報 デスクトップPC用」「今バージョンの情報 モバイル用」といった要領で、設定のバリエーションを複数管理しないといけなくなった。
682
+
683
+
684
+ = 試しに探してみよう2
685
+
686
+ * 「検証手順書対応番号」\n
687
+ の列に出力する内容は\n
688
+ どこで決まっている?
689
+
690
+ (('note:さっきより大変なはず'))
691
+
692
+ == ノート
693
+
694
+ 正解は、211行目と220行目。
695
+ 関数の引数としてchaptersというディクショナリが渡ってきていて、項目のIDをキーとして情報を取得している。情報が無ければ「省略」という文字列を規定の内容として使う。
696
+ それを245行目で出力している。
697
+
698
+ = リーダブルだった書き方がアンリーダブルに……
699
+
700
+ * 関数の数が少ない
701
+ * 個々の関数が肥大化し、\n
702
+ 全体像の把握が困難に
703
+ * if-elif/elseでの条件分岐
704
+ * 階層が複雑化して\n
705
+ 処理の実行条件を追いにくい
706
+
707
+ == ノート
708
+
709
+ 端的に言えば、プログラムの規模と書き方のバランスが崩れてしまった。
710
+ 問題は複雑なのに、プログラムのほうは、単純な問題に適した書き方のままになっていた。
711
+ そのため、「幼児向けの絵本の中に突然、マンガのページが現れた状況」のようなアンバランスが生じている。
712
+
713
+ = 試しに読んでみよう3
714
+
715
+ build-xlsx-((*3*)).py\n
716
+ (('note:大幅に改修した物'))
717
+
718
+ == ノート
719
+
720
+ 3分ぐらい時間を取る。
721
+ 雰囲気だけ見てもらえればいい。
722
+ 各自で目を通してもらった後で、講師側で概要を説明する。
723
+
724
+ かなり大規模な変更が加わっている。
725
+ メソッド・関数の数が、先のバージョンでは11個だったのが、28個と倍以上に増えている。
726
+ 機能的にはほとんど変わっていないので、それまで11個のメソッドに詰め込まれていた意図を、慎重に解きほぐして、28個の細かいメソッドに分けた、ということになる。
727
+
728
+ 98-128:列の定義が定数になった。各列について、「ヘッダ行に出る名前、列の幅、列に入れるべき内容を表すキーの文字列、列の表示スタイル」を保持している。これは、列の順番を入れ換えたり列の数を増減させたりするのを楽にするための設計変更。
729
+ 133-202:ConfigurationSheetクラス。Excelワークシート全体の出力に関わるユーティリティ的な役割をする。ヘッダ行の出力も担当する。
730
+ 204-351:ConfigurationRowクラス。各設定項目の行の出力を担当する。
731
+ 353-393:元のバージョンでヘッダ行や各項目の行の出力部だったメインループ。2つのクラスのインスタンスを作って、それぞれのメソッドを呼ぶだけになっている。
732
+
733
+ クラスの詳細は説明せずに流す。
734
+
735
+
736
+ = 改修の要旨
737
+
738
+ * 複雑化した問題に合わせて「リーダブル」の基準を変えた\n
739
+ (('note:何がリーダブルかは状況に依存する'))
740
+ * 定数を使う部分を増やした
741
+ * メソッド・変数のスコープを小さく
742
+ * コードの行数は約1.5倍に増加
743
+
744
+ = 試しに探してみよう3
745
+
746
+ * 「検証済み」という列を\n
747
+ 「検証手順書対応番号」\n
748
+ の列の右隣に追加したい\n
749
+ (セルの内容は空でよい)が、\n
750
+ どこに手を入れればいい?
751
+
752
+ \n
753
+ \n
754
+ \n
755
+
756
+ == ノート
757
+
758
+ いきなりこう言われても困ると思うけれど、コツが分かっていると意外とスルッと調べられる。
759
+
760
+ まず、ヘッダ行の「検証手順書対応番号」を探す。
761
+ これは121行目に書かれていて、VERIFICATION_COLUMNSという定数名から、どうやら検証に関わる列の定義らしいと分かる。
762
+
763
+ 今度は「VERIFICATION_COLUMNS」を探す。
764
+ という風に、芋蔓式にメソッドの呼び出し関係を辿っていくのが基本。
765
+ ポイントは「全体はそんなに読まない」ということ。
766
+
767
+
768
+ = 試しに探してみよう3
769
+
770
+ * 「検証済み」という列を\n
771
+ 「検証手順書対応番号」\n
772
+ の列の右隣に追加したい\n
773
+ (セルの内容は空でよい)が、\n
774
+ どこに手を入れればいい?
775
+ * →((*探し方のコツ*))がある
776
+ * 改修前:((*全体*))を読んで覚えて探す
777
+ * 改修後:((*必要な部分だけ*))読んで探す
778
+
779
+ == ノート
780
+
781
+ 講師が実際にやっている様子を見てもらう。
782
+
783
+ 「VERIFICATION_COLUMNS」という定数を参照している箇所を探す。
784
+ 171行目の「self._write_header_columns(VERIFICATION_COLUMNS, column_offset)」と、146行目の「self._write_item_columns(VERIFICATION_COLUMNS, format, column_offset)」で参照されている。
785
+ それぞれのメソッド名から、ヘッダ行と、設定項目のそれぞれについて、列を出力する物らしいと推測できる。
786
+
787
+ _write_header_columns の定義を見てみると、174行目に書かれている。
788
+ 渡されたcolumnsというのが、VERIFICATION_COLUMNSに対応するようだと分かる。
789
+ 処理としては、これをenumerateに渡して、全項目をループで処理し、columnsの要素の、ラベル文字列の部分を出力している。
790
+
791
+ _write_item_columns の定義を見てみると、252行目に書かれている。
792
+ こちらも、渡されたcolumnsというのが、VERIFICATION_COLUMNSに対応するようだと分かる。
793
+ こちらもやはり、columnsをenumerateに渡して、全項目をループで処理しており、その中で、_get_column_value という別のメソッドを呼んでいる。
794
+
795
+ _get_column_valueの定義を見てみると、258行目に書かれている。
796
+ keyで処理を振り分けて、選択肢の番号やタイトル文字列などを返すようになっているみたい。
797
+ 引数で指定されたものがifとelifでのマッチング対象になっていなかった場合、空の文字列を列の内容として返却している。
798
+
799
+ 以上の話を総合すると、、VERIFICATION_COLUMNSという定数で定義されている列の定義を1つ増やせば、「検証手順書対応番号」列の隣に「検証済み」という列を増やせる、と考えられる。
800
+
801
+ ある情報を見つけたら関連語句が分かり、今度はその関連語句で検索する、ということを繰り返していくのが基本戦略になる。
802
+
803
+
804
+ = つまり、ここでの「リーダブル」とは
805
+
806
+ * 全体を一望するのが難しい\n
807
+ 複雑なコードについて
808
+ * 一度に読むことは諦めて
809
+ * 必要な部分だけ読む
810
+
811
+ という前提での「読みやすい」
812
+
813
+ == ノート
814
+
815
+ 一つのプロダクトにずっと専任者がかかりきりではいられない。
816
+ 詳しい事情を把握してない人も関わらないといけない。
817
+ という状況では、こういう方向になってくる。
818
+ これはOSSの開発プロジェクトでよく見られる傾向。
819
+
820
+ = ふつうのOSS開発者の日常
821
+
822
+ * ((*× イメージ*))
823
+ * コード全体を詳細・完璧に把握
824
+ * ノールックで修正
825
+ * ((*◯ 実態*))
826
+ * 全体像はボンヤリ把握
827
+ * 都度必要な部分を読み直して\n
828
+ 調べ直しながら修正
829
+
830
+ == ノート
831
+
832
+ OSSの開発では、今の説明のように、その都度ソースコードを調べながら作業することが多い。
833
+
834
+
835
+ = 自分で書いたコードでも、覚えてないのが当たり前!
836
+
837
+ * ((*覚えておかなくていいように*))\n
838
+ ((*する*))のがリーダブルコード
839
+ * 書籍「リーダブルコード」\n
840
+ 巻末の「解説」も読んでみて!
841
+
842
+ == ノート
843
+
844
+ そういうやり方で作業しやすいことを「リーダブルである」と言っている、とも言える。
845
+ 今述べたようなことは、そのまま書籍「リーダブルコード」の巻末の「解説」に書かれている。
846
+
847
+ =  
848
+
849
+ == ノート
850
+
851
+ さて、リーダブルコードをどうやれば実践できるかについて、実際の例を使って説明した。
852
+
853
+
854
+ = リーダブルコードの実践
855
+
856
+ * 別の切り口でも考えてみよう
857
+ * なぜ((*アンリーダブル化する*))\n
858
+ のか?
859
+
860
+ == ノート
861
+
862
+ 今度は、少し切り口を変えてリーダブルコードの背景を説明してみる。
863
+ ベテランでもアンリーダブルコードを書いてしまうことはある。
864
+ なので、危険な兆候に早めに気付けるようになることが大事。
865
+
866
+ = アンリーダブル化する原因
867
+
868
+ (('note:考えてみよう'))
869
+
870
+ == ノート
871
+
872
+ 2人くらい受講者の人の意見を聞いてみる。
873
+
874
+ = アンリーダブル化する原因(例)
875
+
876
+ * コードが((*状況の変化*))に\n
877
+ 追従できていない
878
+ * コードの規模や前提は\n
879
+ ((*徐々に変化*))する
880
+ * 気付かないうちに進行する!
881
+
882
+ == ノート
883
+
884
+ ジワジワ変わる物には気付きにくい。
885
+ ただ、気付いていても放置してしまいがちという部分もある。
886
+
887
+
888
+ = 状況の変化に気付けても、追従できない……
889
+
890
+ * 既存のコードを((*書き直せない*))
891
+ * 書き直して動かなくなるのが怖い
892
+ * 「とりあえず動くように」で焦って\n
893
+ 「書き足す」一辺倒になる
894
+ * 冷静に見直す余裕がない
895
+
896
+ (('tag:center'))
897
+ →良くない兆候を見て見ぬフリ
898
+
899
+ == ノート
900
+
901
+ 他の人が元のコードを書いてくれた物を引き継いだとか、既存のプログラムからコードをコピー&ペーストしてきた、といったケースで起こりがち。
902
+ 既存のコードを書き換えることに強い恐怖が働く。
903
+
904
+ 講師自身のケースでは、Pythonに不慣れだった。
905
+ if-elseくらいは分かるので、その範囲で頑張ってなんとかしようとしてしまった。
906
+ それでいびつな状態になってしまった。
907
+
908
+
909
+ = ベテランはどうする?
910
+
911
+ * 悪い((*兆候*))を見逃さない
912
+ * 既存のコードを\n
913
+ ((*書き直すのをためらわない*))
914
+ * 書き直さない方が、\n
915
+ ((*後で痛い目を見る*))と知っている
916
+
917
+ == ノート
918
+
919
+ 自分には当初できなかったけれど、理想的なベテランのITエンジニアだったらどうしていただろう?
920
+ という問いを立てたときの講師の回答は、こう。
921
+
922
+
923
+ = 悪い兆候に敏感になろう
924
+
925
+ * ((*マメに読み返している*))と、\n
926
+ アンリーダブルのなり始めに\n
927
+ すぐ気付ける
928
+ * 「アンリーダブルに\n
929
+  なり始めてる……?」\n
930
+ →書き直しを考えるタイミング\n
931
+ (('note:後回しにしない!'))\n
932
+ (('note:(すぐやらないなら、せめてコメントを残す)'))
933
+
934
+ == ノート
935
+
936
+ ベテランだってほとんどの場合は物凄い神業なんか持っていない。
937
+ 読み返してみて「アンリーダブルになってるな」と気付いた時に、そこから目をそらさないようにしてるだけ。
938
+
939
+
940
+ = ためらわずに書き直せるようにするために(1)
941
+
942
+ * わけが分からないままにしない
943
+ * ((*自分が今何をしているか*))を\n
944
+ 正しく理解するよう努めてる
945
+ * 不安が少しでも生じたら\n
946
+ 立ち止まって考える
947
+
948
+ == ノート
949
+
950
+ これは抽象的な心構えの話。
951
+ なんといっても、きちんと問題と向き合って取り組むのが、ITエンジニアとしての真っ当なやり方。
952
+ 「急がば回れ」ということわざの通り。
953
+
954
+ = ためらわずに書き直せるようにするために(2)
955
+
956
+ * 便利な道具で補う
957
+ * 自動テストで((*結果の同値性*))を保証\n
958
+ (('note:自動テストは大事!'))
959
+ * Gitで((*いつでも巻き戻せる*))安心感\n
960
+ (('note:バージョン管理システムは大事!'))
961
+ * ((*コードフォーマッター*))で\n
962
+ 安全にコードを整形\n
963
+ (('note:「リーダブルにする」はある程度自動化できる'))
964
+
965
+ == ノート
966
+
967
+ 心構えだけでなく、工夫も大事。
968
+ 自力で何でもできれば格好いいけど、残念だけどそうはできないのが自分で、道具を使えばそこを補える、と考えて割り切ってる。
969
+
970
+ = 早め早めのリカバリー
971
+
972
+ * なるべく早くリーダブルに直す
973
+ * 書く→直す の((*サイクルを回す*))
974
+
975
+ == ノート
976
+
977
+ 手遅れの状況にハマってしまったら、とりあえず頭を切り替えて、なんとか力業で乗り切るしかない。
978
+ せめて、乗り切った後で、次に同じことで焦らなくて済むように備えよう。
979
+ サイクルが極限まで速まったのが、「最初からリーダブルに書ける」状態。
980
+
981
+
982
+ = 参考:良い分割の仕方(1/2)
983
+
984
+ * "良いコードとは何か - エンジニア新卒研修 スライド公開"
985
+ * ((*https://note.com/cyberz_cto/n/n26f535d6c575#E0aBe*))
986
+ * サイバーエージェント社の新卒研修の資料
987
+ * 「凝集度と結合度」が参考になる
988
+
989
+
990
+ == ノート
991
+
992
+ 「リーダブルに直す」方法として、関数やモジュールを小さく分割することがおすすめされがちだが、どう分けたら良いかで悩む人は多い。
993
+ 講師もよく悩む。
994
+
995
+ 参考としてサイバーエージェント社の新卒研修の資料を紹介する。
996
+ 「分割した後のコードがこうなっているのはまずい・こうなっているとよい」という例が示されている。
997
+
998
+
999
+ = 参考:良い分割の仕方(2/2)
1000
+
1001
+ * 良いコード/悪いコードで学ぶ\n
1002
+ 設計入門\n
1003
+ ―保守しやすい 成長し続ける\n
1004
+  コードの書き方\n
1005
+ * 著:仙塲 大也
1006
+ * 刊:技術評論社
1007
+ * 通称「ミノ駆動本」
1008
+
1009
+
1010
+
1011
+
1012
+
1013
+ =  
1014
+
1015
+ == ノート
1016
+
1017
+ リーダブルなコードの実践例を紹介し、アンリーダブルなコードが生まれる経緯を考察した。
1018
+ ここからは、より深く理解してもらうための演習の説明。
1019
+
1020
+
1021
+ = リーダブルコードの練習
1022
+
1023
+ * コードを書く→読む→直す\n
1024
+ のサイクルを体験しよう
1025
+
1026
+ = チームで開発してみよう
1027
+
1028
+ * まずは、チームの中で\n
1029
+ コードを読みあってみる\n
1030
+ * 自分で書いた物を読むよりは\n
1031
+ 客観的に読みやすい
1032
+ * 交代で書く / 感想を述べ合う
1033
+
1034
+ == ノート
1035
+
1036
+ 書かれたコードを他のチームメイトは見て読むことになる。
1037
+ 読んで引っかかりを覚えたら、リーダブルに直す機会になる。
1038
+
1039
+
1040
+ = 注意点
1041
+
1042
+ * なるべくポジティブな提案を
1043
+ * ◯「この書き方はリーダブルだね」
1044
+ * ×「これはアンリーダブルだね」\n
1045
+ (('note:(粗をあげつらうだけなら誰でもできる)'))
1046
+ * ◯「こうした方がリーダブルじゃない?」
1047
+ * チーム内で皆が納得できる\n
1048
+ リーダブルの基準を見つけよう
1049
+ * 既存の基準をベースにするのはアリ\n
1050
+ (('note:(例:書籍「リーダブルコード」の内容など)'))
1051
+
1052
+ = 明日の後半戦
1053
+
1054
+ * (進捗次第では、\n
1055
+  今日の後半の続きをやる)
1056
+
1057
+ = 明日の後半戦
1058
+
1059
+ * 他のチームが\n
1060
+ 書いたコードを読んでみる\n
1061
+ (('note:(自分のチームの物を読むよりは客観的に読みやすい)'))
1062
+ * チーム間で感想を共有
1063
+ * より多くの人が納得できる\n
1064
+ リーダブルの基準を見つけよう
1065
+ * 開発を継続してみる
1066
+
1067
+ = 最終目標:コードを読む文化を持ち帰ろう
1068
+
1069
+ * 「コードは読む物」\n
1070
+ という認識を持つ
1071
+ * 自分だけからチームへ
1072
+ * チームだけから全体へ
1073
+
1074
+ = この後の予定まとめ:本日
1075
+
1076
+ * 本日の後半:課題を実装
1077
+ * リーダブルコードを書く体験
1078
+
1079
+ = この後の予定まとめ:明日
1080
+
1081
+ * 明日の前半:実装チェンジ\n
1082
+       →開発継続
1083
+ * 既存のコードを読んで変更する体験
1084
+ * 明日の後半:ふりかえり
1085
+ * リーダブルコードの基準を\n
1086
+ 共有する体験
1087
+
1088
+ = おさらい
1089
+
1090
+ * 講座の目的?
1091
+ * リーダブルコードの必要性?
1092
+ * 講座でやること?
1093
+
1094
+ = 講座の目的
1095
+
1096
+ * ((*リーダブルコード*))を\n
1097
+ ((*日常的に書く*))上での\n
1098
+ ((*基礎となる考え方*))\n
1099
+ を実践し、持ち帰る
1100
+
1101
+ = リーダブルコードが必要な理由
1102
+
1103
+ * 既存のコードを読んで\n
1104
+ ((*素早く内容を把握したい*))
1105
+ * 既存のコードに\n
1106
+ ((*素早く手を加えたい*))
1107
+ * ((*開発速度*))を落としたくない
1108
+
1109
+ = 変更コストと開発速度
1110
+
1111
+ # image
1112
+ # src = images/readable-code-reasonability.svg
1113
+ # relative_width = 90
1114
+
1115
+ == プロパティー
1116
+
1117
+ : enable-title-on-image
1118
+ false
1119
+
1120
+ == ノート
1121
+
1122
+ 「リーダブルさより実装スピードを優先」と思って開発すると、すぐに開発スピードが落ちる
1123
+ 「リーダブルさを大事にしながら実装を進める」と思って開発すると、開発スピードが落ちにくい。
1124
+ コードの読みやすさは中・長期的な視点で効いてくる。
1125
+
1126
+
1127
+ = 講座でやること
1128
+
1129
+ * コードを読む文化作りの体験
1130
+ * チームの中でコードを\n
1131
+ 読みあってみる
1132
+ * チーム内でリーダブルコードの\n
1133
+ 基準を共有する
1134
+ * 他のチームともリーダブルコードの\n
1135
+ 基準を共有する
1136
+
1137
+ = ここまでの説明
1138
+
1139
+ 腑に落ちましたか?
1140
+
1141
+
1142
+ =  
1143
+
1144
+ (('note:ここから先は、「まとめと次のステップ」の内容です'))
1145
+
1146
+ = 次のステップ
1147
+
1148
+ * もっともっとコードを読もう!
1149
+
1150
+ = 次のステップの例1
1151
+
1152
+ * ゼミの他の人や\n
1153
+ 同じ学部の人が書いたコードを\n
1154
+ 読んでみよう
1155
+ * 研究の合間に
1156
+ * 論文執筆の合間に
1157
+
1158
+ = 次のステップの例2
1159
+
1160
+ * 使うライブラリやツールの\n
1161
+ コードを読んでみよう
1162
+ * OSSのコードは\n
1163
+ リーダブルであることが多い
1164
+ * 「こういう結果を得るには\n
1165
+  こう書くんだ!」と\n
1166
+ 実感を伴って読める
1167
+
1168
+ = 次のステップの例3
1169
+
1170
+ * コミット単位で読んでみよう
1171
+ * コード全体ではなく差分を読む
1172
+ * コードの中身・設計の仕方ではなく\n
1173
+ コードの書き方・開発の仕方に注目する
1174
+ * リーダブルなコードを\n
1175
+ 見つけるのに使いやすい
1176
+
1177
+ = コードを読む文化を後輩につなごう
1178
+
1179
+ * ゼミの後輩にも「コードを読む\n
1180
+ 文化」に馴染んでもらおう
1181
+ * 皆さんが書いたコードが\n
1182
+ ((*資産として受け継がれる*))
1183
+ * ((*口頭での詳しい説明なし*))でも\n
1184
+ コードを読んで伝わる情報が増える\n
1185
+ (('note:後輩に手取り足取り教えずに済む→先輩も楽になる'))
1186
+
1187
+ = 新しい人との関わりが、リーダブルの基準の見直し機会になる
1188
+
1189
+ (('tag:center'))
1190
+ これまで大事にしてきたことを\n
1191
+ 後輩と共有\n
1192
+
1193
+
1194
+ * 「もっとこっちの方が\n
1195
+  リーダブルでは?」
1196
+ * リーダブル基準の見直しのよい機会
1197
+
1198
+ = サポート
1199
+
1200
+ * 今日の資料はすべて再利用可能\n
1201
+ (('note:https://github.com/clear-code/readable-code-workshop/tree/master/20220804'))\n
1202
+ (('note:( https://slide.rabbit-shocker.org/authors/Piro/ )'))
1203
+ * 迷ったら読み返せる
1204
+
1205
+ = クリアコード
1206
+
1207
+ * クリアなコードが大切
1208
+ * クリア == clear == 意図が明確
1209
+ * クリアなコードはリーダブルコード
1210
+
1211
+ (('tag:center'))
1212
+ みなさんのコーディングライフで\n
1213
+ リーダブルコードが当たり前に\n
1214
+ なることを応援します!
1215
+
1216
+
1217
+ = 課題(宿題)
1218
+
1219
+ * 過去作成した何らかの\n
1220
+ プログラムについて
1221
+ * ((*リーダブルになるよう編集*))する
1222
+ * リーダブルにした点を\n
1223
+ 1つ以上((*メモに書き出す*))
1224
+ * 以下の3つを併せて提出する
1225
+ * ((*変更前*))のプログラム
1226
+ * ((*変更後*))のプログラム
1227
+ * リーダブルにした点の((*メモ*))
1228
+