自分のコーディング手順とコーディング規則を紹介する。

こんにちは、Yukiです。

今回は私がHTMLコーディングの仕事でよく利用している「コーディング手順」と「コーディング規則」を紹介していきたいと思います。

これが絶対的に正しいというわけでもないですし、他にも良い方法があると思うので、あくまでも一例としてお読みいただけるとありがたいです。

主に、駆け出しのコーダーでまだ自分の中のコーディング手順やコーディング規則を確立できていないという方向けの内容となっています。

スポンサードサーチ

コーディング手順

私のコーディング手順は以下の感じです。

  1. 仕様の確認
  2. デザインを見て、頭の中でコードを組み立てる
  3. 画像の書き出し
  4. テンプレートを使用してコーディング開始
  5. バリデーションツールで文法エラーの確認
  6. 各種チェック
  7. 修正/完了

では詳しく見ていきましょう。

1.仕様の確認

まずは、対応ブラウザ、パスの指定方法(相対パスか、ルート相対パスなのか)、フォルダの構造、納期、納品形式、アニメーションの実装などの仕様を確認します。

特に後からの変更が困難なものをクライアントに確認しておきましょう。

2.デザインを見て、頭の中でコードを組み立てる

いきなりコーディングするのではなく、まずPCとスマホ両方のデザインを見て、「ここはsectionで、ここがh2で…ここはレスポンシブを考えて相対値で指定したほうがいいな…」のように、頭の中でコード組み立てます。

この際に意識することは、「クラス名の命名」「共通要素の洗い出し」「実際にコーディングしたらつまずきそうなポイント」を明確にしておくことです。

「クラス名の命名」に関してはサイト内でクラス名が被らないかや、わかりやすい名前なのかなどを検討します。そして、共通要素でくくれそうなものに関しては紙などに書き出します。

実際のコーディングに着手する前に、上記のことを明確にしておくことで、実際にコーディングに着手した時のスピードが格段に変わります。

このような準備をせずに、いきなりコードを書いてしまうと高確率でコードが破綻しますし、「書いてる途中で直せばいいや」と思っていざ直そうと思うと、すでに手遅れであることが多いです。

また、このようにつまずきそうなポイントを明確にできるとスケジュールもかなり立てやすくなります。ついついめんどくさくなり、すぐにコードを書き始めたくなるものですが、この準備は非常に大切なので、めんどくさがらずにやるようにしましょう。コーディングはコード書く前の準備で全てが決まると言っても過言ではないです。

3.画像の書き出し

頭の中でコーディングを終えた、このタイミングで画像の書き出しを行います。このタイミングで書き出しを行うことで、各画像のサイト内での役割が明確になっているため、適切な命名と書き出しができ、後から書き出しや画像の命名をし直す必要が減ります。

画像の書き出しはかなり重要で、大きく4つの気をつけるべきポイントがあります。

  • 画像の命名
  • ファイル形式
  • 高解像度ディスプレイ対応のため2倍の大きさで書き出す
  • ファイルサイズの圧縮

画像の命名に関して

「ページ名/ブロック名」_「役割/意味」_「連番」

の順で命名していきます。

例)「contact_btn_01」、「news_icon_03」

役割/意味に関して下記のような意味が分かる範囲で省略した単語を使用します。

  • タイトル:ttl
  • 背景画像:bg
  • アイコン:icon
  • ボタン:btn
  • ナビゲーション:nav
  • テキスト:txt
  • 写真、図表:img
  • メインビジュアル:mainv
  • ロゴ:logo
  • などなど…

ファイル形式

ファイルサイズをできるだけ小さくしたり、画像の用途に合わせるために、適切なファイル形式での書き出します

初めはなんでもPNGで書き出してしまいがちですが、用途に合わせて使い分けましょう。

大きく以下の6つで適切な使い分けが必要です。

  • .jpg:色数の多いイラストや写真に使用する(ファイルサイズ重い)
  • .png(PNG-8):単色のアイコンなどに使用する(ファイルサイズ軽い)
  • .png(PNG-24):色数の多いイラストや写真に使用する(.jpgよりファイルサイズ重い)
  • .png(PNG-32):背景の透過が必要な画像(ロゴなど)に使用する(ファイルサイズかなり重い)
  • .gif:アニメーションが必要な画像に使用する(ファイルサイズ軽い)
  • .svg:拡大してもボケないようにしたい画像に使用する(ファイルサイズ重い?)

実はPNGにはPNG-8、PNG-24、PNG-32の3種類あって、この使い分けは非常に重要になってきます。フォトショップでPNGは基本的にPNG-24として扱われ、書き出しの際に「ファイルサイズ小(8-bit)」を選択するとPNG-8として扱われ、「透明部分」を選択するとPNG-32として扱われます。

色数の多いイラストや写真の書き出しの際には、基本的には「PNG-24」ではなくファイルサイズを抑えられる「.jpg」を使用する方が良いでしょう。

ここでは各ファイル形式の詳しい違いに関しての説明は割愛しますが、最低限上記のような使い分けが必要だということは知っておきましょう。

高解像度ディスプレイへの対応のため2倍の大きさで書き出す

高解像度ディスプレイでの表示の際に、画像がぼやけてしまうことを避けるために2倍の大きさで書き出す。

ファイルサイズの圧縮

高解像度ディスプレイの表示のため、2倍の大きさで書き出すとファイルのサイズが大きくなってしまい、サイトの表示速度が遅くなってしまうため、画像の圧縮が必要です。

gulpを使って圧縮するか、専用のツールを使って圧縮しましょう。

