クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > PHP > 【Laravel】ルーティングファイル（routesディレクトリのweb.php）にページを直書きしてみる

【Laravel】ルーティングファイル（routesディレクトリのweb.php）にページを直書きしてみる

PHP Laravel

Laravelの続きです。前回はローカルのMAMP環境からHerokuにデプロイしました。今回はルーティングファイル（Routresディレクトリのweb.php）にページ情報を直書きして、いくつかの動的なページを作ってみました〜。完成品はHerokuにデプロイしてます。それではいきましょう！

【目次】

※前回：LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと

ルーティングファイル（Routesディレクトリのweb.php）からページを読み込む

以前の「Hello world」の記事で、ルーティングファイル（Routesディレクトリのweb.php）でresources/viewsディレクトリのwelcome.blade.phpを読み込んだ。

※参考：Laravelの/publicをルートに変更しHello worldする - クモのようにコツコツと

<?php
Route::get('/', function () {
    return view('welcome');
});
  • Route::get()の第一引数/はトップページ
  • 第二引数は無名関数
  • 無名関数の中、戻り値returnのview()の引数welcomeはwelcome.blade.phpの意味

読み込んだページがこちら

f:id:idr_zz:20190604221343j:plain

トップページにアクセスするとresources/viewsディレクトリのwelcome.blade.phpの内容が読み込まれて表示される。

※参考：http://vast-meadow-11880.herokuapp.com

web.phpにページを直書きしてみる

このweb.phpにページを直書きすることもできる。このように。

<?php
//web.phpに直書き-その1！
Route::get('jikagaki01', function () {
    return '
  <html>
      <head>
          <meta charset="utf-8"/>
          <title>web.phpに直書き-その1！</title>
      </head>
      <body>
      <section>
          <h1>web.phpに直書き-その1！</h1>
          <p>このページはLaravelの「routes」ディレクトリの中の「web.php」の中に直で書いている。どのように表示されるだろうか?</p>
      </section>
      </body>
  </html>
  ';
});
  • Route::get()の第一引数がjikagaki01でこれがパス名になる。
  • 第二引数は無名関数。関数の中の戻り値returnの中に直接HTMLを書いている。

できたページはこちら

f:id:idr_zz:20190604221802j:plain

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki01

web.php内でヒアドキュメントを読み込む

長い文字列を変数にするヒアドキュメント、これを読み込んでみる。

