【PHP(Laravel)】JavaScriptの記載場所と登録方法について(jQuery含め)

2020.10.12
php備忘録
Ajax, HTML, JavaScript, jQuery, Laravel, PHP, スクリプト備忘録, 記載方法, 読込み方法

1. 【PHP(Laravel)】JavaScriptの記載場所と登録方法について

【PHP(Laravel)】JavaScriptの記載場所と登録方法について

LaravelでJavaScriptを記載する場所は2つしかありません。

Viewに<script>タグを使って書く
プロジェクト/public/js 内にjsファイルを置きViewで読み込む

Viewに<script>タグを使って書く

viewのblade内で次のように書くだけです。

<http>
・・・
<script>
    var app = <?php echo json_encode($array); ?>;
</script>
・・・

<http>

・・・

var app = <?php echo json_encode($array); ?>;

</script>

・・・

HTMLファイルにJavaScriptを書くのと同じですね。
上のスクリプトは下の様に書く事も出来ます。

<script>
    var app = @json($array);
</script>

var app = @json($array);

</script>

@でスタートする表記は@シンボルを使った記載です。@でスタートできる命令かどうかはありますが、基本的にblade内の@ は <?php ?>と同じと考えて問題ありません。

ロジェクト/public/js 内にjsファイルを置きViewで読み込む

▼例：public/js/app.js

function delete_alert(e){
   if(!window.confirm('削除します。よろしいですか？(この操作は取り消せません）')){
      window.alert('キャンセルされました'); 
      return false;
   }
   document.deleteform.submit();
};

function delete_alert(e){

if(!window.confirm('削除します。よろしいですか？(この操作は取り消せません）')){

window.alert('キャンセルされました');

return false;

}

document.deleteform.submit();

};

例えばこんな感じでJavaScriptを別ファイルで用意します。

それを表示するBladeで読み込みます。

▼例：resources/views/home/home.blade.php

<!DOCTYPE html>
・・・
<body>
・・・
<script src="{{ asset('js/app.js') }}"></script>
</body>

<!DOCTYPE html>

・・・

<body>

・・・

</body>

これもHTMLでjQueryを読み込むときと変わりません。

LaravelでjQueryを読み込む方法

jQueryは公開パスがあるので、後者を利用してView内にパスを記載します。

Laravelが便利な機能の1つに『Bladeを使ったViewのテンプレート化』があります。

このblade機能を使えば、全てのファイルが読む親テンプレートにjQueryの定型リンクを張り付けるだけで全てのページに登録する事が出来ます。PHPベタ打ちの時のIncludeと同じですね。

▼例：resources/views/layouts/template.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    @yield('head')
    <title>
        @if (Auth::check())
            {{ config('app.name', 'ログインした人向けタイトル') }}|@yield('title')
        @else
            {{ config('app.name', '未ログイン者向けタイトル') }}|@yield('title')
        @endif
    </title>
</head>
<body>
    <div id="app">
    <header id="header">
        <nav class="navbar navbar-default navbar-static-top">
        @yield('header_left')
        @yield('additional_items')
        @yield('header_right')
        </nav>
    </header>
        <div class="content-frame">
            <div class="container col-lg-12">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">@yield('sub_title')</div>
                            <div class="panel-body">
                                @if(count($errors) > 0)
                                <div>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <div class="alert alert-danger">{{ $error}}</div>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif
                                @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                                @endif
                                @if (session('danger'))
                                <div class="alert alert-danger">{{ session('danger') }}</div>
                                @endif
                                @yield('content')
                                <br class="float_clear">
                                <p class="td_text xsmallfont">@yield('attention')</p>
                                <hr>
                                @component('components.footer')@endcomponent
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @yield('footer')
    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
    <!-- jQuery読み込み -->
    <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}">

<head>

@yield('head')

<title>

@if (Auth::check())

{{ config('app.name', 'ログインした人向けタイトル') }}|@yield('title')

@else

{{ config('app.name', '未ログイン者向けタイトル') }}|@yield('title')

@endif

</title>

</head>

<body>

@yield('header_left')

@yield('additional_items')

@yield('header_right')

</nav>

</header>

<div class="panel-heading">@yield('sub_title')</div>

@if(count($errors) > 0)

<div>

<ul>

@foreach ($errors->all() as $error)

<div class="alert alert-danger">{{ $error}}</div>

@endforeach

</ul>

</div>

@endif

@if (session('success'))

<div class="alert alert-success">{{ session('success') }}</div>

@endif

@if (session('danger'))

<div class="alert alert-danger">{{ session('danger') }}</div>

@endif

@yield('content')

<p class="td_text xsmallfont">@yield('attention')</p>

<hr>

@component('components.footer')@endcomponent

</div>

@yield('footer')

</body>

</html>

▼44行目@yield(‘content’)で読み込むbladeの例

