Developer Roadmap解説：Frontend 編

優れたエンジニアは常に自己のスキルを客観的に俯瞰しています。
まずはDeveloper（開発者）としてのRoadmap（道筋）の全体像を把握し、自分がどのような手順で学習を進めるべきか確認していきましょう。

（ここではFrontendのロードマップについて解説しています。）

前提

ロードマップに書かれているマークや用語について簡単に説明します。

紫のチェックマーク：おすすめ
緑のチェックマーク：紫の代わりになるもの
灰色のチェックマーク：重要ではない（いつでも学べる）

Roadmap（ロードマップ）

Internet(インターネット)

まず最初にインターネットの基本構造を理解しておきましょう。

• インターネットの仕組み（どのように動いているか）
• HTTPとはなにか
• ドメインとは何か
• ホスティングとは何か
• DNSの仕組み
• ブラウザの仕組み

HTML（Hyper Text Markup Language）

HTML（Hyper Text Markup Language）はWebページを構成する基本言語です。

• 基本学習 ＊
• セマンティックHTMLを書いてみる ＊
• フォーム・バリデーション ＊
• アクセシビリティ ＊
• SEOの基本

セマンティックHTMLとは ：
セマンティックなHTMLの要素（h1, h2 / header / footer / tableなどの意味のあるタグ要素）を正しく使って、HTMLの構造に意味を持たせること。

CSS（Cascading Style Sheet）

CSSは（Cascading Style Sheet）はWebページのレイアウトを決定するほか、要素に色・大きさなどの装飾を施すための言語です。

• 基本学習 ＊
• CSSを書いてみる ＊
• レスポンシブデザインについて学ぶ ＊

レスポンシブデザインとは
デバイスの画面サイズに依存しないwebページを構築すること。
PC, タブレット, スマートフォンなどのデバイスによって自動でレイアウトなどが切り替わるように構築することなどを指す。

JavaScript

JavaScriptとは、Webページに複雑な機能を実装することを可能にするスクリプトまたは言語を指します。

• 基本学習
• DOM操作について学習する
• Fetch API / Ajax(XHR)について学習する

Version Control Systems（VCS）（バージョン管理ツール）

Version Control Systemsは、日本語でバージョン管理ツールと呼ばれているものです。
代表的なツールとして git, svn が挙げられます。

• Gitについて学習する

なぜVCSが必要か
VCSはソースコードの変更を管理が可能です。
VCSがない環境かつ、複数人でシステム開発などを進めていくと、次のような問題が発生します。

• 意図しない作業の上書き・ロールバックの発生
• ソースコードの変更理由が不透明になる
• ソースコードを紛失する

これらのような問題が発生しないよう、特に複数人のチームで開発・制作を行う際はVCSが必要とされています。

VCS Hosting

VCS Hostingとは、VCSの変更履歴を確認・操作しやすくするために提供されているサービスを指します

• Github ＊
• GitLab
• Bitbucket

VCS Hostingサービスを利用することで視覚的に情報がわかりやすくなるほか、「Pull request」などの機能を使用し管理性・保守性を向上させることができます。

※よく間違われますが、「Git」と「Github」は別物です。

Package Managers（パッケージ管理システム）

Package Managersは、パッケージ管理システムと呼ばれるものを指します。
代表的な「npm」は、「Node package manager」の略で、これを利用すると他の人が書いた便利なJavaScript系の機能（パッケージ）を簡単に取り入れることができます。

• npm
• pmpm
• yarn

Pick a Framework（フレームワークを選ぶ）

Webアプリケーションを実装する場合、通常フレームワークを利用して開発が進められます。

フレームワークを利用すると、便利なユーティリティプログラムやコードライブラリ・コンポーネントが最初から用意されている状態で開発を進められるため、スピーディで高品質なWebアプリケーションを構築できるのです。

フロントエンドにおけるフレームワークは魅力的なUIの設計や開発の柔軟性・拡張性に特化したものが多く、代表的なフレームワークとしてMeta社が提供している「React」などが挙げられます。

• React
• Vue.js
• Angular
• Svelte
• Solid JS
• Qwik

開発するWebアプリケーションによって適切なフレームワークは異なるため、さまざまな観点からフレームワークを選定することも大切です。

Writing CSS（CSSを書いてみる）

