初心者にも真似できるリーダブルコード

みーぷー

6年前

シェアしてくれたら嬉しいです！!!

チームで開発することが増えるにつれて、
いろいろとチームでルールを作成することが増えてきました。

GitHubでの管理はもちろんのこと、
変数の命名規則やインデント、CSSの利用方法などなど、
ルールは多岐に渡ります。

名著との呼び声高い「リーダブルコード」を参考に、
初心者の方でもすぐ真似できるリーダブルコードの導入方法を紹介します。

「読みやすい」コードを書くのに「面白い」ことをする必要はない。
いい名前をつける。
適切なコメントを書く。
意味のある単位に分割する。
綺麗に整形する。
こうした基本的なことを着実にやればいい。

だそうです。#なにかしら発信しろ #なにかしら継続しろ #リーダブルコード pic.twitter.com/33GXzgfQ0J

— 宮倉洋樹＠みーぷーブログ (@M_Mi_pu_) 2018年12月6日

リーダブルコードとは

まず読みやすいコードとはなにか？
というところから理解を始めたいと思います。

鍵となる考え方を「リーダブルコード」より引用すると

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

ということです。

行数の少ないコードがかっこよく見えたりもしますが、
いつみてもコードの意味がわかりやすいコーディングを目指しましょう。

自分1人しかコードを書かないとしても、
6ヶ月後のあなた自身が直感的に理解できるコードを書く癖をつけましょう！

今すぐできるリーダブルコード入門

関数や変数の命名方法

まずは関数や変数の名前の付け方についてです。

以下の2つのコードをみてください。

function size() {
// ここに処理
}

function Height() {
// ここに処理
}

どちらが優れているかわかるでしょうか？

1つめの関数名は”size”、
2つめの関数名は”Height”です。

命名方法として優れているのは後者でしょう。

理由としては、
“size”だけでは何のサイズを返す関数なのかが直感的に理解しがたいからです。

身長？
横幅？
ファイルサイズ？

その辺をしっかりと一瞬で判断できる名前を命名しましょう。

改行や整列を意識しよう

またサンプルを示します。

class User {
  constructor( name, age, sex, address ) {
    this.name = name; //名前
    this.age = age; //年齢
    this.sex = sex; //性別
    this.address = address; //住所
  }
}

class User {
  constructor( name, age, sex, address ) {
    this.name    = name;     //名前
    this.age     = age;      //年齢
    this.sex     = sex;      //性別
    this.address = address;  //住所
  }
}

上の2つのコードをみて、
1つめのコードの方が読みやすいという人は多くないでしょう

コメントまでしっかりと縦の整列を意識してみましょう！