私の爆速コーディング（ツール編） #CSS

はじめに

コーディング業をメインでフリーランスエンジニアをしています。なかざわです。
CSSと同い年。CSS大好き！

新卒からWeb制作会社に勤めてから「コーディング向いてないや。」が口癖で挫折しかけていた私でしたが
3年目には上司に「え、コーディング・・・はやいね！？」と驚かれるまでになっていました。私もびっくり！
涙目でコーディングPDCAをひたすら回しまくっていた、私のベストなコーディング（至、爆速コーディング）をご紹介したいと思います。

本記事は前編としてコーディングを助けるツールをメインにご紹介したいと思います。
16日公開の後編は設計思想・書き方ルールから、ベストなコーディングへアプローチすることをメインにお届けします。

現場で求められるコーディング

そもそも「爆速コーディング」の前に必要なことがあります。
まずクオリティです。何も補足がいらないくらい至極当たり前のことですね・・・。
というのを前提にして

「コーダー」に求められること

文書的整合性
ピクセルパーフェクト
作業の効率性 & メンテナンス性

の3点が求められていると思っています。
ざっくりと「成果物のクオリティ」と「開発のスムーズさ・安全さ」です。
それぞれ補足説明しながら対策についても共有できればと思います。

1. 文書的整合性

まず一番最初に得なければならないスキルです。

「HTML文書として破綻していないか」が、まず必要。

- HTMLファイル内のタグの閉じタグが意図したところにない、などの文書の崩れ
- HTMLのルールを守った文書構造になっていない（w3cのHTML仕様を守れていない）

これらのような状態にならないようにしましょう。
不完全なHTMLになってしまうと、スタイルが意図通りに効かなかったり、ブラウザ側でエラーとして検出されてしまいます。
当たり前ではありますが、成果物としてクオリティを担保しなければならないので、HTMLの文書的整合性が常に求められます。

対策は簡単！
HTMLバリデーションチェックを欠かさずに行います。

（「HTML バリデートチェック」と検索すると複数サイトが出てきます）

そんな簡単なミスしないよ・・・！って自信満々な私も
すべてのコーディングが終わったあとはバリデートチェックの時間を作って全てのページを確認するようにしています。
で、ミスは普通にあります。未だに。。やっておいて良かったねえ・・・って毎回思います。

2. ピクセルパーフェクト

HTML文書が破綻しないのと同じくらい大事なこと。

「デザインを完全再現できているか」

デザインは1px単位で意味を持っています。（持っているはずです。）
これをコーダーが無視して大雑把にコードに反映してしまうことは許されません。
「デザインされたものを1px単位でコードに反映しよう！」というのがピクセルパーフェクトです。
現場によってピクセルパーフェクトの優先度がまちまちなこともありますが、コーダーとしてピクセルパーフェクトを意識しながら実装していきましょう！

3. 作業の効率性 & メンテナンス性

HTMLの文書的整合性を担保できて、且つデザインも再現できるようになったら。

やっとここまで来ました！次はコーディングの効率化を目指しましょう！
現場ではHTMLのコーディングで何日も時間を使えないことが多いです。
そのため、効率良くコーディングができる人材は重宝されます。

コーディングの機会の度に「前回のコーディングよりも効率的にやろう！」と、ぜひ時間を測りながら作業してみてください。
そしてPDCAを回してくださいね。

まず、何に時間がかかっているのかを考えてみました。

コーディングで時間がかかること

クラスの命名に悩む　【なんて名前にしよう・・・あ、このクラス名はすでに使ってたわ・・・】
HTMLの設計に悩む　【え、divめっちゃ多くなったな・・・タグ多くない？混沌としてない？】
その他スタイルの付け方に悩む　【どこにpadding付けるの？それともmarginのほうが良いのかな？】

上記が多いのかなと思います。
ここでどれだけ悩まないでコーディングできるか、合理的にコーディングできるかが効率化を左右するのと、もう一つの「求められること」とした「メンテナンス性」に繋がります。
クラスの命名・HTMLの設計が整理できるようになれば、コーディングも迷わずスムーズかつ、安全に運用・納品ができるメンテナンス性をかなえることができます。
解決策となる設計思想・マインドは16日公開の後編記事にて具体的にご共有します！

まずはツールから

今回はツールに集中してご紹介♪
物理的にコーディングをサポートするものをご紹介します。
どれもメジャーなものばかりですが、参考になれば幸いです。

VSCode & VSCodeのプラグイン

現在はVSCodeをメインのテキストエディタとして使用しています。
プラグインも充実しているし、挙動も軽い。
コーディングしている分には十分なエディタだと思っています。

VSCodeおすすめのプラグインをご紹介します！

Lint系のプラグイン

HTMLHint
stylelint

HTML / スタイルそれぞれの記述に誤りがあるかをタイムリーに教えてくれます。
なにかあると「問題」ウィンドウに表示してくれますので、スタイルが思ったように効かないと思ったらまずこのウィンドウを確認すれば原因が分かる事が多くなり、デバッグの時間短縮になります。

インデントの整理を楽にするプラグイン

