SlideShare a Scribd company logo
1 of 14
可読性について
PART1(表面上の改善)
なぜ可読性が必要なのか?
動かすのはPCだが、「読むのは人間」であり、
プログラミングのほとんどの時間はコード読む時間であるため
可読性が低いと何が起きるのか?
・読んで理解するまでに時間がかかる
イコール実装までに余計な工数がかかる
・バグが混入しやすい
この変数はどんな値が入っているのが正解なのか?
この関数はどんな値が返ってくる関数なのか?
・デバッグに時間がかかる
・改修や変更に時間がかかる
今回参考にする書籍
そもそも読みやすいとは?
・読みやすさの基本定理
第三者が自分のコードを読んで理解する時間を最短にすること
・優れたコードとは?
「読みやすい」コードを書くことは、
「理解しやすい」コードを書くことであり、
その結果として「優れた」コードに繋がる
・理解するとは?
変更を加えたり、バグを見つけたりできること
リーダブルコードで書かれている改善策
- 表面上の改善策
- 適切な名前
- 優れたコメント
- フォーマット
- ループとロジックの単純化
- 制御フローを読みやすくする
- ネストを浅く
- 早期return
- コードの再構成
- 1度に1つのことを(単一責任の原則)
- 短いコードを書く(KISSの原則/YAGNIの原則)
今回取り上げる改善策 PART1
・適切な名前
・目に優しい美しさ
・コメントすべきこと/すべきで「ない」こと
- 命名
- 明確で正確な単語を選ぶ
- getSize() => getHeight()
- get/fetch/download 状況によって適切で明確なものを選ぶ
- 汎用的な名前は避ける
- retval => sumSquares
- ただし、情報の一時的な保管で生存期間が短いケースでは汎用的な名前が役に立
つこともある(ループイテレータなど)
- 抽象的な名前よりも具体的な名前を使う(例:値の単位など)
- delay => delayMs
- 重要な属性を追加する
- password => plaintextPassword
- comment => unescapedComment
- 全てに属性を追加するのではなく、「バグ」の元になりそうな所へ追加する
適切な名前(命名)
適切な名前(誤解されない名前)
- 誤解されない名前
- filter = 濾過する
- filterは条件にあったものを「選択(select)」なのか「除外(exclude)」なのか不明確
- 限界値はmin/maxを使う
- 未満(限界値を含まない)なのか以下(限界値を含む)なのか
- booleanはis/has/can/shouldを使う
- trueとfalseの意味を明確にするため
美しさ
- なぜ美しさが必要なのか
- 優れたコードは目に優しく、見た目が美しいコードの方が使いやすい
- 美しさと優れた設計は関連しており、リファクタリングがうまくいくようになる
- 3つの原則
- 読み手が慣れているパターンと一貫性のあるレイアウトを使う
- 重要度順で並んでいる
- 似ているコードは似ているように見せる
- 改行位置やネスト(現在はフォーマッターが主流)
- 関連するコードをまとめてブロックにする
- 似ている考えをグループ分けしてまとめる
コメント1
- コメントの目的
- 書き手の意図を読み手に知らせる
- コードを書いている本人は、頭の中に大切な情報があるが、読み手はその情報が失われてし
まう
- コメントすべきで「ない」こと
- 価値のないコメントは記入しない
- 価値のないコメントとは
- コードからすぐにわかることはコメントに書かない
- getHeight() // 高さの取得
- コード以外の「新しい情報」を提供しているか
- 背景や経緯
- コメントのためのコメントはしない
- コードがおかしい可能性、ひどいコードにはコメントではなく名前を変えるべき
- コード自体が読みやすいことが大前提
コメント2
- 自分の考えを記録する
- 優れたコメントとは「考えを記録する」ためのものである
- コードは絶えず進化しているので、その過程での欠陥を文章化すべき
- TODOやFIXMEなどのアノテーションを活用(影響範囲が大きい時など)
- 基本その場で改善できるところは改善する(ボーイスカウトの原則)
- 定数には背景となるコメントを残す
- 定数の定義は、その定数が何をするのか、なぜその値を持っているのかという「背景」
が存在する場合が多い
- 読み手の立場になって考える
- 質問されそうなことを想像する
- 関数の内部にロジック分けしたブロック毎へ「要約」したコメントをする
- コメントは正確で簡潔に
- 「これ」「それ」絶対NG
- 短く単純で直感的な言い回し
全体まとめ
・重要度は命名、美しさ、コメントの順
・そもそもコードが読めないのであればコードが悪い、コメントはあくまで補足
・可読性が誰に向けてのものなのかで変わるが、ここでは言語が読めて実装でき
る人へ対してとする(例:JS/TS/Vueの案件では最低限これらを理解していること)
・リーダブルコードで一貫して言われていることは「第三者が自分のコードを
読んで、理解する時間を最短にすること。それが「優れた」コードであ
る」
リーダブルコードで一貫して伝えていること
第三者が自分のコードを読んで、理解する時間を最短にすること
それが「優れた」コードである

