Laravelでformを使う方法【初心者向け】現役エンジニアが解説

今回は、Laravel のFormを利用してフォームの作成を行っていきます。

LaravelのFormを利用することで、ブラウザ画面からフォームを利用してデータを送信することが可能になります。

実務でもWebアプリケーションを開発する際、ユーザーがデータをフォーム入力して、データベースに登録する処理はよく利用しますので、非常に実践的な内容になっています。

目次

• Formとは
• Formの例
• Laravelとは
• Laravel の始め方
• tinker の使い方
• Mysqlの設定
• Mysqlの利用
• Laravelの処理
• Laravel Collectiveの使い方

 

Formとは

WebアプリケーションでFormというと、企業ページへのお問い合わせフォームであったり、SNSの投稿フォームだったり、多岐にわたり多用されます。

このFormという単語ですが、初学者の頃は、Fromと混同しやすくタイプミスが発生する点に注意していただくと、学習がスムーズです。

 

今回は、LaravelのライブラリであるLaravel CollectiveというライブラリのFormファサードを利用して実装していきます。

Formファサードとはデザインパターンで言うところの、複数のクラスを利用する上で窓口となるクラスを利用して、依存関係を含めシンプルに処理を実装することができる仕組みです。

デザインパターンというのは、プログラミングのアルゴリズムを定型化することで、誰でも高品質な処理を実装することができる考え方です。

 

アルゴリズムというのは、プログラミングの処理の流れです。

例えば、子供の頃、迷路の本などで入り口から出口までなぞり書きしたことがあるかと思います。

入り口から出口まで後戻りせず、一筆書きで迷路をクリアする処理をアルゴリズムとイメージすると良いかもしれません。

 

クラスとは、あるオブジェクトの設計図です。

オブジェクトを作るためには設計図を設計した上で、設計図に基づいてオブジェクトの作成が必要です。

 

オブジェクトとは、クラスという設計図から生成される製品です。

家を例にすると、家という製品（オブジェクト）は、柱や壁や電気や水道やガスなどいろいろな部品によって、クラスという設計図に基づいて構成されています。

つまり、家の設計図がクラスで、実際の家がオブジェクトというイメージになります。

 

そして、実際の製品をインスタンスと呼びます。

これは、生成する家が全く同じクラス（設計図）に基づくオブジェクト（製品）であっても、インスタンス（田中様の家）、インスタンス（鈴木様の家）というように、生成後は別の意味を持った家になるためです。

家の設計図であるクラスを利用して、様々な家を集積するようなWebアプリケーションを実装する場合、家というクラスだけでなく、車というクラスや、お店というクラスもあるかもしれません。

どの家とどの車が同じ所有者で、その所有者はお店も所有しているのか、お店を利用するだけなのか、というようにクラス同士が連動して動作する場合、最終的なWebアプリケーションがクラスでごちゃごちゃになりかねません。

そこで、Formファサードのような依存関係をシンプルに実装してくれる機能を利用していくと、実務でも保守のしやすい素敵なアプリケーションを実装可能になります。

 

[PR] PHPを学んで未経験からWebエンジニアを目指す方法とは

Formの例

今回は次のようなFormタグを利用します。

Form::model

Form::modelで、モデルデータと連動しながらForm処理を開始します。

そうでない場合は、Form::openを利用することができます。

 

Form::label

Form::labelで、ラベルの生成処理をします。

 

Form::text

Form::textで、テキストボックスの生成処理をします。

 

Form::submit

Form::submitで、送信表示の生成処理をします。

 

Form::close

Form::closeで、Formタグの実装を終了します。

 

今回利用するFormタグ以外にも、たくさんのFormタグが存在するので、Laravel Collectiveの公式ページを参考にしていただくと良いですよ。

LaravelCollective | HTML v6.x

 

Laravelとは

Laravelとは、PHPでWebアプリケーションを開発する際、セキュリティも高く、効率的な開発をすることができるフレームワークです。

フレームワークとは、Web開発における共通処理であるライブラリを呼び出すことで、効率的にWebアプリケーションを開発することができるツールです。

