Web Frontend Engineer Skills
あくまで、Web front-endがメイン
他の分野は深く突っ込まない
Engineer Base Skills
Backend Engineer Skills
TODO:そのうち、Web platform に変えるかも
hr.icon
レベル感
✅使い方を知っていて、最小限の調査で済むテクノロジー
👀いつ、何故使うかは説明できる。だけど詳細に使ったことはない(実務、ちゃんとした個人開発)
⛰聞いたことはあるけど何者なのか説明できない
Engineer Base Skills
基本的な共通のエンジニアスキルはここにまとめている
Web Front-end Base
HTML HyperText Markup Language
✅Basis
✅Form フォーム,validation バリデーション
✅Semantic セマンティック HTML
👀SEO 検索エンジン最適化
CSS
Basis
✅Cascade カスケード css
✅specificity 詳細度 css
✅Inheritance 継承 css
✅selector セレクター css
Layout
👀Froats CSS
最近使うこと無いので👀
✅Positioning CSS
✅display CSS
✅Box Model CSS
👀Grid Layout
少しだけ使ったことある。も少し使いこなせば✅へ
✅Flexbox
👀Viewport
👀size サイズ CSS
Responsive レスポンシブ デザイン
✅Media Queries
CSS Pre-processors
Sass.iconSass
✅SCSS
✅node-sassからdart sassへの書き換え
JavaScript
✅Syntax and Basic Constructs
連結リスト Linked list 連想配列 辞書 object
配列 Array
👀非同期処理 asynchronous
👀Fetch API
✅XHR XMLHttpRequest
✅axios
✅Promise プロミス
✅ES2015 ES6
コンセプト Concept
✅モジュール modules
👀Hoisting 巻き上げ
✅Scope スコープ
👀prototype プロトタイプ プログラミング
👀DOM Document Object Model
生であまり書いてない、都度調べてる
Vue.jsReact使って書いてるから
開発環境、ツール
デバッグツール
✅Google Chrome DevTools
👀React Developer Tools
✅Vue.js devtools
✅vscode VsualStudioCode
Package Managers パッケージマネージャー
✅npm.iconnpm
✅yarn.iconyarn
Build Tools Front-end
Linters and Formatters
✅Prettier.iconPrettier
✅ESLint.iconESLint
✅stylelint
Module Bundlers
👀webpack.iconwebpack
⛰Rollup
👀Parcel
Task Runners タスクランナー
✅npm scripts
ポリフィル Polyfill
✅Babel.iconBabel
✅browserslist
Build Tool
Vue.js
✅vue-cli
Type Checkers
✅TypeScript.iconTypeScript
静的型付け
扱える型
型定義
型ガード
Front-end Framework
✅Vue.js.iconVue.js
👀React.iconReact (ライブラリ)
Component コンポーネント code
Vue.js
👀Class Component
Vue Composition API
React
👀Class Component
👀Functional Component
ルーティング Routing
Vue.js
✅Vue Router
React
react-router-dom
State Management 状態管理
Vue.js
✅Vuex
React
Context React
👀Redux
CSS Frameworks
React.iconReact Component Libraries
👀Chakra UI
⛰Material UI
Vue.js.iconVue.js
👀Element UI.iconElement UI
✅Vuetify.iconVuetify
Non JavaScript
👀Bootstrap.iconBootstrap
👀Tailwind CSS
Test Web Front-end
Unit Testing 単体テスト
✅Jest.iconJest
E2ETest
⛰Cypress
フレームワーク寄り
⛰@testing-library/react
⛰Enzyme
👀vue-test-utils
スナップショットテスト
Visual Regression Testing
👀Storybook.iconStorybook
👀reg-suit.iconreg-suit
Web Standards
👀Web Components
HTML Templates
WebAuthn
非機能要件
WebPlatformApp Performance
✅Performance Metrics パフォーマンス計測
👀performanceの目標設定
👀App Environmentの設定 performance
✅Assets Optimizations 資産の最適化
✅Build Optimizations ビルドの最適化
👀Rendering Optimizations レンダリングの最適化
👀Delivery Optimizations 配信の最適化
👀Performance Testing
👀Performance Monitoring
👀Accessibility アクセシビリティ Web
監視 Monitoring
Sentry
👀Logging ロギング
通信系
WebSocket API
WebRTC API
認証 Authentication系
✅JWT Json Web Token
Cookie クッキー
Privacy Sandbox
Architecture アーキテクチャ系
質問形
アプリケーションの特性に応じたアーキテクチャを設計できる
CSS Architecture 設計手法
✅BEM
✅OOCSS Object-Oriented CSS
✅SMACSS
✅FLOCSS
Modern CSS
も少し、綺麗に分けたい
⛰styled-components
⛰CSS Modules
⛰Styled JSX
⛰Emotion
⛰CSS in JS
web-frontend Architecture寄りのこと記載
✅Atomic Design
⛰OOUI オブジェクト指向UI
Modern Front-end onRuby on Rails
React...
Vue.js...
モノリシック→マイクロフロントエンド
PWA Progressive Web App
Web Standards
👀Web Storage API
⛰WebSocket API
⛰Service Worker サービスワーカー
⛰Location API
⛰Notification API
⛰Device Orientation Web
⛰Web Payment
⛰Credential Web
SSR Server Side Rendering
React.iconReact
⛰Next.js
GatsbyJS
Vue.js.iconVue.js
⛰Nuxt.js
API for Frontend
RESTful API
BFF Backends For Frontends
👀Node.js
GraphQL
⛰Apollo
⛰Relay
SSG 静的サイトジェネレーター
⛰GatsbyJS
⛰Next.js
⛰Nuxt.js
⛰VuePress
Desktop Application by js
⛰Electron
Mobile Application by js
👀React Native
その他
⛰WASM Web Assembly
Design ,Creative寄り
画像 Image
png
JPEG
SVG Scalable Vector Graphics
リッチFront-end
3D
👀Three.js
Animation アニメーション
👀Lottie
⛰Anime.js
⛰GSAP GreenSock Animation Platform
画像 Image
✅png,JPEG,WebP
👀SVG Scalable Vector Graphics
書き方参考
Learn to become a modern frontend developer
grab/front-end-guide: 📚 Study guide and introduction to the modern front end stack.
Front End Interview Handbook | Front End Interview Handbook
Front-of-the-front-end and back-of-the-front-end web development | Brad Frost
front-of-the-front-end and back-of-the-front-end
フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと
途中まで見た。とても良い
hr.icon
実装 機能
以下、機能ごとに述べる枠作る
各UIの実装的意見、チームでのコミュニケーション、経験が大事と思う
hr.icon
↑に書いてないことで大事
コミュニケーション
Design デザイン,Business ビジネス,Back-end
hr.icon