Laravel6 表示するビューにJavaScriptを含める

Last updated at 2021-01-06Posted at 2020-12-03

目的

LaravelのビューにJavaScriptのコードを含めて動的なページを作成する方法をまとめる

実施環境

ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.8	Homebrewを用いてこちらの方法で導入→Mac HomebrewでPHPをインストールする
Laravel バージョン	6.X	commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする
Node.jsバージョン	v8.9.4	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでNode.jsをインストールする

前提条件

実施環境に記載されてたソフトウエア環境に近い環境が構築されていること

前提情報

参考文献を読みながら実際に手を動かし作業を行い、LaravelのビューにJavaScriptのコードを書いて動作させることができるかを確かめる。その過程でのメモや方法などを記載する。
Laravelのアプリ作成部分の方法は記載しない。
Macに直接立てたLaravelの開発環境本件を確認している。
ルーティング情報は下記のものが既に記載されているものとする。
routes/web.php
```
Route::get('/js/index', 'JsTestController@index')->name('js.index');
```
コントローラは下記のアクションが既に記載されているものとする。
app/Http/Controller/JsTestController.php
```
public function index(Type $var = null)
{
    return view('js_tests.index');
}
```
下記のパスのビューファイルにJavaScriptを含んだソースを記載する。
- resorces/view/js_tests/index.blade.php
表示するJavaScriptのソースは下記記事で紹介したものとする。
- avaScript 超基礎ダイアログボックスを表示する

詳細

直接ビューファイルにJavaScriptのコードを記載する方法
1. resorces/view/js_tests/index.blade.phpを開く。
2. 下記の内容を記載する。
  アプリ名ディレクトリ/resorces/view/js_tests/index.blade.php
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript</h1>

    <script>
        window.alert('ダウンロードを開始します！');
    </script>
</body>
</html>
```
3. ローカルサーバを起動しhttp://127.0.0.1:8000/js/indexにアクセスして表示したときにダイアログボックスが表示されることを確認する。

別ファイルにJavaScriptのコードを記載する方法

下記コマンドを実行してJavaScriptファイルを作成して開く。
```
vi resources/js/test.js
```
下記の内容を記載する。
アプリ名ディレクトリ/resources/js/test.js
```
window.alert('ダウンロードを開始します！');
```
アプリ名ディレクトリで下記コマンドを実行してLaravel Mixの設定ファイルを開く。
```
vi webpack.mix.js
```

下記のように追記する。

アプリ名ディレクトリ/webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    /* 下記を追記する */
    .js('resources/js/test.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

アプリ名ディレクトリで下記コマンドを実行してLaravel Mixをインストールする。
```
$ npm install
```
下記コマンドを実行してJavaScriptのファイルをコンパイルする。
```
$ npm run dev
```
resorces/view/js_tests/index.blade.phpを開く。

下記の内容を記載する。

アプリ名ディレクトリ/resorces/view/js_tests/index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>JavaScript</h1>

    <script src="{{mix('/js/test.js')}}"></script>
</body>
</html>

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up