Webサイト制作のマークアップエンジニアに必要なスキル

それなりに広く浅くフロントエンド、バックエンド、ときにはSEなどをやる立場にいるのですが、最近のWebサイト制作(ReactやVueなどを使わないサイト)を見て思ったのが、マークアップエンジニア(コーダー)に必要なスキルがかなり増えたなと感じました。
結構主観が入っていると思いますが、これからやってみよう!という人に少しでも伝わればいいかなと思います。

目次

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

マークアップエンジニアの作業範囲は企業によって曖昧な部分がありますが、HTML、CSS、JavaScriptなどを使いユーザビリティやSEOを意識してサイト構築を行います。
ユーザビリティの例では画面のリサイズやスクロールしたときのコンテンツ制御、マウスアクションによる挙動などUI/UXと言われる部分を作成します。この辺はフロントエンドエンジニアが行う場合もありますが、そこそこできる必要があると思います。
SEOを意識したコーディングは、DOM構造が複雑でなく、h1-h4が論理的な構造であることや画像のalt、metaなどを適切に設定する必要があります。またファイルなどを事前読み込みさせて表示速度を高速化するための知識もある程度必要になってきます。
まだまだ色々とありますがざっくりとこんな感じでしょうか。

必要になるスキル

上記では作業内容に関することをざっくり述べましたが、この作業を行うために必要になるスキルが以下です。

大体これぐらい必要
  • HTML(Pug)、PHP
  • CSS、Sass(Scss)
  • JavaScript
  • Git
  • webpackなどのモジュールバンドラー
  • gulpなどのタスクランナー

HTML(Pug)、PHP

HTMLはHTML5で書くことになります。少しCSSとJavaScriptの話が混ざりますが、CSSによるレスポンシブ対応が必須のためPCとスマホ(タブレット)を考慮しつつ、SEOを意識しながらHTMLを作成していきます。さらにJavaScriptで表示制御などを行う部分もあるので、連動する箇所を事前に抑えておき、JavaScript実装時にできる限り不都合がでないように作成しておく能力が必要になります。色々な要素が絡んでくるので実は奥が深くて考える事が多いです。

PugはHTMLタグを省略して書いたり、ヘッダーなどをパーツ化して再利用できたりと効率的に書くことができますが、HTMLとは書き方が違い、覚えることが増えるので企業によっては使わないこともあります。またPugからHTMLに変換が必要になるため、モジュールバンドラーやタスクランナーが必要になります。

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
.card
  .card-body
    h5.card-title Card title
    p.card-text Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    a(href="#").btn.btn-primary Go somewhere

PHPはCMSのサイト制作になると高確率でWordPressがでてくるので、PHPの基礎は理解しておいた方がいいです。そこからWordPressの作り方の勉強になっていくと思います。欲を言えばClassの概念を理解していると色々と役にたちます。将来的にはWordPress案件だと環境構築や本番移行のためにVCCWWordmoveなどでてきますが、Wordmoveは覚えておくと便利かなと思います。

CSS、Sass(Scss)

CSSはCSS3で書くことになります。前述のとおりレスポンシブに対応できることが必須で、作業効率を向上させつつ、メンテナンス性も考慮する必要があるため設計能力が必要になります。

殆どの制作現場ではCSSではなくSassで書くことが当たり前になってきています。(CSSで書くこともたまにあります)SassはCSSを簡素に書くことができて、さらにパーツ化もできて便利なやつぐらいの理解で大丈夫ですが、実際は色々な機能が組み込まれていて、使いこなすとかなり効率化できるため、Sassの設計がある程度できたほうがいいです。

Sassには書き方が異なるLibSassDart Sassなどがあり、LibSassが多く使われていましたが、諸事情によりDart Sassが推奨されるようになったのでDart Sassを覚える方がいいです。また、SassにはSASS記法・SCSS記法という記述方法があります。

// SASS記法
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

// SCSS記法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

殆どの人がCSSと書き方が似ているSCSS記法が理解しやすいと感じるのではないでしょうか。

こちらも最終的にはSassからCSSの変換が必要になるため、モジュールバンドラーやタスクランナーを使うことになります。また変換が必要なの…?と面倒になるのは分かります。このような事を解決するために設定画面からポチポチするだけで変換作業を行ってくれるPreprosという便利なツールがあるので使ってみることをお勧めします。一人で作業する案件ならPreprosで十分な力を発揮してくれると思います。

JavaScript

JavaScriptも前述で少し紹介しましたが、表示制御やユーザーの操作に対する制御を作ることが主になり、ライブラリのドキュメントや参考サイトを見ながら実装できる必要があります。
なお普通のWebサイト制作では今でもjQueryを使うので主要なDOM操作などは覚えておいた方がいいです。jQueryを使う理由としては、数ページ程度のWebサイトでReactやVueなどを使うと工数が合わないことや、対応できる人間が限られてメンテナンスができなったりするためです。

