フロントエンド

【2020年】フロントエンドエンジニアになる為のロードマップ

登録は簡単!. 無料です
または 登録 あなたのEメールアドレスで登録
フロントエンド により Mind Map: フロントエンド

1. Styled Components

2. 学び続けよう

3. WebAssembly

3.1. WebアセンブリまたはWASMは、Go、C、C ++、Rustなどの高水準言語から生成されたバイナリ命令です。 JavaScriptよりも高速で、WASM 1.0はすでに主要なブラウザに同梱されています。 W3Cは、2019年末にそれを公式標準として受け入れました。 ただし、主流になるまでにはまだかなり時間がかかります。

4. デスクトップアプリケーション

4.1. Electron

4.2. Carlo

4.3. Proton Native

5. モバイルアプリケーション

5.1. React Native

5.2. NativeScript

5.3. Flutter

5.4. Ionic

6. 静的サイトジェネレーター

6.1. Next.js

6.2. Gatsby.js

6.3. Nuxt.js

6.4. Vuepress

6.5. Jekyll

6.6. Hugo

7. GraphQL

7.1. Apollo

7.2. Relay Modern

8. Server Side Rendering(SSR)

8.1. React.js

8.1.1. Next.js

8.1.2. After,js

8.2. Angular

8.2.1. Universal

8.3. Vue.js

8.3.1. Nuxt.js

9. PWA(Progressive Web Apps)

9.1. PWAで使用されるさまざまなWeb APIを学ぶ

9.1.1. Storage

9.1.2. Web Sockets

9.1.3. Service Worker

9.1.4. Location

9.1.5. Notifications

9.1.6. Device Orientation

9.1.7. Payments

9.1.8. Credentials

9.2. パフォーマンスの計算、測定、改善

9.2.1. PRPL Pattern

9.2.2. RAIL Model

9.2.3. Performance Metrics

9.2.4. Using Lighthouse

9.2.5. Using DevTools

10. Type Checkers

10.1. TypeScript

10.2. Flow

11. アプリケーションをテストする

11.1. 単体テスト、統合テスト、機能テストの違いを学び、リストされているツールでそれらを書く方法を学びます

11.2. Jest

11.3. react-testing-library

11.4. Cypress

11.5. Enzyme

11.6. Mocha

11.7. Chai

11.8. Ava

11.9. Jasmine

12. CSS Frameworks

12.1. jsベースであり、フレームワークベースのjavascriptアプリケーションでの使用に適しています

12.1.1. Reactstrap

12.1.2. Material UI

12.1.3. Tailwind CSS

12.1.4. Chakra UI

12.2. CSSの最初のフレームワークで、デフォルトではJavaScriptコンポーネントが付属していません。

12.2.1. Bootstrap

12.2.2. Materialize CSS

12.2.3. Bulma

13. Web Components

13.1. HTML Templates

13.2. Custom Elements

13.3. Shadow DOM

14. インターネット

14.1. インターネットはどのように機能しますか?

14.2. HTTPとは何ですか?

14.3. ブラウザとその仕組みは?

14.4. DNSとその仕組みは?

14.5. ドメイン名とは何ですか?

14.6. ホスティングとは何ですか?

15. モダンCSS

15.1. CSS Modules

15.2. Styled JSX

15.3. Emotion

15.4. Radium

15.5. Glamorous

16. フレームワークを選ぶ

16.1. React.js

16.1.1. Redux

16.1.2. MobX

16.2. Angular

16.2.1. RxJS

16.2.2. NgRx

16.3. Vue.js

16.3.1. VueX

17. ビルドツール

17.1. タスクランナー

17.1.1. npm scripts

17.1.2. Gulp

17.2. モジュールバンドラー

17.2.1. Webpack

17.2.2. Rollup

17.2.3. Parcel

17.3. リンターとフォーマッター

17.3.1. Prettier

17.3.2. ESLint

17.3.3. StandardJS

18. CSSプリプロセッサ

18.1. 最近のフレームワークでは、CSS-in-JSへの取り組みが進んでいるため、これらは必要ないかもしれませんが、慣れるための良いアイデアです。

18.2. Sass

18.3. PostCSS

18.4. Less

19. CSS設計

19.1. 最新のフレームワークとCSS-in-JSを使用すれば、これらについてもう心配する必要はありませんが、それでもBEMに慣れることをお勧めします

19.2. BEM

19.3. OOCSS

19.4. SMACSS

20. WEBセキュリティの知識

20.1. これらすべての少なくとも基本的な知識を得る

20.1.1. HTTPS

20.1.2. コンテンツセキュリティポリシー (CSP)

20.1.3. CORS

20.1.4. OWASP(Open Web Application Security Project)のセキュリティリスク

21. バージョン管理システム

21.1. それらは何で、なぜ使うべきなのか

21.2. Gitの基本の使い方

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

21.3.1. アカウントを作成し、GitHubの使い方を学ぶ

21.3.1.1. GitHub

21.3.1.2. GitLab

21.3.1.3. BitBucket

22. JavaScript

22.1. 構文と基本構成

22.2. DOM操作を学ぶ

22.3. FetchAPI / Ajax(XMLHttpRequest)を学ぶ

22.4. ES6+とJavascriptモジュール

22.5. 概念を理解する

22.5.1. ホイスティング(巻き上げ)

22.5.2. イベントバブリング

22.5.3. スコープ

22.5.4. プロトタイプ

22.5.5. shadow DOM

22.5.6. strict

23. CSS

23.1. 基本を学ぶ

23.2. レイアウトをつくる

23.2.1. float

23.2.2. position

23.2.3. display

23.2.4. ボックスモデル

23.2.5. グリッドレイアウト

23.2.6. フレックスボックス

23.3. レスポンシブデザインとメディアクエリ

24. HTML

24.1. 基本を学ぶ

24.2. セマンティックHTMLの記述

24.3. フォームとバリデーション

24.4. 規約とベストプラクティス

24.5. アクセシビリティ

24.6. SEOの基本

25. パッケージマネージャー

25.1. npm

25.2. yarn