Hyperapp × TypeScript × herokuで簡単なアプリケーションを作成した

Hyperapp × TypeScript × herokuで簡単なアプリケーションを作成した。

obenkyou.herokuapp.com

tour of goっぽいかんじで、JavaScriptをサイト上で実行することができる。

処理の流れとしては、右のペインに入力 -> inputを拾って随時stateを更新-> 実行ボタン押下次にinputの内容をevalするactionを実行-> actionの結果を右下に表示というようになっている。

この部分についてはHyperappのstate managerとviewが程よく密結合になっていて、書きやすかった。

コンポーネントの定義だけ抜粋すると下のようなかんじ。ここだけ見るとほぼReactと変わんないんだろうなという気がする。

const JsCode: Component<Props> = ({
  title,
  label,
  description,
  code,
  result,
  error,
  onChange,
  onSubmit
}) => (
  <div class="container">
    <div class="columns">
      <div class="column col-6">
        <h2 class={styles.title}>{title}</h2>
        {descriptionFormatter(description)}
      </div>
      <div class="column col-6">
        <div class="columns">
          <div class="column col-12">
            <label class="form-label" for="textare">
              {label}.js
            </label>
            <textarea
              id="textarea"
              class={styles.codeForm}
              value={code}
              oninput={(event: any) => onChange(event.target.value)}
            />
          </div>
          <div class="column col-12">
            <button class={'btn ' + styles.run} onclick={() => onSubmit(code)}>
              JavaScriptを実行
            </button>
          </div>
          <div class="column col-12">
            <p>
              結果: <span class={styles.result}>{result}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
)

hyperapp/routerも試しに使ってみたのだが、ルーティング後に別のactionを発行した時、全体のstateが更新されるのでルーティング処理のルートに再度入ってしまい、変更差分の制御を入れないと無限ループになるのが難点だった（書き方の問題かもしれない）。

上の件以外は特にハマった部分は無く、Angularと比べると意味不明なエラーに遭遇する率が低い印象だった。

それに、bundle.jsのサイズが12.3kbという大きさで収まっているのは、Hyperappならでは利点だと思う。1kbとか公式が言っているだけあって、やはりめちゃくちゃ小さい。

TypeScriptとの相性については、まだRouterが型定義が公開されてないとかあって微妙な部分もあるけど、PRは出ているようなので時間の問題っぽい。

自分は業務ではメインでAngularを使っているのだけれど、ロード時の重さや開発時の重さで中々大変な部分があり、結構辛い。でも今回Hyperappぐらい小さいライブラリでもこの位のものは作れちゃうのがわかったので、実はAngularなんて要らないんじゃないかというかんじもしてきた。

（Hyperappと直接は関係ないが、jsxで条件によってタグ・クラスの出し分け〜みたいなのは、参考演算子がjsxの中に混ざってかなり読みにくいので、AngularのngIfほうが良いかも。ということは可読性&バンドルサイズの小ささで結局vueが最強なのか。。。）

いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック

入門 React ―コンポーネントベースのWebフロントエンド開発

Angularアプリケーションプログラミング