元々は社内でバナー職人みたいな立ち位置だった私ですが、ここ1〜2年で、少しずつサイトのデザインやコーディングも任せて頂く機会が増えました。
今回は業務でコーディングをしてみて感じたことを書いてみたいと思います。
※HTML,CSS,jQueryのみを使った静的サイトのコーディングのお話です
① 綺麗にHTMLマークアップをする
正しく書かれたHTMLはコメントがなくても普通に理解できます。これはお手本のように美しくマークアップされたHTMLを見ればわかります。
本当に「スラスラ読める」んですよね。
文書構造がめちゃくちゃなdivだらけのコードは読んでて苦痛ですし、SEO的にも最悪です（私）
これまでテキトーにコーディングしてましたが、上司に注意を受けてからはマークアップの練習をするようになりました。
② classの命名規則を統一化する
これは今も迷う問題です。
というのも、弊社にはこれといった命名規則が明文化されていません…。
デザイナー、エンジニア各個人によって命名規則がバラバラすぎて気持ち悪いので、どうにか統一したい（しかしそんな権限はない）
一応自分は、アンダースコアで位置を、ハイフンで要素を示すようにしてます。
<span class="main_wrapper-text">あああ</span>
正しいのかどうかはわかりませんが、とにかく自分の中だけでも 「俺はこのルールでやってんだよォ！」 というのはあった方がいいと思います。
なにより、自分で管理していて楽です。
③ 便利なサービスを使って、簡単につくる方法を考える
デザインにスライダーがあったら「じゃあSlickを使おう」って考えたり、
アイコンが使われていたら、SVGで書き出す前に、Font Awesome か Material Iconsで代用できないか考えたり、
イラストを使ったサイトにしたいんだけどって言われたら、
モダンで汎用性高い、商用利用可のフリーイラストサイト様を使わせていただこうかと思ったり。
あと、スクロール連動のアニメーションをつけたいといった要望があれば、ここからjsとってきたり。
（柴犬のインパクトがすげーのよ）
どう実装したらいいのかわかんない動きは、とりあえずここに助けを求めたり…。
(WEBサイトの動きはほぼすべて解説してくれている神サイト)
上のサービス（サイト）は超メジャーなものばかりなので、デザイナーさんからは「そんなん誰でも知っとるわ！！」と言われそうですが…。
一つ一つ自分で学んでいったのもあるのですが、
有名サイトの内側を調べてみると、上のようなサービスがどれか一つは絶対に使われているのがわかるかと思います。
そういった便利サービスの使い方を真似していくことで、簡単に、そこそこリッチな見た目のサイトを作る方法を学んでいったような気がします。
以上、まとまりのない記事になってしまいましたが、私が業務でコーディングをするようになってみての所感でした。