フロントエンドエンジニアのロードマップ(2021)読解

はじめに

結論から書くと、今後はフロントエンドに注力していこうと思います。

現状フロントエンド・バックエンド両方担当していますが、下記理由からフロントエンドに注力しロードマップを参考に学んでいこうと思います。

なぜフロントエンド？

会社で受講したWebのセキュリティ研修がきっかけです。
IPAのAppGoatとFlatt SecurityのKENROを受講しましたが、似たような内容でもKENROの方が使いやすかったです。(IPAさんごめんなさい)

どうして使いやすかったのかはうまく説明できませんが、色を使いすぎていない、スペースが適度に空いているなどデザインの面が良かったからだとは考えています。

もともとユーザーも自分も使いやすいと思えるサービスを開発したいと考えていましたが、「使いやすい」の定義が曖昧でした。

ただ2つのサービスを使ってみた経験から、使いやすさは目に見える画面に影響されることが多いと考えたため、目に見える部分を担当するフロントエンドを専門にしたいと思うようになりました。（レスポンスが遅い、すぐエラーになるなど正常に動作することはクリアしている前提の話ですが)

デザイナーでもよくない？

画面を担当するのであればデザイナーでもよくないかと思いましたが、過去にデザイン系の案件を担当してデザインを考えているときよりもコードを考えてたり、書くことの方が好きなためエンジニアとして働きたいと思っています。

過去に担当した案件から、デザインは客観的に説明することが難しい(主観的になってしまう)ことが多いイメージです。色のコントラスト比や黄金比など数値にできるものならまだしも、レイアウトやUIの使いやすさは個人の感覚に左右されることが多く、自分が納得してデザインを決めることができませんでした。(私が知らないだけで、そういったものの理論ややり方もあるかもしれませんが)

デザインに対し、プログラムは客観的に説明できることが多く、自分も納得感を持って仕事ができていました。(同じ処理は繰り返し処理にしてコード量を減らす、複数箇所から参照される値は変数・定数にして改修時に直す箇所を少なくするなど)

なぜロードマップ？

フロントエンドを専門にしていくにあたり、何を学べがいいか分からないため、全体像を知ることができるものを探していました。

今回参考にするのはroadmap.shのFrontendDeveloperのロードマップです。Zennなど技術系サイトに掲載されたり、テック系のYouTuberが紹介していました。

何を学ぶ必要があるかを知るためにロードマップを読解し、その中から今後学んでいく領域について書いていこうと思います。

ロードマップ

FrontendDeveloper roadmap

画像の中心の1本の線でつながっているブロックごとにどういった内容か書いていきます。

マークの意味

画像左上のマークの意味です、上にあるものほどおすすめな選択肢になっています。

  1. Personal Recommendation / Opinion
    おすすめな選択肢

  2. Alternative Option - Pick this or purple
    代わりの選択肢、選ぶならこれか上記のもの

  3. Order in roadmap not strict(Learn anytime)
    いつでも学んでいい、順番は守らなくていいもの

  4. I wouldn't recommend
    非推奨、やらなくてもいい

項目

項目内のトピックについて箇条書きしていきます。太字は優先度が高い選択肢です。(マークの意味の上から2項目の選択肢)

Internet

インターネット、HTTP、ブラウザなどそもそもの基礎となる技術。
フロントエンドはパフォーマンス向上のために特にブラウザの知識は持っておく必要がありそう。

  • How does the internet work?
  • What is HTTP?
  • Browers and they work?
  • DNS and how it works?
  • What is Domain Name?
  • What is hosting?

HTML

HTMLの基礎、フォーム・バリデーション、ベストプラクティス 。
基本的には書けるけど、何が良い書き方なのかは知っておいた方がよさそう。

  • Learn the basics
  • Writing Semantic HTML
  • Forms and Validations
  • Conventions and Best Practices

Semanctic HTMLは要素に目的・役割を持たせること。検索エンジンがページの検索のランキングを上げる、目の不自由なユーザー向けの読み上げソフトのページ移動を補助するなどの利点がある。

CSS

CSSの基礎、FloatsやFlexなどのレイアウト、端末ごとによって表示が異なるレスポンシブデザイン。

  • Accesibility
  • SEO Basics
  • Learn th basics
  • Making Layouts
  • Responsive design and Media Queries

Accesibilityはフォントサイズを上げる、行間を空けるなど、ユーザーがより快適になるようにデザインすること。

SEOは検索エンジンで自社のページが検索時に上位表示されるように最適化する戦略。toC向けのサービスはこの知識も求められそう。(toB向けサービスでも広告記事は同様に必要かも？)

JavaScript

JavaScript基礎、DOM操作、非同期通信、ES6・JavaScriptモジュール、バブリングやスコープなど概念。

  • Syntax and Basic Constructs
  • Learn DOM Manipulation
  • Learn Fetch API / Ajax(XHR)
  • ES6 + and modular JavaScript
  • Understand the concepts Hosting, Event Bubbling, Scope, Prototype, Shadow DOM, strict

普段ES5で書いているので、ES6は改めて学ぶ必要がありそう。バブリングやスコープなどJavaScript固有の概念も理解しておく。

Version Control Systems

バージョン管理システム、Gitの基本操作。

  • Basic Usage of Git

