RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > フロントエンド > 駆け出しフロントエンドエンジニアは何を学ぶべきか

駆け出しフロントエンドエンジニアは何を学ぶべきか

フロントエンド

目次

はじめに

こんにちは、フロントエンドチームの北嶋です。
弊社でフロントエンドチームを立ち上げてから1年以上が経ち、少しずつメンバーも増えてきました。

最近は来年度の新卒メンバーに対する育成プランを考えているのですが、昨今のフロントエンド技術は移り変わりも激しく、学ぶべき項目が多岐に渡っているため、育成プランを考えるのも一苦労です。
ネットでフロントエンド関連の情報を調べると、今では参考にならない古めの記事も多いですし「これではフロントエンド初学者は何を勉強すれば良いのか分かりにくいだろうなぁ」という気持ちでいます。

そこで、最近のフロントエンド初学者が身に付けておくべきスキルって具体的に何があるのだろうという疑問に対する答えをスキルマップという形で整理してみましたので、今回は皆さんに共有したいと思います。
特に、駆け出しフロントエンドエンジニアの方やフロントエンドの教育担当者の皆さんの力になれればと思いますので、是非参考にしてみて下さい！

スキルマップ

  • フロントエンド初学者（駆け出しフロントエンドエンジニア）が身に付けておくと良い技術のまとめです。
  • 基本的にはWEB DEVELOPER Roadmap 2021のFrontend Roadmapのトレンドに沿うように考えられていますが、個人的な意見も多いに反映されています。
  • 目標レベル・学習項目・参考資料という3つの観点でまとめています。
    • 目標レベル：現場に入っても問題なく業務をこなせるレベル感（脱駆け出しエンジニア程度のイメージ）を記載しています。
    • 学習項目：理解しておくべき項目・用語を記載しています。
    • 参考資料：目標レベルを満たすために参考となる資料（書籍・Webサイト等）を記載しています。
  • フロントエンドエンジニアとしてだけでなく、Webエンジニアとして身に付けておきたい技術も含まれています。
  • OSS-DBを入れるかが迷う所でしたが、実際に業務していて触れる機会が多くないのでひとまずドロップしています。将来的にはWebエンジニアとして理解しておいて欲しい項目ではあります。

1. HTML

目標レベル

  • 基本的なタグを利用したHTMLの記述が行える
  • 発展的なタグを把握している

学習項目

参考資料

2. CSS

目標レベル

  • CSSで簡単なスタイル指定が行える
  • SCSSで簡単なスタイル指定が行える
  • 詳細度を理解している

学習項目

  • CSS3
  • 擬似クラス
  • Flexbox
  • Sass
  • 詳細度

参考資料

3. JavaScript

目標レベル

  • ES2015以降の記法でJavaScriptを記述できる
  • API通信を行うコードを記述できる
  • 非同期処理を理解している

学習項目

  • ES2015以降の記法
  • Promise
  • async/await
  • API通信
  • ESモジュール

参考資料

4. SPA（Single Page Application）

目標レベル

  • SPAの概念を理解している
  • SSR・SSGとの違いを理解している

学習項目

参考資料

5. JavaScriptフレームワーク

目標レベル

  • コンポーネント指向の概念を理解している
  • Vue.js（または React.js）の公式ガイドを基本的な部分を理解している
  • 状態管理（Flux）の概念を理解している
  • ルーティングの機能を理解している
  • 上記の技術を用いて簡単なアプリ制作が行える

学習項目（Vueのみ記載）

  • Vue.js
    • Vuex
    • Vue Router

参考資料（Vueのみ記載）

6. パッケージ管理

目標レベル

  • nodeの概念を理解している
  • npmの基本的なコマンドを利用できる
  • パッケージ管理システムを利用してプロジェクト作成が行える
  • パッケージ管理システムでパッケージの追加・削除が行える

学習項目

  • node
  • npm
  • package.json

参考資料

7. TypeScript

目標レベル

  • プリミティブ型の型指定が行える
  • 簡単なオリジナルの型を作成し、型指定を行える
  • 外部ライブラリの型を利用できる

学習項目

  • TypeScriptの概念理解
  • 型の種類
  • 型の指定
  • 型の作成

参考資料

8. Git

目標レベル

  • Gitの概念を理解できている
  • 基本的な操作が一通り行える
  • 複数人でのGit運用を経験している

学習項目

  • 概念理解
  • 基本的な操作方法

参考資料

9. Linux

目標レベル

  • Linuxの基本的なコマンドを利用できる

学習項目

  • 基本的コマンド
    • ファイル操作系
    • ssh

参考資料

10. Web知識

目標レベル

  • Web開発で必要な最低限の知識を持っている

学習項目

参考資料

11. テスト

目標レベル

  • テストの種類を把握している
  • テストの種類ごとの目的を理解している

学習項目

  • テストの種類・目的
  • Jest

参考資料

12. ブラウザ

目標レベル

  • ブラウザごとに動作に差異があることを理解している
  • Chromeの開発者ツールの基本機能を利用できる

学習項目

  • ブラウザ差異
  • 開発者ツールの使い方
    • Vue.js DevTools

参考資料

13. コーディングルール

目標レベル

  • 良いコード、悪いコードの特徴を把握している

学習項目

  • 特になし

参考資料

14. Docker（必須ではないが知っておくと良い）

目標レベル

  • 仮想化の概念を理解している
  • DockerとVirtualBoxの違いを理解している
  • Dockerのメリットを説明できる

学習項目

  • 仮想化
  • ホスト型
  • ハイパーバイザ型
  • コンテナ型

参考資料

15. 情報収集に使えるWebサイト（おまけ）

まとめ

機械的にスキルを並べる形となってしまいましたが、参考になりましたでしょうか。
ざっくりまとめると、フロントエンド初学者の学習ロードマップとしては以下のような手順で学んでいくのが良さそうだと思いました。

  1. HTML/CSS/JavaScriptを学ぶ
  2. JavaScriptフレームワーク（Vue.jsまたはReact.js）を学ぶ
  3. パッケージ管理（node,npm）について学ぶ
  4. JavaScriptのES2015以降の記法を学ぶ
  5. TypeScriptを学ぶ
  6. Web開発に必要な知識を身に付ける
  7. Web開発で必要なツールの使い方を学ぶ（Git,Linux,ブラウザの開発者ツール等）
  8. フロントエンドのテストを理解する
  9. 一般的なコーディングルールを把握する

おわりに

自分でまとめてみても「こんなに学習項目があるんだな・・・」と思ってしまったのですが、一つの指標というだけで、現場に入る前に全てを完璧に身に付けておかないといけない訳でもありません。
実際に自分自身も現場に入ってから少しずつ身に付けていった項目もありますし、業務で必要になったタイミングで学ぶ方が身に付くことも多かったりします。
ただ、このようなスキルマップを参考にすることでフロントエンド初学者の方が「この項目のスキルは自分に足りていないな」といった気付きが少しでもあれば嬉しく思います。
それでは、ここまで読んでいただきありがとうございました！

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.