2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HaskellAdvent Calendar 2022

Day 18

IHPの環境構築 on Windows

Last updated at Posted at 2022-12-18

本記事は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にアクセスすると
image.png

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

もしエラーが起きたら

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

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

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

終わりに

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?