{"id":253,"date":"2025-04-13T14:47:05","date_gmt":"2025-04-13T05:47:05","guid":{"rendered":"https:\/\/hexis.jp\/?p=253"},"modified":"2025-04-13T15:25:31","modified_gmt":"2025-04-13T06:25:31","slug":"%e3%80%90%e3%82%bc%e3%83%ad%e3%81%8b%e3%82%89%e3%80%91laravel%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%ef%bc%86%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc","status":"publish","type":"post","link":"https:\/\/hexis.jp\/?p=253","title":{"rendered":"\u3010\u30bc\u30ed\u304b\u3089\u3011Laravel\u3067\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\uff06\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd\u3092\u4f5c\u3063\u3066\u307f\u305f"},"content":{"rendered":"\n

<\/span>1.\u306f\u3058\u3081\u306b<\/span><\/h2>\n\n\n\n

Laravel\u3067\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u4f5c\u308a\u305f\u3044\uff01\u3068\u601d\u3063\u305f\u3068\u304d\u3001\u521d\u5fc3\u8005\u306e\u65b9\u304c\u6700\u521d\u306b\u3064\u307e\u305a\u304f\u306e\u304c\u300c\u4f55\u3092\u3069\u3046\u3084\u3063\u3066\u4f5c\u308c\u3070\u3044\u3044\u306e\uff1f\u300d\u3068\u3044\u3046\u5168\u4f53\u306e\u6d41\u308c\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\uff1f\u3055\u3089\u306b\u3001\u300c\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u524d\u306b\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3057\u305f\u3044\u300d\u3068\u306a\u308b\u3068\u3001JavaScript\u3068\u306e\u9023\u643a\u3082\u5fc5\u8981\u306b\u306a\u3063\u3066\u304d\u3066\u3001\u3044\u304d\u306a\u308a\u30cf\u30fc\u30c9\u30eb\u304c\u4e0a\u304c\u3063\u305f\u3088\u3046\u306b\u611f\u3058\u308b\u65b9\u3082\u591a\u3044\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001Laravel\u521d\u5fc3\u8005\u3067\u3082\u3064\u307e\u305a\u304b\u305a\u306b\u3001\u753b\u50cf\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd\u3092\u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u3067\u5b9f\u88c5\u3067\u304d\u308b<\/strong>\u3088\u3046\u306b\u3001\u3084\u3055\u3057\u304f\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

\u6700\u7d42\u7684\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u6a5f\u80fd\u3092\u5b9f\u73fe\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n

    \n
  • \u30d5\u30a9\u30fc\u30e0\u304b\u3089\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e<\/li>\n\n\n\n
  • \u9078\u629e\u3057\u305f\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u305d\u306e\u5834\u3067\u8868\u793a<\/li>\n\n\n\n
  • \u300c\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u753b\u50cf\u304c\u30b5\u30fc\u30d0\u30fc\u306b\u4fdd\u5b58\u3055\u308c\u308b<\/li>\n\n\n\n
  • \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u3001\u4fdd\u5b58\u3055\u308c\u305f\u753b\u50cf\u304c\u753b\u9762\u4e0a\u306b\u8868\u793a\u3055\u308c\u308b<\/li>\n<\/ul>\n\n\n\n

    Laravel\u3067\u306e\u57fa\u672c\u7684\u306a\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306e\u6d41\u308c\u306b\u52a0\u3048\u3001JavaScript\u3092\u4f7f\u3063\u305f\u30d7\u30ec\u30d3\u30e5\u30fc\u51e6\u7406\u307e\u3067\u542b\u3081\u3066\u89e3\u8aac\u3059\u308b\u3053\u3068\u3067\u3001\u300c\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306e\u4ed5\u7d44\u307f\u300d\u304c\u4e00\u901a\u308a\u7406\u89e3\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n

    \u305d\u308c\u3067\u306f\u3001\u3055\u3063\u305d\u304f\u59cb\u3081\u3066\u3044\u304d\u307e\u3057\u3087\u3046\uff01<\/p>\n\n\n\n

    <\/span>2. \u958b\u767a\u74b0\u5883\u306e\u524d\u63d0\u30fb\u6e96\u5099<\/span><\/h2>\n\n\n\n

    Laravel\u3067\u306e\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3068\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd\u306e\u5b9f\u88c5\u306b\u53d6\u308a\u7d44\u3080\u524d\u306b\u3001\u307e\u305a\u306f\u958b\u767a\u74b0\u5883\u3068\u524d\u63d0\u6761\u4ef6\u306e\u78ba\u8a8d\u3092\u884c\u3044\u307e\u3057\u3087\u3046\u3002\u3053\u3053\u3067\u306f\u3001\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u305f\u3044\u30dd\u30a4\u30f3\u30c8\u3084\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \u3010Laravel\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3011<\/strong>
    \u3053\u306e\u89e3\u8aac\u3067\u306f\u3001Laravel 8.x \u307e\u305f\u306f 9.x \u7cfb\u3092\u60f3\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002\u3054\u5229\u7528\u306e\u74b0\u5883\u304c\u7570\u306a\u308b\u5834\u5408\u306f\u3001\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u5408\u308f\u305b\u305f\u8a2d\u5b9a\u3084\u8a18\u8ff0\u306e\u9055\u3044\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n

    \u3010\u958b\u767a\u74b0\u5883\u3011<\/strong><\/p>\n\n\n\n

      \n
    • \u30ed\u30fc\u30ab\u30eb\u958b\u767a\u74b0\u5883<\/strong>\uff1aXAMPP\u3084Laravel Homestead\u306a\u3069\u3001\u304a\u597d\u307f\u306e\u74b0\u5883\u3067\u69cb\u3044\u307e\u305b\u3093\u3002<\/li>\n\n\n\n
    • Composer<\/strong>\uff1aLaravel\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210\u3084\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306b\u5fc5\u9808\u3067\u3059\u3002<\/li>\n\n\n\n
    • Node.js & npm\/yarn<\/strong>\uff1a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u95a2\u9023\u306e\u8a2d\u5b9a\u3084JavaScript\u306e\u30d3\u30eb\u30c9\u306b\u4f7f\u7528\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n\n\n\n

      \u3010Laravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u3011<\/strong>
      \u3082\u3057\u307e\u3060\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u65b0\u898f\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\uff1a<\/p>\n\n\n\n

      composer create-project --prefer-dist laravel\/laravel laravel-upload-preview<\/code><\/pre><\/div>\n\n\n\n

      <\/code><\/pre>\n\n\n\n
      \u3010\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u3068\u30b9\u30c8\u30ec\u30fc\u30b8\u8a2d\u5b9a\u3011<\/strong><\/p>\n\n\n\n
        \n
      • \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u76f4\u4e0b\u306epublic<\/code>\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306f\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u753b\u50cf\u306e\u516c\u958b\u5148\u3068\u306a\u308b\u3053\u3068\u304c\u591a\u3044\u305f\u3081\u3001\u30d1\u30fc\u30df\u30c3\u30b7\u30e7\u30f3\u8a2d\u5b9a\u306b\u6ce8\u610f\u3057\u307e\u3057\u3087\u3046\u3002<\/li>\n\n\n\n
      • Laravel\u304c\u63d0\u4f9b\u3059\u308bStorage<\/code>\u30d5\u30a1\u30b5\u30fc\u30c9\u3092\u5229\u7528\u3059\u308b\u5834\u5408\u306f\u3001storage:link<\/code>\u30b3\u30de\u30f3\u30c9\u3067\u30b7\u30f3\u30dc\u30ea\u30c3\u30af\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3057\u3066\u304a\u304f\u306e\u304c\u4fbf\u5229\u3067\u3059\uff1a<\/li>\n<\/ul>\n\n\n\n
        php artisan storage:link<\/code><\/pre><\/div>\n\n\n\n

        <\/code><\/pre>\n\n\n\n
        \u3010\u5fc5\u8981\u306b\u5fdc\u3058\u305f\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5c0e\u5165\u3011<\/strong>
        \u4eca\u56de\u306e\u5b9f\u88c5\u3067\u306f\u3001\u57fa\u672c\u7684\u306aLaravel\u306e\u6a5f\u80fd\u3068\u30b7\u30f3\u30d7\u30eb\u306aJavaScript\u3067\u5341\u5206\u3067\u3059\u304c\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u753b\u50cf\u64cd\u4f5c\u3084\u52a0\u5de5\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u88fd\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3082\u9078\u629e\u80a2\u306b\u5165\u308c\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
        \u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3092\u901a\u3057\u3066\u3001\u3059\u3079\u3066\u306e\u6e96\u5099\u304c\u6574\u3048\u3070\u3001\u6b21\u306b\u5b9f\u969b\u306e\u30d5\u30a9\u30fc\u30e0\u4f5c\u6210\u306a\u3069\u3001\u5b9f\u88c5\u306b\u5165\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u3053\u308c\u3067\u57fa\u672c\u7684\u306a\u74b0\u5883\u8a2d\u5b9a\u306f\u30d0\u30c3\u30c1\u30ea\u3067\u3059\uff01<\/p>\n\n\n\n
        <\/span>3. \u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u7528\u306e\u30d5\u30a9\u30fc\u30e0\u3092\u4f5c\u6210\u3059\u308b<\/span><\/h2>\n\n\n\n
        \u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u5b9f\u73fe\u3059\u308b\u306b\u306f\u3001\u307e\u305a\u300c\u30e6\u30fc\u30b6\u30fc\u304c\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u9001\u4fe1\u3059\u308b\u305f\u3081\u306e\u30d5\u30a9\u30fc\u30e0\u300d\u304c\u5fc5\u8981\u3067\u3059\u3002\u3053\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3001\u305d\u3057\u3066Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f7f\u3063\u305f\u30d5\u30a9\u30fc\u30e0\u306e\u4f5c\u6210\u307e\u3067\u3092\u9806\u3092\u8ffd\u3063\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
        \u2705 1. \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u4f5c\u6210\uff08web.php\uff09<\/h3>\n\n\n\n
        \u307e\u305a\u306f\u30eb\u30fc\u30c8\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u753b\u9762\u306e\u8868\u793a\u3068\u3001\u5b9f\u969b\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u51e6\u7406\u7528\u306e\u30eb\u30fc\u30c8\u3092\u305d\u308c\u305e\u308c\u5b9a\u7fa9\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
        \/\/ routes\/web.php\n\nuse App\\Http\\Controllers\\ImageUploadController;\n\nRoute::get('\/upload', [ImageUploadController::class, 'showForm'])->name('upload.form');\nRoute::post('\/upload', [ImageUploadController::class, 'uploadImage'])->name('upload.image');<\/code><\/pre><\/div>\n\n\n\n
        \n\n\n\n
        \u2705 2. \u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306e\u4f5c\u6210<\/h3>\n\n\n\n
        \u6b21\u306b\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u4ee5\u4e0b\u306e Artisan \u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
        php artisan make:controller ImageUploadController<\/code><\/pre><\/div>\n\n\n\n
        \u4f5c\u6210\u3055\u308c\u305f app\/Http\/Controllers\/ImageUploadController.php<\/code> \u306b\u3001\u6b21\u306e\u3088\u3046\u306b\u30e1\u30bd\u30c3\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
        \/\/ app\/Http\/Controllers\/ImageUploadController.php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass ImageUploadController extends Controller\n{\n    \/\/ \u30d5\u30a9\u30fc\u30e0\u306e\u8868\u793a\n    public function showForm()\n    {\n        return view('upload');\n    }\n\n    \/\/ \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u51e6\u7406\uff08\u5f8c\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u5b9f\u88c5\uff09\n    public function uploadImage(Request $request)\n    {\n        \/\/ \u5f8c\u307b\u3069\u5b9f\u88c5\u3057\u307e\u3059\n    }\n}<\/code><\/pre><\/div>\n\n\n\n
        \n\n\n\n
        \u2705 3. \u30d5\u30a9\u30fc\u30e0\uff08Blade\u30d5\u30a1\u30a4\u30eb\uff09\u306e\u4f5c\u6210<\/h3>\n\n\n\n
        \u6b21\u306b\u3001\u30d5\u30a9\u30fc\u30e0\u3092\u8868\u793a\u3059\u308bBlade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002resources\/views\/upload.blade.php<\/code> \u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u3092\u65b0\u898f\u4f5c\u6210\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n
        <!-- resources\/views\/upload.blade.php -->\n\n<!DOCTYPE html>\n<html>\n<head>\n    <title>\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/title>\n<\/head>\n<body>\n    <h1>\u753b\u50cf\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/h1>\n\n    <form action="{{ route('upload.image') }}" method="POST" enctype="multipart\/form-data">\n        @csrf\n        <input type="file" name="image" accept="image\/*" onchange="previewImage(event)">\n        <br><br>\n        <img id="preview" src="" style="max-width: 300px; display: none;">\n        <br><br>\n        <button type="submit">\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/button>\n    <\/form>\n\n    <script>\n        function previewImage(event) {\n            const reader = new FileReader();\n            reader.onload = function(){\n                const output = document.getElementById('preview');\n                output.src = reader.result;\n                output.style.display = 'block';\n            };\n            reader.readAsDataURL(event.target.files[0]);\n        }\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre><\/div>\n\n\n\n
        \u3053\u306e\u30d5\u30a9\u30fc\u30e0\u3067\u306f\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3059\u308b\u3068JavaScript\u3067\u305d\u306e\u5834\u3067\u30d7\u30ec\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u9078\u629e\u3055\u308c\u305f\u753b\u50cf\u3092\u5b9f\u969b\u306b\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u4fdd\u5b58\u3059\u308b\u51e6\u7406\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n\n\n\n
        \n\n\n\n
        \n\n\n\n
        <\/span>4.\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u51e6\u7406\u3092\u5b9f\u88c5\u3059\u308b\uff08\u4fdd\u5b58\u30fb\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\uff09<\/span><\/h2>\n\n\n\n
        \u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306e\u30d5\u30a9\u30fc\u30e0\u304c\u5b8c\u6210\u3057\u305f\u3089\u3001\u6b21\u306f\u5b9f\u969b\u306b\u753b\u50cf\u3092\u4fdd\u5b58\u3059\u308b\u51e6\u7406\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002\u3042\u308f\u305b\u3066\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u308b\u753b\u50cf\u306b\u5bfe\u3057\u3066**\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\uff08\u691c\u8a3c\uff09**\u3082\u884c\u3046\u3053\u3068\u3067\u3001\u5b89\u5168\u6027\u306e\u9ad8\u3044\u51e6\u7406\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
        \n\n\n\n
        \u2705 1. \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u8ffd\u52a0<\/h3>\n\n\n\n
        \u307e\u305a\u306f\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u308b\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u304c\u6b63\u3057\u3044\u5f62\u5f0f\u3067\u3042\u308b\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u305f\u3081\u306b\u3001uploadImage<\/code> \u30e1\u30bd\u30c3\u30c9\u306b\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
        \/\/ app\/Http\/Controllers\/ImageUploadController.php\n\nuse Illuminate\\Support\\Facades\\Storage;\n\npublic function uploadImage(Request $request)\n{\n    \/\/ \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u30eb\u30fc\u30eb\u306e\u8a2d\u5b9a\n    $request->validate([\n        'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',\n    ]);\n\n    \/\/ \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u51e6\u7406\uff08\u6b21\u3067\u89e3\u8aac\uff09\n}<\/code><\/pre><\/div>\n\n\n\n
        \u3053\u3053\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u5185\u5bb9\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n
          \n
        • required<\/strong>\uff1a\u753b\u50cf\u304c\u9078\u629e\u3055\u308c\u3066\u3044\u308b\u3053\u3068<\/li>\n\n\n\n
        • image<\/strong>\uff1a\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3067\u3042\u308b\u3053\u3068\uff08MIME\u30bf\u30a4\u30d7\u306b\u57fa\u3065\u304f\uff09<\/li>\n\n\n\n
        • mimes<\/strong>\uff1a\u8a31\u53ef\u3059\u308b\u62e1\u5f35\u5b50\uff08jpeg, png, jpg, gif\uff09<\/li>\n\n\n\n
        • max<\/strong>\uff1a\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u4e0a\u9650\uff082MB\uff09<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          \u2705 2. \u30d5\u30a1\u30a4\u30eb\u3092\u4fdd\u5b58\u3059\u308b<\/h3>\n\n\n\n
          \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u901a\u904e\u3057\u305f\u3089\u3001\u753b\u50cf\u3092 storage\/app\/public<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u4fdd\u5b58\u3057\u307e\u3059\u3002\u4fdd\u5b58\u306b\u306fLaravel\u306e store<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u306e\u304c\u4fbf\u5229\u3067\u3059\u3002<\/p>\n\n\n\n
          \/\/ \u4fdd\u5b58\u51e6\u7406\u306e\u8ffd\u52a0\n\n\/\/ \u30d5\u30a1\u30a4\u30eb\u306e\u4fdd\u5b58\n$path = $request->file('image')->store('public\/images');\n\n\/\/ \u30d1\u30b9\u3092\u6574\u5f62\u3057\u3066\u30d3\u30e5\u30fc\u306b\u6e21\u3059\n$filename = basename($path);\n\nreturn view('upload')->with('filename', $filename);<\/code><\/pre><\/div>\n\n\n\n
          \u3053\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001\u753b\u50cf\u3092 storage\/app\/public\/images\/<\/code> \u306b\u4fdd\u5b58\u3057\u3001\u305d\u306e\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u53d6\u5f97\u3057\u3066 upload.blade.php<\/code> \u306b\u6e21\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
          \n
          \u203b php artisan storage:link<\/code> \u3092\u5fd8\u308c\u3066\u3044\u308b\u3068\u3001\u4fdd\u5b58\u3057\u3066\u3082\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u307e\u305b\u3093\u3002\u524d\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u5b9f\u65bd\u3057\u305f\u3053\u3068\u3092\u601d\u3044\u51fa\u3057\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n<\/blockquote>\n\n\n\n
          \n\n\n\n
          \u2705 3. \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u7d50\u679c\u3092\u753b\u9762\u306b\u8868\u793a\u3059\u308b\uff08Blade\u4fee\u6b63\uff09<\/h3>\n\n\n\n
          upload.blade.php<\/code> \u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306e\u753b\u50cf\u3092\u8868\u793a\u3059\u308b\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
          @if(isset($filename))\n    <h2>\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf<\/h2>\n    <img src="{{ asset('storage\/images\/' . $filename) }}" style="max-width: 300px;">\n@endif<\/code><\/pre><\/div>\n\n\n\n
          \u3053\u308c\u3067\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306b\u753b\u50cf\u304c\u753b\u9762\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\uff01<\/p>\n\n\n\n
          \n\n\n\n
          \u3053\u3053\u307e\u3067\u3067\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3001\u4fdd\u5b58\uff06\u8868\u793a\u3059\u308b\u3068\u3053\u308d\u307e\u3067\u304c\u5b8c\u6210\u3057\u307e\u3057\u305f\u3002\u6b21\u306f\u3001JavaScript\u3067\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3059\u308b\u65b9\u6cd5\u3092\u3055\u3089\u306b\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n\n\n\n
          \n\n\n\n
          \n\n\n\n
          <\/span>5.JavaScript\u3067\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd\u3092\u8ffd\u52a0\u3059\u308b<\/span><\/h2>\n\n\n\n
          \u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u30d5\u30a9\u30fc\u30e0\u3067\u306f\u3001\u753b\u50cf\u3092\u9078\u3093\u3060\u6642\u70b9\u3067\u300c\u3061\u3083\u3093\u3068\u9078\u3079\u305f\u304b\u300d\u300c\u3069\u3093\u306a\u753b\u50cf\u304b\u300d\u304c\u5206\u304b\u308b\u3068\u5b89\u5fc3\u3067\u3059\u3088\u306d\u3002\u305d\u3053\u3067\u4eca\u56de\u306f\u3001JavaScript\u3092\u4f7f\u3063\u3066\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3059\u308b<\/strong>\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
          \n\n\n\n
          \u2705 1. JavaScript\u3067FileReader\u3092\u4f7f\u3046<\/h3>\n\n\n\n
          \u30d5\u30a9\u30fc\u30e0\u306e <input type=\"file\"><\/code> \u306b\u753b\u50cf\u3092\u9078\u3093\u3060\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u51e6\u7406\u3092\u5b9f\u884c\u3059\u308b\u306b\u306f\u3001JavaScript\u306e FileReader<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
          upload.blade.php<\/code> \u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u304c\u3059\u3067\u306b\u3042\u308b\u3068\u601d\u3044\u307e\u3059\u304c\u3001\u3042\u3089\u305f\u3081\u3066\u8aac\u660e\u3057\u307e\u3059\ud83d\udc47<\/p>\n\n\n\n
          <input type="file" name="image" accept="image\/*" onchange="previewImage(event)">\n\n<img id="preview" src="" style="max-width: 300px; display: none;">\n\n<script>\n    function previewImage(event) {\n        const reader = new FileReader();\n\n        reader.onload = function(){\n            const output = document.getElementById('preview');\n            output.src = reader.result;\n            output.style.display = 'block';\n        };\n\n        reader.readAsDataURL(event.target.files[0]);\n    }\n<\/script><\/code><\/pre><\/div>\n\n\n\n
          \u3053\u306e\u30b3\u30fc\u30c9\u3067\u306f\u4ee5\u4e0b\u306e\u6d41\u308c\u3067\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n
            \n
          1. \u30e6\u30fc\u30b6\u30fc\u304c\u753b\u50cf\u3092\u9078\u629e<\/li>\n\n\n\n
          2. onchange<\/code>\u30a4\u30d9\u30f3\u30c8\u3067 previewImage()<\/code> \u95a2\u6570\u304c\u5b9f\u884c<\/li>\n\n\n\n
          3. FileReader<\/code> \u3067\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u3001DataURL\uff08\u753b\u50cf\u306ebase64\u30c7\u30fc\u30bf\uff09\u3092\u751f\u6210<\/li>\n\n\n\n
          4. <img><\/code> \u30bf\u30b0\u306b src<\/code> \u3068\u3057\u3066\u8aad\u307f\u8fbc\u3093\u3060\u753b\u50cf\u3092\u8a2d\u5b9a<\/li>\n\n\n\n
          5. display: block<\/code> \u306b\u3057\u3066\u753b\u50cf\u3092\u8868\u793a<\/li>\n<\/ol>\n\n\n\n
            \n\n\n\n
            \u2705 2. \u30d7\u30ec\u30d3\u30e5\u30fc\u8868\u793a\u3092\u898b\u3084\u3059\u304f\u6574\u3048\u308b<\/h3>\n\n\n\n
            \u6700\u4f4e\u9650\u306e\u898b\u305f\u76ee\u8abf\u6574\u3092\u3057\u3066\u3001\u9078\u629e\u6642\u306eUI\u3092\u308f\u304b\u308a\u3084\u3059\u304f\u3057\u307e\u3057\u3087\u3046\u3002\u305f\u3068\u3048\u3070\u3001CSS\u3092\u5c11\u3057\u52a0\u3048\u308b\u3068\u3088\u308a\u89aa\u5207\u3067\u3059\u3002<\/p>\n\n\n\n
            <style>\n    #preview {\n        margin-top: 10px;\n        border: 1px solid #ccc;\n        padding: 5px;\n    }\n<\/style><\/code><\/pre><\/div>\n\n\n\n
            \n\n\n\n
            \u3053\u306e\u3088\u3046\u306b\u3001JavaScript\u3092\u4f7f\u3046\u3053\u3068\u3067\u30d5\u30a1\u30a4\u30eb\u3092\u9001\u4fe1\u3059\u308b\u524d\u306b\u5185\u5bb9\u3092\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u5b89\u5fc3\u611f\u304c\u3050\u3063\u3068\u9ad8\u307e\u308a\u307e\u3059\uff01<\/p>\n\n\n\n
            \u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf\u306e\u4fdd\u5b58\u30fb\u8868\u793a\u304c\u3046\u307e\u304f\u3044\u3063\u3066\u3044\u308b\u304b\u3069\u3046\u304b\u3092\u78ba\u8a8d\u3057\u3001\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3084\u843d\u3068\u3057\u7a74\u306b\u3064\u3044\u3066\u3082\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\uff01<\/p>\n\n\n\n
            \n\n\n\n
            \n\n\n\n
            <\/span>6.\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf\u3092\u8868\u793a\u3059\u308b<\/span><\/h2>\n\n\n\n
            \u753b\u50cf\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u304c\u6210\u529f\u3057\u3066\u3082\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u3068\u3063\u3066\u306f\u300c\u672c\u5f53\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3067\u304d\u305f\u306e\uff1f\u300d\u304c\u6c17\u306b\u306a\u308b\u3068\u3053\u308d\u3002\u305d\u3053\u3067\u3001\u4fdd\u5b58\u3057\u305f\u753b\u50cf\u3092\u753b\u9762\u306b\u8868\u793a\u3057\u3066\u3001\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\uff01<\/p>\n\n\n\n
            \n\n\n\n
            \u2705 1. storage:link \u3067\u753b\u50cf\u8868\u793a\u306e\u6e96\u5099\u3092\u3059\u308b<\/h3>\n\n\n\n
            Laravel\u3067\u306f\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u306f\u901a\u5e38 storage\/app\/public<\/code> \u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\u3002\u3057\u304b\u3057\u3053\u306e\u307e\u307e\u3067\u306f\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30a2\u30af\u30bb\u30b9\u3067\u304d\u306a\u3044\u305f\u3081\u3001public\/storage<\/code> \u3068\u3044\u3046\u30b7\u30f3\u30dc\u30ea\u30c3\u30af\u30ea\u30f3\u30af<\/strong>\u3092\u4f5c\u6210\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
            \u3053\u308c\u306f\u524d\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u3082\u8aac\u660e\u3057\u307e\u3057\u305f\u304c\u3001\u5ff5\u306e\u305f\u3081\u3082\u3046\u4e00\u5ea6\u304a\u3055\u3089\u3044\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
            php artisan storage:link<\/code><\/pre><\/div>\n\n\n\n
            \u3053\u306e\u30b3\u30de\u30f3\u30c9\u306b\u3088\u308a\u3001storage\/app\/public<\/code> \u306e\u4e2d\u8eab\u306b\u3001public\/storage<\/code> \u7d4c\u7531\u3067\u30a2\u30af\u30bb\u30b9\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
            \n\n\n\n
            \u2705 2. Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u753b\u50cf\u3092\u8868\u793a\u3059\u308b<\/h3>\n\n\n\n
            \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5b8c\u4e86\u5f8c\u306e\u753b\u9762\u3067\u3001\u4fdd\u5b58\u3055\u308c\u305f\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u3001Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\uff08upload.blade.php<\/code>\uff09\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
            @if(isset($filename))\n    <h2>\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf<\/h2>\n    <img src="{{ asset('storage\/images\/' . $filename) }}" style="max-width: 300px;">\n@endif<\/code><\/pre><\/div>\n\n\n\n
            \u3053\u3053\u3067\u4f7f\u3063\u3066\u3044\u308b asset()<\/code> \u95a2\u6570\u306f\u3001public<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u4ee5\u4e0b\u306e\u30d5\u30a1\u30a4\u30eb\u3078\u306eURL\u3092\u751f\u6210\u3057\u3066\u304f\u308c\u308bLaravel\u306e\u4fbf\u5229\u95a2\u6570\u3067\u3059\u3002<\/p>\n\n\n\n
            \u305f\u3068\u3048\u3070\u3001\u753b\u50cf\u304c storage\/app\/public\/images\/sample.jpg<\/code> \u306b\u4fdd\u5b58\u3055\u308c\u305f\u5834\u5408\u3001\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306b\u3088\u308a\u3001\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u306f\uff1a<\/p>\n\n\n\n
            http:\/\/your-app.test\/storage\/images\/sample.jpg<\/code><\/pre><\/div>\n\n\n\n
            \u306e\u3088\u3046\u306aURL\u3067\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
            \n\n\n\n
            \u2705 3. \u8868\u793a\u3055\u308c\u306a\u3044\u3068\u304d\u306e\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8<\/h3>\n\n\n\n
              \n
            • storage:link<\/code> \u3092\u5fd8\u308c\u3066\u3044\u306a\u3044\u304b<\/li>\n\n\n\n
            • \u4fdd\u5b58\u5148\u304c public<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u914d\u4e0b\uff08storage\/app\/public\/...<\/code>\uff09\u306b\u306a\u3063\u3066\u3044\u308b\u304b<\/li>\n\n\n\n
            • \u30d5\u30a1\u30a4\u30eb\u540d\u3084\u30d1\u30b9\u306e\u30b9\u30da\u30eb\u30df\u30b9\u304c\u306a\u3044\u304b<\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n
              \u3053\u308c\u3067\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9 \u2192 \u4fdd\u5b58 \u2192 \u8868\u793a \u306e\u4e00\u9023\u306e\u6d41\u308c\u304c\u5b8c\u6210\u3057\u307e\u3057\u305f\uff01\ud83c\udf89
              \u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u521d\u5fc3\u8005\u304c\u3064\u307e\u305a\u304d\u3084\u3059\u3044\u30a8\u30e9\u30fc\u3084\u30c8\u30e9\u30d6\u30eb\u3068\u305d\u306e\u5bfe\u51e6\u6cd5\u3092\u7d39\u4ecb\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
              \n\n\n\n
              \n\n\n\n
              <\/span>7.\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u305d\u306e\u5bfe\u51e6\u6cd5\uff08\u304a\u307e\u3051\uff09<\/span><\/h2>\n\n\n\n
              Laravel\u3067\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3044\u308b\u3068\u3001\u300c\u306a\u305c\u304b\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u2026\uff01\u300d\u3068\u3044\u3046\u5834\u9762\u306b\u3076\u3064\u304b\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u521d\u5fc3\u8005\u304c\u3088\u304f\u30cf\u30de\u308a\u304c\u3061\u306a\u30a8\u30e9\u30fc\u3084\u843d\u3068\u3057\u7a74<\/strong>\u3092\u307e\u3068\u3081\u3066\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
              \n\n\n\n
              \u27571. \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u306f\u6210\u529f\u3057\u3066\u308b\u306e\u306b\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u306a\u3044\uff01<\/h3>\n\n\n\n
              \u539f\u56e0\uff1a<\/strong> storage:link<\/code> \u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3044\u306a\u3044
              \u5bfe\u51e6\u6cd5\uff1a<\/strong> \u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3001storage<\/code> \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306e\u30b7\u30f3\u30dc\u30ea\u30c3\u30af\u30ea\u30f3\u30af\u3092\u4f5c\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
              php artisan storage:link<\/code><\/pre><\/div>\n\n\n\n
              \n\n\n\n
              \u27572. \u300cThe image field is required.\u300d\u3068\u8868\u793a\u3055\u308c\u308b<\/h3>\n\n\n\n
              \u539f\u56e0\uff1a<\/strong> \u30d5\u30a1\u30a4\u30eb\u304c\u9078\u3070\u308c\u3066\u3044\u306a\u3044\u307e\u307e\u30d5\u30a9\u30fc\u30e0\u3092\u9001\u4fe1\u3057\u3066\u3044\u308b
              \u5bfe\u51e6\u6cd5\uff1a<\/strong> <input type=\"file\"><\/code> \u306b\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u304b\u3089\u9001\u4fe1\u3057\u307e\u3057\u3087\u3046\u3002
              \u307e\u305f\u3001\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306b required<\/code> \u3092\u8a2d\u5b9a\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u7a7a\u3060\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
              \n\n\n\n
              \u27573. \u300cThe image must be an image.\u300d\u3068\u3044\u3046\u30a8\u30e9\u30fc\u304c\u51fa\u308b<\/h3>\n\n\n\n
              \u539f\u56e0\uff1a<\/strong> \u753b\u50cf\u4ee5\u5916\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u629e\u3057\u3066\u3044\u308b
              \u5bfe\u51e6\u6cd5\uff1a<\/strong> image<\/code> \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306b\u3088\u308a\u3001JPEG\u3084PNG\u306a\u3069\u306e\u753b\u50cf\u3067\u306a\u3051\u308c\u3070\u5f3e\u304b\u308c\u307e\u3059\u3002
              \u62e1\u5f35\u5b50\u304c\u753b\u50cf\u3067\u3082\u4e2d\u8eab\u304c\u753b\u50cf\u3067\u306a\u3044\u3068NG\u306b\u306a\u308b\u3053\u3068\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
              \n\n\n\n
              \u27574. \u300cThe image may not be greater than 2048 kilobytes.\u300d<\/h3>\n\n\n\n
              \u539f\u56e0\uff1a<\/strong> \u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u304c2MB\u3092\u8d85\u3048\u3066\u3044\u308b
              \u5bfe\u51e6\u6cd5\uff1a<\/strong> \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e max:2048<\/code> \u306b\u3088\u308b\u5236\u9650\u3067\u3059\u3002\u5236\u9650\u3092\u7de9\u3081\u305f\u3044\u5834\u5408\u306f\u3001\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u306e\u5024\u3092\u5909\u66f4\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n
              'max' => 5120 \/\/ 5MB\u306b\u5909\u66f4<\/code><\/pre><\/div>\n\n\n\n
              \n\n\n\n
              \u27575. \u30d7\u30ec\u30d3\u30e5\u30fc\u304c\u8868\u793a\u3055\u308c\u306a\u3044<\/h3>\n\n\n\n
              \u539f\u56e0\u306e\u5019\u88dc\uff1a<\/strong><\/p>\n\n\n\n
                \n
              • JavaScript\u304c\u8aad\u307f\u8fbc\u307e\u308c\u3066\u3044\u306a\u3044<\/li>\n\n\n\n
              • <script><\/code>\u304c\u6b63\u3057\u304f\u52d5\u4f5c\u3057\u3066\u3044\u306a\u3044<\/li>\n\n\n\n
              • <img><\/code>\u30bf\u30b0\u306e id<\/code> \u304c\u9055\u3063\u3066\u3044\u308b<\/li>\n<\/ul>\n\n\n\n
                \u5bfe\u51e6\u6cd5\uff1a<\/strong> \u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\uff08F12\uff09\u3067\u30a8\u30e9\u30fc\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002\u7279\u306b previewImage<\/code> \u95a2\u6570\u304c\u52d5\u4f5c\u3057\u3066\u3044\u306a\u3044\u5834\u5408\u3001console\u306b\u30d2\u30f3\u30c8\u304c\u3042\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n\n
                \n\n\n\n
                \u3053\u3046\u3057\u305f\u30a8\u30e9\u30fc\u3082\u3001\u3072\u3068\u3064\u3072\u3068\u3064\u539f\u56e0\u3092\u63a2\u3063\u3066\u3044\u3051\u3070\u5fc5\u305a\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002\u30c8\u30e9\u30d6\u30eb\u3082\u6210\u9577\u306e\u30c1\u30e3\u30f3\u30b9\u3068\u601d\u3063\u3066\u3001\u7126\u3089\u305a\u5bfe\u51e6\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\ud83d\udd25<\/p>\n\n\n\n
                <\/span>8.\u307e\u3068\u3081<\/span><\/h2>\n\n\n\n
                \u4eca\u56de\u306f\u3001Laravel\u521d\u5fc3\u8005\u3067\u3082\u5b89\u5fc3\u3057\u3066\u53d6\u308a\u7d44\u3081\u308b\u3088\u3046\u306b\u3001\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\uff0b\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd<\/strong>\u306e\u5b9f\u88c5\u3092\u30b9\u30c6\u30c3\u30d7\u30d0\u30a4\u30b9\u30c6\u30c3\u30d7\u3067\u89e3\u8aac\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
                \u3042\u3089\u305f\u3081\u3066\u3001\u4eca\u56de\u306e\u8a18\u4e8b\u3067\u3084\u3063\u305f\u3053\u3068\u3092\u632f\u308a\u8fd4\u3063\u3066\u307f\u307e\u3057\u3087\u3046\uff1a<\/p>\n\n\n\n
                  \n
                • Laravel\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3067\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u51e6\u7406\u306e\u53d7\u3051\u53e3\u3092\u4f5c\u6210<\/li>\n\n\n\n
                • \u30d5\u30a9\u30fc\u30e0\u3067\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u9078\u3073\u3001JavaScript\u3092\u4f7f\u3063\u3066\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a<\/li>\n\n\n\n
                • \u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3067\u5b89\u5168\u306a\u30d5\u30a1\u30a4\u30eb\u306e\u307f\u3092\u8a31\u53ef\u3057\u3001storage<\/code>\u306b\u4fdd\u5b58<\/li>\n\n\n\n
                • \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3055\u308c\u305f\u753b\u50cf\u3092\u753b\u9762\u4e0a\u306b\u8868\u793a<\/li>\n\n\n\n
                • \u3064\u307e\u305a\u304d\u3084\u3059\u3044\u30dd\u30a4\u30f3\u30c8\u3082\u4e8b\u524d\u306b\u30c1\u30a7\u30c3\u30af\uff01<\/li>\n<\/ul>\n\n\n\n
                  \u3053\u308c\u3089\u3092\u9806\u756a\u306b\u9032\u3081\u308b\u3053\u3068\u3067\u3001**\u300c\u753b\u50cf\u3092\u9078\u3076\u2192\u305d\u306e\u5834\u3067\u78ba\u8a8d\u2192\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u2192\u8868\u793a\u300d**\u3068\u3044\u3046\u4e00\u9023\u306e\u6d41\u308c\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n
                  \n\n\n\n
                  \u2705 \u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3078<\/h3>\n\n\n\n
                  \u4eca\u56de\u306e\u5185\u5bb9\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306a\u300c\u5358\u4e00\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u300d\u3067\u3059\u304c\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3068\u3057\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5fdc\u7528\u3082\u8003\u3048\u3089\u308c\u307e\u3059\uff1a<\/p>\n\n\n\n
                    \n
                  • \u8907\u6570\u753b\u50cf\u306e\u540c\u6642\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/li>\n\n\n\n
                  • \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306e\u753b\u50cf\u30ea\u30b5\u30a4\u30ba\uff08Intervention Image\u306a\u3069\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u6d3b\u7528\uff09<\/li>\n\n\n\n
                  • \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u306e\u9023\u643a\uff08\u753b\u50cf\u540d\u3092\u4fdd\u5b58\u3057\u3066\u30e6\u30fc\u30b6\u30fc\u306b\u7d10\u3065\u3051\u308b\u306a\u3069\uff09<\/li>\n<\/ul>\n\n\n\n
                    \u3053\u306e\u3088\u3046\u306a\u6a5f\u80fd\u3082\u3001\u4eca\u56de\u306e\u30d9\u30fc\u30b9\u304c\u3042\u308c\u3070\u767a\u5c55\u7684\u306b\u6311\u6226\u3057\u3066\u3044\u3051\u308b\u306f\u305a\u3067\u3059\uff01<\/p>\n\n\n\n
                    \n\n\n\n
                    \ud83c\udf89\u6700\u5f8c\u306b<\/h3>\n\n\n\n
                    \u300cLaravel\u3067\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3063\u3066\u610f\u5916\u3068\u3067\u304d\u308b\u304b\u3082\uff01\u300d\u3068\u601d\u3063\u3066\u3082\u3089\u3048\u305f\u306a\u3089\u5b09\u3057\u3044\u3067\u3059\uff01
                    \u81ea\u5206\u3067\u52d5\u304b\u3057\u3066\u3001\u624b\u5fdc\u3048\u3092\u611f\u3058\u306a\u304c\u3089\u5c11\u3057\u305a\u3064\u30b9\u30c6\u30c3\u30d7\u30a2\u30c3\u30d7\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\ud83d\udcaa<\/p>\n\n\n\n
                    <\/p>\n","protected":false},"excerpt":{"rendered":"
                    1.\u306f\u3058\u3081\u306b Laravel\u3067\u753b\u50cf\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u6a5f\u80fd\u3092\u4f5c\u308a\u305f\u3044\uff01\u3068\u601d\u3063\u305f\u3068\u304d\u3001\u521d\u5fc3\u8005\u306e\u65b9\u304c\u6700\u521d\u306b\u3064\u307e\u305a\u304f\u306e\u304c\u300c\u4f55\u3092\u3069\u3046\u3084\u3063\u3066\u4f5c\u308c\u3070\u3044\u3044\u306e\uff1f\u300d\u3068\u3044\u3046\u5168\u4f53\u306e\u6d41\u308c\u3067\u306f\u306a\u3044\u3067\u3057\u3087\u3046\u304b\uff1f\u3055\u3089\u306b\u3001\u300c\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u524d\u306b\u753b\u50cf\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u3092\u8868 […]<\/p>\n","protected":false},"author":1,"featured_media":254,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"vkexunit_cta_each_option":"","footnotes":""},"categories":[9,8],"tags":[],"class_list":["post-253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php"],"_links":{"self":[{"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/posts\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hexis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=253"}],"version-history":[{"count":2,"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/posts\/253\/revisions\/257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hexis.jp\/index.php?rest_route=\/wp\/v2\/media\/254"}],"wp:attachment":[{"href":"https:\/\/hexis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hexis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hexis.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}