Webコーディングスタイル、ベストプラクティス

コーディングスタイルは、次のような理由から決定しておいてからコーディングをスタートしたほうが良いとされています。

これぞ決定版かと思われましたため、メモさせていただきます。

  • 開発時間の短縮適用すべきスタイルが明確になる
  • 効率的な構文エラーのチェック
  • 可読性の向上

コーディングスタイル(優先順高)

多くのフロントエンドエンジニアが取り入れているとされる、コーディングスタイル。

タグ名は小文字を使用する

<div>, <p>, <article> ….. etc.

ただし<!DOCTYPE html> だけは大文字。

対になったタグは閉じる

いくつかのタグは 省略できるが、常に 閉じタグを記述。

<p> ほげほげほげほげほげ</p>

<ul>

<li>hogehogehogehogehoge</li>  ←省略できても閉じる

<li>ホゲホゲホゲホゲ</li >    ←省略できても閉じる

</ul>

属性値はダブルクォーテーションで囲む

常にダブルクォーテーションで囲い、一貫性を保持。

<img  src="log.png"  width=200  height=100>  ← ダブルクオーテーションなくても間違いではないが

<img  src="log.png"  width="200 height="100"> ← 一貫性保持のためすべて囲む

Boolian曲は常に省略する

Boolean 属性は属性が存在すればtrue, 存在しなければfalseの2値を取る属性。

そのため値はあってもなくても構わないもの、一貫して値を省略することによって boolean 属性であることが明確になり可読性が向上。

<input type="text" required>

imgタグにはwidthとheightを明示する

widthとheightが省略されたimg要素は、画像の読み込みが完了するまで自身のサイズを確定できません。サイズを明示するとレンダリングコストを抑制。CSS で指定しても可。

<img  src="log.png" >
<img  src="log.png"  width="200"  height="100"> ← 画像読み込み前に画像サイズ確定できる

src, href属性に空指定をしない

一部の古いブラウザは空指定であっても http リクエストを発行してしまうため。

<img  src="" > ←空指定。空でもリクエストが発生してしまう。

<img  src="log.png" >

スタイルシートは対象タグより前に記述する

head内での記述が一般的だが、少なくとも対象タグより前に記述。

スタイルシートを対象より後に記述してしまうと、要素のレンダリング後にスタイリングが開始されるため、余分なレンダリングコストがかかるため。

<p>ほげほげほげ</p>

<style> p{ color:red; } </style> ← 対象の後に記載のため余分なレンダリング発生
 

スクリプトは bodyタグの下部に記述する

スクリプトの実行中は、レンダリングが止まるため通常はできるだけ後に記述。

<body>

<script></script> ← </body>より後に記述すべき

</body>

 

その他のコーディングスタイル

これらは開発者の好みにより意見が分かれるスタイル。

  • ファイル名は全て小文字で、単語はハイフンでつなぐ
  • 文字コードはBOMなしの UTF- 8
  • インデントは半角スペース2つ分とする
  • 末尾の空白は削除する
  • 1行に一つの要素を記述する
  • 空要素(<br>や<img>など)にスラッシュを含めない
  • 属性値の数が多い場合は属性値ごとに改行を入れても良い
  • 属性値は Class 、ID、data-* 、その他の属性、の順序で記述する

プログラミング&Webデザイン奮闘記

なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。スクールは物体のないサービスなので、その質はばらつきが激しいと痛感。

受講してみたがオススメはできないスクールさんも正直ありました。(もちろんそちらのスクールさんへは本ブログからはリンクなどしておりません。)

それらのスクールの感想を述べて見たいと思います。

通学型:仕事しながらなので土日の講座を受講しました。料金は高いですが、対面なので先生は気合い入れて教えてくださるし、なにより同士となる生徒さんとのコミュニケーションは通学型でしか手に入らないと思いました。仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。

オンライン型:オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは1ヶ月コースがある点が良かったです。
私には都合が良いスクールでしたが契約する前に必ず体験を勧めます
無料ですしね。
詳しくは侍エンジニア塾さんの公式ページをご確認ください。

タイトルとURLをコピーしました