フロントエンドの low-code は何を意味するか？

一.low-code とは何か？

A low-code development platform (LCDP) is software that provides a development environment used to create application software through graphical user interfaces and configuration instead of traditional hand-coded computer programming. A low-code model enables developers of varied experience levels to create applications using a visual user interface in combination with model-driven logic.

GUI、設定化の方式で従来の手書きコードプログラミングに代わることで、経験背景の異なる開発者がすべてローコード開発プラットフォーム上で、可視化された UI とモデル駆動のロジックに基づいてアプリケーションを作成できます

ローコードプラットフォームを利用して App 全体を作成するか、または一部の特定シーンのみで人手によるコーディングが必要で、必要な人手によるコード量を削減します。一方ではビジネスデリバリー速度を向上でき、他方では広大な非専門開発者がアプリケーション開発に参加でき、開発の敷居と人件費を低減します

技術的には、ローコードプラットフォームを実装する鍵となる要素はモデル駆動設計、コード自動生成と可視化プログラミングで、これらの手段を通じて下層のコード詳細を隠蔽します

low-code と no-code

最も low な程度の low-code は no-code です。つまり、最大の差異は no-code がコーディングを必要としないことです：

No-code development platforms are similar to low-code development platforms but require no coding at all.

具体的には、主な差異は以下の通り：

プラットフォームユーザー：あらゆる業務人員が no-code プラットフォームを使用でき、low-code プラットフォームは開発者のみを対象としています（専門要求がそれほど高くないとはいえ）
コア設計：no-code プラットフォームは宣言式のモデル駆動メカニズムを採用する傾向があり、ユーザーがドラッグアンドドロップまたは簡単な式を通じてアプリケーション設計を操作完成させます。一方 low-code プラットフォームは人手によるコーディングを通じてアプリケーションのコア構造を指定する傾向があります
ユーザーインターフェース：no-code プラットフォームはアプリケーション設計を簡素化するため、一般に内蔵 UI ライブラリのみをサポートします。一方 low-code プラットフォームはより柔軟な UI オプションを提供する可能性がありますが、代償として追加のコーディングが必要で、使用の複雑さが増加します

二.20 年前の Dreamweaver と何が違うのか？

聞くと、ウェブページ三剣客時代の Dreamweaver とあまり変わらないように思えます：

[caption id="attachment_2251" align="alignnone" width="625"] Dreamweaver[/caption]

現代のフロントエンド low-code 開発プラットフォームと比較すると、表面だけから見れば、可視化で自動的にいくつかのコードを生成することは確かに大きな違いはありません。内在的な実質的な差異は以下の通り：

目標シーンが異なる：Dreamweaver はより多くフロントエンド開発シーンに焦点を当てています。一方 low-code 開発プラットフォームでは、フロントエンドは完全なアプリケーションの一部に過ぎず、サーバー側データ、ルート、ロジックフローなども考慮する必要があります
可視化操作の粒度が異なる：現代の low-code プラットフォームは通常、コンポーネント、ブロック、ページ、テンプレートなどの多级再利用抽象があります。Dreamweaver は HTML ネイティブタグのみを対象としています
エン지니어リングリンクの完備程度が異なる：Dreamweaver は開発、プレビュー、デプロイ（FTP アップロード）环节のみをカバーしています。一方現代の low-code プラットフォームの多くは完全なライフサイクルをカバーしており、发布前のデバッグ、テスト、发布後の監視運用など各环节を含みます

フロントエンドエンジニアリングシステムの一連の進化に伴い、現代の low-code プラットフォームはモジュールの再利用、生態の接触、前後端の連動、エンジニアリング管理などの重要な要素を十分に考慮し、成熟度と開発効率の面で Dreamweaver と比較して質的な飛躍を遂げています

三.フロントエンドはなぜ low-code が必要なのか？

ここ数年 low-code 理念がフロントエンド分野で徐々に流行してきました。主にこれらの理由があります：

