イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Angularを使えるLaravel環境を作る。あとcralityも使う。

どうも、bigenです。
わたくし、新卒でListFinder開発チームに配属されてから1年が経ちました。

配属されてからは来る日も来る日もZend FrameworkとjQueryと戦う毎日。
最近では公私ともに社外の方と話す機会もあり、
触発されてもう少し今風の技術にも触れてみたいなぁと思いまして、

Angular4入りLaravel5.4環境の構築

に挑戦しました。
また、デザインフレームワークである Clarity Design Systemも入れて、
盛りだくさんの今風アプリケーションを一つ作ってやろうという算段です。

LaravelもAngularもClarityも、使って開発したことがないので、ゼロからのスタートです。
周囲の人に色々質問しながら進めてみました。

目次

  1. 前準備

  2. Laravel-5.4 with Angular 4 を導入する

  3. 中身を眺めて勉強する

  4. Clarity を導入する

  5. 簡単なアプリケーション

  6. おわりに

1. 前準備

事前準備として、phpサーバーを用意します。
今回は、dockerを使って nginx + php-fpm + mysql でそれぞれをコンテナとして構成しました。
構成の設定は kohe先生の記事のものを使わせてもらいました。

2. Laravel-5.4 with Angular 4 を導入する

そして、環境構築に挑戦といいつつ、こちらもできあがりのものを拝借いたします。
ehsanhasani氏に多大なる感謝を。

まず、
start project laravel 5.4 with angular 4
↑の中身をphpサーバーのアプリケーション部分に配置します。

あとは書いてある手順どおりに環境設定をしていきます。
そして、Angularアプリケーションのトランスパイルをする。

npm run dev

表示される赤字エラー・・・
調べてみると、↓のような記事があったので参考にTypescriptのバージョンをあげると、無事トランスパイルできました。
LaravelとAngularの環境構築をする: 圧倒的成長記

http://localhost:8080

へアクセスしてみると、アプリトップが表示されました。

laraveltop.png

3.中身を眺めて勉強する

さて、ここからClarity Design Systemを入れていきたいのですが、
いきなりではどのように組み込んでいけば良いのか分かりません。

というわけで、少し上記のアプリケーションを観察してみます。

Angularのコンパイルの流れについて調べてみると、次の記事が非常に参考になりました。
Angular/TypeScriptプロジェクトのコンパイルの仕組み
今回のアプリケーションではどうやらwebpackが使われているようですので設定ファイルを探してみると、
ルートディレクトリ直下にwebpack.mix.jsがあるので中を見てみます。

webpack.mix.js
mix.webpackConfig({
    resolve: {
        extensions: ['.ts']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    }
});

mix.js([
    'resources/assets/ts/polyfills.ts',
    'resources/assets/ts/vendor.ts',
    'resources/assets/ts/main.ts'
], 'public/js/app.js');

通常のwebpackの設定ファイルと違うのは、Laravel-mixというライブラリが用いらているようです。
Laravel-mixはLaravel内でwebpackを使ってコンパイルしてリソースを設置するのを簡単にするライブラリとのことです。
アセットのコンパイル(Laravel Mix)

Laravelのお勉強はいったん宿題にしておいて、
とにかくAngularのソースはresources/assets/tsの下に配置されていて、
3つのtsファイルをトランスパイルしてapp.jsに集積してくれていることがわかったので、
それぞれ中身を見てみます。

polyfills.ts
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
    // Production
} else {
    // Development and test
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

ファイル名のとおり、旧ECMAScriptとの互換ライブラリを読み込んでるっぽい?
あとDev環境でのStackTraceの制限を設定していますが、ここでやるべきことなのかは謎・・・

vendor.ts
// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import '../scss/styles.scss';

AngularのコンポーネントやRxJS、その他外部ベンダー製のライブラリの読み込みをするファイルのようです。
アプリトップのCSS(ピンク色の背景に、センターに見出し)も、ここで読み込まれているstyles.scssにかかれていました。

main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
    enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

こいつがAngularアプリケーションの本体で、app.module.tsを皮切りに色々なファイルをトランスパイルしてくれています。

これぐらいわかれば、だいたいの目星はついたので、Clarityを導入していきます。

4.Clarity Design Systemを導入する

公式ページを参考に順番に導入していきます。

まずは各ライブラリのインストールから。

npm install @clr/icons --save
npm install @webcomponents/custom-elements@1.0.0 --save
npm install @clr/ui --save
npm install @clr/angular --save

次に、cssやjsなどが標準で読み込まれた状態でトランスパイルしてもらうために、
vendor.tsに追記します。

vendor.ts
...

// Clarity Design System
import '@clr/icons/clr-icons.min.css';
import '@webcomponents/custom-elements/custom-elements.min.js';
import '@clr/icons/clr-icons.min.js';
import '@clr/ui/clr-ui.min.css';

最後に、AngularのClarityコンポーネントが使えるようにモジュールに追加します。

app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ClarityModule } from "@clr/angular";
import { AppComponent } from "./app.component";

@NgModule({
    imports: [
        BrowserModule,
        ClarityModule,
        ...
     ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
})
export class AppModule {    }

以上で準備は完了です。

5.簡単なアプリケーション

せっかくなので簡単なアプリケーションを作ってみました。
麻雀の対局予約画面のイメージですが、初期の予約人数は0人固定で、
ボタンを押したら増えたり減ったりするだけです。

angular.gif

ソースコードはこちら

app.component.html
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h1>麻雀しますか?</h1>
            </div>
            <div class="card-block">
                <h2>現在の人数: {{count}}人</h2>
            </div>
            <div class="card-footer">
                    <button id="reserve" name="reserve" class="btn btn-primary" (click)="reserve()" [clrInMenu]="true">予約する</button>
                    <button class="btn btn-outline" [clrInMenu]="true">予約しない</button>
                    <button id="cancel" name="cancel" class="btn btn-warning" (click)="cancel()" [clrInMenu]="true">キャンセルする</button>
            </div>
        </div>
    </div>
</div>
app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: require('./app.component.html'),
    styles: [
        `${require('./app.component.scss')}`,
    ]
})
export class AppComponent {
    count: number=0;

    public reserve() {
        this.count++;
    }
    public cancel() {
        this.count--;
    }
}

6.おわりに

とりあえずベースができたので、これをもとに色々遊んでみようと思います。
やっぱり、業務の範囲だけだとなかなか新しい技術に気軽にチャレンジできないので、
こういった機会を自ら作り出すのは大事だなーと思いました。

自ら機会を生み出し、機会によって自らを変えよ

ですね。


ちなみに、Angularについては
Angularアプリケーションプログラミング 著:山田 祥寛
で勉強中です。
内容はかなり重厚で、一部難しい部分もありまだ読み込みきれてませんが、
非常にわかりやすく良き本でした。

Laravelもとりあえず何か厚めの教科書をさらっと通して読もうかなって思っているところです。

では、今回はこれぐらいで。

次はなんか組織論の話をできるといいな〜〜