Help us understand the problem. What is going on with this article?

マークアップエンジニアに必要な技術

More than 1 year has passed since last update.

マークアップエンジニアとして約4年間働いてきました。そして、これからはフロントエンドエンジニアとして静的なWebサイトから、動的なWebアプリケーションを作成する仕事に変わります。

そこで、4年間のまとめとして、マークアップエンジニアとして学んだことを書いてみようと思います。

これからエンジニアになる、もしくは目指す方のお役に立てれば幸いです。

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

マークアップエンジニアとは、HTML・CSS・JavaScriptを使い静的なWebサイトをつくる人です。人によってはデザインまでやるひとや、PHP等のサーバーサイドまで対応するひともいますが、ぼくの業務範囲ではそれらはありませんでした。

作業の流れ

  1. デザイナーからデザインカンプをもらう
  2. デザインカンプを文書構造に変換し、マークアップしていく
  3. マークアップにスタイルを当て、見た目をデザインカンプに近づけていく
  4. アニメーションや動的な部分をJavaScriptで実装していく
  5. ターゲットブラウザでの表示崩れやバグがないか確認していく
  6. テストサーバーにデータをアップし、デザイナーやディレクターに確認してもらう
  7. 問題なければ、お客様に展開(提出)する
  8. テストサーバーで問題がなければ、本番環境にデプロイし公開
  9. 打ち上げ

プロジェクトごとに多少の違いはありますが、基本的にこのような流れで作業を進めていきます。いわゆるウォーターフォール型の開発が多かったです。

上流から参加したプロジェクトもありました。その時は、構成やワイヤーフレームをみながら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はタスクランナーではありませんが。。)

まとめ

今回はあえて細かな解説はせず、ざっくりとした内容にしました。わからない単語は、ご自身で調べてみてください。調べる力もエンジニアに必要なものです。

また、作業の流れや項目もプロジェクトや会社により大きく変わりますので、そのあたりはアサインされた現場の先輩に聞いてみてください。

それでは、よきコーディングライフを。

otsukayuhi
ゆめみ所属のフロントエンドウェブデベロッパーです。藤子・F・不二雄先生を尊敬する、キーボードマニアでもあります。
https://otsukayuhi.app/
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした