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反映

2018-05-06

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

プログラミングプログラミング-PHP

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 コントローラーを生成

2018-05-05

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

プログラミングプログラミング-React

はじめての 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 の引数

2018-05-05

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

プログラミングプログラミング-PHP

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

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

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

Vue.js, React, Angular の選択は最初のポケモン選択そのものだけど、どいつにコミットすべきか。 Laravel で進むなら Vue.js が公式サポートだけど、flux とかのやっていき度が高そうなのは React っぽいな
— 池田仮名 (@bulldra) 2018年5月4日