<?php
//ヒアドキュメント（その2で読み込む）
$html = <<<EOF
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>web.phpに直書き-その2！</title>
            <style>
            * {font-family: sans-serif; color: #666;  box-sizing: border-box;}
            section {width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px; border: 1px solid #ccc;}
            h1 {border-bottom: 1px solid #ccc; padding: 0 0 10px;}
            </style>
        </head>
        <body>
        <section>
            <h1>web.phpに直書き-その2！</h1>
            <p>このページはLaravelの「routes」ディレクトリの中の「web.php」の中に直で書いている。</p>
            <p>その2ではretuernの中ではなくヒアドキュメントを読み込んでみる！headの中にCSSスタイルも書いてみた♪</p>
        </section>
        </body>
    </html>
EOF;

//web.phpに直書き-その2（ヒアドキュメント）
Route::get('jikagaki02', function () use($html) {
    return $html;
});
  • 変数$htmlにヒアドキュメント<<<EOF〜EOF;でHTMLを入れる
  • Route::get()の第一引数がjikagaki02でこれがパス名になる。
  • 第二引数は無名関数はuse構文関数でパラメータに$htmlを渡す。
  • 戻り値returnの中に$htmlを読み込む。

ヒアドキュメントを書いたところ、エラーになったのだが、まさにこの記事にある改行漏れなどだった。注意点がまとまっててわかりやすい！

※参考：PHPのヒアドキュメントでの出力方法と、よくあるエラー

無名関数のuse構文の参照渡しは初めて知った。function ()の直後にuse()が繋がる。関数実行時に値を渡す仕組み。

※参考：[ PHP ] 無名関数 use 構文でパラメータの値渡しと参照渡しの違い – 行け！偏差値40プログラマー

できたページはこちら。長くかけるのでCSSスタイルも当ててみた♪

f:id:idr_zz:20190604223137j:plain

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki02

ルートパラメータを読み込んでページ上に表示する

ルートパラメータに任意のワードを追加すると、そのワードがページ上に表示される仕組みを作ってみる。

<?php
//web.phpに直書き-その3（ルートパラメータ）
Route::get('jikagaki03/{msg}', function ($msg) {
    
    $html = <<<EOF
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>web.phpに直書き-その3！</title>
            <style>
            * {font-family: sans-serif; color: #666;  box-sizing: border-box;}
            section {width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px; border: 1px solid #ccc;}
            h1 {border-bottom: 1px solid #ccc; padding: 0 0 10px;}
            </style>
        </head>
        <body>
        <section>
            <h1>web.phpに直書き-その3！</h1>
            <p>このページはLaravelの「routes」ディレクトリの中の「web.php」の中に直で書いている。</p>
            <p>その3ではルートパラメータを読み込んで表示してみる。</p>
            <p>すばり、あなたが打ったパラメータは「{$msg}」でしょう！！</p>
        </section>
        </body>
    </html>
EOF;
    
    return $html;
});
  • Route::get()の第一引数は'jikagaki03/{msg}',と二階層で{msg}が付いている
  • 第二引数の無名関数には引数$msgが入っている
  • ヒアドキュメントは無名関数の中に直接書いている。パスを読み込みたい場所に{$msg}を書いている。

私がLaravel学習で読んでいる「Laravel入門」にはこうあった。

今回は、ヒアドキュメント内に変数を埋め込んで利用するため、Route::getの第二引数に用意するクロージャ（無名関数）ないにヒアドキュメントを移動してあります。

※参考：Laravel入門

ちなみにビアドキュメントを外に書いたまま（use構文付き）だとうまく表示されなかった。。

例えばパラメータ丸尾は天才と入れると…

f:id:idr_zz:20190604223841j:plain

最後の行は「すばり、あなたが打ったパラメータは「丸尾は天才」でしょう！！」と表示される。

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki03/丸尾は天才

このパスの部分を自由に打ち変えてリロードすると表示される言葉が動的に変わた！

ただし、このページには不備がある。パスを何も打たないと404ページになってしまう。

f:id:idr_zz:20190604224104j:plain

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki03

任意パラメータを設定（ワードを入れなくても任意のワードが読み込まれる）

これを解決する方法として「任意パラメータ」を設定する。

<?php
//web.phpに直書き-その4（任意パラメータ）
Route::get('jikagaki04/{msg?}/', function ($msg='無い') {
    
    $html = <<<EOF
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>web.phpに直書き-その4！</title>
            <style>
            * {font-family: sans-serif; color: #666;  box-sizing: border-box;}
            section {width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px; border: 1px solid #ccc;}
            h1 {border-bottom: 1px solid #ccc; padding: 0 0 10px;}
            </style>
        </head>
        <body>
        <section>
            <h1>web.phpに直書き-その4！</h1>
            <p>このページはLaravelの「routes」ディレクトリの中の「web.php」の中に直で書いている。</p>
            <p>その4ではパラメータ無しの場合の任意パラメータを設定する。</p>
            <p>すばり、あなたが打ったパラメータは「{$msg}」でしょう！！</p>
        </section>
        </body>
    </html>
EOF;
    
    return $html;
});
  • Route::get()の第一引数'jikagaki04/{msg?}/'と?を追記する
  • 第二引数の無名関数function ($msg='無い')と$msgに='無い'を追記する

こうなった。

f:id:idr_zz:20190604224345j:plain

何もワードを入れていなくても「すばり、あなたが打ったパラメータは「無い」でしょう！！」と表示された！

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki04

複数のパラメータを設定する

パラメータは複数設定することもできる。

<?php
//web.phpに直書き-その5（複数パラメータ）
Route::get('jikagaki05/{nen?}/{kumi?}/{sensei?}', function ($nen='何', $kumi='何', $sensei='誰') {
    
    $html = <<<EOF
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>web.phpに直書き-その5！</title>
            <style>
            * {font-family: sans-serif; color: #666;  box-sizing: border-box;}
            section {width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px; border: 1px solid #ccc;}
            h1 {border-bottom: 1px solid #ccc; padding: 0 0 10px;}
            </style>
        </head>
        <body>
        <section>
            <h1>web.phpに直書き-その5！</h1>
            <p>このページはLaravelの「routes」ディレクトリの中の「web.php」の中に直で書いている。</p>
            <p>その5では複数のパラメータを読み込んで表示してみる。</p>
            <p>あなたの来年のクラスは「{$nen}年{$kumi}組」、担任は「{$sensei}先生」です！</p>
        </section>
        </body>
    </html>
EOF;
    
    return $html;
});
  • Route::get()の第一引数に複数のパスを設定'jikagaki05/{nen?}/{kumi?}/{sensei?}'（?も付けている）
  • 第二引数の無名関数の引数も複数$nen='何', $kumi='何', $sensei='誰'（任意パラメータも付けている）
  • 無名関数内のヒアドキュメントに複数のワード{$nen}、{$kumi}、{$sensei}`）を読み込んでいる。

例えば$nenに3、$kumiにB、$senseiに金八と入れると…

f:id:idr_zz:20190604225135j:plain

「あなたの来年のクラスは「3年B組」、担任は「金八先生」です！」と表示される！！

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki05/3/B/金八

今回は最初から「任意パラメータ」を設定しているので、パラメータを入れなくてもページが表示される。

f:id:idr_zz:20190605072349j:plain

「あなたの来年のクラスは「何年何組」、担任は「誰先生」です！」と表示された！

※参考：http://vast-meadow-11880.herokuapp.com/jikagaki05

最後に：ルーティングファイルに直に書くのは応急処置

ということで、ルーティングファイル（routesディレクトリのweb.php）に直書きでページを作ることができました！

物理的なページがないのにページが生成されて、パスの単語が動的に読み込まれる。なかなか楽しい体験でした♪

しかしながら、こうしたルーティングファイルに直にページを書く方法はあくまで応急処置的な方法であり、本来のMVCアーキテクチャとしての役割分担にはなっていないようです。

今回は体験することに意義があるということで、徐々に最適な方法に入って行きたく。それではまた！！