はじめに
この記事では、
フロントエンドに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-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. バックエンドの実装」を参考に実装してください。
フロントエンドの実装
aurelia-fetch-client の追加
HTTPサービスを利用するために、aurelia-fetch-client をインストールします。
$ npm i aurelia-fetch-client
これは、Aureliaの公式がサポートしていHTTPサービス用のプラグインです。
これを利用することで、バックエンド側との通信が可能になります。
バックエンドとの通信
バックエンドへのリクエスト
バックエンドへのリクエストを管理するApiクラスを作成します。
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
リクエストのデフォルトオプションを指定できます。
設定できるオプションはこちらと同じです。
fetchHelloWorldメソッドについて
この作成したメソッドを呼び出すことで、 http://localhost:5000/hello_worldにリクエストが送信されます。
リクエストを送信する
aurelia-cli で作成したアプリケーションには、デフォルトで下記のファイルが作成されています。
src/app.ts
また、ルートコンポーネントは、上記のAppコンポーネントになっています。
Appコンポーネントが表示される際に、バックエンド側へリクエストを送信し、
レスポンスの内容を画面に表示するようにしましょう。
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 を使うことで、シンプルに書けます。
詳細は下記を参照してください。
created について
コンポーネントのライフサイクルメソッドです。
constructor実行後に呼ばれます。
ここでは、created内でバックエンド側にリクエストを送信し、
レスポンスの値を messageにセットしています。
messageは画面に表示されます。(src/app.html参照)
ライフサイクルについての詳細は下記を参照してください。
実行
フロントエンドは8080番ポート、バックエンドは5000番ポートで起動します。
$ au run
$ bundle exec rails s -p 5000
ブラウザで、 http://localhost:8080 にアクセスすると確認できます。
シンプルな画面ですが、バックエンドから送信した Hello Worldの文字を表示することができています。
おわりに
これでAureliaを使ったアプリケーションが作れますね。
次は、Aureliaのコンポーネントライフサイクルについて学習しようと思います。
参考
-
React + RailsのアプリをHerokuで動かす方法 - Qiita
- プロジェクトの構成やRails側の実装についてはこちらの記事を参考にしています
当記事は、こちらの記事のAurelia版(ローカル環境で動くところまで)です。
- プロジェクトの構成やRails側の実装についてはこちらの記事を参考にしています