本記事はHaskellアドベントカレンダー18日目の記事です

参考

https://github.com/digitallyinduced/ihp
https://ihp.digitallyinduced.com/Guide/installation.html
https://ihp.digitallyinduced.com/Guide/your-first-project.html

IHPとは

2022/10/24にバージョン1.0になったHaskell製Webフレームワークです。
その特徴として以下のようなものがあります。

仮想DOM
ホットリロード(なんと通常50ms以下)
HSX
データベース,認証システム等のGUI開発ツール
npmパッケージの使用

HSXとは次のようなもので、React等でお馴染みのJSXと似たようなものでHTMLを言語構文に落とし込んだものです。

let
    inputValue = "Hello World" :: Text
in
    [hsx|<input type="text" value={inputValue}/>|]

JSXはルートタグが一つでなければならないという制約がありますが、HSXにそのような制約はありません。

パッケージマネージャーがStackやCabalではなくNixなため、Nixのインストールが必要にはなりますが、Nixによって開発者ごとの環境の違いに左右されにくくなっています。

また、GUIツールが豊富なためSQLだけでなく、Haskellに詳しく無くても大した問題ではありません。

ちなみにIHPはIntegrated Haskell Platform の略らしいです。

Nixの環境構築

既にNixをインストールされている方はここは読み飛ばして頂いて構いません

NixはWindows上で動かないためWSL2を使います。
Linux,Macをご使用の方は上記のサイトを参照してください。
1番目(Nixの環境構築)以外は共通なので、2番目以降はどちらを参照しても構いません。

WSL2のインストール

まずPowershellを管理者権限で実行し、以下のコマンドを実行し、WSLをダウンロードします。

powershell

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

一応コマンドの意味を解説しておきます

dism.exe : Windows イメージの機能とパッケージを列挙、インストール、
アンインストール、構成、および更新をするコマンド
/online: 実行中のオペレーティングシステムをターゲットに
します。
/enable-feature /featurename:Microsoft-Windows-Subsystem-Linux : Microsoft-Windows-Subsystem-Linuxを有効にするオプション
/all : 上で指定したすべての機能を有効にする
/norestart : 再起動の確認を省略

インストールが完了したらWindowsを再起動しましょう。

次にMicrosoft StoreからUbuntuかDebianのディストリビューションをダウンロードします。
Ubuntu推奨なので特に事情がなければUbuntuを使用するようにしましょう
本記事では以下のURLのディストリビューションを使用します。
https://www.microsoft.com/store/productId/9PDXGNCFSCZV

WSLのセットアップ

ユーザー名やパスワードを入力したらLinuxのアップグレードやツールのインストールをします。

bash

sudo apt update
sudo apt upgrade
sudo apt install git curl make xdg-utils -y

.bashrcの最後に以下のテキストを追加します

PATH=$(/usr/bin/printenv PATH | /usr/bin/perl -ne 'print join(":", grep { !/\/mnt\/[a-z]/ } split(/:/));')
. ~/.nix-profile/etc/profile.d/nix.sh

Nixのためのディレクトリを作成します

bash

sudo mkdir -p /etc/nix

/etc/nix/nix.conf以下のように書き込みます。

sandbox = false
use-sqlite-wal = false

そしてnixをダウンロード、インストールします。

bash

curl -L https://nixos.org/nix/install | sh

完了したら、bashを再起動するか./home/user/.nixprofile/etc/profile.d/nix.shと入力しろと言われるはずなのでどっちかをしましょう

IHPのインストール

ここ以降はLinux,Macも共通です。

nix-env --install ihp-new

次にIHPのプロジェクトを作成します。
本記事ではプロジェクト名はblogで行います。

ihp-new blog

自分の場合はここで
DIRENV MISSING
MAKE MISSING
CACHIX MISSING
と言われたので指示に従いyを押してインストールしました。

完了するとプロジェクト名のディレクトリが作成されます。
そのディレクトリのstartファイルでIHPがスタートされます。

cd blog
./start

最初は起動に時間がかかりますが、http://localhost:8000にアクセスすると

また、開発ページはhttp://localhost:8001にてホストされています。
GUIでデータベース管理やコード生成といった様々なことが可能です。

もしエラーが起きたら

IHPには自動トラブルシューティングが用意されています。
IHPプロジェクトのディレクトリで下記のコードを実行してください。
現在何が足りていないのか教えてくれます。

curl --silent https://raw.githubusercontent.com/digitallyinduced/ihp/master/Troubleshoot/ihp-troubleshoot | python3

それでも解決しなかったらトラブルシューティングをあたるか、IHPのslackに参加して助けを求めてみてください。

終わりに

あまりIHPを深く触れられていないので環境構築だけにとどまらせて頂きました。
そのうちIHPのもっと詳しい内容の記事を書きます。

IHPの環境構築 on Windows

参考

IHPとは

Nixの環境構築

WSL2のインストール

WSLのセットアップ

IHPのインストール

もしエラーが起きたら

終わりに