Webアプリケーションにおいてレイアウトを決定するCSSは重要な要素です。
Webアプリケーションフレームワークに応じて適切なスタイリングをする必要があり、UI / UXに大きな影響を及ぼします。

ロードマップで紹介されている「Tailwind ＊」は、ユーティリティファーストのCSSフレームワークで、スピーディにスタイリングするために開発された技術です。

Tailwindのほかには、「BootStrap」や「Material UI」などを利用する手法もあります。

Webアプリケーションの使用技術やパフォーマンス最適化の施策によって使用するべきCSSフレームワークは異なるため慎重な検討が大切になります。

CSS Architecture（CSS設計）

CSS ArchitectureはスタイリングにおけるCSSの設計を意味します。
CSS設計の主な目的は、適切な設計によるスタイルが適用される範囲（スコープ）の限定や開発者の共通認識を明確にすることが挙げられます。

CSS設計には「カスケード設計」「モジュール設計」「名前設計」「スタイリング設計」など多くの設計手法が挙げられますが、ロードマップで挙げられているのは「名前設計」です。

名前設計でよく使用される手法は以下のようなものがあります。

• BEM
• FLOCSS

※CSS設計が行われていないプロジェクトは高確率でCSSの破綻が発生します。CSS破綻を起こすと、1万行書き換えるなどという地獄の作業が発生することになります。

CSSが破綻したとしてもあなたのせいではありません。
PMの設計が浅すぎるだけです。

CSS Preprocessors（CSSプリプロセッサ）

CSS Preprocessors（CSSプリプロセッサ）は、独自の構文でCSSを生成することによるCSSコーディングの高速化・可読性の向上を図る技術を指します。

• Sass
• PostCSS

Build Tools（ビルドツール）

Webアプリケーションフレームワークを用いて構築されたアプリケーションは最終的にBuild（ビルド）され、HTML / CSS / JSファイルに変換されます。

Webブラウザはフレームワークの記法をそのまま解釈することができないからです。
これを理解するには、ブラウザの仕組み（レンダリング周り）をよく理解しておく必要があります。

Linter and Formatters（リンターとフォーマッター）

「Linter（リンター）」 とは、ソースコードの解析ツールを指します。
Linterを導入することで、型チェック・未定義変数などを解析しアラートを出力することができます。

• ESLint＊

Formatters（フォーマッター） とは、名前の通りプログラムの整形ツールを指します。
Formatterを導入しインデントや不要な改行を整形することで、可読性の高いプログラムを維持するのに効果的です。

• Prettier＊

Module Bundlers（モジュールバンドラー）

Module Bundlers は Module（モジュール）をBundle（ひとまとめに）するためのツールです。
Reactで使用した100個のjsファイルを1ファイルにまとめる、ということが可能になります。

2024年時点で代表的なものは「Vite」で、従来の「Webpack」に代替されるものとして使用されています。

適切でモダンなバンドラーの使用は開発サーバーの高速化やホットリロードによる開発の高速化を図ることが可能です。

• Vite ＊
• esbuild ＊
• SWC
• Webpack
• Rollup
• Parcel

Testing（テスト）

Testing（テスト）はアプリケーションの品質・安全性を高める上で必要な工程です。

テストコードを書き、残すことでアプリケーション内のコードの信頼性が向上します。
また、リファクタリング時にもテストコードがあることで既存のコードが壊れないかのチェックを行うことも可能です。

テストを全くしないプロジェクトにあたった場合は神に祈りましょう。
あなたは悪くありません。予算を取らなかったPMのせいです。

テストコードによるテストは、通常ツールを使用して行います。
Vite環境においてはVitestによるテストが一般的です。

• Vitest
• Jest

Authentication Strategies（認証方式）

サインアップ・サインインなどのパスワードを使用した認証機能を実装する際は、認証方式を検討する必要があります。

• JWT（JSON Web Tokens）
• OAuth
• SSO（Single Sign On）
• Basic
• Auth
• Session Auth

Webアプリケーションにおける「認証」とは：
情報にアクセスしようとしているユーザーの本人確認
例）マイページにアクセスしようとしているのは誰か？また本人か？

実装したい認証機能（ログアウト機能は必要か？など）によって、採用する認証方式は異なります。

Web Security Basics（Webセキュリティの基本）

勉強しましょう。

Web Components

Web Componentsとは、Webアプリケーションの中に新たに独自のHTMLタグを作成するためのAPIです。
JavaScriptだけでは実装が難しい機能も、Web Componentsの技術を駆使すると非常に簡単に、しかも再利用可能な形で実装することができるようになります。

