プロセス指向の視点からのフロントエンドエンジニアリングシステム

一.什么是前端工程？

類似した用語にソフトウェアエンジニアリング（Software Engineering）があります：

Software engineering is the systematic application of engineering approaches to the development of software.

エンジニアリング手法を体系的にソフトウェア開発に適用することを、ソフトウェアエンジニアリングと呼びます。では、続けて 2 つの質問があります：

エンジニアリング手法とは何か？
体系的とはどのように��解するか？

エンジニアリングとは、科学原理を使用して機械、構造物などを設計・製造することを指します。例えば、橋の修理、道路の舗装、トンネルの建設、車の製造、家の建築など：

Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.

ソフトウェア分野に具体的に言えば、システム的で厳密な、定量化可能な方法でソフトウェアを開発、運用、保守することを指し、ソフトウェアエンジニアリングにはこれらの手法の応用と研究が含まれます：

Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.

いわゆる体系的とは、ソフトウェアライフサイクルで使用されるこれらのエンジニアリング手法が相互補完的であり、それぞれが一部の課題を解決し、連携してソフトウェアの品質、配信速度などを保障すると理解できます

以上を総合すると、フロントエンドエンジニアリングは、エンジニアリング手法を体系的にフロントエンド開発に適用し、システム的で厳密な、定量化可能な方法でフロントエンドアプリケーションを開発、運用、保守することと定義できます

二.前端工程的演进历程

同様にまずソフトウェアエンジニアリングを見ると、その発展历程はこれらの重要なポイントを経験しました：

コンピュータハードウェアをフォン・ノイマンアーキテクチャに抽象化し、それによってソフトウェアとハードウェアの区別が生まれた
ソフトウェアの複雑さの上昇に伴い、モジュール化と情報隠蔽の理念が提唱された
ソフトウェア開発プロセスを理解・管理するために、ソフトウェアエンジニアリングは専門分野となった
ソフトウェア開発チームの能力を評価するために、成熟度衡量基準（CMMI-DEV）が形成された
現代ソフトウェアエンジニアリングのベストプラクティスに基づき、人々が普遍的に受け入れるソフトウェアエンジニアリング知識体系が構築された

フロントエンドエンジニアリングも類似したプロセスを経験しました：

B/S アーキテクチャが興り、それによってフロントエンド、バックエンドの区別が生まれた
フロントエンドの複雑さの上昇に伴い、モジュールの再利用、[実践規範](/articles/前端优化：雅虎 35 条/) がますます重要になった
フロントエンド開発プロセスを管理・簡素化するために、フロントエンドフレームワーク、[自動化](/articles/js 自动化/)、[ビルドシステム](/articles/grunt 教程/) が生まれ、急速に発展した
業界のベストプラクティスに基づき、开箱即用のフレームワーク（例：dva）、ツールシステムなどが徐々に構築された

フロントエンドはますます重くなり、複雑さは高まり、配套のフロントエンドエンジニアリングシステムも不断に発展・完善され、開発、構築、リリースの 3 つのメインラインに簡単に分類できます：

フロントエンドフレームワーク：プラグイン化（jQuery） -> モジュール化（RequireJS） -> コンポーネント化（React）
ビルドツール：タスク化（grunt/gulp） -> システム化（webpack）
CI/CD：ツール化（Jenkins） -> 自動化（Web Hook）

3 つのメインラインがフロントエンドエンジニアリングシステムを支え、フロントエンド開発のメインフローを体系的にカバーし、その中のエンジニアリング手法も互いに補完し合い、相互に影響し合っています。具体的には：

ビルドツールによって百花繚乱のフロントエンドフレームワーク、ライブラリがシームレスに協力できる
フロントエンドフレームワーク、ライブラリも一定の程度でビルドツール（例：モジュールローディング、CSS 前処理）、さらには CI/CD（例：SSR）に影響を与えている

三.面向过程视角下的前端工程体系

[caption id="attachment_2277" align="alignnone" width="625"] dev workflow[/caption]

（Book of Modern Front-end Tooling より引用）

典型的なフロントエンドワークフローは 5 つのステップに分かれます：

開発
テスト
構築
デプロイ
監視

スキャフォールディングから監視システムまで、配套のフロントエンドエンジニアリングシステムはフロントエンドワークフローの各環節に溶け込み、很大程度上でフロントエンド生産効率を決定しています

P.S.開発環節前の分析、設計段階はここでは展開しません。伝統的なソフトウェアエンジニアリング手法も同様に適用可能であり、フロントエンドプロジェクトはこの段階で大きな特殊性がないためです

开发阶段

開発段階の首要任務はサンプルプロジェクトを作成すること（併せてフロントエンドフレームワーク、ライブラリを選択）で、次に修改 - 検証のメインループを開始します。主にこれらのエンジニアリング施設を含みます：

