SPA最新フレームワークAureliaを使ってみる

仕事も落ち着いて時間も取れるようになったので新しいフレームワークに挑戦してみる。直近の仕事ではサーバーサイドがご無沙汰で、Reactに特化しています。
他のライブラリは使う気がなかったのだけれど今年に入って新しく出たSPAフレームワークを興味本位で触ってみる。

公式ドキュメント
Github

2019/10/26時点でAureliaのスター数は1万くらい。
規約をコンセプトミニマルなフレームワークを目指しており、コードを汚さないことに焦点を当て、webやモバイル、デスクトップアプリに対応したライブラリ。

チュートリアル

公式サイトに沿ってチュートリアルをやってみる

$ npm install -g aurelia-cli
$ au new
$ au run --open

au newコマンドを実行すると、ES Nextを使うのかTypeScriptを使用するのか、パッケージマネージャは何を使用するのか質問されるので答えていく。
プロジェクトが出来たらフォルダの階層をざっと見てみる
メイン部分のindexファイルの拡張子はejsを使用。
srcのresourcesが表示部分であり、処理する関数群が入る場所。

ブラウザチェックしたい場合はhttp://localhost:8080/にアクセスすれば見ることが可能。
だいたいこんな感じでわかればよし。

早速、チュートリアルを参考に記述していく。

src/resources/index.js

export class App {
  constructor() {
    this.heading = 'Todos';
    this.todos = [];
    this.todoDescription = '';
  }

  addTodo() {
    if (this.todoDescription) {
      this.todos.push({
        description: this.todoDescription,
        done: false
      });
      this.todoDescription = '';
    }
  }

  removeTodo(todo) {
    let index = this.todos.indexOf(todo);
    if (index !== -1) {
      this.todos.splice(index, 1);
    }
  }
}

src/app.html

<template>
  <h1>${heading}</h1>

  <form submit.trigger="addTodo()">
    <input type="text" value.bind="todoDescription">
    <button type="submit" disabled.bind="!todoDescription">Add Todo</button>
  </form>
</template>

上記のコードだけであっさりとToDoが作れてしまう。

Aureliaは実行する関数とレンダーする部分が別れており、あくまでejsベースで進んでいく。
ただ、この時点で気になったのがapp.html内でどの関数が使えるのかがわからないという点。
VueやReactと違ってレンダーする部分を切り離してしまえという発想はなかなか斬新だけれど、逆に可読性が悪くなっているように思う。また、ファイル数が肥大化してしまうのではないだろうか?
大規模開発になったときにファイル管理が大変そう。

ここまでざっと悪い部分を上げたが、悪い部分だけではない。
公式ドキュメントを見る限り、APIが豊富に揃っており、これらを使用することで、規約重視の開発に取り組むことができそう。APIが統一されている分、複数人の開発でコードに統一性を持たすことができるのではないだろうか?
複数人による小規模開発では価値を発揮してくれるんではないだろうか?

Aureliaの特徴

その他にAureliaにおける特徴としては以下

  • 学習コストの低さ、ミニマムな構成になっているので読めばすぐ理解できる
  • テンプレートっぽく直感的に操作できる
  • JSXなどの記法がない
  • Aureliaにおいては仮想DOMを採用せず、React Bindingを使用
  • 仮想DOMと同等のパフォーマンス
  • 拡張性、プラグインも存在しているので手の届かない場所はプラグインで済ませれる

まとめ

個人的には思想自体は悪くないと思っている。
ただ、どのSPA開発でもそうだけれど、どのようなディレクトリ構成にするのかはきちんと決めておく方がよい。
特にこのAureliaの場合は、規約に重点を置いているのでSPAの設計段階できちんと規約を決めて実装に取り組んだら価値を発揮してくれそう。

また、情報が成熟したらSPA初学者にとって勉強するライブラリとして良さそうだと思った。
JSXなどの複雑な記法もないのでHTMLと同じ要領で書ける分、Webデザイナーからフロントエンドへステップアップしたい人などは入りやすいんじゃないだろうか?

関連記事