太陽がまぶしかったから

C'etait a cause du soleil.

React 入門 その2 state と fetch による RESTful API の 自動UI 反映

fetch による API コールと動的UI反映

 上記で作成した React Component を拡張した『PHP 初心者による Laravel 入門 その5 RESTful API と MySQL 操作 - 太陽がまぶしかったから』で作成した RESTful API をコールできるようにしたい。非同期のAPIコールを実現するために fetch() を利用することにした。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    constructor (props) {
        super(props);
        this.state = { companies: [] };
        this.reloadCompanyApi = this.reloadCompanyApi.bind(this);
    }

    reloadCompanyApi() {
        fetch('/api/company', {
            method: 'GET',
            headers: { 'content-type': 'application/json' }, 
        }).then(res => {
            if(res.ok) {
                return res.json();
            } else {
                console.log('error!');
            }
        }).then(json => {
            const companies = json.map(r => { 
                return { 
                    company_id: r.company_id, 
                    company_name: r.company_name 
                };
            });
            companies.sort(function (a, b) { return -(a.company_id - b.company_id); });
            this.setState({ companies: companies });         
        });
    }

    componentWillMount() {
        this.reloadCompanyApi();
        setInterval(this.reloadCompanyApi, '5000');
    }

    render() {
        return (
            <div>
                <h1>会社管理</h1>
                <CompanyList companies={ this.state.companies } />
            </div>
        );
    }
}

class CompanyList extends Component {
    render() {
        const companiesMap = this.props.companies.map(c => {
            return <CompanyItem { ...c } key={ c.company_id } />; 
        });
    
        return (
            <table>
                <thead>
                    <tr><th>会社ID</th><th>会社名</th></tr>
                </thead>
                <tbody>{ companiesMap }</tbody>
            </table>
        );
    }
}

function CompanyItem (props) {
    return (
        <tr>
            <td>{ props.company_id }</td>
            <td>{ props.company_name }</td>
        </tr>
    );
}

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

f:id:bulldra:20180506222425p:plain

 fetch() の利用法については『Fetch API - Web API インターフェイス | MDN』を参照。開始時および 5秒に1回 API から取得した JSON を展開してコンポーネントの state に設定。 React では this.setState() が実行されるたびに、 render() が再起動されるため、DBを更新すればページリロードをせずに動的にUI反映が行われる。

Post によるデータ登録とUI反映

続きを読む

PHP 初心者による Laravel 入門 その5 RESTful API と MySQL 操作

Laravel で RESTful API 作成

 前回までで MySQL の Docker コンテナを作成してPHP Laravel のコンテナから接続できるようにした。

 いまどきの Single Page Application 構成を見据えて View は React で作ることにしたため、 Laravel では API を通じたデータの入出力に専念させたい。このような用途に利用されるのが、 RESTful API である。RESTful API とは REpresentational State Transfer の原則に基づいて設計された API で一意の URI と HTTP メソッドによってリソースへのアクセスを提供する。CRUD と HTTP メソッドの関係は以下の通り。

CRUD 意味 メソッド 備考
Create 作成 POST / PUT 指定IDが存在しなれば新規作成する更新(いわゆる UPSERT) は PUT
Read 読み込み GET Content-Type: application/json 形式で取得
Update 更新 PUT 更新後の結果を返却する
Delete 削除 DELTE 論理削除は PUT( GEC の LB が対応してないので DELTE は使わないほうよいそう )

 これらの処理を Laravel で実装していく。

artisan で REST コントローラーを生成

続きを読む

React 入門 その1 React Component の表示と繰り返し制御

はじめての React

 上記で構築した Docker 環境で Laravel x React に入門してみる。 基本的には resources/views/welcome.blade.php から紐づけた resources/assets/js/components/Example.js を編集していく。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
        return (
            <div>
                <h1>会社管理</h1>
                <CompanyInput />
            </div>
        );
    }
}

class CompanyInput extends Component {
    render() {
        return (
            <div><input placeholder="会社名" /> <button>登録</button></div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<App />, document.getElementById('example'));
}

f:id:bulldra:20180505204141j:plain

 基本的には Component を継承した class の render() で JSX をreturn する形でコンポーネントを作成し。作成したコンポーネントは別のコンポーネントの JSX 内から利用できるので、親子関係で最終的な表示定義を作成して ReactDOM で現実のDOMに紐付けると理解。

React Component の引数

続きを読む

Laravel 5.6 x React Docker 環境で npm watch と artisan serve を共存

最初のフロントエンドを選ぶのじゃ

 Laravel で Web アプリを作っていたのだけど、今どきの Web アプリケーションにおいてはサーバーサイドで API だけ作って画面表示は Javascript で生成するのが一般的なようだ。

 そんな時流において、サーバーサイドのテンプレートエンジンの学習に時間を使うのも勿体ないので、フロントエンドの最低限を作って API と結合することにした。

 そんなわけで、 『PHP 初心者による Laravel 入門 その4 MySQL の Docker コンテナ間接続 - 太陽がまぶしかったから』 で作成したLaravel Docker 開発環境で React を扱えるようにする。 Let's Yak Shaving !

Laravel から React を使うために

続きを読む

ポケモンGO無課金勢で Lv39 & 日本縦断を達成

f:id:bulldra:20180504183045j:plain

今週のお題「ゴールデンウィーク2018」

 ゴールデンウィークの暇にまかせて、Pokemon GO Plus を装着して歩き回っていたらレベル39になった。2016年07月22日の開始からあしかけ1年と10ヶ月。あいかわらずの無課金縛りである。

 レベル38からは77日間。前回のレベルアップは非常に時間がかかったのだけど、ここのところでコミュニティディやフィールドリサーチなどのイベントが続いており、経験値を得やすい環境になっている。ポッポマラソンフォーエバー。

レベル39は事実上のカンスト扱い

続きを読む