nanisore oishisou

Webエンジニアあるまさんのゆるふわ奮闘記。

Laravelでカスタムフォーム使ってViewを綺麗に保とうず

どうも。
お久しぶり、あなたのベル子です。

ベル子の雑談ファンのみんな安心してくれたまえ。
やたら長くなったから巻末に付いておるぞよ。

本題

みなさんLaravel Collective使ってますか?

laravelcollective.com

「何それ、美味しそう」マンの諸君への解説

説明しよう。
Laravel CollectiveとはLaravelのアップデートでコアのフレームワークからは削除されてしまったLaravelの機能を、ライブラリとして組み込むことができるライブラリである。

大きく分けて5種類の機能があり、それぞれcomposerでinstallする必要がある。

Annotations

関連するメタデータを付与してやることで、イベントをリッスンしたり、ルーティングしたりできるという機能。
Laravel5で追加されるはずの機能だったようですが、最終的なリリース版からは切り離されてしまったようです。

Forms & HTML

bladeテンプレートで使用できるフォームとhtmlのヘルパーを集めたパッケージ。
Laravel5でForm、Htmlファサードコンポーネントはコアから削除されてしまいました。

元々、私はフロントエンジニアなんで、このFormコンポーネントのコードが逆に長くて読みづらくてうざいので、後述のカスタムマクロするときくらいしか使っていなかったんですが、Input::old()をいちいち書くのがうざいということもあり、最近はナチュラルに受け止められるようになりました。

www.dn-web64.com

SSH

Laravelコード内でSSHで何かやるときに使う機能だったけど、今はそういうのはEnvoy使えよってことで削除されたらしいです。

IronMQ Laravel Queue Driver

ちょっと前にキューのチュートリアルを書きましたが、Laravel 5.2からフレームワーク側で用意してくれているキュードライバーの設定からIronMQが削除されたので、IronMQ使いたい人はこれを突っ込めよって話です。

Command Bus

5.1で消えたようです。
コントローラーのアクション内での様々な処理をタスクとして分けてコマンドを実行するというような実装パターンの時に、タスクをカプセル化する便利なメソッドだそうで、
どういうときに使うかというと、こないだ書いたようなキューに押し込む必要があるようなメール送信とか、そういうのをハンドリングしたいときに使うものだったようなのですが、
あんまり使ったことある人いないかもしれませんが、Laravelには5.1からJobという概念が出てきました。

このCommand Busで作るコマンドのクラスを作成するときmake:commandというコマンドを叩いてapp/Commandsの配下にできるということだったんですけど、これLaravel 4.2使ってる人だと分かると思うんですけど、コンソールコマンドと混同してしまいますよね。

たぶん分かりづらいねってことになって名前とディレクトリを切り離したんだと思います。

だいたい使うことがあるのはForms & HTML

前置きが長くなりましたが、だいたい使うことがあるのはフォームヘルパーです。

先述したとおり、バリデーションでリダイレクトバックした際に前にインプットしてあったデータを再度セットしてやるInput::old()、今のバージョンだとold()をフォームに書くのがうざいという理由で使っている人が多いんじゃないでしょうか。
あとselectが1行で書けるというのもありますね。

正直、引数がバラバラで覚えづらいので、Emmetで一瞬で書けるフォームパーツをいちいちドキュメントを見ながら書くというのが非常につらいので、それ以外はあまりメリットは感じられないです。

加えて、フォーム系はフロント側でdata属性を追加しないといけないことが多くて、こういうことをフォームヘルパーでやろうとするとカスタムで作らないといけませんでした。
最新版では引数で渡せるようになったようですが。
古い案件はつらいですね。

ただ、このカスタムでform&htmlパーツが作れるというのが、このライブラリの最強にして最大の魅力

なんです!!

↓インストール方法はこちらの分かりやすい記事を参照してください。

qiita.com

例えば、時刻を入力させるのに

  • 時間と分はそれぞれ別のプルダウン形式で入力
  • 時間は1~24までの1時間刻みで。
  • 分は00から55までの5分刻みで。

のようなフォームパーツがアプリケーションのいたるところに登場するシステムを想像してみてください。

