本記事は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をダウンロードします。
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のアップグレードやツールのインストールをします。
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のためのディレクトリを作成します
sudo mkdir -p /etc/nix
/etc/nix/nix.conf以下のように書き込みます。
sandbox = false
use-sqlite-wal = false
そしてnixをダウンロード、インストールします。
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のもっと詳しい内容の記事を書きます。