はじめに

学習ロードマップと確認用シートです。
ダニング=クルーガー効果を考慮しています。
ロードマップ中の、自分の現在位置を確認する使用方法を想定しています。

Developer Roadmaps を元に作成しています。

Roadmap.shは、開発者が学習とキャリアの進行をナビゲートするためのロードマップ、ガイド、記事を提供するウェブサイトです。フロントエンド、バックエンド、デヴオプスなどの役割ベースのロードマップや、特定の技術や言語に焦点を当てたスキルベースのロードマップがあります。開発者が選んだ専門分野に必要なスキルや知識を段階的に習得するための道筋を示すことを目的としています。

日本語訳は私の個人的なものです。中学生レベル程度です。

各ロードマップ確認シートへのリンクは以下です。

ロードマップとは

IT分野におけるロードマップは、特定の技術や職種に必要なスキル、知識、ツールを段階的に身につけるための指針です。
初心者から上級者までの学習プロセスを体系的に示し、目指すキャリアパスに沿った学習目標と到達点を明確にします。
例えば、フロントエンド開発者になるためのロードマップでは、HTML、CSS、JavaScriptの基礎から始まり、フレームワークやライブラリの習得、パフォーマンス最適化やセキュリティ対策など、より高度なトピックまでを含みます。

以下は、Frontend Developer Roadmap の抜粋です。

ダニング=クルーガー効果とは

簡単に言うと
ある程度学習をすると、「愚者の山」 = 「完全に理解した」、
さらに学習を続けると周辺視野が広がり、「絶望の谷」 = 「何もわからない」、
さらに学習を続けると、「啓蒙の坂」 = 「チョットワカル」、となる現象のことです。

ダニング=クルーガー効果は、能力が低い人ほど自分の能力を過大評価し、逆に能力が高い人は自分の能力を過小評価する傾向があるという心理学の現象です。
この効果は、自己認識の歪みから生じ、能力が低い人は自分の不足を認識するのに必要なスキルが欠けているため、自分がより有能であると誤信しやすい現象です。

このグラフはダニング=クルーガー効果を示しています。
能力が低い初期段階では、自己評価が非常に高い（「Mount Stupid」、つまり「愚者の山」）ことが分かります。
この段階では、実際の能力との間に大きなギャップが存在します。
能力が徐々に向上するにつれて、自己認識も改善され、自己評価は下がり、「Valley of Despair」（「絶望の谷」）に到達します。
その後、経験と知識がさらに増えることで、自己評価は徐々に現実的なレベルに戻り、「Slope of Enlightenment」（「啓蒙の坂」）へと進みます。
グラフに示された「Awareness Threshold」（「認識の閾値」）は、人が自己認識を改善し始める転換点を表しています。

学習ロードマップ　確認シートとは

ロードマップの学習目標毎に、どこまで学習できているのかを、以下の視点から確認します。

聞いたことがある
触ったことがある
完全に理解した（愚者の山）
何もわからない（絶望の谷）
チョットワカル（啓蒙の坂）

roadmap.sh の学習目標・対象には、以下の重要度があります。

この確認シートでは、重要度を以下の表記とします。

重要度	解説（英語）	解説	シート状の表記
Purple （紫）	Personal Recommendaion / Opinion	roadmap.sh の推奨／案するツール・テクノロジ・スキル	◯
Green （緑）	Alternative Opinion - Pick this or Purple	代替 - これまたは紫を選択するツール・テクノロジ・スキル	△
Gray （灰）	Order in roadmap not strict (Learn anytime)	優先度の高くない（時間のある時に学習）ツール・テクノロジ・スキル	記載なし
Gray （灰）	I wouldn't recommend	推奨しないツール・テクノロジ・スキル	記載なし

フロントエンド開発者学習ロードマップ確認シート

カテゴリ	サブカテゴリ	ツール／テクノロジ／スキル	重要度
インターネット
		インターネットはどのように動いているのか？	◯
		HTTPとは？	◯
		ドメイン名とは？	◯
		ホスティングとは？	◯
		DNSとそれはどのように動いているのか？	◯
		ブラウザとそれらはどのように動いているのか？	◯
HTML
		基本を学ぶ	◯
		タグを正しく使い分けたHTMLの記述	◯
		フォームとバリデーション	◯
		アクセスビリティ	◯
		SEOの基本	◯
CSS
		基本を学ぶ	◯
		レイアウトを作る	◯
		レスポンシブデザイン	◯
JavaScript
		基本を学ぶ	◯
		DOM操作を学ぶ	◯
		Fetch API / Ajax (XHR)	◯
VCSホスティング
		GitHub	◯
		GitLab	◯
		BitBucket	△
	バージョン管理システム	Git	◯
パッケージマネージャ
		npm	◯
		pnpm	◯
		yarn	△
フレームワークを選ぶ
		React	◯
		Vue.js	△
		Angular	△
		Svelte	△
		Solid JS	△
		Qwik	△
CSSの記述
		Tailwind	◯
		Radix UI	◯
		Shadcn UI	◯
CSSアーキテクチャ
		BEM
CSSプリプロセッサ
		Sass
		PostCSS
ビルドツール
	モジュールバンドル	Vite	◯
		esbuild	◯
		Webpack	△
		Rollup	△
		Parcel	△
	タスクランナー	npm scripts	◯
	リンターとフォーマッター	Prettier
		ESLint
アプリのテスト
		Vitest	◯
		Jest	△
		Playwright	◯
		Cypress	△
認証戦略
		JWT
		OAuth
		SSO
		Basic Auth
		Session Auth
		その他
Webセキュリティの基本
		CORS
		HTTPS
		コンテンツセキュリティポリシー
		OWASPセキュリティリスク
Webコンポーネント
		HTMLテンプレート
		カスタムエレメント
		シャドーDOM
型チェック
		TypeScript	◯
サーバサイドレンダリング
		React	◯
	React	Next.js	◯
		Remix	◯
		Angular	△
	Angular	Universal	△
		Vue.js	△
	Vue.js	Nuxt.js	△
		Svelte	△
	Svelte	Svelte Kit	△
GraphQL
		Apollo	◯
		Relay Modern	△
静的サイトジェネレータ
		Astro	◯
		Eleventy	△
		Next.js	△
		Remix	△
		Vuepress	△
		Jekyll	△
		Hugo	△
		Nuxt.js	△
PWA
	パフォーマンスの計測、測定、および改善方法	PRPLパターン
		RAILモデル
		パフォーマンスメトリクス
		Lighthouseが使える
		DevToolsが使える
	PWAで使用されるさまざまなWeb APIを学ぶ	ストレージ
		Webソケット
		サーバ送信イベント
		サービスワーカー
		位置情報
		通知
		端末の方向の検出
		支払い
		資格情報
モバイルアプリ
		React Native	◯
		Flutter	◯
		Ionic	△
		NativeScript	△
デスクトップアプリ
		Electron	◯
		Tauri	△
		Flutter	△

さいごに

学習をつづけよう

はじめに

ロードマップとは

ダニング=クルーガー効果とは

学習ロードマップ 確認シートとは

フロントエンド開発者 学習ロードマップ 確認シート

関連リンク

さいごに

学習ロードマップ　確認シートとは

フロントエンド開発者学習ロードマップ確認シート