More Related Content

Similar to 可読性について リーダブルコード part1(表面上の改善)

リーダブルコード
リーダブルコードリーダブルコード
リーダブルコードGIG inc.
 
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラムamusementcreators
 
Mizukiryu refactering-20110821
Mizukiryu refactering-20110821Mizukiryu refactering-20110821
Mizukiryu refactering-20110821Mizuki Yamanaka
 
プログラミングを早くする方法
プログラミングを早くする方法プログラミングを早くする方法
プログラミングを早くする方法kazukiTakahashi18
 
きつねさんでもわかる Firefox OS コードリーディング入門
きつねさんでもわかる Firefox OS コードリーディング入門きつねさんでもわかる Firefox OS コードリーディング入門
きつねさんでもわかる Firefox OS コードリーディング入門Mizuho Sakamaki
 
プログラミング勉強会 その0
プログラミング勉強会 その0プログラミング勉強会 その0
プログラミング勉強会 その0Hirokazu Fukami
 
ど素人向け エンジニア勉強会
ど素人向け エンジニア勉強会ど素人向け エンジニア勉強会
ど素人向け エンジニア勉強会YukiIwasaki2764
 
リーダブルコード
リーダブルコードリーダブルコード
リーダブルコードJun Ootani
 
chatGPTの驚くべき対話能力.pdf
chatGPTの驚くべき対話能力.pdfchatGPTの驚くべき対話能力.pdf
chatGPTの驚くべき対話能力.pdfYamashitaKatsushi
 
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのことTohru Kobayashi
 
リーダブルコードを読んだ後
リーダブルコードを読んだ後リーダブルコードを読んだ後
リーダブルコードを読んだ後Kouhei Sutou
 
コーディングスタイル
コーディングスタイルコーディングスタイル
コーディングスタイルrobotclub_kut
 
「いいコード」をみんなで書こう!
「いいコード」をみんなで書こう!「いいコード」をみんなで書こう!
「いいコード」をみんなで書こう!tq_ed
 
リーダブルコード 1.0'
リーダブルコード 1.0'リーダブルコード 1.0'
リーダブルコード 1.0'Yamamura Takashi
 
開発者は仕事でリーダブルなコードを書けるのか?
開発者は仕事でリーダブルなコードを書けるのか?開発者は仕事でリーダブルなコードを書けるのか?
開発者は仕事でリーダブルなコードを書けるのか?Kouhei Sutou
 
ページャ lessを使いこなす
ページャ lessを使いこなすページャ lessを使いこなす
ページャ lessを使いこなすToshiyuki Shimono
 
2019年度 若手技術者向け講座 リファクタリング
2019年度 若手技術者向け講座 リファクタリング2019年度 若手技術者向け講座 リファクタリング
2019年度 若手技術者向け講座 リファクタリングkeki3
 
大規模Perl初心者研修を支える技術
大規模Perl初心者研修を支える技術大規模Perl初心者研修を支える技術
大規模Perl初心者研修を支える技術Daisuke Tamada
 

Similar to 可読性について リーダブルコード part1(表面上の改善) (20)

リーダブルコード
リーダブルコードリーダブルコード
リーダブルコード
 
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
 
Mizukiryu refactering-20110821
Mizukiryu refactering-20110821Mizukiryu refactering-20110821
Mizukiryu refactering-20110821
 
プログラミングを早くする方法
プログラミングを早くする方法プログラミングを早くする方法
プログラミングを早くする方法
 
きつねさんでもわかる Firefox OS コードリーディング入門
きつねさんでもわかる Firefox OS コードリーディング入門きつねさんでもわかる Firefox OS コードリーディング入門
きつねさんでもわかる Firefox OS コードリーディング入門
 
プログラミング勉強会 その0
プログラミング勉強会 その0プログラミング勉強会 その0
プログラミング勉強会 その0
 
