【コーディング】簡単に可読性を上げる小技 - インデント揃え

はじめに

こんにちは。エンジニアの廣澤です。
前々回 と 前回 の記事では私の社内インタビューが載ってますね。
ちょっと恥ずかしいですが、「お前なんやねん」って方は読んでみてください。

可読性の高いコードを書くには

今日は可読性の高いコードの書き方について書こうと思います。

可読性の高いコードの書き方については色々な小技がありますが、その内の1つ、インデント揃えについて取り上げましょう。

サンプルコード

さて、簡単なサンプルコードを示しましょう。
ここでは、API で取得した data から値を取り出し、ローカル変数に代入するコードを示します。

status: data.status,
first_name: data.first_name,
last_name: data.last_name,
email_address: data.email_address,
tel: data.tel,
gender: data.gender,
country: data.country,
school_id: data.school_id,
school_name: data.school_name,
level_id: data.school_name,
level_name: data.level_name,
message: data.message,
note: data.note,
(以下略)

言語は何であれ、こんなコードってよくありますよね。
業務系で項目数が多いと、それこそよく見かけると思います。

さて、上に示したコードは実はバグを含んでいますが、皆さん気づきましたか？
おそらくサラッと見ただけでは気づけないと思います。

では上のコードを下のように書き換えるとどうなるでしょうか？

status       : data.status,
first_name   : data.first_name,
last_name    : data.last_name,
email_address: data.email_address,
tel          : data.tel,
gender       : data.gender,
country      : data.country,
school_id    : data.school_id,
school_name  : data.school_name,
level_id     : data.school_name,
level_name   : data.level_name,
message      : data.message,
note         : data.note,
（以下略）

どうでしょう？　気づきました？

school_name  : data.school_name,
level_id     : data.school_name,

ここですね。
level_id に data.school_name が代入されてしまっています。
: の位置 (インデント) を揃え、その後ろの変数も縦に揃えることで格段に読みやすくなりました。

このように縦にインデントを揃えるのはプログラミングに習熟していない人でも簡単に取り入れることのできる可読性を上げる方法です。
プログラミング初心者の人はぜひ取り入れてみるとよいのではないでしょうか。

インデント揃えは面倒くさくない？

手でインデントを揃えるのは面倒なので、実はベテランでもこれをやってない人は一定数います。
しかしプロジェクトで利用しているフォーマッターにこのインデントを揃える設定ができるならば、その設定をしてしまえばよいです。

フォーマッターが対応していない場合はそのエディタのプラグインなどを導入しましょう。
例えば VS Code を使っている人は「Auto Align」や「Better Align」などを使えばよいと思います。
ここでは説明を割愛しますが、気になる方はそれぞれ検索してみてください。

最後に

いかがでしたでしょうか。
コードの可読性を上げる方法についてはインターネット上に多く紹介されていますが、その中でも誰でもすぐできる＆紹介しているサイトが少ないという視点で縦のインデント揃えを選んでみました。

他にも多くのテクニックがありますので、気になる方は色々なサイトを覗いてみてください。
書籍であれば、『リーダブルコード』がおススメです。