ライブラリとは、よく利用する便利な処理をまとめて実装しているプログラムです。

同じような処理をしているライブラリが、世界中に存在するため、どのライブラリを呼び出し利用するかはプログラマーが考えて決定します。

 

Laravel の始め方

今回解説する実装環境は、PHP7.2系とLaravel6系とMySQL5.6系です。

MySQLの最新バージョンはMySQL8系ですが、実行環境の都合でMySQL5.6系ですので、基本的にはMySQL8系でも同じ考え方をしていただくと良いです。

今回はcomposerコマンドを利用して、techacademyというプロジェクト名で、Laravel6.x系最新版で立ち上げます。

^6.0 と書けば、バージョン6.xの最新版が選択されます。

 

コマンド

composer create-project --prefer-dist laravel/laravel techacademy ^6.0

Laravelのインストール方法やcomposerのインストール・使い方についてはこちらの記事を参考にしてみてください。

 

Laravelのバージョン

Laravelの現在の最新バージョンはLaravel8です。

しかし、Laravel6を利用するのは、Laravel6がLTSというバージョンだからです。

LTSとは、長期に渡りサポートされるバージョンを意味します。

最終的なサポート期間がLaravel6のほうがLaravel8よりも長いため、実務ではLaravel6を利用することが多いです。

バージョン	公開日	セキュリティサポート
8.0	2020年9月8日	2021年9月8日まで
7.0	2020年3月3日	2021年3月3日まで
6.0	2019年9月3日	2022年9月3日まで

 

tinker の使い方

Laravelでは php artisan tinker というコマンドを実行すると、Laravelの機能を実行するREPLが起動します。

REPLとは対話型コマンドでアプリケーションを操作する方法です。

 

tinkerの起動方法

コマンドラインで次のコマンドを入力するとtinkerが起動します。

php artisan tinker

 

tinkerの終了方法

REPLの実行中は、行頭に>>>が表示されています。

その状態でexitと入力することでtinkerを終了することができます。

>> exit

 

MySQLの設定

いくつかMySQLの設定が必要です。

代表的な設定を抜粋して解説します。

 

config/database.php

設定内容

'default' => env('DB_CONNECTION', 'mysql'),

解説

ここでは、MySQLを利用するという指定をしています。

 

.env

設定内容

DB_DATABASE=techacademy

解説

ここではtechacademyというデータベースを利用する指定をしています。

 

MySQLの利用

MySQLの起動

コマンド

sudo service mysql start

sudo mysql -u root

解説

MySQLが未起動の場合、sudo service mysql startでMySQLを起動します。

sudo mysql -u rootでMySQLにログインします。

今回は学習用なので、ユーザー名がrootでパスワードがないパターンのログインコマンドです。

実務で利用する場合は、任意のログイン情報を設定していただく必要がございます。

 

techacademyデータベースを作成

コマンド

CREATE DATABASE `techacademy`;

解説

MySQLにログイン後CREATE DATABASE `techacademy`;というコマンドを実行することで、techacademyというデータベースを作成することができます。

 

Laravelの処理

Laravel側で実装する代表的な処理を抜粋して解説します。

 

tinkerでデータベース接続を確認する方法

コマンド

php artisan tinker

>>>DB::reconnect();

解説

php artisan tinkerというコマンドを実行することでtinkerを利用します。

tinkerを利用しているREPLの状態は、行頭に>>>が表示されている状態です。

その状態で、DB::reconnect();を実行します。

無事データベースへの接続が完了していれば、次のような表示がされます。

