初めてのLaravel ①。ルーティングの基本

Laravel
初めてのLaravel ①。ルーティングの基本
この記事はこんな悩みを解決します
  • Laravelの基本を学びたい
  • ルーティングについて基本を学びたい
  • Laravelに興味がある

この記事を読むことでLaravelのルーティングの基本が学べます。
Laravelのインストール方法は下記の記事を参考にしてください。

【Macユーザー向け 】Laravelをインストールする方法

初めてのLaravel ①。ルーティングの基本

laravel new training で trainingというプロジェクトを作りました。
training の中には下記のフォルダが含まれています。

─── training
    ├── app       ・・・アプリケーションのロジック
    ├── bootstrap ・・・laravelの起動コード
    ├── config    ・・・設定ファイル
    ├── database  ・・・データベース関連
    ├── public    ・・・CSSやJaveScript、.htaccessファイルなど
    ├── resources ・・・ビューや言語変換用ファイルなど
    ├── routes    ・・・web.phpなどのルーティング用ファイル
    ├── storage   ・・・フレームワークが使用するファイル
    ├── tests     ・・・テストコード
    └── vendor    ・・・Composerでインストールしたライブラリ

他にも.env ファイルや artisan ファイルなども含まれていますが、.env 以外はあまり使う時がないでしょう。

Laravelの仕組み

まずはどのようにLaravelが機能しているのか紹介します。

URLへのアクセスが来た際に routes の web.php を参照します。
おそらく、最初は下記のような記入がされていると思います。

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

これは ‘ / ‘ にアクセスされたらview の welcome を参照しなさい、という意味です。今回は valet を使っているので training.test にアクセスすると下記のような画面が出ます。（training.test がホームなのでtraining.test を除いてURLを考えます。）

View の編集

では、この画面を編集して見ましょう。
まずはwelcome.blade.phpを開きます。

─── training
    ├── resources  
　　　　　├──　view
　　　　　　　　├──　welcome.blade.php

色んな記入がありますが、下記の body タグで囲まれているところが重要なところです。

<body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel　//ここをTrainingにします。
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>

Laravelと書かれているところを編集していきます。

Laravel からTrainingになりましたね。

Routeの追加

他のページも作りたい、と言うときにはルートの追加をしていきます。
web.php に下記を追加します。

Route::get('/hi', function () {
    return "hi";
});

これで /hi にリクエストが来たら”hi” と表示しなさい、と言う意味です。
実際にURLに training.test/hi を入力すると下記の画面になります。

予想通りになってますね。
これをViewを使って表示して見ます。

ルートを下記のように変えます。

Route::get('/hi', function () {
    // return 'hi';
    return view('hi');
});

さらに、view に新しくhi.blade.php を加えていきます。

<!doctype thml>
<html lang="ja">

<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hi</title>
</head>

<body>
	<h1>hi</h1>
</body>

</html>

では、URLに training.test/hi を入力して見ましょう。

予想通りになっていますね。

ワイルドカードの利用

URLにアクセスする時に何か引数を取りたい、と言うときがあると思います。
そんな時にワイルドカードを使います。
ワイルドカードを使う時には { } を使います。

Route::get('/hi/{post}', function ($post) {
    return view('hi', [
    	'post' => $post　//{post}の部分を'post'としてViewに渡します。
    ]);
});

{post} の部分に何でも入れることができます。
Viewも引数を取れるように変えていきます。

<body>
	<h1>hi</h1>
	<p> {{ $post }} </p>
</body>

{{ $post }} で渡された$postをエスケープして表示できます。（ちなみに、エスケープとは<>のような文字をプログラムとしてではなく、文字として認識するための方法です。エスケープしないとトラブルになるので気をつけましょう。）

では、適当にtraining.test.123 にアクセスして見ましょう。

予想通りの結果になっていますね。
この機能はよく使うので覚えておきましょう。

ビューの確認

ちなみに storage の中に php で書いた場合の view が保存されています。

─── training
    ├── storage  
　　　　　├──　framework
　　　　　　　　├──　views

ファイルが自動的に作られているのでいくつかありますが、適当なものを選びましょう。今回の場合は下記のようになっています。

<body>
	<h1>hi</h1>
	<p> <?php echo e($post); ?> </p>
</body>

コントローラーの使用

web.php でのルーティングを行ってきましたがもっと複雑な処理をする時にはコントローラーが有効です。サーバーからデータを引き出したりしているとコードが煩雑になるのでコントローラーを使うことがよくあります。

Terminalでtraining フォルダに移動し下記のコマンドを打ちます

php artisan make:controller 'コントローラー名'

今回はTrainingControllerとします。

mbp:training user$ php artisan make:controller TrainingController
Controller created successfully.

うまく作れました。
ファイルができた場所は下記の通りです。

─── training
    ├── app 
　　　　　├──　Http
　　　　　　　　├──　Controllers

中身を確認すると下記のようになっています。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TrainingController extends Controller
{
    //ここに書いていく
}

では、 web.php の内容をコントローラーに書いていきます。

public function show($post){
    	return view('hi', [
    	'post' => $post
    ]);
    }

showと言うメソッドを作り、showを機能させなさいとリクエストが来たら引数を渡して”hi”と言うビューを表示しなさい、と言う意味になります。

これを機能させるために、web.php にもコントローラーを使いなさいと書いていきます。

Route::get('/hi/{post}', 'TrainingController@show');

これで ‘/hi/{post}’ にリクエストがきた時に TrainingController@show を使うと言う意味になります。

では、適当に /hi/aaa にアクセスしてみます。

予想通りの結果になってますね。

まとめ

今回はLaravelを使う上での基本的なルーティングについて紹介しました。

特にワイルドカードはよく使うので仕組みを覚えておくとよいでしょう。最初はつまづくかも知れませんが、; や ‘ が抜けていないか注意するとよいです。これがないだけで予期しないコマンドを見つけました、と言うメッセージが出ます。

慣れないうちはコピペしてそれを編集してくとミスが少なくて済みますよ。

関連記事