クモのようにコツコツと

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

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

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()の第一引数/はトップページ
  • 第二引数は無名関数
  • 無名関数の中、戻り値returnview()の引数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にヒアドキュメント<<<EOFEOF;で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}`)を読み込んでいる。

例えば$nen3$kumiB$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アーキテクチャとしての役割分担にはなっていないようです。

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