ホームページ - EY-Office

2022-05-19

JSXにいたる歴史と考察(1/2)

カテゴリー：React

Reactは今やフロントエンドのライブラリー（フレームワーク）としては高い人気をほこっています。参照→The State of JS 2021 : ライブラリ

Reactの良い点は

宣言的UI
コンポーネント指向
仮想DOMの採用で実用的なパフォーマンス
有用なOSSコンポーネントやライブラリーが大量に公開されている
TypeScriptと相性が良い

などでしょうか？
逆に欠点は、学習コストが高いでしょうか。とくにJSXに対してはデザイナー系の人には評判が良くないような意見を聞きます。

Webアプリの仕事はHTMLを作ること

Webブラウザーを使うアプリ（システム）では画面作成にHTMLを使う必要があります。ただし通常のホームページのように人（＋ツール）が作成するのではなく、データーベース（コンピューター）に格納されているデータをもとにプログラムがHTMLを作成する必要があります。

以下はitems配列に格納されているデータからHTMLのtableを組み立てるコードです。

① ベタコード

const items = [
  {name: "チョコレート", price: 300},
  {name: "おはぎ", price: 200}
];

let html = "";
html += "<html><body>\n";
html += "  <table>\n";
html += "    <thead>\n      <tr><th>商品</th><th>価格</th></tr>\n    </thead>\n";
html += "    <tbody>\n";
for (const item of items) {
  html += "      <tr><td>" + item.name  + "</td><td>￥" + item.price + "</td></tr>\n";
}
html += "    </tbody>\n";
html += "  </table>\n";
html += "</body></html>\n";

console.log(html);

このプログラムを実行すると以下のようなHTMLが生成されます。HTMLは文字列ですから上のコードでは、変数htmlはHTMLタグやデータ文字列を連結しながらHTMLを組み立てていきます。

⓪ 画面HTML

<html><body>
  <table>
    <thead>
      <tr><th>商品</th><th>価格</th></tr>
    </thead>
    <tbody>
      <tr><td>チョコレート</td><td>￥300</td></tr>
      <tr><td>おはぎ</td><td>￥200</td></tr>
    </tbody>
  </table>
</body></html>

たしか私が1998年くらいに仕事で作ったWebアプリはC言語で上のようなコードを書いていました。😅
このやり方の欠点は、初期開発はもちろん、ちょっとした画面（HTML）の変更でもプログラムの修正に時間がかかってしまうことです。

Webアプリの作成では、

仕様を決める
画面を決める
画面HTMLを作る
コードを作る

のような流れで作りますが、2. 、3. はWebデザイナーが、4. はプログラムが行います。3. で出来たHTMLを元に上のようなコードを書くことになります。

完成後に画面の変更が起きるとHTMLを修正する事になりますが、最終的なHTMLはプログラムになっているので通常のWebデザイナーには修正は難しいです。そこでWebデザイナーには3.で出来たHTMLを修正してもらい、それを元にプログラマーがプログラムを修正します。
ただし変更量が多い場合は、最初からプログラムを作り直すかもしれません。

このように、ベタコードでは僅かな画面の変更でも時間がかかってしまいます。

数々なテンプレートエンジン

Webデザイナーが作ったHTMLに簡単にプログラムを組み合せて、簡単にWebアプリが出来るようにしようと、いろいろな人がライブラリーや言語を作りました。このようなものは一般的にテンプレートエンジンと呼ばれています。

また、MVC(Model-View-Controller)というアーキテクチャ（デザインパターン）をご存知の方も多いと思います、メンテナンス性の高いGUI(Graphical User Interface)アプリを作れるアーキテクチャで、テンプレートエンジンはMVCのV(View)を実現するための重要な要素です。

テンプレートエンジンには色々なものがありますが、ここでは独断で以下のように分類しました。

埋め込み型
- HTMLにプログラム言語を埋め込む
- 例： JSP 、ERB 、 PHP
HTML+α型
- HTMLにプログラムとの連携用の何かを追加する
- 例： Angular 、 Vue.js
超HTML型
- HTMLを手短に書ける
- 例： Jade 、 Haml

