Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

目的

  • 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のソースは下記記事で紹介したものとする。

詳細

  1. 直接ビューファイルに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にアクセスして表示したときにダイアログボックスが表示されることを確認する。

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

    1. 下記コマンドを実行してJavaScriptファイルを作成して開く。

      vi resources/js/test.js
      
    2. 下記の内容を記載する。

      アプリ名ディレクトリ/resources/js/test.js
      window.alert('ダウンロードを開始します!');
      
    3. アプリ名ディレクトリで下記コマンドを実行してLaravel Mixの設定ファイルを開く。

      vi webpack.mix.js
      
    4. 下記のように追記する。

      アプリ名ディレクトリ/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');
      
    5. アプリ名ディレクトリで下記コマンドを実行してLaravel Mixをインストールする。

      $ npm install
      
    6. 下記コマンドを実行してJavaScriptのファイルをコンパイルする。

      $ npm run dev
      
    7. resorces/view/js_tests/index.blade.phpを開く。

    8. 下記の内容を記載する。

      アプリ名ディレクトリ/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>
      

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?