この記事では、いかにコードを綺麗に正確に書くことで効率化を図るといった目的を持ち、その結果を出すためにはどんな問題がどの部分に発生して、どの様に改善するとよいかを考察したものとなります。

コードが汚く見えてしまう原因とは

よく挙げられる項目としては
命名規則が曖昧、1行に詰め込みすぎる、条件分岐などのループが深い、何をしているのか分かりづらい（コメントを使うと良い）などが挙げられる。

自分でもよくやってしまう事として、cssなどで同じことを二度以上書いてしまう事です。
これらをやってしまうと分かりづらいだけでなく、修正の際に修正箇所の特定や漏れが発生してしまう可能性が出てきて、コメントアウトなどもインデントの意味を成さなくなり、また見栄えもよくなくなってしまう。

コメントに関しては色んな意見があり、全くコメント等はない方が良いと考える人もいれば、その詳細をコメントに残す事で誰が読んでも分かりやすいソースコードを作るという観点もあります。

また、まとまりごとの始まりと終わりにコメントを記述する事も効果的と思われます。

 

次に命名規則に関してですが、変数名、クラス名、メソッド名などは分かり易いものをつける（https://codic.jp/）
これらを気をつける事によってわざわざコメントでなくても分かりやすいソースコードに近づくことは出来ます。
変数名などを省略しすぎない事もこれらに当てはまる。

 

それとは別に、細かくしすぎてしまう事によって1行が肥大化し、かなり分かりづらくなると言う事も良く経験します。
誰かが書いたコードに追加追加をしていき、挙げ句の果てにはすごく長い1行が出来上がってしまう事があり、それらは変更・修正する際にとても不便なものとなり得ます。
１つ１つの意味を解読していかなければならず、その必要があるコードは決して綺麗なコードとは呼べないものです。

一方で、複雑なコードを汚いコードときっぱり決めつけるのではなく自分の実力不足でもあると言うことを頭に入れておく事も必要である。
理解できないことを汚いと決めつけるのは時期早々である可能性もあり得る為、判断ができない場合はできる人に見てもらう事があると良いと思いました。

変数をむやみやたらに作らない。
これは自分もよくやってしまう事の１つですが、変数を定義した分だけそれを管理するコストが余分に掛かってくる。
さらにソースコード上でもクラス名などがむやみに長かったりした場合など見辛くなってしまうと言う事も出てきてしまう。

 

まとめられるcss例

Wpにてie11のサポートが終了したことは知っている方も多いかと思いますが、今回はサポートが終了したie11を除いたブラウザに対応する新しめのcssの中にコードの無駄を省き、綺麗にまとめる事が可能になったものを紹介していきたいと思います。

数学関数
min(), max(), clamp()

min()


↓

となっており、今まで2行必要だったものが1行にまとまります。
max()

↓

 

min()とmax()を合わせたものが

min-width, width, max-widthを1行で指定可能

これらの数学関数を使う事でwidthだけではなく、文字数や文字の大きさなどをレスポンシブ対応が綺麗に簡単に可能となります。
例えば、コラムページの中のテキストを45~75文字に収めたい場合、

の様に記述し、テキストブロックの範囲が45文字より狭くなったり、75文字よりも広くなったりをclamp()とchを使う事で抑えています。

また、フォントサイズに関しても同じ様にclamp()を使う事で1行でレスポンシブに対応される事ができます。

ページのビューポートの幅によってフォントのサイズを拡大縮小させられます。

今までレスポンシブ対応させるには、各ブレイクポイントでのcssが必要でしたがこれらの数学関数を使用することによって1行記述するだけで設定したビューポートの幅によって自動で可変してくれます。
時間短縮だけでなく、コードが今までよりもスッキリし、また修正する際の変更箇所の間違え等も減らす事が出来そうです。

 

まとめ

今回はコードを綺麗にするにはと言う観点から原因や改善例、またcssの一例を取り上げてみましたが「綺麗なコード」と言うものは色んな人によって細かい部分の定義の仕方が変わっており、正解は１つではないと言う事も調べていくうちに感じる事が出来ました。（ある程度には準じる）

綺麗にすると言っても方法は沢山あり、それらを１つずつ頭に入れた上でコードを書くだけでも今までより見やすいコードにはなっていき、その時の流行などによっても書き方は日々変わっていくことから、「綺麗なコード」と言うキーワードには無限の可能性があると感じました。