リソース化されたフロントエンド開発者：作業量は多いが、技術要求はそれほど高くない場合が多く、生産効率が解決すべき問題となっています
オープンなフロントエンド技術システム：low-code 類のコード生成ツールはフロントエンド技術システムと結合しやすい
成熟しつつあるフロントエンドエンジニアリングシステム：成熟安定の前提があってこそ、変革的な生産効率の突破を追求できます

リソース化されたフロントエンド開発者

大量の低技術含量の需要に直面し、フロントエンド開発者は極めて代替可能なリソースとなりました（低値消耗資産のようなものです）。フロントエンド人力が製品需要のイテレーションのボトルネックとなっています

この時、最善の解決策はツール化、自動化の方式を通じて生産効率を向上させ、フロントエンドリソースのボトルネックを突破することです。自然と low-code 方向の探索と実践が生まれました。例えば jQuery 時代のフォーム生成器、モバイル時代の H5 ページ制作ツールなど

オープンなフロントエンド技術システム

モバイル Native クライアント、サーバー側などの技術と比較すると、フロントエンド技術システムが最もオープンです（すべてのソースコードが公開されているさえあります）。具体的には：

サードパーティモジュールの導入コストが極めて低い：レイアウトコンテナ、スタイルテーマ、ロジックモジュール、甚至整站であっても、1 行のタグで直接導入して使用でき、甚至いつでも動的に導入できます
Web 標準に基づくオープンな生態を有する：フロントエンド生態全体が統一された標準層の上に構築されており、あらゆる一点の革新も容易に蓄積でき、常に巨人の肩の上に立ってさらに革新できます

そのため、low-code プラットフォームは巨人の肩の上に立って前進でき、コンポーネントライブラリ、構築ツール、甚至可視化設計、コード自動生成の基礎上でさらに探索できます。另一方面、フロントエンド low-code 産物は既存のあらゆるフロントエンドアプリケーションに適用できます。React/Vue コンポーネント、jQuery フォーム、还是 SPA（Single Page App）、MPA（Multiple Page App）であっても

成熟しつつあるフロントエンドエンジニアリングシステム

10 数年前でもなく、さらに遠い将来でもなく、なぜ今なのか？

最も重要な一点、low-code プラットフォームの発展はフロントエンドエンジニアリングシステムが成熟しつつある背景の下にあります。結局のところ、温飽問題がほぼ解決されてこそ、より高い生産効率を追求できます

技術進化の角度から見ると、フロントエンド low-code 探索はフロントエンドエンジニアリングの発展過程と密接に関連しています：

フロントエンドエンジニアリングはこのようないくつかの段階を経ました：

CLI ツール：スキャフォールディング、構築ツール、デバッグサービスなど

GUI クライアント：GUI 化された CLI ツール、交互方式外は大きな違いはありません

カスタマイズ端 IDE：IDE に基づいてスキャフォールディング、構築、デバッグ、发布、監視などのエンジニアリングリンク能力を拡張

雲 IDE：Web IDE に基づいて一連のエンジニアリングリンク能力を拡張し、雲研發時代に入ります

（[カスタマイズ IDE のコア価値](/articles/定制化 ide のコア価値/) から抜粋）

CLI/GUI ツール時代、コーディングレベルの効率向上は主にスキャフォールディングを通じてテンプレートコードを自動生成することで体现され、ボイラープレートコードの作成を削減し、開発者がより少なくコードを書けるようにしました

次の端/雲 IDE 時代、API ヒント、自動補完、コードスニペット（Snippets）などの実用機能もすべて統合されました。開発者がより速くコードを書けるようにしました

IDE 時代の後、コーディングレベルの効率向上は極致に達し、さらに一歩の生産効率向上は変革的な突破が必要です。そこで、low-code 時代を迎え、非専門開発者も「コード」をより良くより速く書けるようになりました

フロントエンドエンジニアリングの角度から見ると、low-code はエンジニアリング効率向上の重要な方向（また必須の道）です。その中の low-code 進化の痕跡を発見するのは難しくありません：

