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 prox...