HTMLのインデントって、慣れないと整理するだけで頭が混乱しませんか？
私はHTML初心者の時に、いつもインデントがおかしいって怒られていました。しかも何が変なのかすらイマイチ自覚がないという・・・笑
インデントの感覚は遅かれ早かれ慣れるものでしたが、補助があればインデントの気にすることが減って、その分コーディングスピードもアップします。

indent-rainbowはインデントごとにカラーが変わるので、インデントのカウント・一覧性が良くなります。
Beautifyは、インデントを自動で整理してくれるプラグインです。自動インデントしてくれるのはBeautifyだけではなく、VSCodeの基本機能にも入っているようですので、ご自身の開発に適したツールを使ってみてください！
Prettierもインデントを適切にしてくるフォーマッターの一つです。
BeautifyなどのAuto indent toolはインデントがグチャグチャなHTMLファイルを一斉に自動インデントしてくれるのに対して、Prettierはコードを書いて保存したときに、決まったフォーマットに合わせて調整してくれます。
Prettierはもとのコードのインデントがグチャグチャだと正確に動かないことがあるので、日頃インデントを意識できている方への補助向けかもしれないです。また、フォーマッターなのでコードの規則性が定められるというメリットがあります。

上記のプラグインは全て入れても干渉し合わないので、ぜひ全て入れてしまいましょう！

ちなみに、インデントは「スペースによるインデントの個数2」がコードが読みやすいため一番オススメです。
慣れてきたら気にしてみてください♪
（既存のコードのインデント設定は勝手に変えないようにしてくださいね。）

以上、おすすめプラグイン（厳選）でした！
そもそもVSCodeはプラグインを入れなくても補助機能が使えて便利だなあと思います。
ぜひ、VSCodeのおすすめ機能などを調べながら使ってみてください♪

Sass の scss記法

scss

SassはCSSの記述を簡略化・管理しやすくするメタ言語です。
Sassの中にはsass , scssの記法がありますが、現在scss記法がメジャーなのでscss記法のみご紹介します。

scssは、CSSよりも記述量を減らしたセレクタの指定ができます。
またスクリプト言語にもなるのでCSSなのに変数を持ったり、値の計算が出来るようになります！
コーディングの効率化に大きく役立つため、多くの現場がCSSの素書ではなくscssを採用しています。

ただ、ブラウザはscssが読めないため、scssはCSSにコンパイルしなけばなりません。
そのためコンパイルを前提とした開発環境が必要です。

たとえば、以下のcssは

style.css

.header {
  color: pink;
}

.header h1 {
  color: red;
  font-size: 40px;
}

=> scssだとこんな記述になります。

style.scss

.header {
  color: pink;

  h1 {
    color: red;
    font-size: 40px;
  }
}

scss記法の詳細については他に記事が十分あるため省略します！

Emmet

Emmet
HTMLを簡略化した書き方ができるようになります。エディタによってはEmmet対応するためのプラグインが必要ですが、VSCodeではデフォルトで対応しています！

例えば

index.html

と入力してTabキーを叩くと

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

と、HTML5の最低限必要なタグが表示されます。
テンプレートとして使うのに便利ですね。
※ デフォルトがlang="en"なので、日本語サイトの場合にはjaに変える必要があります。

また、
CSSセレクタの書き方で書いてTabキーを叩くとHTMLに変換されます。

index.html

h2.heading02

index.html

<h2 class="heading02"></h2>

属性の記述が面倒くさいタグだって！Tabキーで叩くだけで。

index.html

//それぞれTabキーを叩く必要があります
a
img

index.html

<a href=""></a>
<img src="" alt="">

便利ですね！
もっといろんな応用活用がありますのでぜひ調べてみてください！
ですが、これくらいの使い方が個人的には一番実用的な気がします。
（ショートカットでもなんでも、複雑になって「なんて打つか頭で一瞬考えなきゃいけない」のはもう効率的ではないと思うので。）

紹介しておいてアレですが、私はEmmetを使いません。
Pugを使うからです！

Pug

パグはHTMLのテンプレートエンジンの一つで、HTML機能の拡張と入力の簡略化ができます。
テンプレートエンジンなので、Pug => HTMLへのコンパイルが必要です。
scssとCSSの関係と同じですね。

機能の拡張はHTMLなのに「インクルード・変数を持てること」が便利です。
入力の簡略化については、記法がEmmetとほぼ同じになるというところが便利です！
開始タグ・閉じタグという概念がなくなり、そのかわりインデントがマークアップに意味を与えます。
そのためインデントの正確さが求められ、慣れないと思い通りにいかない時があるかもしれません。
少しだけ慣れが必要だと思います。
scssと同様でコンパイルできる開発環境が必要なのもあり、導入コストの低さはEmmetには劣ります。

でもすごく便利ですよ。
まずは以下を御覧ください。

Pug

index.pug

doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title Document
    link(rel="stylesheet" href="/assets/css/style.css")
  body
    include ./_includes/header.pug
    main
      .main-visual#main-visual
        .main-visual__inner
          h1.main-visual__title xxxxxxxxxxxx
            br
            | xxxxxxxxxxx
            br
            | xxxxxxxxxxxxxxxxxxxxxx
            br
            | xxxxxxxx

      .news-label
        .news-label__inner
          .news-label__box--left
            .news-label__label NEWS
            ul.news-label-list
              li
                a(href="dammy")
                  p.news-label-list__date 2020.06.01
                  p.news-label-list__title xxxxxxxxxxxxxx

          .news-label__box--right
            a.news-label__more(href="dammy") Read More →

HTMLにコンパイルされたあと

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/css/style.css">
  <link href="./assets/css/style.css" rel="stylesheet"></head>
  <body>
    <header class="header" id="header">
      <div class="header__inner">
        <div class="header__primary">
          <div class="language">
            <ul class="language__list">
              <li class="--active"><a href="dammy">JP</a></li>
              <li><a href="dammy">EN</a></li>
              <li><a href="dammy">ZH</a></li>
            </ul>
          </div>
          <div class="anchor-icon">
            <ul class="anchor-icon__list">
              <li class="--partner"><a href="dammy">
                  <div class="anchor-icon__image"></div></a></li>
              <li class="--contact"><a href="dammy">
                  <div class="anchor-icon__image"></div></a></li>
            </ul>
          </div>
        </div>
        <div class="header__secondary">
          <div class="header__logo"><img src="/assets/images/common/header-logo.png" alt=""></div>
        </div>
      </div>
      <div class="pc-nav">
        <div class="pc-nav__inner">
          <ul class="pc-nav__list">
            <li><a href="#about">xxxxxxxxxxxxx</a></li>
            <li><a href="#development">xxx</a></li>
            <li><a href="#message">xxxxxxxxxx</a></li>
            <li><a href="#company">xxxxxxxx</a></li>
            <li><a href="#partner">xxxxxxx</a></li>
            <li><a href="#news">xxxxxxxx</a></li>
          </ul>
        </div>
      </div>
    </header>
    <main>
      <div class="main-visual" id="main-visual">
        <div class="main-visual__inner">
          <h1 class="main-visual__title">
            xxxxxxxxxxxx
            <br>
            xxxxxxxxxxx
            <br>
            xxxxxxxxxxxxxxxxxxxxxx
            <br>
            xxxxxxxx
          </h1>
        </div>
      </div>
      <div class="news-label">
        <div class="news-label__inner">
          <div class="news-label__box--left">
            <div class="news-label__label">NEWS</div>
            <ul class="news-label-list">
              <li><a href="dammy">
                  <p class="news-label-list__date">2020.06.01</p>
                  <p class="news-label-list__title">xxxxxxxxxxxxxx</p></a></li>
            </ul>
          </div>
          <div class="news-label__box--right">
            <a class="news-label__more" href="dammy">Read More →</a>
          </div>
        </div>
      </div>
    </main>

こんな感じ！
PugとHTMLじゃ記述量が全然違いますよね・・・。
Pug側には<header>がなかったのに、HTML側に出現したのは、include ./_includes/header.pugと書いてheader.pugという別ファイルの記述をインクルードできたからです。
これができると、ヘッダーやフッターなどの共通部分を1つにまとめて管理できるので、メンテナンス性が高くなります。

CSSセレクタの書き方で良いので、HTMLからCSSにコピペするときに、セレクタの書き方に直さなくて良いのが便利です。
Pugはインデントが重要というのは、階層でHTMLの親子関係を表すからです。
閉じタグの概念はありませんが、子要素がインデントが中に入っていくのはHTMLのインデントと同じですので、少しずつチャレンジしてみてください♪

このセレクタの書き方でタグを書く書き方については、EmmetのTabキー展開前とほとんど一緒なことに気づきましたでしょうか？
私は基本Pugで書くので、Emmetは使わないです。でも、HTMLで書かなければならない場面であってもPugとEmmetの記法が同じなのでPugを書いている感覚でHTMLも素書できて楽です。

爆速コーディングは一日にしてならず

以上、ツールのご紹介をメインにしたベストなコーディング（至、爆速コーディング）のコツでした♪
ツールは厳選しましたが長々とした記事になってしまいました。。

技術をパクるのは簡単じゃないことも多いですが、
ツールをパクるのは直ぐにできます！そして効果を得やすいので、ツールから攻めるのはとても大切だと思います。
周りにいる先人エンジニアには便利ツールをどんどん聞いちゃって真似しましょう！

そしてぜひ興味を持ったツールは使ってみてください！

次回は16日公開のコーディングの設計思想・ルール編です。
頭の中でさっと組み立てて、あとは指にアウトプットを任せるだけ！みたいなコーディングを目指した記事をお届け出来るようにしますので、ぜひお読みくださいませ！

私の爆速コーディング（ツール編）

はじめに

現場で求められるコーディング

「コーダー」に求められること

1. 文書的整合性

2. ピクセルパーフェクト

おすすめツール

3. 作業の効率性 & メンテナンス性

コーディングで時間がかかること

まずはツールから

VSCode & VSCodeのプラグイン

Lint系のプラグイン

インデントの整理を楽にするプラグイン

Sass の scss記法

Emmet

Pug

爆速コーディングは一日にしてならず