【新人コーダー向け】コーディングのTIPS8つ。


こんにちは、アンドレです。
先日、新人コーダー向けの社内セミナーを開催し、その中で表題の通りのお話をしました。
今回は、その内容を改めてまとめて、こちらにも書きたいと思います。

TIPS

インデントやフォーマットを意識・統一

日常生活でも整理整頓は大事ですが、コーディングでもやはり大事です。
コードを見た時、インデントがぐちゃぐちゃだと、汚い部屋を見た時のような、とても残念な気持ちになります。
汚い部屋の掃除は大変ですが、コードの整形はエディタなどで機械的に簡単にできるはずです。
人がコードに手を入れることもまだまだ多いのですから、人が見やすいよう、キレイにするようにしましょう。
これは気持ちの問題だけではなく、このレベルのことにも気が回るようにしていれば、コードの違和感やミスに気付きやすくなると、僕は考えています。

悩んだら定評のあるサイト・フレームワークを見てみる

マークアップやclass名の命名などは、特に新人の間は悩んだりしっくりこなかったりすることが多いかと思います。
そういう時には、定評のあるサイト・フレームワークを見てみると、ヒントやアイデアが得られます。
特にCSSフレームワークは、CSSのテクニックも参考になったりします。

ボキャブラリを増やす

class名や変数名の命名は、英語が苦手だったり、語彙が少ないとなかなか苦労します。
しかも、悩んで良い名前を付けられたところで、実質的なクオリティUPには繋がらないので、悩む・使う時間は少なければ少ないほどいいです。
web上の和英辞典で都度検索するのもいいですが、よく使う単語は覚え、さらにはニュアンスに応じた複数の単語を使えるようにしておくとより良いでしょう。

適宜略語を使用

長い単語は入力に時間がかかるのに加え、ミススペルのリスクも増えるので、適宜略したいところです。
ただし、略しすぎて他の人が見たときに意味が分からなくなってしまうのはNGです。
僕は1つの判断基準として、こちらの略語検索サイトで出てきたら使ってもOK、としています。

CSSの指定は必要最小限に(初期値を覚える、ショートハンドを使う等)

CSSは大規模サイトになればなるほど、膨大な行数となります。
確かに、維持管理の点では、Sass等のCSSプロセッサを使うこととして、適宜ファイルを分割すれば問題ないかもしれません。
しかし、CSSを修正する際には、精査する行数が少ないほうが当然良いです。
例に挙げたように、初期値・性質を把握(position:absolute指定するとdisplay:block扱いになる等)したり、ショートハンドで書けるものは書くようにしていれば、無駄に行数がかさむことがなくなります。

CSSの書き順を統一

CSSを修正する際、目的のセレクタ・プロパティが現在の行より前か後かが予測できると、探す労力が最小限で済みます。
エディタのジャンプ機能などもありますが、特にプロパティレベルでは、直近の前後数行にあるのが分かっている場合は、予測で辿ったほうが早いです。

サイト単位で一貫性を持つ

サイト全体でデザインのトンマナを統一するのと同様、マークアップ・命名規則も一貫させましょう。
いろんなルール・命名が混在していると、単純に気持ち悪いだけでなく、修正・追加の際に先述したような「予測」ができなくなるため、必要以上の工数がかかってしまいます。

自分の考えを持つ

定評のあるサイト・フレームワークを参考にしろというお話をしましたが、それに倣えと言ったわけではありません。
もちろん最初のうちは倣って構わないのですが、いずれはそれからの脱却・発展を図れればなお良いです。
ある物事を本当にモノにしようと思ったら、「守破離」の「破」と「離」は避けて通れないと、僕は考えています。

まとめ

いろいろと挙げてきましたが、最初から全部やろうとすると大変だと思います。
webアクセシビリティに対する取り組み同様、まずは意識し、できることから少しずつやっていってください!