=> IlluminateDatabaseMySqlConnection {#683}

 

マイグレーションファイルの作成と実行

マイグレーションファイルとは、テーブルの作成・削除、カラムの追加・削除に関するデータベースのテーブル管理を行うファイルです。

コマンド

php artisan make:migration create_techacademy_table --create=techacademies
php artisan migrate

解説

php artisan make:migrationでマイグレーションファイルの作成実行を指示します。

create_techacademy_tableが実際のマイグレーションファイル名です。

–create=techacademiesが、作成されるテーブル名です。

テーブル名はすべて小文字で複数形という文法に従って記載します。

php artisan migrateでマイグレーションを実行します。

実行結果

次のような表示がされると、techacademyデータベースにtechacademiesテーブルが作成されます。

Migrating: 2020_12_26_144251_create_techacademies_table
Migrated: 2020_12_26_144251_create_techacademies_table

 

Model（モデル）

モデルとはデータベースとのデータのやり取りを担当する機能です。

モデルを作成することで先ほど作成したtechacademyデータベースの、techacademiesテーブルとのデータのやり取りを行うことが可能になります。

コマンド

php artisan make:model Techacademy

解説

php artisan make:modelでモデルを作成することを指示しています。

今回はTechacademyモデルを作成しています。

モデルは次のようにappフォルダにTechacademy.phpという名称で生成されます。

app/Techacademy.php

補足ですが、LaravelではモデルをEloquent（エロケント）という名称で呼ぶこともあります。

 

Routing（ルーティング）

Routingとは、どのURLを表示したときにどのファイルを利用して処理するかという設定です。

基本的なWebアプリケーションの処理として、次の4つがあります。

GET (取得)
POST (保存)
PUT (更新)
DELETE (削除)
INDEX(一覧)
CREATE(生成)
EDIT(編集)

この7つのルーティング処理を次の設定1行で完了することができます。

routes/web.php

Route::resource('techacademies', 'TechacademiesController');

 

Controller（コントローラー）

Controller（コントローラー）とは、Routing（ルーティング）で指定したURLで処理するファイルです。

もちろん、Controller（コントローラー）にはRouting（ルーティング）以外に、Model（モデル）やView（ビュー）との連携でも利用します。

Routing（ルーティング）はURLに対応して処理を行う設定です。

Model（モデル）はデータベースとのやり取りを行います。

View（ビュー）は表示する処理を行います。

コマンド

php artisan make:controller TechacademiesController --resource

解説

php artisan make:controllerでController（コントローラー）を生成する処理を指定します。

app/Http/controllers/TechacademiesController.phpというファイルが生成されます。

–resource をつけると、Routing（ルーティング）で学習した7つのルーティングに対応した7つのアクションが実装されます。

アクション例

動詞	URI	アクション	ルート名
GET	/techacademies	index	techacademies.index
GET	/techacademies/create	create	techacademies.create
POST	/techacademies	store	techacademies.store
GET	/techacademies/{techacademy}	show	techacademies.show
GET	/techacademies/{techacademy}/edit	edit	techacademies.edit
PUT/PATCH	/techacademies/{techacademy}	update	techacademies.update
DELETE	/techacademies/{techacademy}	destroy	techacademies.destroy

 

Laravel Collectiveの使い方

今回は、ここまでの学習で利用したtechacademyというLaravelのプロジェクトを利用して、Laravel CollectiveのFormを活用したお問い合わせフォームの実装例を抜粋して解説します。

 

Laravel Collectiveのインストール方法

Laravel Collectiveを利用する場合、composer というコマンドを利用してインストールします。

無事インストールが成功すると、プロジェクトフォルダにある、 composer.json と composer.lock に指定したパッケージ名とバージョンが記載され、自動的に更新されます。

コマンド

composer require laravelcollective/html:^6.0

 

htmlspecialchars関数

Bladeでは基本的に {{, }} で囲う記法を利用して、htmlspecialchars関数を使用して表示されます。

これはPHPプログラムを利用して、クロスサイトスクリプティング攻撃など悪意の攻撃を加えられることを防ぐためです。

しかし、Laravel Collectiveを利用するとデータの無害化を自動的に行ってくれるため、htmlspecialchars関数を利用する必要はありません。

コード

{{ '<p style="color: red;">htmlspecialchars関数を利用</p>' }}
{!! '<p style="color: red;">文字列をcssで赤色表示</p>' !!}

解説

{{ ‘<p style=”color: red;”>htmlspecialchars関数</p>’ }}のように、{{, }}で囲うとhtmlspecialchars関数が使用され、次のように表示されます。

<p style="color: red;">htmlspecialchars関数</p>

 

{!! ‘<p style=”color: red;”>そのまま表示する。</p>’ !!}のように、変数の内容や関数の結果を表示するのに {!!, !!} で囲うと、文字列かつ赤色のcssを適用した状態で、次のようにそのまま表示されます。

文字列をcssで赤色表示

 

 

View（ビュー）

LaravelのView（ビュー）には、Bladeテンプレートエンジンという仕組みが利用されます。

Bladeビューとも呼ばれ、.blade.phpという拡張子で利用します。

テンプレートエンジンとは、Laravelのようなプログラムの内容を効率的に表示するための仕組みです。

 

resources/views/techacademies/create.blade.php

@extends('layouts.app')

@section('content')

    <h1>テックアカデミー</h1>

    <div class="row">
        <div class="col-6">
            {!! Form::model($techacademy, ['route' => 'techacademies.store']) !!}

                <div class="form-group">
                    {!! Form::label('content', '入力フォーム:') !!}
                    {!! Form::text('content', null, ['class' => 'form-control']) !!}
                </div>

                {!! Form::submit('送信', ['class' => 'btn btn-primary']) !!}

            {!! Form::close() !!}
        </div>
    </div>
@endsection

 

解説

今回は次の部分でFormを利用しています。

           {!! Form::model($techacademy, ['route' => 'techacademies.store']) !!}
                <div class="form-group">
                    {!! Form::label('content', '入力フォーム:') !!}
                    {!! Form::text('content', null, ['class' => 'form-control']) !!}
                </div>

                {!! Form::submit('送信', ['class' => 'btn btn-primary']) !!}
           {!! Form::close() !!}

 

1行目の  Form::model($techacademy, [‘route’ => ‘techacademies.store’])では、Formで作成された入力フォームのデータが、 route で指定されたtechacademies.storeというaction属性へ送信されます。

今回、Form::openではなく、Form::modelを利用することで、Form::text(‘content’, null, [‘class’ => ‘form-control’]) のcontentに、次の優先順で自動的にデータが設定されます。

1. 直前の入力値（フラッシュデータ）
2. 明示的に指定された値
3. Model（モデル）の属性値

Model（モデル）の属性値とは、Form::text(‘content’, null, [‘class’ => ‘form-control’]) のcontentに対し、Model（モデル）にあるcontent属性値が自動的に設定される処理を意味します。

もちろん、Model（モデル）の構築だけでなく、Laravelが正常の動作をするための設定が完了していることが前提です。

 

2行目の<div class=”form-group”>はHTMLでform-groupというCSSクラスを指定しています。

デザインをきれいに見せる実装です。

 

3行目のForm::label(‘content’, ‘入力フォーム:’)では、ラベル名の指定をしています。

Form::label() で、第1引数に指定された Form::model($techacademy, …) がTechacademyモデルのインスタンスである $techacademyの content カラムを与え、第2引数に入力フォーム:というラベル名を与えます。

 

4行目のForm::text(‘content’, null, [‘class’ => ‘form-control’])では、 <input type=”text”> を生成しています。

Form::text() の第1引数に指定された‘content’では、$techacademyの contentカラムを指定します。

Form::text() の第2引数に指定されたnullは、フォームで実際に入力を行う、テキストボックスに入れておきたい初期値を指定します。

1行目で、Form::open を利用した場合、初期値が不要な場合にはnullを指定します。

1行目で、Form::modelを利用した場合、nullの位置に取得値を代入するため、指定値はnullにする必要があります。

Form::text() の第3引数に指定された[‘class’ => ‘form-control’]は、タグの属性情報を配列で処理する指定を行っています。

 

5行目の</div>では、2行目の処理を終了する意味があります。

 

6行目のForm::submit(‘送信’) では、送信ボタンを生成しています。

第1引数の‘送信’にはボタンに書かれる表示内容を与えます。

今回は送信と表示されます。

第2引数の[‘class’ => ‘btn btn-primary’]では、送信ボタンのデザインをBootstrapというCSSフレームワークのbtn btn-primaryクラスを指定してきれいに表示しています。

 

7行目のForm::closeでは、Formタグの処理を終了しています。

 

執筆してくれたメンター

中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。