Elm を書く環境を整える

クラウドでコスト削減はこちら

こんにちは。齋藤です。

この記事は Elm アドベントカレンダー 11日目の記事です。

この記事では 以前書いた記事 をベースに Elm の環境をセットアップに関して整理してみます。

今回書く内容は以下の内容です。

  • elm のセットアップ
    • elm のインストール
    • vscode-elm のインストールと設定
  • elm-test のセットアップ
    • いくつか書いてみる
    • vscode-elm と elm-testのフォルダ構成で詰まった話
  • elm-format によるフォーマット
  • elm-analyse によるLint
    • なぜかLintされない話

elm のセットアップ

まずは elmを使う為には npm が必要です。 npm のセットアップをしたあと、elm を インストールしていきます。

1
2
npm init -y
npm install elm -D

ライブラリをインストールしてみましょう。

1
npx elm package install elm-lang/html -y

すると 以下のような、elm-package.json が 生成されると思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/wreulicke/elm-sandbox.git",
    "license": "MIT",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

vscode-elm のインストールと設定

VSCodeのワークスペース設定に以下の内容を書き込みます。 絶対パスで記述している理由は後ほど記述します。

1
2
3
{
    "elm.makeCommand": "/Users/John.Doe/repo/elm-sandbox/node_modules/.bin/elm-make"
}

elm-test のセットアップ

まずは elm-testをインストールします。

1
npm install elm-test -D

次のコマンドでリポジトリでのテスト環境をセットアップ可能です。

1
npx elm-test init

以下のようなツリー構成になります。

1
2
3
4
5
6
7
├── Main.elm
├── elm-package.json
├── package-lock.json
├── package.json
└── tests
    ├── Example.elm
    └── elm-package.json

いくつか書いてみる

以下のような形でテストがかけます。 fuzz を使ったテストは [Elm] Fuzzer でテストデータを量産しよう を見るといいでしょう。 テストデータを自動で生成することができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module Example exposing (..)
 
import Expect exposing (Expectation)
import Fuzz exposing (Fuzzer, int, list, string)
import Test exposing (..)
 
 
suite : Test
suite =
    describe "first test"
        [ todo "test todo"
        , test "my first case" <|
            \_ -> Expect.equal 2 2
        , fuzz string "test" <|
            \str ->
                case str of
                    "" ->
                        Expect.pass
 
                    " " ->
                        Expect.pass
 
                    _ ->
                        Expect.fail "sss"
        ]

vscode-elm と elm-testのフォルダ構成 で詰まった話

以前の記事でも書いたのですが、 開いているファイルから見て一番近い親にある elm-package.json をベースにelmの実行ファイルを検索するため、 以下の形で設定を記述していると動きません。

1
2
3
{
    "elm.makeCommand": "./node_modules/.bin/elm-make"
}

そのため、elm-test で作ったサブディレクトリのファイルではコンパイラが見つからず エディタの連携が動きません。

解決方法としては現状以下の2つです。

  1. PATHにelmを入れる
  2. ワークスペースにあるファイルを絶対パスで指定

将来的に elm 本体に test ライブラリが取り込まれ この問題は解決されるかもしれません。

elm-format の設定

elmにはelm-formatというフォーマッタがあります。 インストールして設定してみましょう。

1
npm i elm-format -D

VSCodeのワークスペース設定に以下の記述を追加すると良いです。

1
2
3
4
{
    "elm.formatCommand": "/Users/saito.masaya/repo/elm-sandbox/node_modules/.bin/elm-format",
    "elm.formatOnSave": true
}

次のコマンドでもフォーマットが可能です。

1
npx elm-format . --yes

elm-analyse のセットアップ

elmにはelm-analyseというLinterがあります。 インストールして設定してみましょう。

1
npm i elm-analyse -D

VSCodeのワークスペース設定に以下の記述を追加すると良いです。

1
2
3
4
{
    "elm.analyseCommand": "/Users/saito.masaya/repo/elm-sandbox/node_modules/.bin/elm-analyse",
    "elm.analyseEnabled": true
}

チェックしてくれる項目に関しては 同じアドベントカレンダーに記事があるので そちらを参照すると良いでしょう。

なぜかLintされない話

自分の環境ではなぜかLintされないケースがありました。

原因としては、ファイル名の先頭が小文字だったことです。 解決方法としてはファイル名の先頭を大文字にしましょう。 モジュール名と合わせるのが正解なのかな。

ちなみに、elm-formatでフォーマットしているはずのファイルで elm-analyseから Unformatted file と怒られるのは どうしてでしょうか・・・。

まとめ

今回は elmの環境のセットアップについて記事にしました。 いかがだったでしょうか。

個人的に詰まった内容を書いてみました。

明日は aiya000 さんによる 「How to make type classes without implicit caller in Elm」だそうです。 型クラスの話でしょうか？

AWS利用料業界最安値に挑戦します！