Mojolicious::Liteでテキストボックスに値を入れておく

@nqounetです。

第6回では、テンプレートに値を渡す方法を学びました。

フォームの値を画面に表示することはできるようになりましたが、フォームのテキストボックスに値が残っていませんでしたので、値を残して（入れて）おくようにしましょう。

よくある機能はアプリで実装されている

最近はあまり見かけないとは思いますが、フォームを入力してエラーになった場合、ブラウザの戻るボタンで戻ってください、的な感じで戻ると、フォームが空っぽになっていたりして、キーッっとなったりした思い出があると思います。

このような思い出が多いからか、最近では、入力ミスがあっても、フォームの画面が表示されて、各項目にエラーが表示されていることが多くなっています。

Mojoliciousには、そのような機能を持ったフォームを作成する方法があります。

サンプルコード全体

Mojoliciousのバージョンは6.01で確認しています。

ファイル名はなんでも良いですが、ひとまずmyapp.plと考えてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


#!/usr/bin/env perl
use Mojolicious::Lite;

get '/' => sub {
    my $c    = shift;
    my $user = $c->param('user');
    $c->stash(hello => qq{Hello $user!});
    $c->render(template => 'index');
};

app->start;
__DATA__
@@ index.html.ep
<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    %= form_for '/', begin
        %= text_field 'user'
        %= submit_button 'Submit!'
    % end
    <p><%= $hello %></p>
</body>
</html>

解説

Line 22 - 24

1
2
3
4


    %= form_for '/', begin
        %= text_field 'user'
        %= submit_button 'Submit!'
    % end

前回から変更になっているのはこの部分のみです。

Mojoliciousで通常使うテンプレートは、Perlのコードを埋め込むことができる、Embedded Perlと呼ばれる仕組みを使っています。

前回使用した、<%= ... %>というのは、実はPerlのコードを実行して、その結果をその場所に埋め込む（文字を置き換える）という仕組みになっています。

つまり、<%= $hello %>は、$helloを実行した結果（Perlでは、こういう場合は変数の中身になります）を表示している事になります。

今回使用している%=は、行全体をPerlのコードとして実行して、その結果を埋め込む、という仕組みになります。

%=の左側には空白はあってもOKです（半角のみです。全角はダメ）が、それ以外の文字があるとわかりにくいエラーになりますので気をつけてください。

%については、Perlのコードとして実行しますが、何も埋め込みません。

さて、form_for、text_field、submit_buttonについてですが、これらはテンプレートで使える関数で、実行するとHTMLを返します。

これらの関数は、Mojoliciousの標準プラグインのTagHelpersで定義されています。

それぞれの最初の引数の文字列は、form_forではaction、text_fieldではname、submit_buttonではvalueの値になります。

特に大事なのがtext_fieldで、この引数がnameの値になるだけでなく、リクエストされたパラメータの値が自動的に表示されるようになります。

今回の場合、テンプレートで指定しているuserと$c->param('user')がお互いに参照しあう状態になります。

多機能だけど必要なところだけ使えばOK

フォームをより親切に作成することで、ウェブアプリの完成度を高めることが可能です。

皆さんも美味しいところだけをうまく使ってサクッとウェブアプリを作ってみましょう。