スタイルコーディングを早くする

概要

こんにちはラブグラフのエンジニアの熊谷です。今回はHTMLコーディングに関する内容を共有したいと思います。

フローの整理

今回は以下の２つの視点から、効率的なスタイルコーディングの説明をしたいと思います。

• ①環境構築（記述する作業のスピードを上げる）
• ②スタイルコーディングする順番（組み立てるスピードを上げる）

よろしくお願いします。

環境構築（記述する作業のスピードを上げる）

まずは環境構築です。できるだけ考えること少なくしながら作業できるようにしていきましょう。

コード補完機能（Emmet）を使う

テンプレートエンジンを使っている場合には、HTMLのコード補完はあまり恩恵を得られませんが、CSSの補完を少し使えるだけでもだいぶスピードアップにはつながると思います。

例えば bdb と入力して tab キーを押下するだけで、 border-bottom: 1px solid #000; までの記述を作成してくれます。

以下の省略記法を使う機会は相当無いと思いますが、まっさらな html ファイルに対して、 ! + tab を押下するだけで、HTMLの雛形を展開することができたりもします。

Emmet のチートシートのリンクを載せておくので、変更の度に１つずつでも覚えて作業効率を上げていきましょう。
https://docs.emmet.io/cheat-sheet/

Emmet を使うまでの準備

「Visual Studio Code」 であればデフォルトでインストールされているので、設定変更して利用できるようにしておきましょう。
設定 > 拡張機能 > Emmet 内にある「Trigger Expansion On Tab」にチェックを入れることで利用することができます。
その他、「Sublime Text」、「JetBrains」など、一般的なエディターであれば拡張機能として利用することができますので、インストールしておきましょう。

Emmet の有効化についての参考記事: https://qiita.com/bushi/items/82cc7133f809d34c0da1

プロパティの順番を決める

スタイルコーディングは自由度が高いからこそ、プロパティの記述順を守っていくことが、コーディングスピード向上のためにも必要になってきます。
ラブグラフではプロパティ順番のルールを追加して GitHub Actions から Stylelint が実行されるようにしていて、コードレビュー前にコミットした人が自分で修正できるような仕組みにしています。

例えば、以下の２つの例を見てみましょう

順番を定義していない場合

.without-rules {
  width: 600px;
  border-bottom: 1px solid #999;
  margin: 10px;
  background-color: #efefef;
  height: 400px;
  color: #45cfde;
}

順番を定義している場合

.with-rules {
  width: 600px;
  height: 400px;
  margin: 10px;
  border-bottom: 1px solid #999;
  background-color: #efefef;
  color: #45cfde;
}

上記は実装順にプロパティを追加していったのか並び順に意味が分からなくなっています。こういったケースでは同じプロパティを複数書き込んでしまい、思うように画面に反映されないケースもあるでしょう。
一方で、２つ目の例では順番が厳格に決まっています。display 要素から position に続き、そして横幅と、プロパティの概念の中で大きいものから詳細なものの順になっているので、実装後のイメージも膨らませやすくはないでしょうか。

スタイルコーディングする順番（組み立てるスピードを上げる）

それでは実際にコーディングする時、どういったことに気をつけているのか。以下にまとめているので、参考にしてみてください。

コンテンツを先に書き込む

まずは何より文字、画像をHTMLに書き込んでおきましょう。
もし作業開始段階でコンテンツの準備が間に合っていない場合は、ダミーのものを入れて作業を進めましょう。

文字、画像があることでより本番に近い状態になり、画面のイメージを作りやすいこと。
また、文字や画像などを書き込む作業とコーディング作業を行き来すると、おそらく頭のスイッチの切替が必要で、スピードが途切れてしまうことがあるのではないかと思っています。

CSSは外側の要素から書いていく

ではデザインから実際にスタイリングするとき、なにからスタイリングしていくのが良いのか。私は外側からスタイリングしていくのが良いのではないかなと思っています。
まず全体感ができてくるとそれだけで作業が進行していると感じて勢いづきますし、周りが出来上がるほど残りの作業は穴埋め的になっていくので、のちの作業もしていきやすく思っています。

~ 作業順の目安 ~

1. 大きなブロック要素（ヘッダー、フッター、間のセクション）など骨組み
2. 各セクションの余白
3. 中身のコンテンツの配置、装飾

このスタイリングする順番に関しては、私流に近いものがありますが、順番を決めておくだけでも「さぁどこから始めよう？」などと迷わずに作業が進めることができるので、効率的に作業を進めることができるのではないかと思っています。

まとめ

今回はスタイルコーディングをより快適に進められるようにまとめてみました。「慣れ」と言ってしまえばそうかもしれないですが、その言葉で結論づけるのはもったいないので、普段多くコーディングしない人でも開発環境と手順を意識しながら効率的に作業ができるようになると嬉しいです。
快適なコーディングライフを送っていきましょう。