はじめに

前回：開発する上で便利なもの
前回は開発をスムーズに行えるようになるツールの設定等を行いました。
今回は実際にLaravelの操作を行なっていきます。
LaracastsのSection2: Routingまでを理解することが今回の目標です。

参考にするサイト

Laracastsというサイトで動画を見ながら勉強することをお勧めします。
なんかポチポチしてると「有料会員になりませんか？」的な広告が出てきますが、初心者の方のためのチュートリアル(一番最初の練習)については全て無料で視聴できます。
もちろん全て英語です。操作画面等を分かりやすく動画内で説明してくれるので、英語でなんて言ってるか分からなくてもどうにかなります。
あと英語が得意でも専門用語が飛び交う時があるので、たぶん内容を完全に理解することはできません。
こういう勉強は慣れが大切なのでなんとなくの理解でどんどん進めていきましょう。
もちろん自分がQiitaにて日本語による説明も軽くしていきます。
(2020年現在のLaracastsの内容を日本語で解説します)

Section1: 前もって準備するもの(Prerequestes)

Section1: Prerequestesは前回の記事でやったので飛ばしてください！
英語が得意な人、リスニング勉強したい人、英語の動画を見てドヤ顔したい人は軽く見ておくといいかもしれません。
ただ、構築している環境は少し異なりますのでご注意を。
あくまで聞き流すだけで何も実行等をする必要ありません。
環境構築が異なるところはこちらのQiitaの記事で解説するので安心してください。

Section2: ルーティング(Routing)

いきなり専門用語「ルーティング」ってなんだろう…。

ルーティングとは

「Route: 〜のルート(道)を決める」という動詞のing形です。
直訳するなら「ルートを決めること」ですかね？(英語得意でない)
それではなんのルート(道)を決めるのでしょうか？？

前回も軽く触れましたが、https://なんちゃらかんちゃらは実世界の住所の概念とよく似ています。
みなさんはこれからWeb上の世界のいくつかの住所にWebページを作ると考えてください。
あなたのWebサイトに訪れる人のために、Webサイトの道(ルート)を作ってあげるのがRoutingです。
例えばブラウザにhttps://laracasts.com/series/laravel-6-from-scratch/episodes/5と入力したらLaracastsのエピソード5のページに飛びますし、最後の数字をなんちゃらかんちゃら/4としたらエピソード4にアクセスすることができます。
これはLaracastsのサイトを作った人がそのようにルーティングを設定したためです。

このサイトが分かりやすいので、分からなかったらこちらでざっくり理解してください。
https://wa3.i-3-i.info/word1498.html

Laravelでページを作ってみよう

では実際にWebページを作り、その住所を設定し(ルーティング)、そのページにアクセスしてみましょう。
とりあえず最初に仮想環境上のターミナルでphp artisan serve(またはphp artisan serve --host=0.0.0.0)と入力し、Laravelを起動しましょう。
このとき、前回インストールしたfzfを使うと前回使用したコマンドを検索し簡単に入力することができます。ターミナル上で「control(Ctrl)」＋「R」です。

次に、VSCodeで「File(ファイル)」→「Open（開く）」で前々回作ったtest.projectを選択しましょう。

開いたら前回まとめたショートカットキーの一つ、「Command」＋「P」(Windowsは「Ctrl」＋「P」)でweb.phpと打って選択してください。
これがあなたのWebサイトの住所録(ルーティング設定ファイル)のようなものです。

開いたら以下のように編集して保存してください。

~/share/test.project/routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| 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');
});

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

これでlocalhost:8080/testという住所をあなたのサイトの住所録ファイル(web.php)に設定できました。
試しにホストOSのブラウザでlocalhost:8080/testへアクセスしてみましょう。
すると以下のエラーが表示されるはずです。

localhost:8080/testという住所へのWeb上の道は設定できたのですが、肝心のWebページそのものが存在しないためこのようなエラーが表示されてしまいました。

したがって、testというWebサイトを作成しましょう。
test.project/resources/viewsというフォルダの中にtest.blade.phpという名前のファイルを作成し、以下をコピペしてください。

~/share/test.project/resources/views/test.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
      <h1>ここはlocalhost:8080/testという住所にあるWebページです<h1>
    </body>
</html>

そしてもう一度localhost:8080/testへアクセスします。
すると、先ほど作成したtestというページにアクセスできるはずです。

その他の応用

上記がWebアプリを作る上での基本です。
その他LaracastsのSection2: Routingには色々な応用的なルーティングの書き方があるので、とりあえず手を動かして動画でやってることを真似てみてください。
ここで、やってることの意味や専門用語は理解しなくて構いません。
自分がやったことをメモる必要もありません。
あくまで操作に慣れることが目的です。
エラーが出たら落ち着いて、スペルミスや動画上で見落としているところがないか確認してみてください。
絶対にみなさんの環境で再現可能なことを解説しています。
(ただし、EPISODE8: Routing to Controllersの1:20あたりのコントローラと呼ばれるものを作成するところはみなさんの環境でできないので下記に方法を記述します。)

前もってHTMLの知識がある人は理解できることが多いかもしれないですね！

ただし注意点として、僕らの環境ではブラウザに入力する住所はlocalhost:8080/なんちゃらかんちゃらです。
動画ではlaravel6.test/なんちゃらかんちゃらっていう住所を使ってますがこれは違うので注意です。

コントローラの作成方法

EPISODE8: Routing to Controllersの1:20あたりのコントローラと呼ばれるものを作成するところはみなさんの環境で再現することができません。
これは動画内ではPHPStormと呼ばれるエディタを使用しており、僕らはVSCodeというエディタを使用しているためです。
どうってことはありません。コントローラの作成方法は、仮想環境上で以下のコマンドを入力するだけです。
すでにphp artisan serveを行なっているターミナルが存在する場合は、ターミナル上で右クリックして"New Tab"を選択して新しいターミナルに以下を入力しましょう。

~/share/test.project

$ php artisan make:controller PostsController

これでコントローラが作成されました。
VSCodeのファイル検索ショートカット、「Command」＋「P」でpostscontrollerと打って探してみてください。

コントローラとは

「コントローラ」も重要な用語なので簡単に説明します。
Webフレームワークにおける「コントローラ」は関数の集まりだと思ってください。
(「関数」が分からなかったらプログラミング勉強しましょう)
具体的な話は省略します。気になる人は調べてみてください。(結局適当かよ)

ただ、これに関しても慣れが重要です。
「Webアプリが作られてきた歴史の中で、コントローラと呼ばれる関数の集まりの概念が生まれたんだな、便利なんだろうな」程度の認識で進みましょう。
一ヶ月もすれば「コントローラ」がどんなものかなんとなく理解できるはずです。

まとめ

LaracastsのSection1: PrerequiresからSection2: Routingまでをざっくりまとめた。
次はSection3: Database Accessを進めるための環境構築をまとめたいと思います。
次回: データベース周りの環境構築