EditorConfigで導くコードの「美しさ」

@MxShun
https://rakus.connpass.com/event/238395/

Transcript

1. EditorConfig で導く
   コードの「美しさ」
   アスクル株式会社
   三浦 駿
   

   View Slide

2. 自己紹介
   三浦 駿 @MxShun
   20年
   20年10月～ サイト統合PJに参画
   21年
   21年11月～ スクラムマスターを担う
   屋外でエンジニアリングするのがマイブーム
   4月～ アスクル株式会社 フルスタックエンジニア（になりたい）
   6月～ PJの品質向上隊として活動
   

   View Slide

3. 弊社紹介
   事業所向け（BtoB）通信事業
   事業所向け通販サービス
   一般消費者向け通販サービス
   

   View Slide

4. 本日の内容
   • コードの「美しさ」を保ちましょう
   • （いまさらですが）EditorConfig 便利です
   

   View Slide

5. コードの「美しさ」とは
   Good source code should be just as “easy on the eyes.”
   • Use consistent layout,
   with patterns the reader can get used to.
   • Make similar code look similar.
   • Group related lines of code into blocks.
   “The Art of Readable Code” Chapter 4. Aesthetics より引用
   

   View Slide

6. コード「美しさ」をめぐる議論
   インデントは Tab？空文字？
   サイズは？
   末尾行は入れる？入れない？
   改行コードは LF？CRLF？
   

   View Slide

7. EditorConfig
   エディタやIDEを跨いてコードフォーマットを管理・統一する仕組み
   .editorconfig ファイルで構成を管理する
   

   View Slide

8. EditorConfig Properties
   • indent_style
   • indent_size
   • tab_width
   • end_of_line
   • charset
   • trim_trailing_whitespace
   • insert_final_newline
   • max_line_length
   *詳しくは EditorConfig GitHub wiki “EditorConfig Properties” を参照のこと
   “tab” か “space”
   “tab” か 任意サイズ
   任意サイズ
   “lf” か “crlf” か “cr”
   選択
   選択
   選択
   “off” か 任意サイズ（一部エディタのみ）
   

   View Slide

9. EditorConfig と Lint の掛け合わせ
   ktlint* は EditorConfig の設定を見て静的コード解析をしてくれる
   つまりコードフォーマットを包括的に管理ができる
   *Kotlin 向け Linter のデファクトスタンダード
   

   View Slide

10. 本日の内容
    • コードの「美しさ」を保ちましょう
    • （いまさらですが）EditorConfig 便利です
    

    View Slide

11. 告知
    https://www.askul.co.jp/kaisya/dx
    https://tech.askul.co.jp
    

    View Slide