DEV Community 👩‍💻👨‍💻

Shibayama Hiroki
Shibayama Hiroki

Posted on • Updated on

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

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

#2 コードの美しさ

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

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

Alt Text

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

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

Alt Text

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

Alt Text

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

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

Alt Text

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

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

Alt Text

removeIndexは無駄な変数です。for文内で、変数に格納するのではなく、spliceで直接削除するのが良いでしょう。タスクは早く完了するようにしましょう。

Alt Text

コードの美しさの「可動性」と「最短処理」を紹介しました。いろいろ紹介しましたが、環境によっては二重化を要求する場合もあります。やむ得ない「二重化の過ち」については、参考書籍「達人のプログラマー」をご覧下さい。コードを主観的ではなく、客観的に見るようにしましょう。

※前回のフロントエンジニアのリーダブルコードは、「フロントエンジニアのリーダブルコード #1 変数名で情報を伝える」です。ぜひ、そちらも読んで見てください。


※参考書籍「達人のプログラマー
※参考書籍「リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!