kyoune01.github.io

readableCode

readable code まとめ

リーダブルコードを持ってない人が理解できるように例をフロント寄りに噛み砕いたまとめ

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック https://www.amazon.co.jp/dp/4873115655/ref=cm_sw_r_tw_dp_U_x_1s.-CbTGCJJ87

これから HTML・コードを書いて仕事をしていこうと考えている人間で上記未読の方は購読してください

この資料を通して
「さらに良いコードがかけるようになりたい」「自身のスキルを上げたい」
と考えてる人に向けて
「読みやすい HTML・コードをかくコツ・意識すべきこと」
の視点でまとめます

資料に記載する言語は、HTML・JavaScript・CSS、など
※細かな言語仕様を知らなくても本質は理解できるように記載

全体

計 6 ファイルに分けてまとめます

  • README
  • 01.美しさ
  • 02.思いやり
  • 03.命名
  • 04.コメント
  • 05.ロジック

はじめに

1 年前の自分の書いた HTML・コードを読んだことはありますか？

for (var i = 10; i < 10; i++) {
  if (data[i][4] > 30) {
    if (area_max < data[i][4]) {
      area_max = data[i][4];
    }
  }
}

「何を書いているか分からない…」「レベルが低い…」「恥ずかしい…」
たいていはこんな感想かと思います

では「なぜ書いていることが分からないか」を考えたことがあるでしょうか

理解しやすい HTML・コード

本ドキュメントにはたった一つ共通した定義が存在します

コードは理解しやすくなければならない

実際のコード例を読み始める前に、どうしてこのテーマが大切なのか考えてみましょう

「優れた」コードとは

下記のコードのどちらが「優れている」でしょうか？

( isDone >= 0 ? $.fn.method() : '' );

if ( isDone >= 0 ) {
    $.fn.method();
}

前者のコードは「簡潔」ですが、後者のコードは読みやすく「安心」できそうです。

設問：あなたはどちらのコードがより優れていると思いますか？

読みやすさの定理

先程の設問を受け、今回の定義をさらに補足します

HTML・コードは他の人が最短時間で理解できるように書かなければならない

他の人とは君が書いたコードをレビューする先輩だったり 1 ヶ月後に運用で修正をかける未来の自分かもしれません

他の人が最短でコードを理解し目的が達成できる状態に保つことのできる、良いコードを書けようになる
という目的のもと
各テーマの視点から「こう書いたほうが良い」HTML・コードの例を上げていきます

© 2024, kyoune01