list.md

Frontend Roadmap

ロードマップリンク

凡例

記号	意味
⚡	オススメ
🔸	他の選択肢
🃏	いつ学んでもよい
😕	オススメしない

ロードマップ

⚡ インターネット

おすすめ度	チェック	項	名	備考
⚡	⬜	1	インターネットの仕組み
⚡	⬜	2	HTTPとは？
⚡	⬜	3	ブラウザと、その動作
⚡	⬜	4	DNSと、その動作
⚡	⬜	5	ドメイン名とは？
⚡	⬜	6	ホスティングとは？

HTML

おすすめ度	チェック	項	名	備考
⚡	⬜	7	基礎を学ぶ
🃏	⬜	8	セマンティックHTMLを書く
⚡	⬜	9	フォームとバリデーション
⚡	⬜	10	規約とベストプラクティス
🃏	⬜	11	アクセシビリティ
🃏	⬜	12	SEOと基礎

CSS

おすすめ度	チェック	項	名	備考
⚡	⬜	13	基礎を学ぶ
⚡	⬜	14	レイアウトを組む
⚡	⬜	15	レスポンシブデザインとメディアクエリ

JavaScript

おすすめ度	チェック	項	名	備考
⚡	⬜	16	構文と基本構成
⚡	⬜	17	DOM操作を学ぶ
⚡	⬜	18	Fetch API/Ajax（XHR）を学ぶ
⚡	⬜	19	ES6以上と、JavaScriptモジュール
⚡	⬜	20	概念を理解する

バージョンコントロールシステム

おすすめ度	チェック	項	名	備考
⚡	⬜	21	Gitの基本的な使い方

リポジトリホスティングサービス

おすすめ度	チェック	項	名	備考
⚡	⬜	23	GitHub
🔸	⬜	24	GitLab
🔸	⬜	25	Bitbucket

🃏 ウェブセキュリティの知識

おすすめ度	チェック	項	名	備考
🃏	⬜	26	HTTPS
🃏	⬜	27	Content Security Policy
🃏	⬜	28	CORS
🃏	⬜	29	OWASP Security Risks

※これら全てについて基本的な知識は得ておきましょう

パッケージマネージャー

おすすめ度	チェック	項	名	備考
⚡	⬜	30	npm
⚡	⬜	31	yarn

※片方か両方学びましょう

CSSアーキテクチャ

おすすめ度	チェック	項	名	備考
🃏	⬜	32	BEM
😕	⬜	33	OOCSS
😕	⬜	34	SMACSS

※最近のフレームワークやフレームワークやCSS-in-JSを使えば、これらについて悩む必要はないが、BEMは知識として持っておきましょう

CSSプリプロセッサ

おすすめ度	チェック	項	名	備考
🃏	⬜	35	Sass
🃏	⬜	36	PostCSS
😕	⬜	37	Less

※最近のフレームワークやフレームワークやCSS-in-JSへの取り組みのおかげで、これらは不要かもしれませんが、慣れ親しんでおくと良いでしょう

ビルドツール

タスクランナー

おすすめ度	チェック	項	名	備考
⚡	⬜	38	npm scripts
😕	⬜	39	Gulp

モジュールハンドラー

おすすめ度	チェック	項	名	備考
⚡	⬜	40	Webpack
🔸	⬜	41	Rollup
🔸	⬜	42	Parcel

Linterとフォーマッター

おすすめ度	チェック	項	名	備考
🃏	⬜	43	Prettier
🃏	⬜	44	ESLint
😕	⬜	45	StandardJS

フレームワークを選ぶ

⚡ React

おすすめ度	チェック	項	名	備考
⚡	⬜	46	Redux
🔸	⬜	47	MobX

🔸 Angular

おすすめ度	チェック	項	名	備考
🔸	⬜	48	RxJS
🔸	⬜	49	NgRx

🔸 Vue.js

おすすめ度	チェック	項	名	備考
🔸	⬜	50	VueX

今どきのCSS

おすすめ度	チェック	項	名	備考
⚡	⬜	51	Styled Component
⚡	⬜	52	CSS Module
🔸	⬜	53	Styled JSX
🔸	⬜	54	Emotion
😕	⬜	55	Radium
😕	⬜	56	Glamorou

🃏 Web Components

おすすめ度	チェック	項	名	備考
🃏	⬜	57	HTML Templates
🃏	⬜	58	Custom Elements
🃏	⬜	59	Shadow DOM

CSSフレームワーク

おすすめ度	チェック	項	名	備考
⚡	⬜	60	Reactstrap
⚡	⬜	61	Material UI
🔸	⬜	62	Tailwind CSS
🔸	⬜	63	Chakra UI
⚡	⬜	64	Bootstrap
🔸	⬜	65	Materialize CSS
🔸	⬜	66	Bulma

※Reactstrap、Material UI、Tailwind CSS、Chakra UIはJSベースなので、フレームワークベースのJavaScriptアプリと使うと良い

※Botstrap、Materialize CSS、BulmaはJavaScriptコンポーネントを前提としない、CSSファーストのフレームワーク

アプリをテストする

おすすめ度	チェック	項	名	備考
⚡	⬜	67	Jest
⚡	⬜	68	react-testing-library
⚡	⬜	69	Cypress
⚡	⬜	70	Enzyme

🃏 型チェッカー

おすすめ度	チェック	項	名	備考
🃏⚡	⬜	71	TypeScript
😕	⬜	72	Flow
😕	⬜	73	Mocha
😕	⬜	74	Chai
😕	⬜	75	Ava
😕	⬜	76	Jasmine

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

おすすめ度	チェック	項	名	備考
🃏	⬜	77	Storage
🃏	⬜	78	Web Sockets
🃏	⬜	79	Service Workers
🃏	⬜	80	Location
🃏	⬜	81	Notifications
🃏	⬜	82	Device Orientation
🃏	⬜	83	Payments
🃏	⬜	84	Credentials
🃏	⬜	85	PRPLパターン
🃏	⬜	86	RAILモデル
🃏	⬜	87	パフィーマンス測定
🃏	⬜	88	Lighthouseを使う
🃏	⬜	89	Dev Toolsを使う

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

⚡ React

おすすめ度	チェック	項	名	備考
⚡	⬜	90	Next.js
😕	⬜	91	After.js

🔸 Angular

おすすめ度	チェック	項	名	備考
🔸	⬜	92	Universal

🔸 Vue.js

おすすめ度	チェック	項	名	備考
🔸	⬜	93	Nuxt.js

🃏 GraphQL

おすすめ度	チェック	項	名	備考
⚡	⬜	94	Apollo
🔸	⬜	95	Relay Modern

🃏 スタティックサイトジェネレーター

おすすめ度	チェック	項	名	備考
⚡	⬜	96	Next.js
⚡	⬜	97	GatsbyJS
🔸	⬜	98	Nuxt.js
🔸	⬜	99	Vuepress
🔸	⬜	100	Jekyll
🔸	⬜	101	Hugo

🃏 モバイルアプリ

おすすめ度	チェック	項	名	備考
⚡	⬜	102	React Native
	⬜	103	NativeScript
	⬜	104	Flutter
	⬜	105	Ionic

🃏 デスクトップアプリ

おすすめ度	チェック	項	名	備考
⚡	⬜	106	Electron
😕	⬜	107	Carlo
⚡	⬜	108	Proton Native

🃏 Web Assembly

学び続ける