[Yesod入門(4)] Hamlet制御構文, 値の参照 │ Web備忘録

1. Hamletで使える制御構文と値の参照
2. 変数補完(値の埋め込み)
3. 制御構文
4. YesodでDBを操作する方法
5. YesodでDBを操作する方法(データの一覧表示)
6. Handlerの作成
7. articleFormについて（フォーム取得関数）
8. getArticleRについて
9. postArticleRについて
10. 実行して確認

Hamletで使える制御構文と値の参照

前回の内容で、Hamletを使ったViewの作成ができました。次はこのViewに動的な値(Haskellの値)を埋め込んでみます。またその際に使える制御構文についても見ていきます。

まずはHandler側でViewに表示させるために使用する値を定義します。

Stringで文字列を表示させようとしたらエラーが発生し、それを解消できなかったので、Data.Text型を使用しています。これを使ってやるとエラーは出なかったので、以降すべてTextを使用します。なのでそのImportの設定を先にしてやります。Foundation.hsのインポート設定の一番下にこれを追記してやります。

Foundation.hs

import Data.Text ()

これでTextが使えるはずなので、Handlerで値を定義します。
今回は message という文字列と、リストを使用します。

Handler/Hello.hs

module Handler.Hello where

import Import

getHelloR :: Handler Html
--getHelloR = defaultLayout $(widgetFile "hello")
getHelloR = do
    let
        message = "ハンドラーで定義したメッセージです。" :: Text
        list = [1..10] :: [Int]
        x = Nothing :: Maybe Bool
    defaultLayout $(widgetFile "hello")

変数補完(値の埋め込み)

あとはこの値を使ってHamlet側でいろいろいじってみます。まずは単純に値を埋め込んで表示させてみます。Haskellの値を型安全に埋め込むには, #{…}を使用します。すでにURLの埋め込みは試していますが、ドメインを含む完全なURLを埋め込むには, @{…}を使用します。^{…}ではWidgetと呼ばれるほかのテンプレートファイルを埋め込めます。

#{…}	Haskellの変数
@{…}	config/routesで定義されているリソース名を指定
^{…}	Hamletのテンプレート

今回はHandlerで定義したmessageを表示させてみます。

templates/hello.hamlet

<h1>#{message}

制御構文

Hamletにはいくつかの制御構文があり、これを使用することで、効率的なView開発が可能となります。

ループ(走査)には $forall を使用します。例ではリストの中身をすべて表示しています。

$forall i <- list
    #{item}

条件式には $if を使用します。

$if message == "Hello"
    <p>Helloです
$elseif message == "こんにちは"
    <p>こんにちはです
$else
    <p>それ以外です

パターンマッチには $case を使用します。

$case x
  $of Just True
    <h1>Trueです
  $of Just False
    <h1>Falseです
  $of Nothing
    <h1>Nothing

Maybe型も扱えます

$maybe val <- x
    <h1>#{val}です
$nothing
    <h1>Nothingです

$doctype 5 を書くことで、HTML5のDOCTYPE宣言を挿入してくれます。糖衣構文というやつです。

最後に $newline never ですが、これをHamletファイルの先頭にでも書いておけば、出力されるHTMLから改行がすべて削除されます。軽量化につながるので書いておくのが良いでしょう。

$newline never
$doctype 5

以上がHamlet構文の基本でした。構文に何かしらの間違いがあれば、コンパイル時にエラーとなるので、それを一つ一つつぶしていくことになります。

Handler, Viewについてみてきたので、次回はModelとデータベース周りについて調べていきます。

YesodでDBを操作する方法

Stackでプロジェクト作成するときにテンプレートでDBを選択指定ます。Yesodで使えるDBは、

SQLite
PostgreSQL
MySQL
MongoDB

などなどが使えます。

YesodでDBを操作する方法を見ていきます。(1)でのプロジェクト作成時にSQLiteのテンプレートを使用したので、SQLiteをそのまま使用します。

config/models に記述されているのが、モデル(DBレイアウト)の定義です。すでにテンプレート作成時にいくつかのモデルがすでに定義されているので、それを参考に新しいモデルを定義してみます。

config/models

Article
    title Text
    published Day
    viewCount Int Maybe
    UniqueArticle title

