Aurelia+Railsのアプリケーション作成

# はじめに
この記事では、
フロントエンドに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](https://qiita.com/murakami-mm/items/f03c706889c83df0ea2f#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E5%AE%9F%E8%A1%8C%E9%A0%86)


# プロジェクト作成

## ディレクトリ構成
こんな感じです。

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

## ディレクトリ作成

```console
$ 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. バックエンドの実装](https://qiita.com/pure-adachi/items/c2c5730560650c80a5e0#11-%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89%E3%81%AE%E5%AE%9F%E8%A3%850)」を参考に実装してください。

- [React + RailsのアプリをHerokuで動かす方法 - Qiita](https://qiita.com/pure-adachi/items/c2c5730560650c80a5e0)

## フロントエンドの実装
### `aurelia-fetch-client` の追加
HTTPサービスを利用するために、[aurelia-fetch-client](https://aurelia.io/docs/plugins/http-services#aurelia-fetch-client) をインストールします。

```console:/aurelia-rails/projects/aurelia-frontend
$ npm i aurelia-fetch-client
```
これは、Aureliaの公式がサポートしていHTTPサービス用のプラグインです。
これを利用することで、バックエンド側との通信が可能になります。

### バックエンドとの通信
#### バックエンドへのリクエスト

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

```typescript: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()](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)と同じ役割のメソッドです。

##### コンストラクタ の `httpClient.configure`について
ここでは、`HttpClient`のインスタンスにデフォルトのオプションやヘッダーを設定しています。

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

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

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

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

```typescript: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](https://aurelia.io/docs/fundamentals/dependency-injection#injection)

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

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

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

- [Creating Components | Aurelia](https://aurelia.io/docs/fundamentals/creating-components#the-component-lifecycle)

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

```console:aurelia-rails/projects/aurelia-frontend
$ au run
```

```console:aurelia-rails/projects/aurelia-backend
$ bundle exec rails s -p 5000
```
ブラウザで、 http://localhost:8080 にアクセスすると確認できます。
<img width="750" alt="aurelia-rails画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261148/81c23a47-a38d-af01-a2b2-428fe3805eed.png">

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

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

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