仕事の遅い(速い)マークアップエンジニアの9つの特徴(2019年度版)

マークアップエンジニアとは

マークアップエンジニアとはHTML5およびCSS3でのコーディングを文章構造やSEO、アクセシビリティを考慮してコーディングできる人材。

上記はマークアップエンジニアの最低必要条件なので大手IT企業で働く場合はGit, Photoshop, JavaScriptのスキルも要求されることが多い。

仕事の遅い(速い)人の特徴

マークアップエンジニアは仕事の遅い人と速い人の差が非常に大きい職種だ。

アルバイトや派遣社員だと特に優劣の差が大きく同じ仕事内容でも作業時間に2倍の差が出ることも珍しくない。

以下に2019年度版の仕事の遅い(速い)人の9つの特徴をまとめたので「仕事の遅い人」や「面接で採用する人」は参考にしていただきたい。

1. Emmetが使えない

EmmetとはHTMLやCSSを省略記法で記述するためのツール。

例えば以下のようなHTMLがあるとする。

このコードを書くのにあなたは何分かかるか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>foo</h1>
<ul>
  <li>bar1</li>
  <li>bar2</li>
  <li>bar3</li>
</ul>
</body>
</html>

1分以上と答えたあなたは仕事の遅い人に分類される。

上記のコードはEmmetを使用すれば10秒以内に記述可能だ。

html:5>h1{foo}+ul>li*{bar$}

Emmetが使えないと使える人とではそれくらいの差が出てしまう。

CSSの場合も例えば以下のようなコードの場合、Emmetを使用しない場合は数十秒はかかるがEmmetを使用すれば数秒で書ける。

しかもEmmetの場合は省略記法なので記述ミスも発生しにくい。

.foo {
  /* posa+t10+l20+w30+h40+m-a */
  position: absolute;
  top: 10px;
  left: 20px;
  width: 30px;
  height: 40px;
  margin: auto;
}

省略記法はEmmetの機能の一部でしかないので詳細な使い方は公式サイトを参照すると良いだろう。

https://emmet.io/

2. 英語ができない

英語ができないと前述のEmmet公式サイトの内容が理解できない。

翻訳ツールを使用すると理解に時間がかかるため必然的に仕事は遅くなってしまう。それ以前に英語ができない人はドキュメントが英語だと読むこと自体を拒絶してしまう人が多い。

英語と言っても高校で学ぶレベルの基礎程度の学力さえあれば問題ないのだが、IT業界は大学を卒業している人でも高校生レベルの英語ができない人が多い。

下記はLodashの公式サイトに書かれている文章なのだが、以下の文章を翻訳ツールなしで理解できるだろうか。

理解できなければIT業界内では「英語ができない人」に分類される。

Lodash is released under the MIT license & supports modern environments.
Review the build differences & pick one that’s right for you.

3. 日本語ができない

日本人であれば「英語ができない」はともかく「日本語ができない」ということは通常はありえない。

この場合の「日本語ができない」とは「漢字の読み書き」「文章読解」「文章作成」の3点が正確にできないことを意味する。

これらができないと「誤変換」「仕様の理解不足」「表記ゆれ」などによるテキストの再修正が発生しやすいため結果的に仕事が遅くなる。

4. テキストエディタがVS Codeではない

VS Code(Visual Studio Code)とはMicrosoft社製のテキストエディタ。

いわゆる高機能エディターに分類され、ほかにもSublime TextやAtomなどがあるが2019年現在ではVS Codeを使用するのが一番仕事が速い。

機能面ではSublime Textに劣る点もいくつかあるのでVS CodeとSublime Textを併用するマークアップエンジニアが一番業務効率が高い。

VS CodeがあればAtomはゴミなのでアンインストールして問題ない。

いまだにメインのテキストエディタが「秀丸」「サクラエディタ」「mi」などの人はいますぐVS Codeに乗り換えたほうが良い。

「令和」になっても古いテキストエディタを使い続ける人は仕事が必然的に遅いので採用面接で落とされる可能性が高くなるだろう。

VS Codeにインストールするべき拡張機能

VS Codeはそのまま使用してもコーディングの作業効率は向上しない。

マークアップエンジニアであれば以下の4つは最低限必要。

EmmetはVS Codeだと最初からインストールされているので自分で入れる必要はない。

ほかにインストールしたほうが良い拡張機能は作業内容によって異なる。

例えばVue.jsを使用する環境であればiwb.jpでは以下の拡張機能を推奨している。

VSCode+Vue.jsを使用するならインストールするべき拡張機能と設定

5. Gitが使えない

2019年現在だとGitを使用していないIT企業はほとんど存在しないのでGitはマークアップエンジニアの必要条件に含まれる。

最近はGitを使用する企業が多いのでGitを使用するマークアップエンジニアも増えたがSourceTreeやGitHub Desktopを使用しなければGitを扱えない人が多い。

ターミナルによるコマンドライン版ではなくソフトウェアを使用するとPCのパフォーマンスの低下や使用できる機能の制限により仕事が遅くなってしまう。

またGitを使用している環境であればGitHubも使用しているケースが多いのでGitHubの仕組みも理解できていないと業務効率が低下してしまう。

6. レタッチソフトが使えない

ここでいうレタッチソフトとはPhotoshop, Illustrator, Sketchなどのこと。

これらが仕事で使用されているのに自身でファイルを開いて確認や簡単な修正などができなければ、すべてデザイナー任せとなるため仕事が遅くなる。

7. Adobe Bridgeが使えない

Adobe Bridgeとは画像ファイルの管理機能に特化したアプリケーション。

これがあると画像の管理や検索が効率良く行えるのだが残念ながらこれを使用しているマークアップエンジニアはIT業界内で半数以下。

8. SCSSが使えない

最近はSCSSでコーディングしてCSSを生成するケースがほとんどだ。SCSSが使えずCSSで書くと記述量が大幅に増えるため仕事が遅くなる。

さらにAutoprefixerでベンダープリフィックス自動付与しない環境だと仕事が遅くなるだけでなくベンダープリフィックスの付け忘れによるミスも発生しやすい。

9. JavaScriptが使えない

マークアップエンジニアはHTML5およびCSS3のコーディングがメインだが最近はフロントエンドのJavaScriptの利用率が高くなっているためJavaScriptもある程度使えなければいけない。

これがマークアップエンジニア側でまったくできないとフロントエンジニアなどへの作業や質問などが多くなるため作業が遅くなる。

最近だとタスクランナーが使用されることが多い。タスクランナーはJavaScriptで処理が書かれている。

「JavaScriptができない」は「タスクランナーによる業務効率化ができない」ということになるため、これもまた作業の遅れの原因になりやすい。

さらにJavaScriptができない人の大半はプログラミングができない場合が多いのでコード内にテンプレートなどで出し分けがある箇所の理解に時間がかかり、仕事が遅くなるケースが多い。