たかぽんです！
Laravelの環境構築を終え、色々試し始めて最初にぶち当たる壁...
どうやって別のページ作って繋げばいいんだろ...?
っていうのを皆さんにお伝えしたいと思います！
これを読んでできること
- Laravelで自分のページを作る
- LaravelのWelcomeページから自分のページへ移動できる
- そこらへんの動作やら仕組みがわかる
こんな感じかな？
事前準備
事前にLaravelを扱える環境を構築しておいてください！
Macユーザーはこちらで環境構築について解説しているので、まだの方はこちらへ。
終わったら次の章から頑張っていきましょう！
Windowsの方は少々お待ちを...
余裕ができ次第準備しようと思います...!m(_ _)m
仕組みを知る
さて、ここでは最低限の知識を知ってもらいます！
まず、皆さんがご存知のサイトって同じサイトでもいろんなページがあったりしますよね？
例えばAmazonさんはユーザー情報の画面もあれば商品の画面もあります。そして購入する時の画面もあればカートの中身の画面もありますね。
そういったたくさんの画面を楽に管理するために使えるのがLaravelです。
本来ならそういった全てのページのHTMLを全部手動で繋いで、あれやこれやする必要があるんですが、面倒臭い部分は大抵Laravelがやってくれます...!
ただし、色々やってくれる代わりに、このファイルはここにおいてね〜！とか...
お決まりごとがたくさんあります。
ちょっとめんどくさそうですが、それに従うことでそのめんどくささを十分にカバーできるほどの恩恵がありますので！覚えましょう！
今回新しいページを自作し、そこへ遷移できるようにするためには、以下の3つのことをします。
- 新しいページを作る
- ルートを設定する
- 既存ページから新しいページへ繋げる
以上です。それでは早速やってみましょう！
新しいページを作る
さて、まずは自作の新しいページを作りましょう！
では早速...といきたいのですが、先ほどLaravelではファイルごとに場所が決まっているとお伝えしました。
今回作るのは実際に表示されるページのレイアウトなど(主にHTMLでかかれます)を担当するファイルです。
Laravelではこれを"bladeファイル"などと呼ばれることが多いです。
また、一般的な概念としてViewなどと呼ばれることもあります。
(以降、この記事では"bladeファイル"で統一しますね。)
このbladeファイルは、一般的に環境構築時に作成したプロジェクトフォルダのviewsフォルダ内にまとめられます。
細かいパスは以下。
MyProject/resources/views(MyProjectは環境構築時に各自決めた名前)
おそらく皆さんのviewsフォルダにはwelcome.blade.phpが最初っから入っているはずです。
これがLaravelの初期画面です。
環境構築の時にみた、真ん中にLaravelとかかれてるやつですね。
みて気づいた人もいると思いますが、bladeファイルの特徴として形式がhoge.blade.phpとなります。（これがbladeファイルと呼ばれる所以でもありますね。
では、早速自分用のも作っちゃいましょう！
viewsフォルダにwelcomeページをそのままコピーして複製、名前を変えましょう。
今回はwelcometech.blade.phpを作りました。
作れたらwelometech.blade.phpファイルを開き、少しだけ中身を書き換えておきましょう！
今回はLaravelの文字をてくてくテックぅ〜!にしてみます。
書き換えたら保存しておきましょうね。
これで表示用のファイル完成です！
ルートを繋ぐ
さて、表示するファイルはできましたが、他のファイルからどうやってアクセスするのか設定し、繋いであげないと実際には移動できません。
bladeファイルなどにアクセスする方法を管理してくれる便利なやつを一般的に"Route"と呼びます。
（Routeを繋ぐ〜やら、ページが間違ってた時にRouteが間違ってたりしない？なんて使われたりします。）
ちなみに、Laravelだと"MyProject/routes"フォルダにあるweb.phpファイルを使ってRouteの設定を行います。
では、以下のように中身を追加してあげます。
最初っからあるやつに以下を追加しただけですね。
Route::get('/tech', function () {
return view('welcometech');
})さて、それではここで何をやっているのか、簡単に説明します。
ここで追加したやつは、"/techというURLにアクセスされた時にwelcometech.blade.phpを表示してあげる。"というコードです。
ローカルホスト(環境構築通りにやっている方)の場合は"http://localhost:8000/techにアクセスした時にwelcometech.blade.phpを表示してあげる"となりますね。
ちなみに、現時点で試しにhttp://localhost:8000へアクセスして、その後URLを直接書き換え、/techをつけてみてください。
そしてEnterを押すと...?
表示されましたね！
これでルートの設定もOKです！
ちなみに余談ですが、最初っから書いてあるやつをみてみると、"/"だけですね。
これは一番最初にアクセスされるページで、http://localhost:8000/を意味しています。
とりあえずわかりやすいように、今後練習で作っていくルートには全てhttp://localhost:8000が前につくんだ。と思ってもらって大丈夫です。
それに"/"がつくか？"/tech"がつくか？で振り分けるイメージです。
既存ページから新しいページへ繋げる
さて、新しいページができていて、URLからアクセスできるのを確認したら今度は別のページからアクセスできるようにしたいですよね！
毎回URLを入力しなきゃいけないなんて不便すぎますしね...w
では早速みていきましょう。
今回繋げるのは皆さんのviewsにもすでにあったwelcome.blade.phpと新しく作ったwelcometech.blade.phpを繋げます。
とはいっても内容は非常に簡単です。
今回は最小限の構成でいきますので、もっとも楽そうなaタグのリンクを使っていきます。
aタグというのはHTMLのリンク（別ページに飛べるやつ）を作れるタグです。
viewsにあるwelcome.blade.phpを開き、真ん中のLaravelを以下のように書き換えましょう！
元々はLaravelという文字しかなかったところをaタグで
<a href="{{ url('/tech') }}"> Laravel </a>と書き換えました。
url('/tech')と書くことによってルートで定義したbladeにアクセスできるURL文字列を作ってくれます。
そしてそのURLを表す文字列をそのままaタグに渡してあげることでルートに定義したURLにアクセス（＝viewを表示)され、リンクとして機能してくれるわけです。
では実際にhttp://localhost:8000へアクセスして試してみましょう。
下線が出てリンクっぽくなってますね...!
そのまま押してみましょう！
変わりました！
このように、Routeで定義してあげてから呼び出し側（リンク元の既存ページ）にaタグなどを書くことで新しいページへアクセスできるようになります。
http://localhost:8000アクセスすると、最初に'/'だけのルート定義にしたがって、 welcome.blade.phpが読み込まれます。
そしてその後リンクをふむと次は'/tech'というルート定義にしたがって、welcometech.blade.phpが呼び出されるわけです。
おまけで、追加で今度はwelcometech.blade.phpを以下のようにします。
<div class="title m-b-md">
てくてくテックぅ〜！ <a href=" {{ url('/') }}">back</a>
</div>こうするとどうなるかわかりますか...?
backがリンクとなり、'/'、つまりwelcome.blade.phpが呼び出されるリンクになるんです。
ようは行ったり戻ったり、'/'と'/tech'を行き来することができるようになります。
ぜひ触って試してみてくださいね！
おわりに
はい、というわけで！今回はlaravelでページ遷移を実装してみました！
すごい基本的なところではあるんですが、ビュー、ルートの役割なんかをしっかり理解しておかないと今後必ず困ると思うので、ぜひ確認しておいて欲しいです！
また、実際にはページ遷移と同時に入力された値を渡したりするため、ルートで直接view()を使用（ビューファイルを表示）することは少ないです。
その代わりにルートでコントローラーのメソッドを呼び出すのですが...、そのお話はまた今度。
時間があれば執筆しますね！
それでわ！