@extends('layouts.template')
@include('home.headers.head')
@include('home.headers.header_right')
@include('home.headers.header_left')
@include('home.layouts.footer')
@section('title', 'Home画面')
@section('sub_title', 'Home画面')

@section('content')
    @if($calls[4] == 1)
        <!--License：メンバー-->
        @include('home.home_staff')
    @elseif($calls[4] == 2)
        <!--License：ユーザー-->
        @include('home.home_customer')
    @else
        <div class="accbox">
        <label for="label0">Kohbec Cloud</label>
            <input type="checkbox" id="label0" class="cssacc" checked="checked">
            <div class="accshow">
                <center>
        <a href="/">
            <div class="user-basic btn"> 
                サイトTOP<br>移動
            </div>
        </a>
        </div>
    @endif
@endsection

@extends('layouts.template')

@include('home.headers.head')

@include('home.headers.header_right')

@include('home.headers.header_left')

@include('home.layouts.footer')

@section('title', 'Home画面')

@section('sub_title', 'Home画面')

@section('content')

@if($calls[4] == 1)

@include('home.home_staff')

@elseif($calls[4] == 2)

@include('home.home_customer')

@else

<label for="label0">Kohbec Cloud</label>

サイトTOP<br>移動

</div>

</a>

</div>

@endif

@endsection

1行目の@extends(‘layouts.template’)で読み込む親テンプレートを指示します。
@section(‘content’)～～@endsection で親テンプレートの @yield(‘content’)にsectionで囲まれたパーツ『～～』を組み込みます。
@section(‘title’, ‘Home画面’)などの1行セクションは@yield(‘title’)にテキスト（例の場合は’Home画面’）を代入します。

ログインユーザーの区分（roletype）によって使うテンプレートを変えたいとき

▼例：resources/views/layouts/template.blade.php

@section('header_left')
    @if($role == 1)
        @include('layouts.template_staff')
    @elseif($role == 2)
        @include('layouts.template_customer')
    @elseif($role == 3)
        @include('layouts.template_guest')
    @else
        @include('layouts.template_webhome')
    @endif
@endsection

@section('header_left')

@if($role == 1)

@include('layouts.template_staff')

@elseif($role == 2)

@include('layouts.template_customer')

@elseif($role == 3)

@include('layouts.template_guest')

@else

@include('layouts.template_webhome')

@endif

@endsection

親のテンプレートで@IFや@switchを使って『roletypeによる区分け』を差し込みます。

場合分け結果でそれぞれ読ませたいテンプレートを@Includeで読み込ませます。
この方法は、社員向けには比較分析データが出てくるけどログイン顧客の画面では購入履歴だけ出力すると言った表示させる内容を変える時にとても便利です。

LaravelでAjaxを読み込む

基本的にjQueryを読込めばOKです。

Ajaxは『ブラウザに実装されているJavaScriptのHTTP通信機能使って、Webページのリロードを伴わずにサーバーとデータのやりとりを行う処理』の事です。
例えば、ホームページ上のinputボックスに金額を入れると（リロードを伴わずに）税込み額を算出して表示するとか、そういった処理をAjaxと呼んでいます。

そのため『Laravel Ajax 読込』などのキーワードでブログへたどり着いてくれている方がいますが、基本的にjQueryを読込めばAjaxは使えると考えてOKです。

まとめ

blade便利ですよね。
共通HTMLを外部に出して読み込む位であれば、PHPのIncludeで十分実装できますが、@シンボルは超うれしい機能です。

どうしたってHTML内でIF分岐したりforeachしたりはありますから。

【PHP(Laravel)】JavaScriptの記載場所と登録方法について(jQuery含め)

【PHP(Laravel)】JavaScriptの記載場所と登録方法について

Viewに<script>タグを使って書く

ロジェクト/public/js 内にjsファイルを置きViewで読み込む

LaravelでjQueryを読み込む方法

ログインユーザーの区分（roletype）によって使うテンプレートを変えたいとき

LaravelでAjaxを読み込む

まとめ

関連

【PHP(Laravel)】MySQLのデータを整形してExcelに出力する簡単な方法 2020.10.12

EC事業の課題の一つ『送料』と『お得感』について考えてみる 2020.10.13

【PHP(Laravel)】JavaScriptの記載場所と登録方法について(jQuery含め)

【PHP(Laravel)】JavaScriptの記載場所と登録方法について

Viewに<script>タグを使って書く

ロジェクト/public/js 内にjsファイルを置きViewで読み込む

LaravelでjQueryを読み込む方法

ログインユーザーの区分（roletype）によって使うテンプレートを変えたいとき

LaravelでAjaxを読み込む

まとめ

共有:

関連

【PHP(Laravel)】MySQLのデータを整形してExcelに出力する簡単な方法 2020.10.12

EC事業の課題の一つ『送料』と『お得感』について考えてみる 2020.10.13