はじめに

この記事では、
フロントエンドにAurelia、バックエンドにRailsを使用したアプリケーションを作成します。

バックエンドから取得した情報を、画面に表示します。
とりあえずローカル環境で動くところまでです。

環境:

	バージョン
macOS	10.15.4
Ruby	2.6.3
Rails	6.2.0
node	v13.10.1
npm	6.14.4
aurelia-cli	v1.3.1

事前準備

ローカルで aurelia-cli をインストール
インストール方法はこちらの記事を参照ください。
- Aurelia Todoアプリの作成 - Qiita

プロジェクト作成

ディレクトリ構成

こんな感じです。

aurelia-rails
 └ projects
   ├ aurelia-frontend
   └ rails-backend

ディレクトリ作成

$ mkdir aurelia-rails && cd aurelia-rails
$ mkdir projects && cd projects
$ au new
# このときプロジェクト名には aurelia-frontend を入力する
# TypeScriptを選択する
$ bundle init
# 生成されたGemfileにある `gem "rails"` のコメントアウトを外す
$ bundle install --path vendor/bundle
$ bundle exec rails new rails-backend --database=postgresql --skip-bundle --api

バックエンドの実装

下記の記事の「1.1. バックエンドの実装」を参考に実装してください。

React + RailsのアプリをHerokuで動かす方法 - Qiita

フロントエンドの実装

`aurelia-fetch-client` の追加

HTTPサービスを利用するために、aurelia-fetch-client をインストールします。

/aurelia-rails/projects/aurelia-frontend

$ npm i aurelia-fetch-client

これは、Aureliaの公式がサポートしていHTTPサービス用のプラグインです。
これを利用することで、バックエンド側との通信が可能になります。

バックエンドとの通信

バックエンドへのリクエスト

バックエンドへのリクエストを管理するApiクラスを作成します。

src/api.ts

import {HttpClient} from 'aurelia-fetch-client';

export class Api {
  httpClient = new HttpClient();

  constructor () {
    this.httpClient.configure(config => {
      config
        .useStandardConfiguration()
        .withBaseUrl('http://localhost:5000/')
        .withDefaults({
          credentials: 'same-origin',
          headers: {
            'X-Requested-With': 'Fetch'
          }
        });
    });
  }

  fetchHelloWorld () {
    return this.httpClient
      .fetch('hello_world')
      .then(response => response.json());
  }
}

上記のコードについていくつか説明します。

`HttpClient#fetch()`メソッドについて

HttpClient#fetch()メソッドは、
window.fetch()と同じ役割のメソッドです。

コンストラクタの `httpClient.configure`について

ここでは、HttpClientのインスタンスにデフォルトのオプションやヘッダーを設定しています。

withBaseUrl
メソッド名のままですが、fetchするURLのベースURLを指定しています。
ここでは、バックエンド側を5000番ポートで起動するので、http://localhost:5000/ を指定しています。
withDefaults
リクエストのデフォルトオプションを指定できます。
設定できるオプションはこちらと同じです。
- Request() - Web API | MDN

`fetchHelloWorld`メソッドについて

この作成したメソッドを呼び出すことで、 http://localhost:5000/hello_worldにリクエストが送信されます。

リクエストを送信する

aurelia-cli で作成したアプリケーションには、デフォルトで下記のファイルが作成されています。
src/app.ts
また、ルートコンポーネントは、上記のAppコンポーネントになっています。

Appコンポーネントが表示される際に、バックエンド側へリクエストを送信し、
レスポンスの内容を画面に表示するようにしましょう。

src/app.ts

import {Api} from './api';
import {inject} from 'aurelia-framework';


@inject(Api)
export class App {
  public message: string = "";

  constructor(private api: Api) {}

  created() {
    this.api.fetchHelloWorld().then(data => {
      this.message = data.text
    });
  }
}

上記のコードについていくつか説明します。

`inject`について

簡単に説明すると、依存しているクラス(Apiクラス)を、クラス(Appクラス)内で使えるようになります。
inject を使うことで、シンプルに書けます。
詳細は下記を参照してください。

Dependency Injection: Basics | Aurelia

`created` について

コンポーネントのライフサイクルメソッドです。
constructor実行後に呼ばれます。

ここでは、created内でバックエンド側にリクエストを送信し、
レスポンスの値を messageにセットしています。
messageは画面に表示されます。(src/app.html参照)

ライフサイクルについての詳細は下記を参照してください。

Creating Components | Aurelia

実行

フロントエンドは8080番ポート、バックエンドは5000番ポートで起動します。

aurelia-rails/projects/aurelia-frontend

$ au run

aurelia-rails/projects/aurelia-backend

$ bundle exec rails s -p 5000

ブラウザで、 http://localhost:8080 にアクセスすると確認できます。

シンプルな画面ですが、バックエンドから送信した Hello Worldの文字を表示することができています。

おわりに

これでAureliaを使ったアプリケーションが作れますね。
次は、Aureliaのコンポーネントライフサイクルについて学習しようと思います。

参考

React + RailsのアプリをHerokuで動かす方法 - Qiita
- プロジェクトの構成やRails側の実装についてはこちらの記事を参考にしています
  当記事は、こちらの記事のAurelia版(ローカル環境で動くところまで)です。