Text
Page: 1
まとめと次のステップ
結城洋志
株式会社クリアコード
実践リーダブルコード
2022-11-02
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 2
おさらい
✓ 講座の目的？
✓ リーダブルコードの必要性？
✓ 講座でやったこと？
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 3
講座の目的
✓ 自分の開発チームに
✓ リーダブルなコードが
当たり前な文化の作り方を
✓ 持ち帰る
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 4
リーダブルコードの必要性
✓ 既存のコードを読んで
素早く内容を把握するため
✓ 既存のコードに
手を加える・続きを書くときの
効率を落とさないため
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 5
変更コストと開発速度
開発
速度
リーダブルな場合
開発速度が落ちにくい
リーダブルじゃない場合
開発速度が落ちやすい
時間
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 6
文化の作り方の流れ（1）
✓ まず自分が
コードを読む人になる
✓ よいコードを共有し、
リーダブルコードの基準を作る
✓ 「読む人」が
読みやすいなら
リーダブル
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 7
文化の作り方の流れ（2）
✓ コードを読みあうチームになる
✓ 基準の育て方
✓ 各メンバーがコードを読む
✓ リーダブルだと思ったコードを共有
✓ チームとしてリーダブルかを判断
✓ →チームの基準に加わる
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 8
基準の育て方
✓ コードを読む文化を作る
✓ まず自分が読み始める
✓ リーダブルなコードを探す
✓ 見つけたリーダブルなコードを
他のメンバーに伝える
✓ →コードが読まれるという自覚が
チームに浸透
今日やったのはここまで
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 9
コードを読むきっかけを増や
す！
次のステップの例
✓ コミット単位で読む
✓ スタックトレースを
手がかりに読む
✓ 出力されるメッセージを
手がかりに読む
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 10
例1：コミット単位で読む
commit 4d516212f14ddcf04a8ead386104dab1d37ab8f4
Author: YUKI "Piro" Hiroshi <piro.outsider.reflex@gmail.com>
Date: Tue Oct 4 14:12:49 2022 +0900
Support backquote
diff --git a/common/placeholder-parser.js b/common/placeholder-parser.js
index fe6d4df..d9c82ee 100644
--- a/common/placeholder-parser.js
+++ b/common/placeholder-parser.js
@@ -31,14 +32,17 @@ export function process(input, processor, processedInput...
-
+
+
if (escaped) {
if ((inDoubleQuoteString && character == '"') ||
(inSingleQuoteString && character == "'")) {
(inSingleQuoteString && character == "'") ||
(inBackQuoteString && character == '`')) {
if (inArgsPart)
rawArgs += '\\';
}
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 11
コミットの読み方
✓ コード全体ではなく差分を読む
✓ コードの中身・設計の仕方では
なく
コードの書き方・開発の仕方に
注目する
✓ 文脈なしでも読みやすい
→コードがリーダブルな証拠
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 12
コミット単位で読む負担を減
らす
✓ pull型よりpush型にする
（メール、チャットへの自動投稿など）
✓ 読むのに取りかかるコストが下がる
✓ 流し読む（負担が多いと続かない）
✓ 問題探し視点では読まない
（必要ならコードレビューを実施）
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 13
コードを読むと気付きが増え
る
✓ 「詰まらずに読めるなあ」
✓ 「詳しくは分からないけど
流れを追いやすいなあ」
✓ 「コミットの差分から
趣旨を読み取りやすいなあ」
✓ →コードやコミットが
リーダブルな証拠
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 14
コミット単位で読むのが難し
い場合
✓ 文脈がないと読むのが辛い
✓ 知らない言語、
知らないプロジェクトだと
目が滑る
→文脈を伴った読み方をしてみる
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 15
例2：スタックトレース
SyntaxError: /var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/parser/ext/enscript.rb:120:
syntax error, unexpected keyword_end, expecting end-of-input
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/parser/rd/ext/block-verbatim.rb:25:in
`<top (required)>'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/parser/rd/rd2rabbit-lib.rb:9:in `<top
(required)>'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/parser/rd.rb:12:in `<top (required)>'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/utils.rb:30:in `require_safe'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/utils.rb:48:in `block (2 levels) in
require_files_under_directory_in_load_path'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/utils.rb:43:in `glob'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/utils.rb:43:in `block in
require_files_under_directory_in_load_path'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/utils.rb:41:in `each'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/utils.rb:41:in
`require_files_under_directory_in_load_path'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/parser.rb:4:in `<top (required)>'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/canvas.rb:8:in `<top (required)>'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/command/rabbit.rb:48:in `run'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/command/rabbit.rb:29:in `run'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/task/slide.rb:238:in `rabbit'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib/rabbit/task/slide.rb:100:in `block in define_run_task'
/var/lib/gems/2.5.0/gems/rake-12.3.2/exe/rake:27:in `<top (required)>'
Tasks: TOP => default => run
(See full trace by running task with --trace)
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 16
恐れることはない
SyntaxError:
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib
/rabbit/parser/ext/enscript.rb:120:
syntax error, unexpected keyword_end, expecting end-of-input
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib
/rabbit/utils.rb:48:
in `block (2 levels) in require_files_under_directory_in_load_path'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib
/rabbit/utils.rb:43:in `glob'
/var/lib/gems/2.5.0/gems/rabbit-2.2.1/lib
/rabbit/utils.rb:43:
in `block in require_files_under_directory_in_load_path'
どこを見ればいいか書いてあるだけ
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 17
エラーに遭遇した時に深掘り
してみる
✓ どういう経緯でエラーに
なったかが分かる
✓ 回避方法や解決方法が分かる
（当てずっぽうで色々試さなくて済む）
✓ 経緯を辿りやすい
→コードがリーダブルな証拠
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 18
例3：画面に出ているメッ
セージ
Firefox のファイルを他のアプリケーションが使用しているため、
ブックマークと履歴のシステムが無効化されます。この問題は
セキュリティソフトが原因で生じることがあります。
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 19
ソースコード内を検索する
https://searchfox.org/l10n
/source/ja/browser/chrome/browser/places/places.properties
...
# LOCALIZATION NOTE (lockPrompt.text)
# %S will be replaced with the application name.
lockPrompt.text
=%S のファイルを他のアプリケーションが
使用しているため、...
...
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 20
変数名や関数名などを辿って
いく
https://searchfox.org/mozilla-central
/source/browser/components/BrowserGlue.jsm
/**
* Show the notificationBox for a locked places database.
*/
_showPlacesLockedNotificationBox:
function BG__showPlacesLockedNotificationBox() {
...
var text = placesBundle.formatStringFromName("lockPrompt.text", [
applicationName,
]);
...
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 21
目に見えるものを手がかりに
深掘りしてみる
✓ どういう経緯で表示
されているかが分かる
✓ 回避方法や解決方法が分かる
（当てずっぽうで色々試さなくて済む）
✓ 経緯を辿りやすい
→コードがリーダブルな証拠
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 22
OSSのコードを読んで学ぶ
✓ OSSのコードは
リーダブルになるように
気をつけて書かれることが多い
✓ × すごい技術力があるから
リーダブルに書けている
✓ ○ 並の技術力なので
リーダブルにしないと
やってられない
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 23
共有の仕方の例
✓ リーダブルコードの共有方法
✓ Wikiに書く（全チームで有効）
✓ コードで伝える（上級チーム向け）
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 24
Wikiに書いて共有する
✓ Wikiもdiffを通知するように
するとなお良い
（RedmineとGitHub用はツールあり）
✓ 後で参照できる
✓ 更新もできる
（リーダブルコードの基準は変わることもある！）
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 25
実際のコードで共有する
✓ 上級チーム向け
（チームにコードを読む文化が根付いた後）
✓ リーダブルコードを
真似てコミット
✓ →他の人：「またこの書き方だ」
✓ →真似する人増加→チームが合意
✓ →チームが合意→Wikiにまとめる
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 26
コードを読む文化
✓ 新人にも真っ先に
その文化に馴染んでもらう
✓ 新人のスムーズな受け入れに有用
✓ 人の入れ替えがチームのリーダブル
基準の見直しの機会になる
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 27
新人のスムーズな受け入れに
有用
開発を通じて↓を共有できる
✓ チームが大事にしていること
✓ チームのリーダブル基準
✓ チームの開発スタイル
（ただし、上級チームになっていればだが。）
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 28
新人のスムーズな受け入れに
有用
チームが大事にしていることが
開発を通じて共有される
↓
✓ 新人に手取り足取り教えずに済
む
✓ 開発速度低下を抑えられる
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 29
リーダブル基準の見直しの機
会に
チームが大事にしていることが
開発を通じて共有される
↓
✓ 「もっとこっちの方が
リーダブルでは？」
✓ チームのリーダブル基準の
見直しのよい機会
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 30
これからやること
✓ この講座をチームでもやる
✓ 資料はすべて再利用可能
✓ 自分がコードを読み始める
✓ 自分が変更するコードの周辺から
リーダブルコードを探す
✓ 見つけたリーダブルなコードを
他のメンバーに伝える
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 31
読みにくいコードに打ち克
つ！
✓ × 読むコストが勿体ないから
読むのをやめる
✓ △ 「読みにくい」と指摘する
✓ ○ 読みやすいコードにしていく
✓ ○ 読みやすくする知見を
共有していく
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 32
サポート
✓ 今日の資料はすべて再利用可能
https://github.com/clear-code/readable-code-workshop/
tree/master/20221102a
（ https://slide.rabbit-shocker.org/authors/Piro/ ）
✓ 迷ったら読み返せる
まとめと次のステップ
Powered by Rabbit 2.2.1
Page: 33
クリアコード
✓ クリアなコードが大切
✓ クリア == clear == 意図が明確
✓ クリアなコードはリーダブルコード
みなさんのコーディングライフで
リーダブルコードが当たり前に
なることを応援します！
まとめと次のステップ
Powered by Rabbit 2.2.1