ロードマップに記載されている以下の項目は、Web Componentsを実装するための仕様一覧です。

• HTML Templates
• Custom Elements
• Shadow DOM

Type Checker（型チェック）

ここまでさまざまな章でお伝えしてきた通り、Webアプリケーションを開発する際はJavaScriptにが重要となります。
しかしながら、JavaScriptはコードの品質的な問題・歴史的背景から大規模開発にいまもなお不向きな言語として知られています。

そこで誕生したのが「TypeScript ＊」です。
TypeScript は JavaScript のスーパーセットとして開発され、静的型チェックやクラス・モジュールなどの機能を持っています。

これにより、可読性の高いコード・デバッグのしやすさが保証されたのです。
その有用性から、React, Vue.js, AngularなどのモダンなフレームワークではTypeScriptもサポートされています。

TypeScript誕生の歴史は調べてみると面白いのでぜひ調べてみてください。

SSR（サーバーサイドレンダリング）

Webアプリケーションは主に2つのレンダリング手法が存在します。

• CSR（クライアントサイドレンダリング）
• SSR（サーバーサイドレンダリング）

(SSGについては後述します)

レンダリング手法によってそれぞれメリット・デメリットが存在しますが、中でもSSRはSEO最適化のために採用されるケースが多いです。（レンダリングの詳細については省略します）

JavaScriptベースのフロントエンドフレームワークは基本CSRで動作するため、SSRで動かすためにはNode.jsベースのWebサーバーが必要とされます。

この章で紹介されているフレームワークは各言語で実装されたアプリケーションをSSRで動かすためのものです。

• React
  • Next.js
  • Astro
• Angular
• Vue.js
  • Nuxt.js
• Svelte
  • Svelte Kit

GraphQL

GraphQLとは、クライアントとサーバー間のデータフェッチに特化したAPIのクエリ言語です。

クエリ言語とは？
クエリとは「質問」や「問い合わせ」を意味をします。
直訳すると問い合わせするための言語となり、Google検索でいくと検索欄のフォームに入力する文字列も一種のクエリ言語となります。

REST APIが複数のエンドポイントに対してHTTPリクエストを送るのに対し、GraphQLは単一のエンドポイントに対し異なるクエリを送ることでデータ抽出を行います。

そのため、クライアントが必要なデータのみをやり取りすることが可能になり、パフォーマンスの向上やAPIの使用に際する柔軟性の確保が可能となりました。

ロードマップにある項目はGraphQLのライブラリです。

• Apollo ＊
• Relay Modern

PWAs（プログレッシブウェブアプリ）

PWAは、Web技術を使用したスタンドアローンなアプリを指します。
Webサイトはインターネットに接続していないと使用できませんが、PWAは端末にインストールすることでオフライン・バッググラウンドでも使用可能です。

（優先度が低いので省略します）

Static Site Generators（SSG）

SSGは直訳すると「静的サイトジェネレーター」です。
クライアントからリクエストが送られる時、サーバー側でレンダリングされるのがSSRだったのに対し、SSGはビルド時に全ての画面を構築します。

画面描画に必要な全てのリソースを既に保持している状態でそれを出し入れするイメージのため、画面描画が高速かつサーバーの負荷も少ない状態で運用できます。

この章で紹介されているフレームワークは各言語で実装されたアプリケーションをSSGで動かすためのものです。

• React
  • Next.js
  • Astro
• Vue.js
  • Vuepress
  • Nuxt.js
• Eleventy

Mobile Apps

モバイルアプリ開発は、Swift(iOS)やJava(Android)などが主流ですが、Webアプリケーション開発の知見が活かせる開発手法も存在しています。

それがこの章で紹介されているフレームワークです。

• React Native
• Flutter
• Ionic

また、これらのフレームワークはクロスプラットフォームに対応しています。

クロスプラットフォームとは：
1つのプログラムで複数のプラットフォーム（iOS, Android）に対応すること

Desktop Apps

モバイルアプリ開発同様、デスクトップアプリ開発もWebアプリケーション開発の技術が応用できるケースがあります。

• Electron
• Tauri
• Flutter

Next Stage, Continue Learning

• Type Script
• Nodejs
• FullStack

ここまで基礎的な学習が完了したら、次のステップを検討してみましょう。