JavaScriptはいくつか書き方がありますが、ECMAScript2015(ES6)以上の書き方が主流になっているため古い書き方(ES5)はあまり覚える必要がないかもしれませんが、知っておくとためになるのは間違いないです。企業によってはTypeScriptを使っている場合もあります。
ES6で書く場合に古い環境への対応が必要な場合は、ES5に変換するためBabelというトランスパイラを使うことになります。大体の制作現場では後述するモジュールバンドラーやタスクランナーが作られていて、勝手にやってくれる環境が整っているかと思います。たぶん使うことがあるだろうと思うので言葉は知っておいた方がいいです。また、Preprosはこの辺もやってくれるので試してみると理解が深まるかもしれません。

ちなみに私の場合ですが、ES5はIE11対応案件で簡単に済ませたい時や、利用しているシステムの都合で今でも使っています。

Git

Gitはバージョン管理システムです。覚えることはSourceTreeという画面からポチポチするアプリケーション操作ができれば十分です。以下が主に使う用語で結構覚えることがあるように見えますが、実際に使ってみるとそんなに多くないことに気が付くと思います。

Gitで主に使う用語
  • clone
  • branch
  • checkout
    (checkoutには2つの役割があったため、バージョン2.23からswitchとrestoreが追加されて分かりやすくなったようです)
  • add
  • commit
  • pull
  • push
  • marge
  • fetch
  • stash
  • reset

ついでにコマンド操作ができると多方面から喜ばれるはずです。

webpackなどのモジュールバンドラー

モジュールバンドラーは簡単に言えば複数のJavaScriptファイルをまとめてくれる便利ツールで、CSSファイルや画像ファイルもまとめることができます。色々なモジュールバンドラーがある中で利用率が高いのがwebpackです。
JavaScriptファイル1枚で開発すればいいという考え方もありますが、複数人で作業する場合や規模によってはそれができないため、部品(機能)ごとに担当やファイルを分けて開発を行いモジュールバンドラーでまとめていきます。ついでにファイルをまとめることで通信の接続回数が減るためページの表示速度が上がります。

どこまで覚えておく必要があるかという点では、参考サイトなどを見ながら実際に動かして1枚のjsファイルが作れたらいいと思います。CSSや画像もまとめる場合には設定ファイルはそれなりに書く必要がありますし、webpackの挙動も何となく分かるので必要になったときにあたふたしなくて済むはずです。

たぶん開発現場でいい感じ調整された設定ファイルが準備されていると思います。

gulpなどのタスクランナー

タスクランナーは、前述のPugからHTMLに変換、SassからCSSに変換、JavaScriptのトランスパイルする、というタスク(作業)を自動化させることができます。タスクを実行するためのプログラムを書いておけば、あとはルール通りにタスクランナーがやってくれるので作業効率が上がります。色々なタスクランナーがありますが、よく使われているのがgulpで、検索すれば参考が沢山あります。

覚えることはモジュールバンドラー同様に簡単なタスクを書いてみるのがいいと思います。

まとめ

参考程度ですが、マークアップエンジニアはこのようなスキルを使って制作を行っています。この他にもコードが正しく書かれているかチェックするツールがあったりしますが、その都度覚えていけばいいかなと思います。

ここまで色々と話しましたが根本的に必要になるのがNode.jsです。とにかくこれがないと始まらないのでNode.jsをインストールしましょう!と言いたいところですが、先にやりたいことを決めて検索していけば自然とNode.jsにたどり着くはずなので、まずはやりたいことで検索をおすすめします!

一緒に働いている人にこの記事を読んでもらい、スキルを書いてもらった結果が以下でした。
苦手か得意かだけの単純思考なら?というぐらいの感覚です。

HTMLが書ける
苦手
1
2
3
4
5
得意
Pugが書ける
苦手
1
2
3
4
5
得意
PHPが書ける
苦手
1
2
3
4
5
得意
CSSが書ける
苦手
1
2
3
4
5
得意
Sassが書ける
苦手
1
2
3
4
5
得意
JavaScriptが書ける
苦手
1
2
3
4
5
得意
Git(SourceTree)が使える
苦手
1
2
3
4
5
得意
webpackの設定ファイルが作れる
苦手
1
2
3
4
5
得意
gulpの設定ファイルが作れる
苦手
1
2
3
4
5
得意
Node.jsが使える
苦手
1
2
3
4
5
得意
npm / yarnなどのパッケージマネージャーが使える
苦手
1
2
3
4
5
得意
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次