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

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

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

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

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

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

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

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

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

学ぶ必要があったこと

  • React(Next.js)
  • TypeScript
  • Atomic Design
  • 3階層システム

React

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

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

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

Next.js Getting Started

TypeScript

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

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

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

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

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

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

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

3階層システム

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

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

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

経験を活かせたこと

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

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

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

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

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


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

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

以上でございます。

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
ユーザーは見つかりませんでした