コーダーって何？
コーダー【coder】とは、ソフトウェアやWebサイトなどの開発で、仕様書や画面イメージなどを元に、コンピュータ言語でコードを記述する人。
IT用語辞典 e-Words
つまり、コーダーとは純粋にデザインを基にHTMLをマークアップしたり、動きをつけるスクリプトのコードを記述する人ってこと。
よくプログラマと混同されるけど、コーディング作業をする人をコーダーと呼ぶから。
プログラマがコーディングしてるだけで、コーダー＝プログラマではない。
コーディングって？
デザイナーが作ったデザイン案と、プログラマの作ったコードを合体させる作業。
緻密な作業が必要であいまいにやるとまぢで怒られるし、仕事無くなる。
Photoshopで作られたデザインなら、コーダー側も最低限Photoshopが必要だし、もちろん、使えないといけない。デザインの色んなサイズを測ったり、書き出ししたりしなくちゃいけないからね。今はXDが多いみたいだけどやることは一緒。
これは軽い愚痴だけど、HTMLができる人がデザインを作るとコードをはめ込みやすいんだけど、デザイン力のみの人が作ったデザインって、コードを書く側の配慮がないからマジで苦しむってことはちょっと脳の奥に留めておいて。
こればっかりは、実際に経験しないとわかんないね。
開発環境
コードを書くにも、エディターだけじゃきついから、ローカル側の開発環境が必須。
自分のパソコンに、XAMPPをインストールして、VSCode / Eclipse / NetBeans などの総合開発用のエディタを入れるとデバッグもできるからコーディングがやりやすい。
VSCode / Eclipse / NetBeans はお好みで選択。
自分は、最初Eclipse→NetBeans→VSCode で落ち着いた。
VSCodeは、結局、一番使いやすいのと、いろいろなことと連携できるのが良かった感じ。
コーディングのルール
コーディングって、デザイン通りに、タグを書いて表示すればいいだけって思ってる人も一定数いる感じだけど、多少のルールもある。
マークアップにも、タグの使い方・クラスのつけ方・CSSの指定方法にある程度のルールがあったりするので、そういうことを意識してコーディングできるようになったら1人前かなと思う。
コーディング規約のあるお仕事もあるのでコードを書く時に留意は必要。
ちなみにPHPには、PSRという標準コーディング規約がある。
HTMLのコーディング規約
検索したが定型規格は無く、制作側で一定のルールを定める感じが多い。
Googleのコーディング規約を見つけたので翻訳しつつ記載する。
・Google HTML/CSS Style Guide
- ドキュメントタイプ
HTML5を使用する。<!DOCTYPE html>
void要素を閉じてはいけない。<br />ではなく<br> - HTMLの妥当性
有効なHTMLコードを使用する。閉じタグのあるものは閉じる。
W3C HTML validator などのツールを使用してテストする。 - 目的に応じてHTMLを使用する
見出しにはh要素、段落にはp要素、アンカーにはa要素。
異なる要素をcssで似せたりしないこと。
目的に応じてHTMLを使用することは、アクセシビリティ、再利用、およびコード効率の理由から重要です。 - マルチメディアフォールバック
マルチメディアには代替コンテンツを提供する。
画像・ビデオ・キャンバスを介したアニメーションオブジェクト等のマルチメディアの場合は、代替アクセスの提供が必要。imgのalt、video/audioのcaptionなど。
アクセシビリティの理由から代替の提供は重要で、目の不自由なユーザーはaltなしで画像が何なのか知る手掛かりがなく、ビデオやオーディオのコンテンツを理解できない場合があります。
ただ、装飾目的用の画像にはalt=””のように代替えテキストを使用しないこと。 - 分離の重要性
マークアップ・スタイル・スクリプトを厳密に区別し、分離すること。
HTML要素の中に直接スタイルを書くことはしない。
スタイルシートは別ファイルに記載しリンクする。
スクリプトも別ファイルに分離してリンクする。
構造の分離はメンテナンスの理由から重要。 - エンティティの参照
—,”, or☺などのエンティティ参照を使用する必要はありません。
唯一の例外は、HTMLで特別な意味を持つ文字（記号＜/＆など）や制御文字・非表示文字に適用されます。 - オプションタグ
オプションのタグを省略します。
以下のタグは終了タグが省略できます。
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th - タイプ属性
スタイルシートとスクリプトのタイプ属性を省略すること。
HTML5ではデフォルトでtext/cssとtext/javascript となるので、タイプ属性の記述はいらない。 - id属性
不要なid属性は避けること。
styleにはclass属性、scriptにはid属性を優先し、idの値には常にハイフンを含めJavaScript識別子の構文と一致しないようにします。 - HTMLの一般的なフォーマット
すべてのブロック、リスト、またはテーブル要素に改行を使用し、すべての子要素をインデントします。 - HTMLの行の折り返し
視認性の向上のため、長い行は分割し、改行します。
行の折り返しは、折り返した属性と子要素を区別するために、4つのスペースでインデントする必要があります。 - HTML引用符
属性値を引用するときは、二重引用符を使用すること。
シングルではなく、ダブルクォーテーションで属性値を記述すること。
コーディングは見やすさとメンテナンスのしやすさを考慮
自分が修正するだけでなく、他人が触ることも考慮してコーディングすると見やすく触りやすいコードになる。
きれいでわかりやすいと、自分も幸せになれる。