これを自力でViewに書いていくとどうなるか。

<div class="row">
    <div class="col-md-3 form-inline">
        <select class="form-control" id="test_time_h" name="test_table[test_time_h]">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15" selected="selected">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
        </select>
        <span></span>
    </div>
    <div class="col-md-3 form-inline">
        <select class="form-control"  id="test_time_i" name="test_table[test_time_i]">
            <option value="00">00</option>
            <option value="05">05</option>
            <option value="10">10</option>
            <option value="15">15</option>
            <option value="20">20</option>
            <option value="25">25</option>
            <option value="30">30</option>
            <option value="35">35</option>
            <option value="40" selected="selected">40</option>
            <option value="45">45</option>
            <option value="50">50</option>
            <option value="55">55</option>
        </select>
        <span></span>
    </div>
</div>

はい。こんなコードを自力で書くのなんて、ぞっとしますね。
中間部分はループさせられるとしても、こんなん大量にあるのにいちいち全部同じように書くなんて想像するだけで、ぞっとします。

それをカスタムフォームヘルパーを使えばあら不思議!!

{!! Form::selectTime('test_table', 'test_time', $row->test_time, ['class' => 'form-control']) !!}

たったの1行で書けてしまうんですね。

▼カスタムフォームヘルパーの実装方法の参考ページ qiita.com

カスタムフォームヘルパーの実装方法は↑こちらの方の方法とほぼ同様に実装してますが、私は以下のようにapp直下に入れてます。

<?php

namespace App\Providers;

use Form;
use Illuminate\Support\ServiceProvider;

class FormMacroServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap the application services.
     *
     * @return void
     */
    public function boot()
    {

        require app_path().'/macros.php';

    }

    /**
     * Register the application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Laravel 4.2ではデフォでフォームヘルパー使えるのでライブラリのインストールは必要なくて、カスタムしたかったらapp/start/global.phpで以下のようにmacroを書いたphpファイルをrequireしてやればいいです。

require app_path().'/macros.php';

別にフォームだけじゃなくてhtmlもオレオレパーツ作り放題

システムを通して毎回出てくる系のhtmlを作っておくと、これまた1行で書けてすごい便利です。
業務システムとか、この特殊ラベルどのページにも出てきますやんみたいなのありがちですよね。(アイコン付きの出荷済み、発送済みとかそいういうやつ)

あれも引数にkey渡すだけで全てよしなに表示してくれるパーツが作れます。

アイコン変えたかったら1箇所変えるだけ。

超絶DRY
超絶DRY

大事なことだから2回言いました。

雑談コーナー

最近、イラストを公式Twitterにアップしている関係で、ベル子さんの趣味は絵を描くことなのかしらと思ってる人が多いと思うんですが、私の最大の趣味はプロフィールの趣味のところにもあるとおり、小説の執筆です。

「野いちご」「魔法のiらんど」といった携帯小説時代から書いていまして、小さな賞とかをもらったこともあるんですが、まあ、ずっと書いてる割にあまり自慢できる成績は残せていません。

好きな作家が乙一東野圭吾江戸川乱歩のようなあまり陽気じゃない路線なので、周りの人に明るく「これ読んでみてー♡」と言えないのが上手にならない最大の要因なんですが、初期の頃の作品と比べるとかなり文章がマシになってきました。
が、ストーリーは結構、初期のもののほうが面白いので、リライトしようかなーと、最近、思ってます。

文章を書くことを勧めてくれたのは小学校の5年のときの担任の先生で、すごく嫌っていた先生なんですが、「あなたは文学的な才能を持っているので、文章を書いたほうがいいと思います」と、とにかく私を理解して肯定しようと努力してくれた人です。

今の私はついつい彼と同じことやってしまうんですけど、ありがたいけど、うざったいんですよね。気を付けないと。

でも、お陰様で翻訳やちょっとした記事を書くといった文章を書く仕事をすることもできましたし、絵以外の趣味にも出会えました。

サンキュー、高橋!
(↑先生を面と向かって呼び捨てで呼んでたけど、今思うとどんだけエキセントリックなんだよって感じ)

最後まで読み切った、そこの君、明日幸運が訪れます!
ありがとう★