モデル駆動設計：直接 DOM を操作することからデータ駆動ビューへ、コードの予測可能性を向上
コード自動生成：テンプレートからコードスニペットから構築へ、人手によるコード量を不断に削減
可視化プログラミング：コンポーネント組み立てからドラッグ生成へ、低効率の反復作業を削減

P.S. 実際、low-code プラットフォームの発展はフロントエンド分野に限定されず、モバイル Native クライアント、サーバー側にも众多の low-code 探索があります。例えば Xcode SwiftUI：

VS Server Explorer：

およびアリ雲論理編排：

さらに、研究機関 Forrester の推計によると、ローコード開発プラットフォームは極めて広大な市場を有し、データベース、リクエスト処理、モバイル端、プロセスと通用ローコードプラットフォームに細分化できます：

Segments in the market include database, request handling, mobile, process and general purpose low-code platforms.

（Low-code development platform から抜粋）

四.フロントエンド分野の low-code 探索

従来のフロントエンドワークフローを审视：

業務需要 -> 設計稿 -> アプリケーション/ページ/コンポーネント開発（設計の還元） -> 業務ロジックコード -> 構築 -> 发布

具体的には、設計の還元は 3 つの方式に分かれます：

単一コンポーネントの開発：視覚効果の還元およびモジュール機能の開発
コンポーネントに基づくページの開発：コンポーネントの組み立て、コンポーネント間の交互およびページ全体のロジックの連結
ページに基づくアプリケーションの開発：ルート設定

その中の多くの环节はコード生成ツールを通じて効率を向上できます：

設計稿 -> コンポーネントコード：すなわち自動化設計還元、例えば imgcook
コンポーネントコード -> 設計素材：反向変換、設計素材を豊富に
コンポーネント -> ページ：可視化搭建を通じてコンポーネントの組み立てを簡素化し、自動的にページコードを生成
ページ -> アプリケーション：可視化設定で SPA または MPA を生成
業務需要 -> 業務ロジックコード：可視化で条件を編集、データをバインド、データフローを指定などの方式を通じてボイラープレート的な業務ロジックコードを生成

設計還元の自動化（および反向変換）の基礎上、UI 素材とフロントエンドコンポーネントの間の境界はほぼ存在しなくなりました。UI 素材とフロントエンドコンポーネントは相互に通行でき（UI 素材はフロントエンドコンポーネント、フロントエンドコンポーネントは UI 素材）、双方の生産効率を向上させただけでなく、協力コストも大幅に低減しました

五.low-code モードにおける新しい可能性

可視化研發モード：複雑さをツールに移転し、専門性要求を低減
low-code と知能化の結合：素材/コンポーネントの智能批量生成、端智能、パーソナライズド推薦などの技術と結合し、ユーザーが根本的に止められなくなります
low-code が専門開発ツールに打入：専門開発者向けの IDE 中で一部の可視化補助ツールを提供。例えばアリペイミニプログラム IDE
前後端一体の low-code 方案：端雲一体化開発の基礎上でさらに一歩進み、自動的に相應の BFF/SFF コードを生成、デプロイ

雲計算製品が専門の運用作業を雲サプライヤーに移転したのと同じように、low-code モードは専門のコンポーネント開発作業、甚至 BFF インターフェース開発作業も可視化研發ツール側に移転し、専門のフロントエンド技術を普惠の方式でより多くの非専門開発者に賦与しました。同時に可視化補助ツールと専門 IDE が結合し、専門の開発者もより効率的になりました

另一方面、フロントエンドの生産力と生産効率が向上し、専門性要求が低下した後、之前開発コストに制限されて実現できなかったことすべて探索を開始できます。例えば海量の細分化ユーザーグループ向けのパーソナライズド UI（いわゆる千人千面）、自メディア時代の個人建站（どんなに小さな個体も自分のプラットフォームを持てます）、高時効性の百変運営（push メッセージを送るだけではありません）……