ど素人向け エンジニア勉強会
ど素人向け エンジニア勉強会ど素人向け エンジニア勉強会
ど素人向け エンジニア勉強会
 
リーダブルコード
リーダブルコードリーダブルコード
リーダブルコード
 
chatGPTの驚くべき対話能力.pdf
chatGPTの驚くべき対話能力.pdfchatGPTの驚くべき対話能力.pdf
chatGPTの驚くべき対話能力.pdf
 
良いコードとは
良いコードとは良いコードとは
良いコードとは
 
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
怠惰な私がプログラミングするときに重要だと考えているたった1つのこと
 
リーダブルコードを読んだ後
リーダブルコードを読んだ後リーダブルコードを読んだ後
リーダブルコードを読んだ後
 
コーディングスタイル
コーディングスタイルコーディングスタイル
コーディングスタイル
 
「いいコード」をみんなで書こう!
「いいコード」をみんなで書こう!「いいコード」をみんなで書こう!
「いいコード」をみんなで書こう!
 
リーダブルコード 1.0'
リーダブルコード 1.0'リーダブルコード 1.0'
リーダブルコード 1.0'
 
開発者は仕事でリーダブルなコードを書けるのか?
開発者は仕事でリーダブルなコードを書けるのか?開発者は仕事でリーダブルなコードを書けるのか?
開発者は仕事でリーダブルなコードを書けるのか?
 
ページャ lessを使いこなす
ページャ lessを使いこなすページャ lessを使いこなす
ページャ lessを使いこなす
 
2019年度 若手技術者向け講座 リファクタリング
2019年度 若手技術者向け講座 リファクタリング2019年度 若手技術者向け講座 リファクタリング
2019年度 若手技術者向け講座 リファクタリング
 
大規模Perl初心者研修を支える技術
大規模Perl初心者研修を支える技術大規模Perl初心者研修を支える技術
大規模Perl初心者研修を支える技術
 
プログラムの高速化
プログラムの高速化プログラムの高速化
プログラムの高速化
 

More from tak

DiI/DIコンテナを一から学んでみた
DiI/DIコンテナを一から学んでみたDiI/DIコンテナを一から学んでみた
DiI/DIコンテナを一から学んでみたtak
 
TypeScriptのdecoratorについて
TypeScriptのdecoratorについてTypeScriptのdecoratorについて
TypeScriptのdecoratorについてtak
 
Rust + web assemblyやってみた
Rust + web assemblyやってみたRust + web assemblyやってみた
Rust + web assemblyやってみたtak
 
第ⅴ部:clean architecture アーキテクチャ Part8
第ⅴ部:clean architecture アーキテクチャ Part8第ⅴ部:clean architecture アーキテクチャ Part8
第ⅴ部:clean architecture アーキテクチャ Part8tak
 
第ⅴ部:clean architecture アーキテクチャ Part7
第ⅴ部:clean architecture アーキテクチャ Part7第ⅴ部:clean architecture アーキテクチャ Part7
第ⅴ部:clean architecture アーキテクチャ Part7tak
 
第ⅴ部:clean architecture アーキテクチャ Part6
第ⅴ部:clean architecture アーキテクチャ Part6第ⅴ部:clean architecture アーキテクチャ Part6
第ⅴ部:clean architecture アーキテクチャ Part6tak
 
第ⅴ部:clean architecture アーキテクチャ Part5
第ⅴ部:clean architecture アーキテクチャ Part5第ⅴ部:clean architecture アーキテクチャ Part5
第ⅴ部:clean architecture アーキテクチャ Part5tak
 
第ⅴ部:clean architecture アーキテクチャ Part4
第ⅴ部:clean architecture アーキテクチャ Part4第ⅴ部:clean architecture アーキテクチャ Part4
第ⅴ部:clean architecture アーキテクチャ Part4tak
 
第ⅴ部:clean architecture アーキテクチャ Part3
第ⅴ部:clean architecture アーキテクチャ Part3第ⅴ部:clean architecture アーキテクチャ Part3
第ⅴ部:clean architecture アーキテクチャ Part3tak
 
第ⅴ部:clean architecture アーキテクチャ Part2
第ⅴ部:clean architecture アーキテクチャ Part2第ⅴ部:clean architecture アーキテクチャ Part2
第ⅴ部:clean architecture アーキテクチャ Part2tak
 