新しいモデル Article を追加してみます。構文はモデル名(テーブル名）, フィールド名, 型の順にそれっぽく書けばいいです。インデントは1桁目から揃える必要があります。また、フィールドはキャメルケースで書かなければ怒られます。つまりビルドが通りません。

ビルド時に自動的にマイグレーションが実行され、DBレイアウトが更新されます。基本的には物理キーとして、id(Integer)が割り振られるようです。

my-project.sqlite3 ファイルの中身を見ると(適当なツールで確認してください)、Articleテーブルが確認できます。

カラム	型	重複	NULL	主キー
id	Integer	NG	NG	○
title	Text	NG	NG
published	DateTime	OK	NG
pages	viewCount	OK	OK

Haskellの型とDBの型の対応はここで確認できます。

指定がなければNULLは許容しない、重複は許容となります。NULLを許容するには Maybe をつけます。最終行の UniqueBook title で重複を禁止しています。つまりモデルを一意に判別する論理キーとなります。

モデルの定義を変更すれば自動的にマイグレーションが実行され、テーブルレイアウトが更新されます。データも(おそらく)引き継がれます。ただしNULL許容しないフィールドの追加など、データの整合性が取れない更新はエラーとなります。

今回はここまでにして、次回からDBのデータの一覧表示・新規登録・更新・削除の機能をそれぞれ実装しながらYesodにおけるDBの扱い方を調べます。

YesodでDBを操作する方法(データの一覧表示)

今回は前回作成したモデルのデータを画面に表示させたいと思います。これから作るDB操作のサンプルはいたってシンプルで、データを表示させる一覧画面とデータを登録・修正するための更新画面の2画面です。

まずは今回必要となるハンドラーの追加を行います。下記のコマンドを実行してハンドラーの追加を行います。

$ stack exec -- yesod add-handler
Name of route (without trailing R): ArticleList
Enter route pattern (ex: /entry/#EntryId): /ArticleList
Enter space-separated list of methods (ex: GET POST): GET

/ArticleList にGETでアクセスすると、Articleテーブルのデータが全権表示される画面を作ります。

処理の流れとしては、BookハンドラーにGETすると、編集用画面が表示され、データ更新時には同じハンドラーでPOSTでデータを受け取り更新します。

ハンドラーを編集します。

module Handler.ArticleList where

import Import

getArticleListR :: Handler Html
getArticleListR = do
    articles <- runDB $ selectList [] [Desc ArticlePublished]
    defaultLayout $(widgetFile "articleList")

ここでDBの操作方法を確認できます。

まだまだ詳しくはわかりませんが、 runDB を使ってDBにアクセスするようです。データの取得には selectList を使います。selectListの引数の2つが取得時の条件となります。

引数の1つ目がフィルター、つまり条件指定(SQLのWHERE句)です。今回は指定なし。

引数の2つ目が並び順の指定とか(SQLのORDER BY句)です？今回は日付の降順にしています。

以上で articles に取得したエンティティが取得できます。これをView側に渡して表示させたりできます。

次は View を作りましょう。 templates/articleList.hamlet を追加します。

templates/articleList.hamlet

<h1>Article一覧画面

<table border="1px">
    <tr>
        <th>タイトル
        <th>公開日
        <th>ビュー数
        <th>
    $forall Entity articleId article <- articles
        <tr>
            <td>
                #{articleTitle article}
            <td>
                #{show $ articlePublished article}
            <td>
                $maybe count <- articleViewCount article
                    #{count}
            <td>
                編集　削除

ここで一度実行してみます。まだデータがデータがないので、ヘッダー行だけしか表示されませんが、表示されればOKです。Linkは後々、修正と削除用のリンクを配置する予定で今はただの文字列です。

手でデータを入れれば表示が確認できます。

次回はデータ Articleデータの登録を行います。

Handlerの作成

前回まででデータの取得、表示ができました。（データがないので未確認ですが。）今回はデータを登録をできるようにしてみます。これがうまく実装できれば、前回実装したデータの表示についても確認できます。

まずはHandlerの追加からです。今回は Article というHandlerにデータの更新処理を任せます。

$ stack exec -- yesod add-handler
Name of route (without trailing R): Article
Enter route pattern (ex: /entry/#EntryId): /Article
Enter space-separated list of methods (ex: GET POST): GET POST

これでHandlerが完成しました。まずは新規登録処理から実装していきます。

Handler/Article.hs

module Handler.Article where

import Import

-- フォーム取得
articleForm :: Maybe Article -> Html -> MForm Handler (FormResult Article, Widget)
articleForm article extra = do
	(titleResult, titleView)            <- mreq textField "タイトル" (articleTitle <$> article)
	(publishedResult, publishedView)    <- mreq dayField "公開日" (articlePublished <$> article)
	(viewCountResult, viewCountView)    <- mopt intField "ビュー数" (articleViewCount <$> article)
	let result = Article
			<$> titleResult
			<*> publishedResult
			<*> viewCountResult
		widget = $(widgetFile "article-editor-form")
	return (result, widget)

-- 新規登録
getArticleR :: Handler Html
getArticleR = do
	let
		header = "Article新規登録" :: Text
	(widget, enctype) <- generateFormPost $ articleForm Nothing
	defaultLayout $(widgetFile "article")

-- 新規登録処理のポスト
postArticleR :: Handler Html
postArticleR = do
	((result, widget),enctype) <- runFormPost $ articleForm Nothing let header = "Article新規登録" :: Text case result of FormSuccess article -> do
			-- Postされたデータが正常な場合
			articleId <- runDB $ insert article redirect ArticleListR FormFailure _ -> do
			-- 不正な入力値のデータが送信された場合(必須項目が未入力等)
			setMessage "不正なデータが送信されました。"
			defaultLayout $(widgetFile "article")
		FormMissing -> defaultLayout [whamlet|データが送信されませんでした。 |]
		_ -> undefined

これでデータの新規登録処理は完成です。順番に処理を見ていきます。

articleFormについて（フォーム取得関数）

まずはフォームについてです。フォームにはいくつかの実装方法がありますが、今回は MonadicForm を使いました。参考にしたのはこちらのサイトと公式のページです。 ApplicativeForm だとフォームの生成をYesod側で行うので、ある程度自由にレイアウトを行うためには MonadicForm のほうがいいのかと思いまして。

まずフォームを取得する関数では引数に Maybe Article型と Html型の値を取ります。Maybe Article型の引数にはフォームに表示させるモデルのデータです。新規登録時には Nothing を渡し、修正時には修正対象のデータを渡す予定です。Html型の extra は必要なおまじないとしておきます。

フォームの定義の記述について。

mreq/moptで、それぞれ必須入力/任意入力を指定します。
xxxFieldで入力フィールの種類を指定します。指定できるのはたぶんここにある分。だいたいInputタグのtype属性の内容みたいです。
次の文字列でフィールドに紐づくラベルに表示させる内容を指定します。
最後のカッコ内の内容が初期表示させる値です。

これらで定義されたフォーム内の個々のフィールドの内容を受け取るのが、(入力値, レンダリング情報)のタプルです。次の result はフォームで入力された内容(「入力値」)を元に定義された Articleモデルのデータです。widget はフォームのデザインを定義した別ファイル(templates/article-editor-form)を呼び出し、フォームデザインを定義します。

フォームのデザインは次のような感じです。

temlates/article-editor-form.hamlet

#{extra}
<table>
    <tr>
        <th>#{fvLabel titleView}
        <td>^{fvInput titleView}
    <tr>
        <th>#{fvLabel publishedView}
        <td>^{fvInput publishedView}
    <tr>
        <th>#{fvLabel viewCountView}
        <td>^{fvInput viewCountView}

#{extra}は必要なものです。fvLabelはHandler側で定義したフィールドのラベルの文字列です。fvInputが定義されたフィールドで、適した入力用フィールドが生成されます。

getArticleRについて

getArticleRではフォームのWidgetを取得し、画面に表示させています。

generateFormPost はHamletファイルで表示させる widget と enctype を作成します。
そしてフォームの widget を表示させる Hamlet ファイルを呼び出して終わりです。templates/article.hamlet
```
<h1>#{header}
<form action=@{ArticleR} method="POST" enctype="#{enctype}">
	^{widget}
	<input type="submit" value="送信">
```
^{widget}部分が上で作成した、フォーム用のViewが埋め込まれる個所です。
フォームの中で widget をレンダリングするようにしてサブミットボタンを追加してます。これでフォームで入力された内容をPOST先(postArticleR)で受け取ります。

postArticleRについて

では最後に入力値を受け取ってDBに登録してみます。

runFormPost では、POSTされたデータの取得を行います。 result は文字通り取得結果です。widget, enctype は generateFormPost と同様です。
Form の送信に対する結果はいくつかあります。 FormSuccess は送信データが正常の時。FormFailure は不正な送信データの時。Formmissingは送信に失敗した時？
正しいデータが送信(POST)された場合、その入力結果のから生成された Article を DB へ Insert しています。insert を実行すると、値を挿入し、発行されたIdを返します。
登録後、一覧画面にリダイレクトしてます。
FormFailure の場合には、setMessage でエラーメッセージを表示させています。その後再度登録画面を表示させています。入力されたデータは再表示されます。

実行して確認

以上でDBへの登録が実装出来たので、動かしてみましょう。前回実装した一覧画面から呼び出すようにしてあげます。

templates/articleList.hamlet

<h1>Article一覧画面
<a href="@{ArticleR}">新規登録
<table border="1px">
	<tr>
		<th>タイトル
		<th>公開日
		<th>ビュー数
		<th>
	$forall Entity articleId article <- articles
		<tr>
			<td>
				#{articleTitle article}
			<td>
				#{show $ articlePublished article}
			<td>
				$maybe count <- articleViewCount article
					#{count}
			<td>編集 削除

適当な場所に上のリンクを追加して一覧画面から登録画面へリンクさせます。これで登録した内容が一覧画面で表示されているのが確認できる様になりました。次回は登録された内容を修正できるようにします。

参考URL

[Yesod入門(3)] Handler,View(Hamlet, Cassius, Lucius, Julius)について

[Yesod入門(5)] データベースとモデル

[Yesod入門(4)] Hamlet制御構文, 値の参照

Hamletで使える制御構文と値の参照

変数補完(値の埋め込み)

制御構文

YesodでDBを操作する方法

YesodでDBを操作する方法(データの一覧表示)

Handlerの作成

articleFormについて（フォーム取得関数）

getArticleRについて

postArticleRについて

実行して確認

Haskellカテゴリの最新記事

Visual Studio Code で Haskell の環境を構築する

[Haskell] 分散と標準偏差を求める

[Haskell] 平均を求めるaverage関数

[Haskell] 10進数からN進数への変換処理

[Haskell] 素数判定(試し割り,エラトステネスの篩)

[Haskell] ユークリッドの互除法で最大公約数を求める