埋め込み型

JavaのJSP、Ruby on Rails(Ruby)のERBなどは現在でもバックエンドで良く使われていると思われます。またWebアプリ制作で一番つかわれているかもしれないPHPですが、その名称の由来はWikipediaに書かれているように、埋め込み型のテンプレートエンジンです。

名称の PHP は再帰的頭字語として、 “PHP: Hypertext Preprocessor” を意味するとされており、「PHPはHTMLのプリプロセッサである」とPHP自身を再帰的に説明している。

② 埋め込み型テンプレートのコード(EJS)

以下のコードにはHTMLでない<%タグがありますが、

<% 〜 %> 内にはホスト言語（JSPならJava、ERBならRuby）が書け、実行されます
<%= 〜 %> ではホスト言語を実行した結果が生成されるHTMLに取り込まれます

シンプルな仕掛けですがこれだけでテンプレートに必要な機能を全て提供できます。

プログラムで作成された値をHTMLに取り込む <%= name %>
条件により生成されるHTMLを変更する <% if (name === '') %>
リストや表のような繰り返し <% for (const item of items) { %>

<%
const items = [
  {name: "チョコレート", price: 300},
  {name: "おはぎ", price: 200}
];
%>
<html><body>
  <table>
    <thead>
      <tr><th>商品</th><th>価格</th></tr>
    </thead>
    <tbody>
    <% for (const item of items) { %>
      <tr><td><%= item.name %></td><td><%= item.price %></td></tr>
    <% } %>
    </tbody>
  </table>
</body></html>

①のベタコードに比べる⓪ 画面HTMLに近いと思います、画面HTMLからテンプレートへの変更作業も①に比べると簡単です。

また、このテンプレート内のHTMLをちょっと修正するくらいなら、Webデザイナーに任せられそうです。

HTML+α型

② 埋め込み型テンプレートは正しいHTMLではありません、拡張子等を変更してもブラウザーでは正しく表示されません。したがって簡単ではない変更作業をWebデザイナーに依頼するのは難しくなります。

Angular や Vue.jsで採用されているテンプレートは正しいHTML形式なので、Webデザイナーとプログラマーの協業を上手く行う事が出来るテンプレートだと思います。

③ HTML+α型テンプレートのコード(Vue3)

Vueではv-forやv-ifのような独自のHTML属性を追加しプログラム機能を追加しています

プログラムで作成された値をHTMLに取り込む {% raw %}{{ name }}{% endraw %}
条件により生成されるHTMLを変更する <div v-if="(name === '')" >
リストや表のような繰り返し <div v-for="item in items" >

上のコードの<template>を<html>に置き換え、拡張子を.htmlに変更するとブラウザーで正しく表示されます。Vue用に変更してもHTMLの形式になっているので、容易にWebデザイナーの方に変更してもらう事ができると思います。

ただし、独自属性の値は文字列なのでタイプミス等でバグを起こしがちです（VS CodeではVue用プラグインをインストールするとチェックできますが）。

超HTML型

埋め込み型もHTML+α型もHTMLはそのまま扱っていますが、Ruby on Railsで良く使われているHamlではHTMLを手短に書けるのが特徴です。

HTMLでは入れ子（木構造）を実現するために閉じタグを使いますが、hamlではインデントで入れ子を使います
タグも <タグ> を %タグ と書く事で1文字少なく出来ます
良く使う<div>タグは省略できます！

短く書ける事は正義！のRuby on Rails界隈では良く使われているようです。

④ 超HTML型テンプレートのコード(haml)

- items = [{name: "チョコレート", price: 300},
  {name: "おはぎ", price: 200}]
%html
  %body
    %table
      %thead
        %tr
          %th 商品
          %th 価格
      %tbody
        - for item in items do
          %tr
            %td= item[:name]
            %td= item[:price]