LoginSignup
1

More than 3 years have passed since last update.

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

Posted at

はじめに

この記事では、
フロントエンドに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-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 をインストールします。

/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
    リクエストのデフォルトオプションを指定できます。
    設定できるオプションはこちらと同じです。
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 を使うことで、シンプルに書けます。
詳細は下記を参照してください。

created について

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

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

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

実行

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

aurelia-rails/projects/aurelia-frontend
$ au run
aurelia-rails/projects/aurelia-backend
$ bundle exec rails s -p 5000

ブラウザで、 http://localhost:8080 にアクセスすると確認できます。
aurelia-rails画面.png

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

おわりに

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1