フロントエンジニアのリーダブルコード #2 コードの美しさ

#javascript #jquery #readablecode

この記事では、コードの美しさの２つを紹介します。「可動性」と「最短処理」です。可動性は、コードの見た目を意識し、開発者が読みやすいコードを書くことです。最短処理は、無駄な処理、同じ処理(二重化の過ち)を書かないようにすることです。「DRY原則」という哲学を意識していきましょう。

#2 コードの美しさ

可動性を高めるには、インデントとスペースに頼ることになります。可動性のほとんどは、自動整列機能で解決できます。エディタのSublimeTextはHTML-CSS-JS Prettify、Atomでは標準のAuto indentが付いています。サイトのソース確認に、Google Chrome デベロッパーツールのsourcesタブにも自動整列機能が付いています。

しかし、ほとんどの開発者は、自分でネストを調整していきます。ネストは、深くなるほど可動性は下がります。ネストが深くなる前に、処理の答え(リターン)を返してあげるようにしましょう。

ネストは深くなるほど、開発者にストレスを与えます。なぜなら、覚えていられないからです。条件分岐が5重6重となると、最初の条件分岐を忘れてしまいます。リターンが遠いコードは、読む気が起きません。

コードの縦の線も意識していきましょう。３つの引数の文字数が異なっていても、カンマの位置の縦線を意識することによってコードが読みやすくなっています。

マークアップ言語のHTMLは、ソースの順番の入れ替えを行うことが出来ません。JavaScriptとCSSは、HTMLの順番に合わせるようにしましょう。

実際は、もっと複雑です。例では、同じHTMLに記述してありますが、実際は別々のファイルです。またひとつひとつのクリックイベントは、一行では収まりません。順番を意識することで、二重化を防ぎ見やすいコードになるでしょう。

上記のクリックイベントは、二重化になりやすいコードです。順番を工夫することで、イベント自体の二重化を防げましたが、イベント内で二重化が発生する場合があります。ボタンを押すと、サイトの背景色が変更します。各イベントの違いは、色だけです。

ボタンを作成するJavaScriptのコードです。作成するボタンの違いは、テキストとクラス名です。呼び出しのときに、(関数の引数に)テキストとクラス名を与えることで、それぞれのボタンを作成することできます。違う点を把握し、同じような処理を書かないようにしましょう。同じ処理をまとめることは、コードの修正点も１つにまとめることができます。

最後に無駄なコードです。配列から値を削除する関数です。第1引数に配列を入れ、第2引数に配列内の削除したい要素を入れます。