第ⅴ部:clean architecture アーキテクチャ Part1
第ⅴ部:clean architecture アーキテクチャ Part1第ⅴ部:clean architecture アーキテクチャ Part1
第ⅴ部:clean architecture アーキテクチャ Part1tak
 
第ⅳ部:Clean architecture コンポーネントの原則
第ⅳ部:Clean architecture コンポーネントの原則第ⅳ部:Clean architecture コンポーネントの原則
第ⅳ部:Clean architecture コンポーネントの原則tak
 
第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則tak
 
第ⅱ部:Clean architecture 構成要素から始めよ
第ⅱ部:Clean architecture 構成要素から始めよ第ⅱ部:Clean architecture 構成要素から始めよ
第ⅱ部:Clean architecture 構成要素から始めよtak
 
第ⅰ部:Clean Architecture イントロダクション
第ⅰ部:Clean Architecture イントロダクション第ⅰ部:Clean Architecture イントロダクション
第ⅰ部:Clean Architecture イントロダクションtak
 

More from tak (15)

DiI/DIコンテナを一から学んでみた
DiI/DIコンテナを一から学んでみたDiI/DIコンテナを一から学んでみた
DiI/DIコンテナを一から学んでみた
 
TypeScriptのdecoratorについて
TypeScriptのdecoratorについてTypeScriptのdecoratorについて
TypeScriptのdecoratorについて
 
Rust + web assemblyやってみた
Rust + web assemblyやってみたRust + web assemblyやってみた
Rust + web assemblyやってみた
 
第ⅴ部:clean architecture アーキテクチャ Part8
第ⅴ部:clean architecture アーキテクチャ Part8第ⅴ部:clean architecture アーキテクチャ Part8
第ⅴ部:clean architecture アーキテクチャ Part8
 
第ⅴ部:clean architecture アーキテクチャ Part7
第ⅴ部:clean architecture アーキテクチャ Part7第ⅴ部:clean architecture アーキテクチャ Part7
第ⅴ部:clean architecture アーキテクチャ Part7
 
第ⅴ部:clean architecture アーキテクチャ Part6
第ⅴ部:clean architecture アーキテクチャ Part6第ⅴ部:clean architecture アーキテクチャ Part6
第ⅴ部:clean architecture アーキテクチャ Part6
 
第ⅴ部:clean architecture アーキテクチャ Part5
第ⅴ部:clean architecture アーキテクチャ Part5第ⅴ部:clean architecture アーキテクチャ Part5
第ⅴ部:clean architecture アーキテクチャ Part5
 
第ⅴ部:clean architecture アーキテクチャ Part4
第ⅴ部:clean architecture アーキテクチャ Part4第ⅴ部:clean architecture アーキテクチャ Part4
第ⅴ部:clean architecture アーキテクチャ Part4
 
第ⅴ部:clean architecture アーキテクチャ Part3
第ⅴ部:clean architecture アーキテクチャ Part3第ⅴ部:clean architecture アーキテクチャ Part3
第ⅴ部:clean architecture アーキテクチャ Part3
 
第ⅴ部:clean architecture アーキテクチャ Part2
第ⅴ部:clean architecture アーキテクチャ Part2第ⅴ部:clean architecture アーキテクチャ Part2
第ⅴ部:clean architecture アーキテクチャ Part2
 
第ⅴ部:clean architecture アーキテクチャ Part1
第ⅴ部:clean architecture アーキテクチャ Part1第ⅴ部:clean architecture アーキテクチャ Part1
第ⅴ部:clean architecture アーキテクチャ Part1
 
第ⅳ部:Clean architecture コンポーネントの原則
第ⅳ部:Clean architecture コンポーネントの原則第ⅳ部:Clean architecture コンポーネントの原則
第ⅳ部:Clean architecture コンポーネントの原則
 
第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則第ⅲ部:Clean architecture 設計の原則
第ⅲ部:Clean architecture 設計の原則
 
第ⅱ部:Clean architecture 構成要素から始めよ
第ⅱ部:Clean architecture 構成要素から始めよ第ⅱ部:Clean architecture 構成要素から始めよ
第ⅱ部:Clean architecture 構成要素から始めよ
 
第ⅰ部:Clean Architecture イントロダクション
第ⅰ部:Clean Architecture イントロダクション第ⅰ部:Clean Architecture イントロダクション
第ⅰ部:Clean Architecture イントロダクション
 

可読性について リーダブルコード part1(表面上の改善)