JSフレームワークのサーバーサイド接続まとめ

昨今話題の3大JavaScriptフレームワーク

• Vue.js
• React
• Angular

について各入門書をそれぞれ読んでみて余りにもサーバーサイド(バックエンド)との接続に関する情報が乏しかったので自分なりに調べたまとめ
(本番環境ではビルドして配置してね程度しか書いてない事が多い(特にAngular)…といいつつwebpack-dev-serverの設定でproxyできるのを知ったのはmio先生の「基礎から学ぶ Vue.js」がきっかけだったり)

以下各バックエンドサイドのポートが9000番と仮定して
/apiにサーバーサイドスクリプトを配置していると想定した場合

Vue.jsの場合

Vue CLIで

$ vue init webpack sample-app

としてプロジェクトを生成した場合
[プロジェクトルートディレクトリ]/config/index.js
にて

index.js

/* 抜粋 */
proxyTable: {},
↓
proxyTable: {
  "/api":"http://localhost:9000"
},

としてやって

$ npm start

するだけでOK

Angularの場合

Angular CLIにて
$ ng new sample-app
としてプロジェクトを生成した場合
プロジェクトルートディレクトリにproxy.jsonを以下の内容で作り

proxy.json

{
  "/api": {
    "target": "http://localhost:9000"
  }
}

package.jsonのスクリプト欄を以下のように書き換える

package.json

/* 抜粋 */
"scripts": {
  "start": "ng serve",
},
↓
"scripts": {
  "start": "ng serve --proxy-config proxy.json",
},

あとは同様に以下のコマンドにて起動する

$ npm start

Reactの場合

これだけは正しい方法ではないと思う
→後で知った事だがgeek duck氏の知っていると捗るcreate-react-appの設定によるとhttp-proxy-middlewareというのがある模様(2018/12/15追記)
追記(2018/12/28)
この手の作業をやる場合はyarn ejectしてから行うべきだったようです

[プロジェクトルートディレクトリ]/node_modules/react-scripts/config/webpackDevServer.config.js
を以下のように書き換える

webpackDevServer.config.js

/* 抜粋 */
module.exports = function(proxy, allowedHost) {
  return {
    proxy,
  }
}
↓
module.exports = function(proxy, allowedHost) {
  return {
    proxy {
       '/api': 'http://localhost:9000'
    },
  }
}

あとは同様に以下のコマンドにて起動する

$ npm start

後はバックエンド側でphpが動く場合
[バックエンドのドキュメントルート]/api/index.phpに

index.php

<?php print_r($_REQUEST); ?>

などを書いて以下のURIで確かにGET値が取得できているかを確認
vue.js→http://localhost:8080/api/?id=1
Angular→http://localhost:4200/api/?id=2
React→http://localhost:3000/api/?id=3

ちなみにVue.jsとReactについてはLaravelを使えば簡単に導入が可能で
デフォルトはVue.js
Reactを使う場合は以下のコマンドで切り替えできる

$ php artisan preset react
$ npm install && npm run dev

また
[Laravelプロジェクトルート]/resources/js (5.7系)
[Laravelプロジェクトルート]/resources/assets/js (5.5系)
にあるスクリプトを書き換え時に自動ビルドして
[Laravelプロジェクトルート]/public/js
に配備したい場合サブのターミナルを一つ立ち上げて

$ npm install #(vueでこれを行っていない場合は最初に一回)
$ npm run watch

としてやれば対象ファイルを保存したトリガで自動ビルドされる

またRailsでもプロジェクト生成時に
$rails new sampleApp --webpack=vue
$rails new sampleApp --webpack=react
の様なオプションを付ける事で導入できるそうな（未検証）

参考

[Angular] Angular CLIでプロキシを利用する
Webpack はじめの一歩
Laravel Mixとは
Rails 5.1 + Vue.js で開発を行う - part1 環境構築