rails-angular
Pocket

こちらの記事のAngular版です。なんかAngularやらないといけない雰囲気になったので、試してみました。

webpack + React + Rails5 APIモードで環境構築

もくじ
  1. Rails
  2. フロントエンドの環境構築
  3. Foremanを使う
  4. APIを取得してみる
  5. Angular

Rails

まずはAPIモードでRails環境をつくります。

apiモードで始めるには以下のコマンドを打ちます。

rails new sampleapp --api

ファイル一式が完成したら、ディレクトリ移動しておきます。

cd sampleapp/

「rails s」で起動できます。

フロントエンドの環境構築

今回はAngular CLIを使います。まだngコマンドを使えない人は以下を打ちます。

npm install -g @angular/cli

ng helpなどをターミナル上で打って、何か出るようになればOKです。

sampleappディレクトリで以下を打ちます。

ng new sampleapp

するとsampleappというディレクトリができ、Angular関連のファイル一式ができています。

以下のコマンドを打って、ディレクトリ名を変更しておきます。

mv sampleapp client

以下のコマンドでclientへ移動

cd client/

gitファイルを削除しておきます。

rm -rf .git

以下を打ってみましょう

ng serve

以下をブラウザで開くと「app works!」と出るはずです。

http://localhost:4200/

ctrl + cでサーバーを切っておきます。

Foremanを使う

現状はRailsとフロントが別々のコマンドで立ち上がるので、一つのコマンドで立ち上がるようにします。

以下のコマンドでsampleapp以下に移動しておきます。

cd ../

GemfileにForemanを追加し、bandle installします。

Gemfile

source 'https://rubygems.org'
 
git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end
 
# ここ追記
gem 'foreman'
 
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.1'
 
# 省略

そして以下を打ちます。

bundle install

次に「Procfile」ファイルを作ります。

touch Procfile

Procfile

rails: bundle exec rails s -p 3000
frontend: cd client;ng serve --port 4200

以下を打ち「valid procfile detected (rails, frontend)」と出たらOKです。

foreman check

起動する時は、以下のコマンドを打ちます。

foreman start

起動して、localhost:3000にアクセするとRailsが、localhost:4200にアクセスするとapp works!と出てきます。

APIを取得してみる

RailsでAPIをつくります。

rails g resource Message text:string

「app/controllers」の中にmessage_controller.rbが作られるので、以下のように修正します。

class MessagesController < ApplicationController
  def index
    messages = Message.all
    render json: messages
  end
end

とりあえず、「db/seeds.rb」でサンプルデータを作ってみます。

Message.delete_all
Message.create!([
  { text: 'Good morning' },
  { text: 'Good afternoon' },
  { text: 'Good evening' }
])

以下のコマンドを打ちます。

bundle exec rake db:migrate db:seed

config/routes.rbも修正しておきます。

Rails.application.routes.draw do
  resources :messages, only: :index, format: 'json'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

rails sで起動し、「localhost:3000/messages.json」にアクセスします。

するとjson形式でGood morningとかいろいろ出てきます。

これをAngularで取得してみます。

Angular

client以下へ移動しておきます。

cd client/

以下のコマンドでmessage-listというコンポーネントを作ります。

ng g component message-list

client/src/app以下にmessage-listというディレクトリができて、その下にファイルがいくつか追加されました。

また、以下のコマンドでサービスを作っておきます。

ng g service message

client/src/app以下にmessage.service.tsとmessage.service.spec.tsが作られました。

message.service.tsを以下のように書き換えます。

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class MessageService {

  constructor(private http: Http) { }

  fetch() {
    return this.http.get('http://localhost:3000/messages')
      .map(response => response.json());
  }

}

message-list.component.htmlは以下のように書き換えます。

<p>
  message!
</p>

<ul>
  <li *ngFor="let item of items">{{item.text}}</li>
</ul>

message-list.component.tsは以下のように書き換えます。

import { Component, OnInit } from '@angular/core';
import { MessageService } from "../message.service";

@Component({
  selector: 'app-message-list',
  templateUrl: './message-list.component.html',
  styleUrls: ['./message-list.component.css']
})
export class MessageListComponent implements OnInit {

  items: any[];

  constructor(private MessageService: MessageService) { }

  ngOnInit() {
    this.MessageService.fetch()
      .subscribe((data) => {
          this.items = data;
      });
  }

}

app.component.htmlを以下のように書き換えます。

<h1>
  {{title}}
</h1>
<app-message-list></app-message-list>

さいごにapp.module.tsにMessageServiceを追加します。

import { BrowserModule } from '@angular/platform-browser';
// 省略

import { MessageService } from './message.service'; // 追加

// 省略

@NgModule({
  // 省略
  providers: [
    MessageService // 追加
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

これで以下のコマンドを打ちsampleapp以下に再度移動します。

cd ../

そして以下のコマンドを打ちます。

foreman start

localhost:4200を開くと、メッセージが取得できていると思います。

さいごに

APIを作って表示するだけですが、RailsとAngularの環境をAngular CLIを使って作ってみました。次はデータ取得するだけなく、POSTしたりしてみようかと思います。

Pocket