{"id":2566,"date":"2018-11-25T01:13:53","date_gmt":"2018-11-24T16:13:53","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=2566"},"modified":"2018-11-25T01:13:53","modified_gmt":"2018-11-24T16:13:53","slug":"laravel%e3%81%a7%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%aereact-js","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=2566","title":{"rendered":"Laravel\u3067\u306f\u3058\u3081\u3066\u306eReact.JS"},"content":{"rendered":"

\u3055\u3066\u3055\u3066\u3001\u3053\u306e\u30d6\u30ed\u30b0\u3067\u306f\u307b\u307c\u30e1\u30a4\u30f3\u3067Laravel\u3068Vue.JS\u306e\u8a71\u984c\u3092\u304a\u5c4a\u3051\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u3084\u306f\u308a\u305f\u307e\u306b\u306f\u5225\u306e\u30b3\u30f3\u30bb\u30d7\u30c8\u3067\u4f5c\u3089\u308c\u305f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u4f53\u9a13\u3059\u308b\u3068\u30b9\u30ad\u30eb\u304c\u5411\u4e0a\u3057\u307e\u3059\u306e\u3067\u7a4d\u6975\u7684\u306b\u30c8\u30e9\u30a4\u3057\u3066\u3044\u3053\u3046\u3068\u8003\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u305d\u3057\u3066\u3001\u305b\u3063\u304b\u304f\u4f53\u9a13\u3059\u308b\u304b\u3089\u306b\u306f\u30b7\u30a7\u30a2\u304c\u5927\u304d\u3044\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u3044\u3044\u306e\u3067\u4eca\u56de\u306f\u300cJS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3044\u3063\u305f\u3089\uff1f\u300d\u3068\u3044\u3046\u8cea\u554f\u306b\u306f\u5fc5\u305a\u767b\u5834\u3059\u308b\u3067\u3042\u308d\u3046\u300cReact.JS\u300d\u3092\u89e6\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n

\u5b9f\u969b\u306fReact\u304c\u767b\u5834\u3057\u3066\u3059\u3050\u5c11\u3057\u4f7f\u3063\u3066\u3044\u305f\u3053\u3068\u304c\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u305d\u306e\u76f4\u5f8c\u306b\u51fa\u9022\u3063\u305fVue.JS\u306b\u3059\u3063\u304b\u308a\u5fc3\u3092\u596a\u308f\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002\u305d\u3057\u3066\u3001Laravel\u3082Vue\u3092\u63a1\u7528\u3059\u308b\u3068\u3044\u3046\u30cb\u30e5\u30fc\u30b9\u3082\u3042\u308a\u5b8c\u5168\u306b\u79fb\u884c\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u3068\u3044\u3046\u7d4c\u7def\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n

\u305f\u3060\u3001\u73fe\u5728\u306fLaravel Mix<\/code>\u3067\u3082react<\/code>\u3092\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3059\u306e\u3067\u4eca\u56de\u306fLaravel\u3092\u4f7f\u3063\u3066\u521d\u3081\u3066React.JS<\/code>\u306e\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3055\u305b\u308b\u307e\u3067\u3092\u307e\u3068\u3081\u3066\u307f\u307e\u3059\u3002<\/p>\n

\u305c\u3072\u958b\u767a\u306e\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n

\"\"<\/p>\n

\u203b \u958b\u767a\u74b0\u5883\uff1a Laravel 5.7<\/p>\n

\u6e96\u5099<\/h1>\n

React<\/code>\u304cLaravel<\/code>\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u306a\u3044\u3068\u59cb\u307e\u308a\u307e\u305b\u3093\u3002
\n\u307e\u305a\u306f\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n

Laravel\u306f\u521d\u671f\u72b6\u614b\u3067Vue\u3092\u4f7f\u3046\u5f62\u5f0f\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u306e\u3067\u6b21\u306e\u30b3\u30de\u30f3\u30c9\u3067react\u3092\u4f7f\u3046\u3053\u3068\u3092\u660e\u78ba\u306b\u3057\u307e\u3059\u3002<\/p>\n

php artisan preset react<\/strong><\/pre>\n
\u3059\u308b\u3068\u6b21\u306e\u3088\u3046\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3055\u308creact<\/code>\u3092\u4f7f\u3046\u30e2\u30fc\u30c9\u306b\u5207\u308a\u66ff\u308f\u308a\u307e\u3057\u305f\u3002<\/p>\n
Please run “npm install && npm run dev” to compile your fresh scaffolding.<\/p><\/blockquote>\n
\u3042\u3068\u306f\u901a\u5e38\u901a\u308anpm<\/code>\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308c\u3070OK\u3067\u3059\u3002<\/p>\n
npm install<\/strong><\/pre>\n
\u203b \u3061\u306a\u307f\u306b\u3001resources\/js<\/code>\u5185\u306e\u5404\u30d5\u30a1\u30a4\u30eb\u3082React\u4ed5\u69d8\u306b\u5909\u308f\u308a\u307e\u3059\u3002
\n\u203b \u3082\u3061\u308d\u3093\u3001<\/span>npm i vue --save<\/code>\u3068\u3059\u308c\u3070Vue\u3082\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u53ef\u80fd\u3067\u3059\u3002<\/span><\/p>\n
\u307e\u305f\u3001Laravel Mix<\/code>\u304creact<\/code>\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3067\u304d\u308b\u3088\u3046\u306b\u3001webpack.mix.js<\/code>\u3092\u958b\u3044\u3066\u4ee5\u4e0b\u306e\u90e8\u5206\u3092\u5909\u66f4\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n
mix.js<\/strong>('resources\/js\/app.js', 'public\/js')<\/pre>\n
\u2193\u2193\u2193<\/p>\n
mix.react<\/strong>('resources\/js\/app.js', 'public\/js')<\/pre>\n
\u300c\u3053\u3093\u306b\u3061\u306f\u300d\u3068\u8868\u793a\u3055\u305b\u308b<\/h1>\n
\u3067\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306b\u300c\u3053\u3093\u306b\u3061\u306f\u300d\u3068\u8868\u793a\u3055\u305b\u308b\u3060\u3051\u306e\u5c0f\u3055\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u3064\u304f\u3063\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\u307e\u305a\u306f\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u3059\u3002<\/p>\n
<html>\r\n<body>\r\n    <div id=\"hello\"><\/div><\/strong>\r\n    <script src=\"\/js\/app.js\"><\/script><\/strong>\r\n<\/body>\r\n<\/html><\/pre>\n
id<\/code>\u304c “hello”<\/strong> \u3068\u306a\u3063\u3066\u3044\u308b<div><\/code>\u30bf\u30b0\u3092\u3064\u304f\u308a\u3001\u3042\u3068\u3067Larave Mix\u304c\u81ea\u52d5\u4f5c\u6210\u3059\u308b\u3053\u3068\u306b\u306a\u308bapp.js<\/code>\u3092\u8aad\u307f\u8fbc\u3093\u3067\u304a\u304d\u307e\u3059\u3002<\/p>\n
\u3067\u306fReact\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002<\/p>\n
resources\/js\/components<\/code>\u30d5\u30a9\u30eb\u30c0\u306e\u4e2d\u306bHello.js<\/code>\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u308a\u6b21\u306e\u3088\u3046\u306a\u5185\u5bb9\u306b\u3057\u307e\u3059\u3002<\/p>\n
import React, { Component } from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nexport default class Hello extends Component {<\/strong>\r\n    render() {<\/strong>\r\n        return (<\/strong>\r\n            <h1>\u3053\u3093\u306b\u3061\u306f\uff01<\/h1><\/strong>\r\n        );<\/strong>\r\n    }<\/strong>\r\n}<\/strong>\r\n\r\nif(document.getElementById('hello')) {\r\n\r\n    ReactDOM.render(<Hello \/>, document.getElementById('hello'));<\/strong>\r\n\r\n}<\/pre>\n
\u3084\u3063\u3066\u3044\u308b\u3053\u3068\u306fComponent<\/code>\u30af\u30e9\u30b9\u3092\u7d99\u627f\u3057\u3066render()<\/code>\u3092\u6307\u5b9a\u3057\u305f\u30af\u30e9\u30b9\u3092\u3064\u304f\u308a\u3001\u305d\u306e\u30af\u30e9\u30b9\u3092\u300c\u64ec\u4f3c\u7684\u306aHTML\u30bf\u30b0\u300d\u3068\u3057\u3066\u4f7f\u3063\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n
\u3067\u306f\u3053\u308c\u3067\u5b9f\u884c\uff01\u30fb\u30fb\u30fb\u3068\u3044\u304d\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u304c\u3053\u306e\u307e\u307e\u3067\u306f\u5b9f\u884c\u3067\u304d\u307e\u305b\u3093\u3002
\n\u305d\u3046\u3067\u3059\u3002\u307e\u3060app.js<\/code>\u306b\u3053\u306e\u4e2d\u8eab\u304c\u53cd\u6620\u3055\u308c\u3066\u3044\u306a\u3044\u304b\u3089\u3067\u3059\u3002<\/p>\n
\u3053\u308c\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306b\u306f\u3001resources\/js\/app.js<\/code>\u3092\u958b\u3044\u3066\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n
require('.\/components\/Hello');<\/strong> \/\/ \u2190\u5148\u307b\u3069\u3064\u304f\u3063\u305fHello.js\u306e\u3053\u3068\u3067\u3059<\/pre>\n
\u305d\u3057\u3066\u3001npm<\/code>\u30b3\u30de\u30f3\u30c9\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002<\/p>\n
npm run dev<\/strong><\/pre>\n
\u5b8c\u4e86\u3057\u305f\u3089\u5b9f\u969b\u306b\u30d6\u30e9\u30a6\u30b6\u3067\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
\"\"<\/p>\n
\u3046\u307e\u304f\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
\u6642\u9593\u3067\u300c\u304a\u306f\u3088\u3046\u300d\u300c\u3053\u3093\u306b\u3061\u306f\u300d\u300c\u3053\u3093\u3070\u3093\u306f\u300d\u3092\u5207\u308a\u66ff\u3048\u308b<\/h1>\n
\u3067\u306f\u6b21\u306b\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5c11\u3057\u6539\u9020\u3057\u3066\u3001\u6642\u9593\u5e2f\u3067\u8868\u793a\u304c\u5207\u308a\u66ff\u308f\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n
    \n
  • \uff15\u301c11\u6642\u3000\u30fb\u30fb\u30fb\u3000\u304a\u306f\u3088\u3046\uff01<\/li>\n
  • \uff11\uff12\u6642\u301c\uff11\uff17\u6642\u3000\u30fb\u30fb\u30fb\u3000\u3053\u3093\u306b\u3061\u306f\uff01<\/li>\n
  • \uff10\u6642\u304b\u3089\uff14\u6642\u3001\uff11\uff18\u6642\u301c\uff12\uff13\u6642\u3000\u30fb\u30fb\u30fb\u3000\u3053\u3093\u3070\u3093\u306f\uff01<\/li>\n<\/ul>\n
    render() {\r\n\r\n    const date = new Date();<\/strong>\r\n    const hours = date.getHours();<\/strong>\r\n    let text = '';<\/strong>\r\n\r\n    if(hours >= 18 || hours <= 4) {<\/strong>\r\n        text = '\u3053\u3093\u3070\u3093\u306f\uff01';<\/strong>\r\n    } else if(hours >= 12) {<\/strong>\r\n        text = '\u3053\u3093\u306b\u3061\u306f\uff01';<\/strong>\r\n    } else {<\/strong>\r\n        text = '\u304a\u306f\u3088\u3046\uff01';<\/strong>\r\n    }<\/strong>\r\n\r\n    return (\r\n        <h1>{text}<\/strong><\/h1>\r\n    );\r\n}<\/pre>\n
    \u305d\u3057\u3066\u3001npm run dev<\/code>\u3092\u5b9f\u884c\u3057\u3001\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n
    \"\"<\/p>\n
    \u5b9f\u884c\u6642\u9593\u306f\u591c\u3060\u3063\u305f\u306e\u3067\u300c\u3053\u3093\u3070\u3093\u306f\uff01\u300d\u3068\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<\/p>\n
    \u8907\u6570\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8868\u793a\u3059\u308b<\/h1>\n
    \u7d9a\u3044\u3066\u3001\u6642\u9593\u5e2f\u3067\u5207\u308a\u66ff\u308f\u308b\u300c\u3042\u3044\u3055\u3064\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u300d\u3092\u4f7f\u3063\u3066\u6b21\u306e\uff13\u4eba\u3078\u306e\u6328\u62f6\u3092\u4e00\u6c17\u306b\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n