[Laravel入門]パス指定をより簡単にBladeのasset()を使う。

2020年5月15日

CSSやJSを読み込む時に、パス指定ってややこしいですよね。LaravelのBladeのasset()を使えば、めちゃ簡単にパス指定が出来ちゃいます。

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第８回目！　

自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

1. 相対パスの指定ってめんどくさいよね
2. 最後に

相対パスの指定ってめんどくさいよね

スタイルシートやJavaScriptなどは、外部のファイルに記述することが多いですよね。そのファイルを読み込むためにはパスを指定しないといけないですが、これがめんどくさい。階層を間違えたりして、読み込めないこともしばしば。。。

   
    <link rel="stylesheet" href="../../css/hoge/hoge.css">
  
    <script type="text/javascript" src="../js/hoge/hoge.js"></script>

これを解決してくれるのが、　bladeのassetヘルパーです。

asset('ファイルパス')はpublicディレクトリのパスを返す関数となっています。なのでこれを使えば相対パスを気にせずに記述することができます。具体的な例が以下。

こんな感じのpublicフォルダがあったとします。

　　　public 
  　　　|__ css
       |　　 |__ hoge1.css
       |　　 |__ hoge2.css
 　　　 |__ js
       |　　 |__ hoge1.js
       |　　 |__ hoge2.js
       |__ img

これらを読み込むために、以下のようにaseet関数を使います。

  
  <!-- css -->
  <link rel="stylesheet" href="{{ asset('/css/hoge1.css') }}">
  <link rel="stylesheet" href="{{ asset('/css/hoge2.css') }}">

  <!-- js -->
  <script src="{{ asset('/js/hoge1.js') }}"></script>
  <script src="{{ asset('/js/hoge2.js') }}"></script>

どのファイルにでも、このasset関数を使えば、publicフォルダのパスを返してくれるので、相対位置関係を気にせずに読み込めます。ぜひとも使いたい！

詳しくはこちらの記事も参考に。→こちら