みなさん、こんにちは。あらゆる美しさを求め始めた周です。

きれいで読みやすいソースコードを書くのは、
すべてのWebエンジニアが当たり前ながら追求していることです。
今回は自分が思う美しいソースコードについて語ります。

「順番」を気にする

あいうえお順、アルファベット順など…
辞書では、ある一定の順番に従って並んでいるため、引く際はとても探しやすいです。
コーディングする際も順番を気にすると読みやすさがぐっと上がることがあります。

1.探しやすいアルファベット順

ソースコードのベースとなるのは英語です。
所々でアルファベット順での並びを心がけると、メンテナンスも時短で修正が必要なところを見つけ出すことができると思います。

例えば、外部ファイルの読み込みです。

外部ファイルをインポートする際に、まずベースとなるファイルを一番最初に読み込みます。
それ以外のファイルは、アルファベット順で並ぶと、必要なファイルが読み込まれているか素早く確認することができます。

2.CSSは指定内容の順番で並ぶ

特にCSSの指定となると、すべての要素に対して、指定内容を元に同じような順番で並ぶと読みやすくなると思います。

例えば、 position 、 flex 、 grid の指定は「レイアウト」系、
padding や margin の指定は「余白」系、
width や height は「サイズ」系、 background 、
border-radius や border は「背景」系、
そして font-size 、 font-weight や font-family は「フォント」系に分類できます。

このような分類を下記のように、影響範囲の大きさの並び順で指定します。

このような一定の規則で指定すると、メンテナンス時も気軽に変更したい箇所を探し出すことができます。
そして見落としによる重複指定も防ぐことができると思います。

ルールのあるスペースと改行

ソースコードをより見やすくするため、インデント、スペース、改行を適切に入れる必要があります。

1.余計なスペースは入れない

HTMLを例にすると、属性の指定で class="c-heading01 __center " のように、入力やライブラリによる出力で後ろのダブルコーテーションの前に必要のないスペースが入ってしまう場合があります。

このような細かいところも気にしながら、揃えてあげるとより美しくなります。

また、プログラミングだと余計なスペースを入れてしまうと、プログラムが動かなくなることもあります。
違った意味でもスペースの入れ方に気をつける必要があります。

2.スペースを入れる場所を揃える

CSSを例にすると、下記のようにコロンの前や後ろにバラバラでスペースを入れると、無規則で乱れているように感じてしまいます。

それをすべてクロンの後ろにスペース入れるように統一すると美しくなります。

3.改行の行数を統一する

コーディングといったら、要素と要素の間の改行、
プログラミングといったら、メソッドとメソッドの間の改行、
それを1行にするなら、プロジェクト内ですべて統一して1行にします。

そうすると、足並み揃えている感があって、ソースコードが美しく見えます。

分かりやすいネーミング

記法からワードの選定、良い名前付けはソースコードの美しさを表す重要なポイントになります。

1.英単語の記法を揃える

あらかじめガイドラインを制定し、
コーディングにおけるクラス・ID・属性、
そしてプログラミングにおける変数名・関数名・クラス名、
それぞれ各自の記法で揃えると美しいです。

そうすると、記法から何を定義しているかを推測することもできるし、定義内容への勘違いも少なくなると思います。

2.意味が明確ではないワードは使わない

ネーミングでワードの選定は、狭めな意味を持つ英単語が良いと思います。
意味が広くあやふやなワードを使ってしまうと、誤解を招いてしまいます。
ただあまりに狭すぎると、汎用性が下がったり、変数の上書きがしつらくなったりしてしまいます。

3.同じ意味のワードを１つに限定

heading と headline は「見出し」
そして anchor と link は「リンク」
このように、近い意味を表す英単語が複数ある場合があります。

同じプロジェクトで、同じ意味の単語を、1つのワードに統一すると、ズレることなく処理している内容を認識することができます。

まとめ

今回紹介したように、エンジニア共通で行われることといい、各自で美しさへのこだわりといい、よりキレイにソースコードを書けるように努めています。

日常の業務で忙しさに追い込まれてしまうと、スピード優先でついに美しさを落としてしまうところもあります。
しかし、ソースコードの美しさへの心がけはエンジニアの持つべき責任です。いくら時間がないといっても、それを忘れずに業務に取り掛かっていきたいです。