スキャフォールディング：フロントエンドアプリケーションのディレクトリ構造を作成し、サンプルコードを生成
公共ライブラリ：再利用可能な UI コンポーネント、ツールモジュールなどの公共リソースを維持
パッケージマネージャー：サードパーティライブラリ/コンポーネントを導入し、これらの依存項を追跡管理
エディタ：構文ハイライト、スマートヒント、参照ジャンプなどの機能を提供し、開発体験を向上
ビルドツール：構文検証、コンパイル、パッケージング、DevServer などの機能を提供し、ワークフローを簡素化
デバッグスイート：プレビュー、DevTools、Mock、パフォーマンス分析診断などのデバッグ機能を提供し、修改 - 検証のメインループを加速

测试阶段

開発完了後、テスト段階に入り、まず全体機能に対して十分に自測を行い、その後専門のテスト担当者に検証を移管します。プロセス中で使用するエンジニアリング施設は以下の通り：

ユニットテストフレームワーク：コンポーネント、ロジックに対するテストサポートを提供
静的スキャンツール：コード品質、構築産物品質、ベストプラクティス/開発規約など複数の次元から静的検査を実施
自動化テストツール：UI 効果とビジネスフローに対して、テストサポートを提供
パフォーマンステストツール：比較的正確なパフ��ーマンスデータを監視・統計

构建阶段

開発段階とは異なり、構築段階ではより多くの極限最適化とフロー連携を行う必要があり、以下を含みます：

パッケージングスクリプト：構文検証、コンパイル、パッケージング的基础上で、結合、圧縮、コード分割、画像処理、SSR などの極限最適化を実施
構築サービス：マルチタスク並列パッケージング、通知をサポート

部署阶段

最後に十分にテストされたフロントエンドアプリケーションを生産環境にデプロイします。これらのエンジニアリングツールが必要です：

リリースプラットフォーム：フロントエンドリソースを CDN または SSR レンダリングサービスにアップロード、またはオフラインパッケージの形式でモバイルクライアントに統合
反復管理プラットフォーム：CI/CD サポートを提供

监控阶段

フロントエンドアプリケーションがオンラインになった後、さらに線上の実際の効果と異常状況を持続的に关注する必要があります。これらのエンジニアリング施設に依存します：

埋め込みポイントプラットフォーム：ビジネスデータを統計・分析し、パフォーマンス指標を追跡
監視プラットフォーム：線上の異常情報を観察。エラー、白画面、トラフィック異常などを含む

四.过程之间的衔接

ワークフロー各段階のエンジニアリング施設之外に、フロントエンドエンジニアリングのもう一つの部分はプロセス間の衔接です。前者は生産効率の向上を目的とし、後者は体験問題の解決を目的としています

総体的に見ると、フロントエンドエンジニアリングの進化は 2 方面に体現されています：

協業モード：新しい理念、新しいアーキテクチャとして現れることが多い。例：BFF/SFF
開発モード：新しい抽象層、新しいワークフローに体現される。例：[Sass](/articles/我们一起学 sass/)、React、webpack、さらには Cloud IDE

役割分担の変化でも具体的な作業内容の変化でも、開発者にとって、より多くの学習、理解コストを意味し、最終的に開発体験に現れます。プロセス間の衔接面向のエンジニアリング施設はまさにこれらの変化によるアップグレード適応コストを緩和し、よりスムーズに過渡期を抜け出すためにあります

例えば：

codemod：新旧フロントエンドフレームワークを衔接し、アップグレード適応コストを低減
dva：React エコシステム中の各種優秀な理念（redux、redux-saga など）を衔接し、学習コストを低減
[IDE](/articles/定制化 ide 的核心价值/)：一方では全套のエンジニアリング施設をパッケージングし、着手コストを低減。他方ではワークフローの各段階を衔接し、開発体験を向上

理想的には、フロントエンドエンジニアリングは継続的に協業モードを最適化し、開発効率を向上させるだけでなく、开箱即用の着手体験、一气呵成の衔接体験、无缝切換のアップグレード体験を保障すべきです

五.总结

プロセス指向の角度から見ると、フロントエンドエンジニアリングはフロントエンドアプリケーションのライフサイクル全体にわたる一連のエンジニアリング施設であり、フロントエンドアプリケーションの開発体験、品質、配信速度を保障するために使用されます

具体的には、フロントエンドエンジニアリングは開発、構築、リリースの 3 つのメインラインを中心に展開し、ツール化、自動化などの手段で各環節で遭遇する問題を解決します。一方ではフロントエンド開発の複雑さを制御し、フロントエンド生産効率を向上させ、他方ではアーキテクチャアップグレード、協業モード変化などによる移行、適応コストを低減し、開発体験を向上させます