開発コラム：WebPerformer-NXの開発者体験
今回の開発コラムは書籍「プリンシプル オブ プログラミング」の著者であり、WebPerformer-NX開発メンバーの一人である上田勲さんに「WebPerformer-NXの開発者体験」というテーマで記事を書いていただきました。
この記事は、2023年7月時点の情報にて制作しております。
WebPerformer-NXの開発者体験
WebPerformer-NXによるソフトウェア開発は、開発期間、開発方法、開発成果物、運用方法などに多面的な価値をもたらします。本記事では、特に「開発者体験」という切り口で、WebPerformer-NXの特徴と、それが提供する価値を紹介したいと思います。
まず、前提となるソフトウェア開発の一般的なトピックを紹介し、それを背景に、WebPerformer-NXの特色を説明します。
プログラミングのパラダイム：命令と宣言
ソフトウェアを開発するには、プログラミングを使って、我々の要望をコンピューターに伝える必要があります。プログラミングには、大きく分けて2つのパラダイムがあります。
◇命令型プログラミング
◇宣言型プログラミング
プログラミングのパラダイムとは、プログラミングにおける基本的なスタイルやアプローチのことを指します。
命令型プログラミングでは、コードは、指示（命令）の羅列として記述されます。コードは、コンピューターに「どのようにするか」を順序良く具体的に伝える形になります。命令型の記述を基本とするプログラミング言語には、「手続き型プログラミング」のC言語、「オブジェクト指向プログラミング」のJavaやJavaScriptなどがあります。
宣言型プログラミングでは、コードは、何を達成するかの目的（宣言）として記述されます。その達成方法については指定しません。具体的な実行手順はシステムに任せる形になります。宣言型の記述を基本とするプログラミング言語には、「関数型プログラミング」のHaskell、「論理型プログラミング」のPrologなどがあります。また、身 近なところでは、SQLやCSSも宣言型がベースの言語です。
命令と宣言：料理の比喩
料理を比喩にして、命令型と宣言型のアプローチの違いを説明します。
命令型プログラミングは、まるでレシピを書いているような形式です。一連の手順（命令）を正確に記述し、「どのようにするか」を具体的に指示します。例えば、「オーブンを予熱する」「材料を混ぜる」「混ぜた材料をオーブンに入れる」「15分待つ」のように、全てのステップを詳細に指示する形になります。
宣言型プログラミングは、まるでレストランで食事を注文するような形式です。目的を達成するために「なにを欲しいのか」を指示しますが、それを達成するための具体的な手順は指定しません。例えば、「ピザを一つください」と頼みますが、そのピザがどのように作られるかは気にしません。目的は「一つのピザを得ること」で、ピザを作る手順についてはレストランに任せる形になります。
命令と宣言：コード比較
プログラミングに戻って、シンプルなコード例で、命令型と宣言型のアプローチの違いを説明します。
Webアプリケーションでは、HTMLで表示要素を記述し、JavaScriptとCSSで動作や表示を記述します。ここで、ある要素を画面の中央に配置するという処理を考えます。この処理を、命令型のJavaScriptと宣言型のCSSを利用して、同じ効果を得られるようにコードを記述してみます。
<!-- center-element を 中央寄せにしたい -->
<div class="container">
<div id="center-element"></div>
</div>命令型のJavaScriptでは、以下のようなコードになります。画面の表示時、中央の位置を計算して、要素の位置を移動します。要素を中央に寄せるための、具体的な方法を記述することになります。
window.onload = function() {
const element = document.getElementById("center-element");
const parent = element.parentElement;
const parentWidth = parent.offsetWidth;
const parentHeight = parent.offsetHeight;
const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;
element.style.position = 'absolute';
element.style.left = (parentWidth - elementWidth) / 2 + 'px';
element.style.top = (parentHeight - elementHeight) / 2 + 'px';
};宣言型のCSSでは、以下のようなコードになります。中央寄せにしたいという意図（center）を伝えています。目的を記述して、方法には言及していません。
.container {
display: flex;
justify-content: center;
align-items: center;
}命令と宣言：長所と短所
命令型プログラミングと宣言型プログラミングの長所と短所を一覧にまとめてみました。太字が長所になります。大雑把にまとめると「簡便だけど融通が効かない宣言型」「面倒だけど柔軟な命令型」というイメージです。どちらかが一方的に優れているということはなく、それぞれに適している場合があり、ケースバイケースといえます。
ちなみに、現在の主流のプログラミング言語は、命令型パラダイムがベースの言語が多いのですが、「言語仕様」「標準関数」「ライブラリ」「フレームワーク」あるいは「プログラミング習慣」などを通じて、宣言型のパラダイムが流入する傾向にあります。今後は、言語ごとにパラダイムが決まるというものではなく、各パラダイムがその言語の側面の一つとなり、言語の中での適材適所のハイブリットなプログラミングが必要とされます。
ノーコード/ローコードのパラダイム
ノーコード/ローコードツールによるソフトウェア開発は、プログラミングのパラダイムを超えた（メタな）存在かもしれませんが、あえて言うと、宣言型のパラダイムに近い体験になります。やりたいことを定義（宣言）していくスタイルで、その実現はツールに任せることができます。
それゆえ、宣言型の短所を持ち合わせています。例えば、定義できる機能の中にやりたいことを表現するものがない、定義できる機能で思ったより細かい制御を行えない、などです。高度に抽象化されているがゆえに、使いやすいものの、なかなか思った通りにならない場合もありうるのです。
これをソフトウェア業界の中で
「漏れのある抽象化の法則（The Law of Leaky Abstractions）」
と呼ぶことがあります。抽象化は、技術の詳細を隠蔽して、インターフェイスをシンプルにして、その技術を使いやすくします。しかし、完全な抽象化というのは難しく、相当にうまくやっても「漏れ」が出てしまいます。その場合、利用者はその「漏れ」た事例に対応するため、特別な措置をとらなければならなくなるのです。
この問題に対する解決法には、それぞれのツールの独自性が出ます。「割り切って線引きをした上で、ある程度はあきらめてもらう」とか、「独自の拡張をプラグインできる仕組みを作る」など、様々なアプローチがあります。そして、その方針が、そのツールの使い勝手を決定的に左右すると考えています。
WebPerformer-NXのパラダイム
WebPerformer-NXのアプローチを説明します。
◇画面は宣言型で、簡単に
◇処理は命令型で、柔軟に
まず、画面（WebPerformer-NXの用語で「UI」）構築は宣言型を徹底します。
高度なWeb画面を、わかりやすく、簡単に構築できます。多種で高機能な部品を、絶対値座標で自由に配置し、思い通りの画面レイアウトが作りやすいようになっています。スクラッチでWeb画面を構築することは、その技術の難易度/複雑度が高い上、更新頻度が速く、都度知識やライブラリのアップデートが求められる分野です。この「やっかい」な部分を引き受け、シンプルにしている点が、WebPerformer-NXの最大の特徴の一つであり、価値の高いところです。
一方、処理（ボタンを押されたときなどの動作の部分、WebPerformer-NXの用語で「アクション」）の記述は、命令型プログラミング言語のJavaScriptを採用しています。つまり、部分的にコードを書く、ローコードのツールになります。
ローコードを採用した理由は、処理の部分は、開発者が最もコントロールしたい部分と考えたからです。処理について、隠されている部分が多かったり、自由度が低かったりすると、できないことが多くなり、できない理由もわからないため、開発をしていてとてもストレスになります。この処理の部分については、オープンで、柔軟であることを保ち、コントロール感を持って、安心して開発できることを重視しました。
WebPerformer-NXの処理記述：JavaScript
コード記述部分に、JavaScriptを採用した理由は、開発の生産性と、開発するアプリの柔軟性に、大きく貢献できるからです。言語としての機能が豊富で、かつ、ライブラリなどそのエコシステムは巨大です。プログラミング言語の中では構文も比較的わかりやすく、Web標準言語としてもなじみがあります。利用者が多い言語であり、情報量も多く、今でも進化を続けており、それも自動で受益できます。JavaScriptの持つ能力と、柔軟性や発展性は、「開発している最中」「開発した成果物」両方に大きなメリットがあると考えました。
コード記述部分に、ツール独自の宣言型の簡易言語を採用することも検討しました。簡易言語は、シンプルで定義量が少なく、（かつそれをGUIで定義するなど）いわゆる「とっつきやすい」面が魅力です。ただ、結局「漏れのある抽象化の法則」が発現し、やりたいことができなくなる場合が多くあります。また、独自ゆえ、一般に情報量が少なくなる関係で、逆に学習コストが高くなる場合もあります。これらの点は、開発の心地よさを大きく損なうと判断し、採用を見送りました。
WebPerformer-NXの処理記述：ハイブリッド
処理の記述は命令型になりますが、宣言型のエッセンスを持った、便利な機能も取り入れています。命令型をベースにしつつ、宣言型が適した部分にはそれを配置した、ハイブリットな仕様になっています。
例えば、メジャーなデータ取得先である「REST」「DB」との連携部分は、宣言的に（GUIの補助も使いつつ）JavaScript関数として定義できます。クラウドストレージへの読み書きなど、便利なビルドイン関数（組込関数）も豊富です。独自のJavaScript関数も定義できます。そして、それら定義した関数は、処理を記述するエディタで、入 力補完としてリスト表示されるので、まるで目的を選択するようにコードを記述することができます。この処理の記述は、宣言型に近しい体験となります。
簡単な処理であればパズルを組むような感覚でコードを記述できますし、必要に応じてJavaScript言語の能力を最大 限発揮するような処理を書くこともできます。簡便さと柔軟さを両立して、快適に処理を記述していくことができるような仕組みになっています。
まとめ
宣言型一辺倒だと、ブラックボックス化され、フィットするソフトウェアは少なくなります。命令型一辺倒だと、ソフトウェアの開発がとても敷居の高い、難易度の高いものになります。
ノーコード/ローコードツールにおいては、どちらもバランスよく配置することが、ソフトウェア開発の「楽しさ」を左右します。面倒なところが適切に隠蔽され、あとは自由にコントロールできる、という感覚が、開発の安心感や心地よさを決めているのです。
WebPerformer-NXは、開発をしているときの「制御できている」感を重要視したツールです。「今いる場所がわかる」「次に何をすればよいかわかる」「できることがわかる」「やり方がわかる」「すぐ結果を確認できる」などのポジティブな感覚を持ちながら、かつ面倒な部分はツールに任せることができるため、快適に開発を進めることができます。ぜひ、その開発者としての心地よさを、WebPerformer-NXを利用して体験していただきたいと思います。
★―☆。.:*:・゜――――――――――――――――――――――――
キヤノンITソリューションズ 公式Webサイト
紹介製品
関連ページ