pngファイル圧縮ツール

jpgファイル圧縮ツール

4.テンプレートを使用しコーディング

ここでようやく実際のコーディングに入ります。

コーディングの際にはゼロからHTMLなどのファイルを作るのではなく、もともとある程度の型が出来上がったテンプレートを使用します。私は以下のテンプレート使用しています。

テンプレート

*上記のテンプレートはハニワマンさんのテンプレートを自分用に使いやすくアレンジしたものです。

コーディングの際には、まずはfont-familyや色などの変数をSassでまとめ、コンポーネント化できるパーツのコーディング、それからheaderやfooterなどの大枠とボタン、見出しなどの共通部分のパーツをコーディングし、それから細部のコーディングを進めます。基本的にはHTML→CSS(SCSS)→JSの順にブロック毎に(header,mainv,footerなど)書いています。

*ちなみに私は、Sass(SCSS)、Gulpを使って開発しています。慣れるとコーディングのスピードが格段に上がるので、導入に挫折しそうになった方も諦めず挑戦してみてください。

5.バリデーションツールで文法をチェック

コーディングが大方終わったら、W3CのバリデーションツールでHTML,CSSの文法が間違っていないかチェックします。

6.各種項目のチェック

文法のチェックが終わったら、各種項目のチェックを行います。

私は以下の項目を必ずチェックしています。

  1. altが正しく記載されているか(ただの装飾の画像には入れなくてもOK)
  2. 誤字がないか
  3. font-familyは正しく表示されているか
  4. 色があっているか(微妙に違う色などにも注意する)
  5. マークアップの構造が適切か(見出しタグやp,a,figcaptionなど適切に使えてるか)
  6. どの画面幅でも表示が崩れていないか(320px~1900px)
  7. アニメーションの挙動は適切か(ちゃんと動くか、transitionは入ってるか)
  8. ブラウザでの表示を確認(IE、Edge、FireFox、Chrome、Safari)
  9. リンクが正しく入っているか
  10. 横スクロールが発生していないか(特にスマホ画面で)
  11. 画像ファイルのサイズが重すぎないか
  12. デザインとのズレがないかピクセルパーフェクトでチェック

ここでのチェックを怠らないようにしましょう。セルフチェックの徹底によってクライアントへ負担をかけないことはフリーランスであれば今後継続的に仕事を取れるかどうかに関わってきます。

7.修正の対応/完了

チェックが終わりクライアントに提出したら、修正or完了となります。

コーディング規則

続いてコーディング規則についてです。私は以下のようなコーディング規則を作成し、特に指定がない場合はこれに基づいてコーディングをしています。

  • HTML、CSS(SCSS)ともに、セクションやブロックごとの開始と終わりにコメントで区切って、各ブロックの区切りをわかりやすくする
  • CSSのプロパティ順はposition, padding,margin,top,bottomなど「位置、余白」に関するものは一番上に書き、あとはアルファベット順に並べる
  • クラスの命名規則は基本はMindBEMdingを使用。共通要素や下層ページが多いサイトにはモジュールコーディングの命名規則を採用
  • パスの指定方法は、特にクライアントから指定がなければ「相対パス(ドキュメントパス)」を使用する
  • 文章構造はHTML、装飾はCSSに分離
  • どの画面幅でも表示が崩れないように、基本的にリキッドデザインでコーディングする
  • ブラウザは特に指定がない場合は基本「Safari」「FireFox」「IE」「Edge」「Chrome」で確認
  • ブレイクポイントは基本的にBootstrapに合わせて「スマホ 768px」「タブレット 992px」(タブレットに関してはデザインによって例外あり)
  • クラス名は位置や色ではなく、役割や意味で命名し、その単語からパーツを推測できるような名前にする
  • padding marginなどのように複数の値を一度に指定できるプロパティに関しては、基本的にショートハンドプロパティを使用する(padding: 10px 20px 0 0;のように)
  • 命名の際に数字を用いる際は「01」「02」のように二桁の連番で記述する
  • 基本的にはBlockで左右上下の余白を指定し、残りの要素には下に対して余白をつけていく

スポンサードサーチ

まとめ

こんな感じで、今まで勉強しコーディングの仕事をこなしてきた中で自分が確立したコーディング手順とコーディング規則についてまとめてみました。

まあ厳密にはコーディング手順や規則に関しては、案件やプロジェクト毎に最適なものは変わってくるものなので、最終的にはいろんな手順や規則を学び、柔軟に対応できるようにしておくことが大事かと思います。

また、特に規則や手順の指定がない場合において、効率的にコーディングを進める際には自分の中のルールを確立しておくとスムーズに開発が進められるので、まだ自分の中のルールを確立できていないという方は、いろんなコーディング手順、規則を真似して、より自分の使いやすいものを見つけていくことが良いかと思います。

ちなみにコーディング手順や規則についてもっと深く勉強するなら下記の書籍がオススメです。

上記の本では、特に「どういった手順で開発すればミスなく効率よく制作を進められるのか」ということにフォーカスした内容となっており、「なぜこの手順でやる必要があるのか」や「このルールにはどんな意味がるのか」などを噛み砕いて解説している1冊となっています。

上記の本では、今回の記事でも紹介したMindBEMdingや、BEM、SMACSS、OOCSSなどの有名なCSSの設計思想をいくつか紹介した本となっており、コード破綻させないためにはどういったことを気をつけていけばいいのかなどが非常に丁寧に紹介された一冊となっています。

では今回は以上です。ありがとうございました。

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。