思考整理 front-end 2021/12
Web Frontend Engineer Skills周りの整理
主に、近況で必要なもの、足りないもの周り整理したい
↓のものある程度固まるとnotionへ
シンプルに直近で積みたいパターン(細かい論理0、直感的)
フレームワーク
Next.js
Type Checkers
TypeScript
Linters、Formatters
ESLint
ルール: cwc-eslint
stylelint
ルール: cwc-stylelint
UI Framework
Tailwind CSS or Chakra UI
Test テスト Testing
Visual Regression Testing
Storybook
reg-suit
あわよくば、Testing Library
Data Control データ管理
React Query TanStack Query
State Management 状態管理
Redux
useState hooks...
Recoil
Styling スタイリング
vanilla-extract
機能実装
hook React
custom hooks
作成機能
Form フォームを用いた情報入力、更新
React Hook Form
Map 地図 UI
認証 Authentication
a
API
GraphQL
クライアント: Apollo
※Backend書くのは、スコープ外なので、簡単なスキーマとかでMock作ってくれるとHappy!
プロダクト
MPA Multiple Page Applicationの分離
思考中...
Error エラー周り
処理方法
codeやメッセージ
hr.icon
羅列する
網羅して、優先度をnotionで振るのが良さげ
総合意見
Webサービスの観点とシステム、チーム開発の観点が見やすそう
他は、別の切り口で見てる感じ
Web サービス
視覚表現
使いやすさ usability
エンジニア視点でのデザイン補助、意見
↑いい言葉見つかってない
Accessibility アクセシビリティ Web
WebPlatformApp Performance
あまり触れてない部分
React performance
Rendering Optimizations レンダリングの最適化
Web WWW
SEO 検索エンジン最適化
システム
maintainability 保守性とか(混ざるかも)
自動化 Automation
Test Web Front-end
CI 継続的インテグレーション,CD 継続的デリバリー
dependency updates
その他SaaS Software as a Service利用
情報のArchitecture アーキテクチャ、State Management 状態管理
大事
主にFunction 機能 system
凝集度 Cohesion code
Function 機能 systemの大きさ
結合度 Coupling code
Function 機能 system同士のつながり
Architecture アーキテクチャ(Function 機能 systemの連携やSystem同士のつながり)
Interoperability インターオペラビリティ 相互運用性とか
他サービスとの連携しやすさ、Data データのやり取り
API
RESTful API
GraphQL
認証 Authentication
チーム開発
上記のWeb サービス、システムを作成する際、複数の人間で作成する
Web Front-endとしてのロール、役割
各メンバーとのコミュニケーション
Back-end
Web FE観点での、欲しいAPI
Design
デザインの実装
Assetの要求
Product
Business(事業)
その他 web front-end
チーム
その他front-end(iOS,Android)
他FEを考慮したAPI、データ入力、
hr.icon
目標と現実の差分
具体的施策
system システム
以下の観点で考えるのあり
構成物
Membrane 膜 system
Resource 資源 system
Function 機能 system
Govanance ガバナンス system
提供物
Resource 資源 system
Service サービス system
既存システムのreplace
実装手段の変更
なめらかな移行
Data データ(not 情報 information)
ここでは、Function 機能 systemとResource 資源 の量の関係に留めるのもあり
Data データの種類
Data データを受け取る、送る
受け取り、送信手段
Data データを加工
加工手段
Data データで表現
表現手段