読みやすいコーディングを心がける


2019年3月25日

皆さんこんにちは!
今日は頭痛が痛い末ちゃんです。

さて、今回は読みやすいコーディングについてお話ししようと思います。

 読みにくいコーディング

最近入社当時にコーディングしたデータを弄ったりすることが多いです。

教えてくれる人もおらず、完全に独学の元で書いていたため、
試行錯誤の中で頑張っていた痕跡をみると、過去の自分に賞賛を送りたいとこですが、
まぁ、メンテナンス性はなく、読みづらく、挙動を推奨しづらいコーディングなため、叱りたいものです。

たかがHTML/CSSのコーディングですらこの始末です。

例で言うとこのようなコーディングが平気でなされていました。
最低ですね。

flexコンテナの直下に画像を設置すると、IE等で画像が伸びるバグがあるため、
テキストブロックが画像より高さをもったら、崩れてしまうだろうし、
画像とテキストブロックのマージンすら指定されていません。

これでは、このブロックの派生型を作りたいことがあっても、
馬鹿のひとつ覚えみたいにCSSを上書きするか、そもそも別のCSSを書かなければ実現できません。

直してみる

これをちょっとはまともに改善してみましょう。
CSSはMind BEMdingで書いてみましょう。

このようになりました。

今度は前記事で書いたようなブロックでエリアを確保して、
その中に要素を格納するスタイルになり、CSSも可読性があがりました。

また、画像とテキストブロックが左右入れ替えるとしても、
親要素に .item–reverse { flex-direction: row-reverse; } を書くだけで実現できます。

<p>の文字列を左揃えにしたかったら、.text–center を外すだけです。

JavaScript等プログラミングでは?

一概には言えないのですが、命令型プログラミングをするよりも、
関数型プログラミングをしたほうがメンテナンス性が高いです。

何も考えずに命令をずらっと並べてしまうと、
あとで修正したいときに、後の処理が面倒なことになってしまうことが多いです。

まとめ

コーディングやプログラミングは速いこそ正義ではありません。
後の保守も含めて、速いことが正義です。

コーディングをしない人はこの辺をなかなか理解してくれませんが、
しっかりと説明をしましょう。

どうしても技術的負債が発生してしまうシチュエーションはありますが、
それを極力起こさないよう、書いていきましょう。

Share Button