マークアップエンジニアがフロンエンドエンジニアになるために、学ぶべきこと・活かせること

静的なWebサイトを作るマークアップから、動的なWebアプリを作るフロントエンドに仕事が変わって、今までのスキルでは足りなかったところや、逆に使えた部分等をまとめてみました。

マークアップからフロンエンドの領域へ来られる方の参考になれば幸いです。

マークアップエンジニア時代に身に着けたこと

ざっくりと、マークアップエンジニア時代に、身に着けたことをリストアップします。

• セマンティックなHTMLのマークアップ
  • Pug、EJSよる効率的な開発
• WAI-ARIAによるアクセシビリティ対応
• デザインカンプになるべく近づけていくCSSの表現力
  • SCSSによる効率的な開発
• アニメーションや動的な部分をJavaScriptで実装
  • ECMAScript2015+をbabelでトランスパイル
• Gitによるバージョン管理
• Gulpやwebpackでのタスク管理

細かいところは、以下を御覧ください。

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

学ぶ必要があったこと

• React（Next.js）
• TypeScript
• Atomic Design
• 3階層システム

React

現場によっては他のフレームワークかもしれませんが、私がアサインされたプロジェクトではReactを採用していました。JSXやProps、Hooksあたりを押さえると、とりあえずですがReactが触れるようになるかと思います。

今でも、公式ドキュメントをとにかくずっと開いています。

• React Getting Started
• フック早わかり

Next.jsはチュートリアルを、ひととおりやりました。

Next.js Getting Started

TypeScript

たとえば、Propsにinterfaceで型をつければ、以下のようなコンポーネントで受け取る値を間違えづらくなります。

import React from 'react'

interface FooProps {
  text: string;
}

const Foo: React.FC<FooProps> = ({ text }) => <p>{text}</p>

export default Foo

上記ように書けば、Fooコンポーネントのtextプロップスは文字列以外を受け取ることができなくなります。

基本的な型の書き方や、React.FCあたりが意味するところはこちらで学びました。

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義 ~

こちらも、macOS用のKindleで基本開きっぱなしです。

Atomic Design

静的なWebサイトでは、ページのデザインカンプから共通部分を見出してコンポーネントを作ることが多いと思いますが、私がアサインされたWebアプリケーションのプロジェクトでは、Atomic Design的なアプローチでパーツから作っていき、その組み合わせでページを作っていきました。

Atomic DesignではAtoms、Molecules、Organisms、Templates、Pagesとどんどんスケールが大きくなっていきます。たとえば、最小のAtomsの段階でdivのようなフローコンテンツの要素を使ってしまうと、それより上位のレイヤーでHTML的にNGなマークアップになってしまうことがあります。

<!-- button要素の中にdivを入れてはいけない -->
<!-- Molecules -->
<button>
  <!-- Atoms -->
  <div>テキスト</div>
</button>

このような場合は、Atomsのような最小単位のコンポーネントでは、記述コンテンツをメインにマークアップをしたほうが、後々楽になるでしょう。

ページとして組まれるときに、セマンティックなマークアップになるよう、意識して作っていくことが大切です。

ReactでAtomic Designとなると、こちらの書籍が役に立ちました。

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

3階層システム

静的なWebサイト制作ではあまり気にすることがなかった、3階層システムへの理解にとても苦労しました（していますｗ）。

今までごっちゃになんとなく書いていましたが、見た目（View）とビジネスロジックを分けるという考え方を身につける必要がありました。

（そもそも、ビジネスロジックってなに？レベルからのスタートだったので苦労しました。。。）

経験を活かせたこと

• セマンティックなHTMLのマークアップ
• WAI-ARIAによるアクセシビリティ対応
• デザインカンプになるべく近づけていくCSSの表現力
  • SCSSによる効率的な開発

ほぼすべての経験が活きていますが、これらがとくに自分の強みとして前に出せた部分でした。プログラマー側の方は苦手な人が多いようです。

Emotionという、CSS in JSのライブラリを使っています。SCSSの記法も使えたりするので、そこまで苦労せずに使えました。

逆に、SCSSの@functionを使わずにJavaScriptで書けますし、スタイルがスコープされるので正直SCSSより書きやすいです。BEMみたいな命名規則を使うこともなくなりました。

まあ、定数や変数の名前を考えないといけないので、命名規則の悩みは終わりませんが。

これ以外にも、学ばなければいけないことがたくさんあります。

一緒に頑張りましょう！！

以上でございます。