【2024年版】フロントエンドエンジニアロードマップ

2024/01/04 This article was written by mgk


2024年、モダンなフロントエンド開発者になるためのステップバイステップガイド


優先度
高 : 太字
中 : 細字
低 : ※

ロードマップ

  1. インターネット
    1. インターネットの仕組み
    2. HTTPとは
    3. ドメイン名とは
    4. ホスティングとは
    5. DNSとその仕組み
    6. ブラウザとその仕組み
  2. HTML
    1. 基本を学ぶ
    2. セマンティックなHTMLの書き方
    3. フォームとバリデーション
    4. アクセシビリティ
    5. SEOの基本
  3. CSS
    1. 基本を学ぶ
    2. レイアウトを作る
    3. レスポンシブデザイン
  4. JavaScript
    1. 基本を学ぶ
    2. DOM操作を学ぶ
    3. Fetch API / Ajax (XHR)
  5. VSC ホスティング (Version Control Systems)
    1. Git
    2. GitHub
    3. GitLab
    4. BitBucket
  6. パッケージマネージャー
    1. npm
    2. pnpm
    3. yarn
  7. フレームワーク
    1. React
    2. Vue.js
    3. Angular
    4. Svelte
    5. Solid JS
    6. Qwik
  8. CSSフレームワーク
    1. Tailwind CSS
    2. Radex UI
    3. Shadcn UI
  9. CSSアーキテクチャー
    1. BEM
  10. CSSプロセッサー
    1. Sass
    2. PostCSS
  11. ビルドツール
  12. モジュールバンドラ
    1. Vite
    2. esbuild
    3. Webpack
    4. Rollup
    5. Parcel
  13. タスクランナー
    1. npm scripts
  14. リンター, フォーマッター
    1. Prettier
    2. ESLint
  15. テスト
    1. Vitest
    2. Jest
    3. Playwright
    4. Cypress
  16. 認証戦略
    1. JWT
    2. OAuth
    3. SSO
    4. Basic Auth
    5. Session Auth
  17. Webセキュリティ
    1. CORS
    2. HTTPS
    3. Content Security Policy
    4. OWASP Security Risks
  18. Webコンポーネント
    1. HTML Templates
    2. カスタムエレメント
    3. Shadow DOM
  19. タイプチェッカー
    1. TypeScript
  20. サーバーサイドレンダリング (SSR)
    1. Next.js
    2. Remix
    3. Universal
    4. Nuxt.js
    5. Svelte Kit
  21. GraphQL
    1. Apollo
    2. Relay Modern
  22. スタティックサイトジェネレーター (SSG)
    1. Astro
    2. Eleventy
    3. Next.js
    4. Remix
    5. Vuepress
    6. Jekyll
    7. Hugo
    8. Nuxt.js
  23. プログレッシブWebアプリ
    1. PRPL Pattern
    2. RAIL Model
    3. Performance Metrics
    4. Lighthouse
    5. DevTools
    6. Storage
    7. Web Sockets
    8. Server Sent Events
    9. Service Workers
    10. Location
    11. Notifications
    12. Device Orientation
    13. Payments
    14. Credentials
  24. モバイルアプリケーション
    1. React Native
    2. Flutter
    3. Ionic
    4. NativeScript
  25. デスクトップアプリケーション
    1. Electron
    2. Tauri
    3. Flutter


参考

Frontend Developer Roadmap

一覧へ戻る