今回は【Laravel入門1】として、まずはPHPの処理を行わず「Laravelでただのページの表示」を行います。
この記事を読めば「MVC」の「V」と「C」であるビューとコントローラの基本的な使い方や、それぞれの繋がりが理解できます。
「V」とはビューのことで、HTMLなどブラウザで表示する部分。
「C」とはコントローラのことで、ビューやモデルなどのつなぎ部分であり、PHPの処理を行う部分です。
「MVC」については、また別の記事でご説明しますね。
分かりやすく画像付きで説明しているので、順番に作業を進めてもらえればと誰でも簡単に作れるような記事になっています。
実際に作りながら進めることで、より「Laravel」を理解できるものです。
ぜひ「Laravel」をこれから勉強したいと思っている人は、この記事を参考にしてみてください。
事前準備
まずは事前準備として、開発環境や「Laravel」のインストール、プロジェクトの作成を行ってください。
開発環境「XAMPP」の準備
XAMPP環境の準備をお願いします。
事前準備：コードエディタ「VSCode」と「Laravel」のインストール
「Laravel」のインストールと「VSCode」のインストールをお願いします。
事前準備：プロジェクトの作成
上記の記事を参考に、「c:\xampp\htdocs」に「test-laravel」フォルダを作成して「Laravel」の準備を行ってください。
この記事では「test-laravel」フォルダに「Laravel」プロジェクトを作成した前提で話を進めたいと思います。
VSCodeでLaravelプロジェクトを開発する準備
まずは開発の前にVSCodeを起動して、プロジェクト「test-laravel」を読み込んで開発ができる準備を行います。
手順1：フォルダーを開く
VSCodeを起動したら、上のメニューから「ファイル」＞「フォルダーを開く」をクリックしてください。
手順2：「test-laravel」フォルダを選択する
「test-laravel」フォルダを選択したら、「フォルダの選択」ボタンを押します。
左側の表示バナーが、以下のようになったら成功です。
試しに次の手順で「Laravel」のバージョンを確認してみましょう。
手順3：ターミナルを表示する
上のメニューから「表示」＞「ターミナル」をクリックしてください。
すると、以下のような画面から・・・
以下の画像のように、赤枠に囲まれたエリアが表示されます。
手順4：「Laravel」のバージョンを確認する
ターミナルで以下のコマンドを実行してください。
php artisan -V
入力したらエンターキーで実行です。
「Laravel」のバージョンが表示されました。
「Laravel」のプロジェクトを開いているのを確認できたので、いよいよページの作成に入っていきましょう！
「Laravel」でページの表示を行う手順
PHPの処理がないページを作成するために、基本的に以下の3つのファイルを編集したり作成すれば終わります。
- ルーティングの設定ファイル
- コントローラのファイル
- ビューのファイル
ここでは「http://localhost/test-laravel/public/hello」にアクセスしたら表示されるページを作っていきます。
1.ルーティングの設定ファイルを編集
ルーティングの設定ファイルは簡単にいうと「〇〇ってURLにアクセスされたら、△△ってコントローラファイルを参照してね！」と設定するファイルです。
実際に操作してみましょう。
手順1：ルーティングの設定ファイル（web.php）を開く
ルーティングの設定ファイルは「routes」フォルダの中に、すでに用意されています。
左に表示されているプロジェクトの中から、「routes」をクリックしましょう。
展開されて一覧の中に「web.php」ファイルがあるので、またクリックします。
画面中央に、「web.php」ファイルの中身が表示されます。
手順2：ルーティングの設定ファイル（web.php）に記入する
今回作るのは「http://localhost/test-laravel/public/hello」なので、以下の内容を追記します。
Route::get('/hello', 'App\Http\Controllers\HelloController@index');
「helloってURLにアクセスされたら、HelloControllerってコントローラを参照してね！」って意味ですね！
では次にコントローラを作成していきます。
2.コントローラのファイル
まずはコントローラのファイルを用意します。
コントローラのファイルの用意は、再度ターミナルを使いますが、簡単なコマンドしか使いません。
コマンドを使わずに自作でコントローラファイルを作っても構いませんが、コマンドを利用すると「Laravel」が自動でコントローラクラスのファイルを作成してくれるので、ぜひやってみてくださいね！
手順1：コントローラのファイルを作成・編集
コントローラを作成するコマンドは以下の通りです。
php artisan make:controller コントローラ名今回は「HelloController」というコントローラファイルを作りたいので、以下のようなコマンドになります。
php artisan make:controller HelloController
コマンドを入力してエンターキーを押して実行すると、以下のような表示になります。
すると「app\Http\Controllers」フォルダの中に・・・
「HelloController.php」が追加されます！
では、この「HelloController.php」をクリックして、実際に書いていきましょう！
手順2：「HelloController.php」を編集する
「HelloController.php」を開くとすでに以下の基礎的なプログラムを書いてくれています。
この中にプログラムを追記していきます。
以下のコードを追記してみます。
public function index()
{
return view('hello');
}「return view(‘hello’);」とは、簡単にいうと「ビューのhelloに行ってね！」って意味です。
ビューのhelloファイルは後ほど作成しますね。
コードを追記する場所は、以下の画像を参照してくださいね！
では次にビューを作っていきましょう！
3.ビューのファイルの作成・編集
ファイルをイジるのはこれで最後なので、がんばってビューファイルを作っていきましょう！
手順1：ビューファイルの作成
ビューファイルは、「resources\views」フォルダの中に用意します。
赤枠の「views」の上で右クリックしてください。
するとメニューが表示されますね。
表示されたメニューの中から「新しいファイル…」をクリックしてください。
すると以下の画面のような表示になります。
「hello.blade.php」と入力して、エンターを押します。
次にこのファイルの編集を行っていきます。
手順2：「hello.blade.php」を編集する
先ほど作成した「hello.blade.php」をクリックしてファイルを開きます。
コントローラと違い、自動生成ではないので中身はまっさらですね！
ここではVCCodeの自動生成を利用して、htmlの基礎部分を作成します。
「html」と入力してみると、以下のようなメニューが表示されます。
「html:5」をクリックしてみてください。
すると以下のようなhtmlの基礎が自動で入力してくれます。
このままブラウザでアクセスしてもエラーにはならないのですが、ブラウザに何も表示されません。
以下のように「<body></body>タグ」の間に適当に文字を入力します。
ここではとりあえず「Hello Laravel!!」を書いてみました。
これで、一通りのファイルをイジり終えました。
最後にブラウザで表示して確認してみましょう！
4.ブラウザでページの確認
ブラウザの種類は問わないので、「http://localhost/test-laravel/public/hello」にアクセスしてみましょう！
ブラウザに「Hello Laravel!!」が表示されたら成功です！
もしページが表示されなかったら、次の項目を確認してみてください。
- XAMPPのコントロールパネルでApacheを起動したか
- プロジェクトのフォルダは「C:\xampp\htdocs\test-laravel」になっているか
今回のファイルのまとめ
今回は3ファイルを使用しました。
<?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');
});
// 2023.02.18 追記
Route::get('/hello', 'App\Http\Controllers\HelloController@index');さいごに
今回は「Laravel」の入門編1として、PHPの処理はなにもないページの表示を行いました。
「MVC」のうち「V」と「C」であるビューとコントローラの超基本的な使い方が「なんとなーく」理解できたかと思います。
今は「なんとなーく」で大丈夫です。
プログラムは何回も組んでいるうちに理解が深まっていくものです。
ぜひこの記事をきっかけに、「Laravel」に触れてみてくださいね。
次も「MVC」のうち「V」と「C」であるビューとコントローラを、さらに詳しく解説したいと思います。
ぜひ次の記事もよろしくお願いします。
コメント