HaskellでWebを作るframeworkのIHPの概要

2021/12/20

最近ちょっと触っているので現時点での概要や感想をまとめる

前提

IHPは触り始めているが、まだ序盤なのでそこまで深い話はできない

今後も触る予定ではあるので、気が向けば追記するかも

IHPとは何か

IHPはHaskellでWebを作るfullstackなframework

別の、似た立ち位置のものにBlitz.jsやRuby on Railsがある

backendからviewまで、全てをHaskellで書く

IHPの何が嬉しいのか

backendからviewまで、全てをHaskellで書ける

全てを、型安全な言語で書ける安心感は大きい

意図せず健全性が破壊されない

チーム間で型の大事さを問わなくても、自然に型の能力を享受できる

それを感じつつWebを作れるのが嬉しい

Nixを使うので環境構築がめちゃくちゃ楽

(Haskellとは関係なく)Nixというpackage managerがあるが、IHPはこれを使って環境構築をする

ここで、IHPのinstall方法のページを見てみよう

つまり、以下のコマンドを実行するだけ

これだけで、無の状態から、Haskellが入り、IHPの設定が入り、環境構築が終わる

package管理もNixを使う

環境構築だけでなく、例えば「hlintを使いたい」とか「hxtを使いたい」のようなpackage管理もNixを使用する

IHP自身のversion管理もここで行う

Viewも型安全

code:hs

instance View IndexView where

html IndexView { .. } = [hsx|

<div class="py-10">

<h1 class="text-4xl font-semibold mb-5">Feeds</h1>

<div>

<div>{forEach feeds renderFeed}</div>

</div>

</div>

|]

関数型指向の言語でViewを書くframeworkは他にもあるが、HTML風に書けるものは珍しい

例えば、ElmやPureScript Halogenなどでは、View部分もその言語の関数記法で書く

code:purs(hs)

render :: State -> H.ComponentHTML Action () m

render {flg1, flg2} = HH.div_ [

HH.div

]

好みは人によりけりだが、

馴染みあるHTML記法で書けるとHaskeller以外の人もスッと入れるだろう

嬉しいのが、HSXも型チェックが効くことである

例えば、

タグ名が間違っているとtype errror

閉じタグが無いとtype error

属性名が間違っているとtype error

導入手順はやや多いが、documentが丁寧なので書いている通りにやれば1回も詰まらなかった

これで、styleを別ファイルに書かずにやっていける

code:hs

renderFeed :: Feed -> Html

renderFeed feed = [hsx|

<div class="flex bg-green-100 p-2 mb-2">

<div class="flex-none w-60">

</div>

<div class="pl-2">

</a>

</div>

</div>

|]

他にも、frontend側の嬉しさとして以下のようなものがある

Component駆動で作れる

1つ1つのComponentはただの関数なので、使い回しができる

Reactを書いているときと同じ思考でViewの設計ができる

HSXが嫌ならば、ElmやPureScript Halogenでも書ける

試してないので、どんなものかはわからない

backendとfrontendの言語がズレる問題はあるが、選択肢があるというのは良い

GUIでtable設計をできる

IHPを起動すると、管理画面とアプリケーションの2つが立ち上がる

https://gyazo.com/e15d30baf4458c94e155ebc8828bd650

命名を見て、チェック項目が変わっている

https://i.gyazo.com/2e71d443c72065727d21995dc01b3edc.gif

Code Generatorがあるので枠にハマれば一瞬で色々なものを生成できる

上記で作ったtableを元に、Controller、Action、Viewなどを一発で生成できる

https://gyazo.com/fa0fb25be15ee1318933eeae843e41e0

Controllerでは基本的なCRUDの関数が生成され、Viewも簡単なものが生成される

ボイラープレートを殆ど書かなくて住む

他にも色々嬉しさがある

live reloadされるのでDXが良い

Documentが親切

英語も読みやすく、言われたとおりにやっていけば詰まることはない

Longterm Roadmapがあるので、今後もちゃんとメンテされるよ、とのこと

etc.

IHPのノリとか、触ってみた感想とか

アーキテクチャはMVCで、DBはPostgresSQL

code:hs

projectsByUser userId = do

projects <- query @Project

|> filterWhere (#userId, userId)

|> filterWhere (#deleted, False)

|> fetch

pure projects

もちろん型安全

(まだぶつかってないが)ORMが用意した以上のことをしたい時に大変になる可能性はある

DSL感は強い

基本的に、IHPの用意したPreuldeを使う

Controllerのコード例を見るとこんな感じ

code:hs

action CreatePostAction = do

let post = newRecord @Post -- reqからPostを作成

post

|> ifValid \case

Left post -> render NewView { .. }

Right post -> do -- validならDBに登録

post <- post |> createRecord

setSuccessMessage "Post created"

redirectTo PostsAction

これらの関数はHoogle上で探せない

枠にハマらないとめんどいかも知れない

tutorialで例に出されているblogサービスのようなIHPの思想に合致しているものはパパっと作れる

しかし、cliendでの処理が複雑なものは、ちょっと大変かもしれない

Entityと、DB tableが1対1対応するのは渋い

defaultで多くのGHC拡張が有効になっている

40個ほどのGHC拡張が有効になっている

Documentでは、GHC拡張の説明なしに、その記法を使っている

説明がないので摩擦がなく気にせず書けるのは良い

が、調べたい時にちょっと困ると思う

拡張だとわかっていても、特定するのが難しい

Haskell入門に良いのか？TypeScript利用者に向いているのか？

documentには

とか

とか書いている

Haskell入門としては良い気がする

Haskell何も知らない状態ではさすがにきついと思う

基本を知った状態で、「Haskell使って何か作ってみるか」の題材として良いと思う

枠にハマったものなら簡単に作れると思う

GHC拡張などの勉強にもなる

あまり気に留めずに少しずつ知っていくのが良い

ただし、良くも悪くもアーキテクチャにHaskell感はない

そのため、まだ新しいRecordの記法などは使えない

だから現状はこう書く

code:hs

code:hs

<h5>{comment.author}</h5>

どこから始めるか？

あとはDocumentのサイドバーを眺めて興味ある箇所のカスタマイズをしていけば楽しめる

終わりに

全体的に開発者体験がすごく良い