マークアップエンジニアとして約4年間働いてきました。そして、これからはフロントエンドエンジニアとして静的なWebサイトから、動的なWebアプリケーションを作成する仕事に変わります。
そこで、4年間のまとめとして、マークアップエンジニアとして学んだことを書いてみようと思います。
これからエンジニアになる、もしくは目指す方のお役に立てれば幸いです。
マークアップエンジニアとは？
マークアップエンジニアとは、HTML・CSS・JavaScriptを使い静的なWebサイトをつくる人です。人によってはデザインまでやるひとや、PHP等のサーバーサイドまで対応するひともいますが、ぼくの業務範囲ではそれらはありませんでした。
作業の流れ
- デザイナーからデザインカンプをもらう
- デザインカンプを文書構造に変換し、マークアップしていく
- マークアップにスタイルを当て、見た目をデザインカンプに近づけていく
- アニメーションや動的な部分をJavaScriptで実装していく
- ターゲットブラウザでの表示崩れやバグがないか確認していく
- テストサーバーにデータをアップし、デザイナーやディレクターに確認してもらう
- 問題なければ、お客様に展開（提出）する
- テストサーバーで問題がなければ、本番環境にデプロイし公開
- 打ち上げ
プロジェクトごとに多少の違いはありますが、基本的にこのような流れで作業を進めていきます。いわゆるウォーターフォール型の開発が多かったです。
上流から参加したプロジェクトもありました。その時は、構成やワイヤーフレームをみながらHTML・CSS・JavaScriptで実装可能かどうかをエンジニア目線でレビューするだけではなく、ユーザー目線での改善案を提案したりもします。
手に入れたスキル
- セマンティックなHTMLのマークアップ
- Pug、EJSよる効率的な開発
- WAI-ARIAによるアクセシビリティ対応
- デザインカンプになるべく近づけていくCSSの表現力
- SCSSによる効率的な開発
- アニメーションや動的な部分をJavaScriptで実装
- ECMAScript2015+をbabelでトランスパイル
- Gitによるバージョン管理
- Gulpやwebpackでのタスク管理
- サーバーサイドJavaScriptをちょろっと
HTML
マークアップはWebサイトの基本です。セマンティックなマークアップはSEOでも有利ですし、アクセシビリティ性も高くなります。デザインカンプをみて、適切なアウトラインを考えましょう。
<!-- アウトラインが整ったHTMLの例 -->
<section>
<h1>大見出し</h1>
<p>リード文</p>
<section>
<h2>中見出し</h2>
<p>本文</p>
</section>
<section>
<h2>中見出し</h2>
<p>本文</p>
</section>
</section>
HTMLに慣れてきたら、効率化のためにPugやEJS、Nunjucksを使ってみましょう。
CSS
CSSは各プロパティを覚えてデザインを再現することも大切ですが、同じくらい設計も大切になってきます。
有名なCSS設計
- OOCSS
- SMACSS
- FLOCSS
- BEM
- ECSS
このあたりの入門書としては、少し古いですがWeb制作者のためのCSS設計の教科書がオススメです。
また、HTMLと同じようにCSSに慣れてきたらSCSS等のプリプロセッサを使い、効率化を図りましょう。
JavaScript
ライブラリやフレームワークを使う前に、バニラなJavaScriptを使ってみましょう。jQueryを使わなくても、ほとんどの機能を作ることができまます。また、ECMAScript2015+を使い、それ以下のバージョンを学習する必要はありません。Babelを使いましょう。
個人的にはICS MEDIAさんのJavaScript コードレシピ集がオススメです。
上記の作業に余裕が出てきたら、JavaScriptのライブラリやフレームワークを使い、Webアプリケーションにチャレンジしてみましょう。
- Vue.js（Nuxt.js）
- React（Next.js）
- Angular
このあたりを調べてみましょう。マークアップエンジニアからフロントエンドエンジニアへステップアップするために、これらの知識が必要になります。
Git
Web制作の現場では、ほぼほぼGitでのバージョン管理が行われています。わかばちゃんと学ぶ Git使い方入門を読めばだいだい大丈夫です。
タスクランナー
タスクランナーを使い、より作業を効率化させましょう。規模や内容によりますが、Gulpとwebpackは使えると良いです。（正確には、webpackはタスクランナーではありませんが。。）
まとめ
今回はあえて細かな解説はせず、ざっくりとした内容にしました。わからない単語は、ご自身で調べてみてください。調べる力もエンジニアに必要なものです。
また、作業の流れや項目もプロジェクトや会社により大きく変わりますので、そのあたりはアサインされた現場の先輩に聞いてみてください。
それでは、よきコーディングライフを。