システム開発のフローから考えるフロントエンドエンジニアの学び

この記事は何？

フロントエンドの業務領域が広がっている昨今、学ぶべきことは多岐にわたっています。
気がつけばフロントからあまりに離れたところに行ってしまってうーん？と首を捻ることも。

そこで、学習課題をざっくり大きく仕分けし俯瞰し、そこから選別を試みたことを記事にしました。

Webアプリケーションのシステム開発フローから見定める

システム開発の大まかなフローのイメージを抽出して枠組みを作りました。^[1]
それを元に学習対象を検討することにします。

ECサイトや業務アプリなどのWebアプリケーションを想定したシステムフローを想定しています。
まずはフロントエンドとそれ以外で分けてフロントエンド優先とし、それ以外は必要に応じて少しずつ学ぶか専門のエンジニアに任せるという態度です。

フロントエンド以外のフロー

要件定義

• 要件定義
  • 成果物：要件定義書

システム設計

• アーキテクチャ設計
  • フロントエンド層、バックエンド層、DB層、インフラ層
• フレームワーク選定

インフラ設計・開発

• サーバーのセットアップと管理
• ドメイン設定・管理
• ネットワーク構築
• セキュリティ対策
• スケーラビリティの確保（オートスケーリングやロードバランサーなど）
• 監視とログ管理
• バックアップと災害復旧
• 負荷テスト

バックエンド設計・開発

• ビジネスロジックの実装
• APIの設計と実装
• データ処理とバリデーション
• セッション管理
• 認証・認可処理
• データベース
• CI/CD

フロントエンド設計・開発のフロー

以下はフロントエンドエンジニアが担うシステム開発フローのイメージです。

このフローを俯瞰して業務内容を棚卸し、今自分が学習すべき課題を整理します。
そして、自分にとってどの項目が不足しているか/強化したいかを選別。学習につなげます。

• フレームワークの設計・導入
  • フレームワークのインストール・設定
  • 環境変数の定義（env）
  • linter関連導入
  • 外部モジュールやプラグインの組み込み
  • ルーティング
• 機能開発
  • コンポーネント設計
    • UI設計（レイアウト・アニメーション・その他）
    • 機能設計
    • 非機能要件設計
    • テスト設計
  • コンポーネント実装
    • パフォーマンス最適化
    • セキュリティ最適化
    • アクセシビリティ最適化
    • 単体テスト実装
  • 単体テスト
    • 機能テスト
    • セキュリティテスト
    • ビジュアルチェック（orリグレッションチェック）
    • パフォーマンスチェック
    • アクセシビリティチェック
• テスト
  • 結合テスト
  • E2Eテスト
  • リグレッションテスト
• リリース（デプロイ）

俯瞰して課題は見えたか？

課題が浮き彫りになりました。例えば非機能要件やセキュリティなど、まだまだ知識が足りんですし、テストコードの実装も経験不足です。他にも色々と・・・精進したいと思います。

要件定義書の作成は本来フロントエンドの実装の前工程だとは思いますが、自分で作れるとシステムに対する理解がより深まるだろうし、APIもフロントで実装する場面がありますよね。セキュリティを高めるにはバックエンド側の知識が大いに役に立ちそう。このあたりは拡張されたフロントエンド領域と捉えています。

まだ学習すべきでないことも切り分けました。学習に充てるリソースを考えて、インフラ関係はひとまず深くは立ち入らず、です。

これらのまとめは個人的な状況に依存しているので、エンジニアみなさんそれぞれ違いがあると思います。抜け漏れ、考え直しなど適宜見直そうと思います！

脚注

1. ※個人的な経験や調査に基づいているので偏りがあるかもしれません。ざっくり。