Repo hosting services

GitのWebサービスにあたるもの。GitHubを覚えればOK。(BitBucketを使ったことあるけど、UIが違うだけでほぼ同じだったので、GitHubだけでよさそう)

Web Security Knowlwdge

最低限覚えておくセキュリティの知識。

  • HTTPS
  • Contents Security Policy
  • CORS
  • OWASP Security Risks

Package Manager

主にJavaScriptで開発されたモジュールを管理するためのシステム。
手動でそれらモジュールの設定ファイルや更新を行うのは手間が掛かるため、簡単なコマンド入力でそれらの作業ができるようになる。
- npm - yarn

CSS Architecture

  • BEM
  • OOCSS
  • SMACSS

モダンなフレームワークとCSS-in-JSがある場合は、CSS設計は優先度は低い。
ただBEMには精通していることは推奨。

CSS Preprocessors

  • Sass
  • PostCSS
  • Less

CSS設計と同じくフレームワークとCSS-in-JSが主流になっているので、こちらも優先度は低い。
ただ余力があれば知識を付けておくとよい。

Build Tools

Task Runner

ファイルの更新を監視しコンパイルするなどのタスクを自動化してくれるツール。

  • npm scripts
  • Gulp

Linters and Formatters

  • Prettier
  • ESLint
  • StandardJS

静的解析ツール、コードを整形してくれたり、策定したルールに沿っていない箇所を教えてくれたりするもの。

Module Bundlers

  • Webpack
  • Rollup
  • Parcel

複数のファイル（モジュール)を1つの最適化されたファイルにバンドル(まとめる)するツール。

Pick a Framework

フロントエンド開発のフレームワークと状態管理ライブラリ

  • React.js
    • Reduc
    • MobX
  • Angular
    • RxJS
    • NgRx
  • Vue.js
    • Vux

Modern CSS

CSS in JSと呼ばれるJavaScript内にスタイルを記述することで、スタイルをコンポーネント単位に指定する技術

  • Styled Components
  • CSS Modules
  • Styled JSX
  • Emotion
  • Radium
  • Glamorous

Web Components

再利用なカスタム要素で、他のコードから独立してカプセル化する機能を持つ

  • HTML Templates
  • Custom Elements
  • Shadow DOM

CSS Frameworks

JS based

JavaScriptフレームワークと共に利用することが推奨とされているもの

  • Reactstrap
  • Material UI
  • Tailwind CSS
  • Chakra UI

CSS first

デフォルトでJavaScriptコンポーネントが付属していないCSSファーストなもの

  • Bootstrap
  • Materialize CSS
  • Bulma

Testing your Apps

単体、結合、機能テストの違いとツールを使ってそれらを作成する方法を学ぶ

  • Jest
  • react-testing-library
  • Cypress
  • Enzyme

Type Checkers

静的型チェッカー、実行前に型が正しく定義されているか検証する

  • TypeScript
  • Flow

Progressive Web Apps

先進的なWebアプリで使われる様々なWebAPIを学ぶ。

  • Storage
  • Web Sockets
  • Service Workers
  • Location
  • Notifications
  • Device Orientation
  • Payments
  • Credentials

パフォーマンスの計算、測定、改善をする

  • PRPL Pattern
  • RAIL Model
  • Performance Metrics
  • Using Lighthouse
  • Using Dev Tools

Server Side Rendering(SSR)

サーバーサイドでレンダリング(HTMLを生成)し、ブラウザはレンダリングされたファイルを表示する。Node.jsの実行サーバーが必要、サーバー側の負荷が増加するが、SPAよりも表示速度が速い。

  • React.js
    • Next.js
    • After.js
  • Angular
    • Universal
  • Vue.js
    • Nust.js

GraphQL

API向けに作られたクエリ言語及びランタイム。クライアントが必要なデータ構造を定義することで、サーバーから必要以上のデータを返されることを防止でき効率がよいとされる。

Static Site Generators

静的サイトジェネレータ、WebサイトのHTMLファイルを生成するツール。
CMSと異なり、すべてのHTMLファイルを作成するため、レスポンスが速い・サーバー代が掛からないなどのメリットがある。

  • Next.js
  • GatsbyJS
  • Nuxt.js
  • Vuepress
  • Jekyll
  • Hugo

Mobile Application

モバイルアプリ、iOS・Android両方を開発できるクロスプラットフォームのフレームワークが推奨。

  • React Native
  • NativeScript
  • Flutter
  • Ionic

Desktop Applications

VSCodeやslackなどPCにインストールして利用するアプリ

  • Electron
  • Carlo
  • Proton Native

Web Assembly

ブラウザ上で動作するバイナリコード。JavaScriptより高速で主要ブラウザでは対応している。2019年にW3C(Webの標準化団体)は公式水準として受け入れている。

これから学ぶ領域

まずはTypeScriptとSPAを勉強しようと思います。上記2点が、現在フロントエンドエンジニアでの必須要件になっている求人が多いためです。

このこと自体は初めから求人だけ見れば良かったかもしれません。 ただロードマップを読解したことで何を学ぶべきかの全体像を把握することができました。ロードマップを参考に今自分が勉強している場所を確認しながら、今後も学習を進めていきたいと思います。

参考