IHPの環境構築 on Windows

本記事は[Haskellアドベントカレンダー18日目の記事](https://qiita.com/advent-calendar/2022/haskell)です

# 参考
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](https://ihp.digitallyinduced.com/Guide/hsx.html#introduction)とは次のようなもので、React等でお馴染みのJSXと似たようなものでHTMLを言語構文に落とし込んだものです。

```haskell
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の最後に以下のテキストを追加します
```text
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`にアクセスすると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605477/b15db5fd-4a57-28a8-d7ee-2b40524dd1eb.png)


また、開発ページは`http://localhost:8001`にてホストされています。
GUIでデータベース管理やコード生成といった様々なことが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2605477/72a80440-b385-5999-72c2-e79edb5c821b.png)

# もしエラーが起きたら
IHPには自動トラブルシューティングが用意されています。
IHPプロジェクトのディレクトリで下記のコードを実行してください。
現在何が足りていないのか教えてくれます。
```
curl --silent https://raw.githubusercontent.com/digitallyinduced/ihp/master/Troubleshoot/ihp-troubleshoot | python3
```


それでも解決しなかったら[トラブルシューティング](https://ihp.digitallyinduced.com/Guide/troubleshooting.html)をあたるか、[IHPのslack](https://ihp.digitallyinduced.com/Slack)に参加して助けを求めてみてください。

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