VS Code で Elm の開発環境を構築する on Windows 10

正式なタイトルは「VS Code で Elm の開発環境を構築する on Windows 10 on 人権不足マシン(メモリ8GB)」
といったところです。

気になるところ、足りないところがあればコメントいただけると助かります。

動機

腰を据えて Elm やってみようかと思ったけど、ググると大体 Mac か Linux 向けの解説…
Windows だと環境構築するの結構しんどいのでは？

というわけで、Windows でほぼ何もない所から環境構築する一連の手順が
あるといいなと思ったので書きます。

前提

• OS は Windows 10 を想定しています。
  • VS Code が動けば 10 以外でも大丈夫なはず。
• Elm のインストール時にバージョンは指定しません。
  • 2018.12 現在では Elm 0.19 がインストールされることを期待した手順となっています。
  • 後述の理由により Elm のバージョンは 0.19.0-bugfix6 を指定します。
• Elm はグローバルインストールします。
  • ローカルインストールはグローバルインストールより少しだけ手間が増えるのでやりません。

細かい手順があると「Elm の環境構築面倒くさい」となってモチベーションを下げる懸念があるので、
できるだけそれを避けます。

Atom じゃなくて VS Code ？

Q： Elm なら Atom という気運があるようだが…。

atomはelmで人権なので絶対入れてください！

— ABAB↑↓BA (@ababupdownba) 2018年10月27日

elmはelmjutsuの関係で実質Atom一択やけど、HalogenっていうかPureScriptはpsc-ideのおかげでいろんな(psc-ideに対応してくれている)エディタで書けるからええなあと思う

— Keck (@Keck_init) 2018年10月30日

A： 人権はない (Atom もインストールして試しましたが弊マシンだと動作が厳しかったので今回は VS Code です)。

環境構築

次の手順で進めていきます。

1. npm (Node.js) をインストールする
2. elm をインストールする
3. elm-format をインストールする (オプション)
4. VS Code をインストールする
5. VS Code の日本語言語パックをインストールする (オプション)
6. VS Code の Elm サポートプラグインをインストールする
7. Hello wolrd!

npm (Node.js) をインストールする

「npm や Node.js とは何ぞや？」については Google 先生に任せます 。
Elm 関連のコマンドをインストールするのに必要なものなのでインストールします。

https://nodejs.org/ja/download/ から Node.js のインストーラをダウンロードしてインストールしましょう。
「推奨版(LTS)」と「最新版」がありますが、ここでは「推奨版」を選択してください ¹ 。

細かい手順については Node.js / npmをインストールする（for Windows） が詳しかったので
そちらを参考にしてください。

インストールが完了すると npm もインストールされた状態になっています。

elm をインストールする

npm を使用して elm をインストールします ² 。

Windows のスタートメニューにある検索用テキストボックスに node と入力し、
検索結果にある Node.js command prompt を実行しましょう。
コマンドプロンプトが表示されるので、npm install -g elm npm install -g elm@0.19.0-bugfix6 を入力し実行します。
※2019.05.25 現在、npm install -g elm を実行すると最新版である 0.19.0-no-deps がインストールされますが、elm make 等で「プロセスはファイルにアクセスできません。別のプロセスが使用中です。」といった不具合が発生します。その 1つ前の 0.19.0-bugfix6 ではこの不具合は発生しないので、こちらをインストールします。

C:\Users\win_user>npm install -g elm@0.19.0-bugfix6

※ win_user は自身のユーザ名を示します。これ以降は適宜読み替えてください。

---

これで elm のインストールが実行されます。
その後、問題がなければ最終的に下記のような表示が得られるはずです。

C:\Users\win_user>npm install -g elm@0.19.0-bugfix6
C:\Users\win_user\AppData\Roaming\npm\elm -> C:\Users\win_user\AppData\Roaming\npm\node_modules\elm\bin\elm

> elm@0.19.0-bugfix6 install C:\Users\win_user\AppData\Roaming\npm\node_modules\elm
> binwrap-install

+ elm@0.19.0-bugfix6
added 79 packages from 70 contributors in 30.021s

C:\Users\win_user>

上記と異なり npm ERR! や NOENT 、EACCESS などが表示されている場合は elm のインストールに失敗しています。
その場合は…エラーメッセージでググるなどしてどうにかしましょう。健闘を祈ります。

Q： ここで突き放すのか
A： これ書いてる人もよく分かってないので…

elm-format をインストールする

この節はオプションです。「ソースコードの整形は不要」という場合は飛ばして構いません。
ただし、以降の手順は elm-format がインストールされている前提で進めます。

Elm コードのフォーマッタである elm-format を elm 同様に npm でインストールします。
コマンドプロンプトで npm install -g elm-format を入力し実行しましょう。

C:\Users\win_user>npm install -g elm-format

問題がなければ最終的に下記のような表示が得られるはずです。

C:\Users\win_user>npm install -g elm-format
C:\Users\win_user\AppData\Roaming\npm\elm-format -> C:\Users\win_user\AppData\Roaming\npm\node_modules\elm-format\bin\elm-format

> elm-format@0.8.1 install C:\Users\win_user\AppData\Roaming\npm\node_modules\elm-format
> binwrap-install

+ elm-format@0.8.1
added 79 packages from 70 contributors in 20.28s

C:\Users\win_user>

VS Code をインストールする

https://code.visualstudio.com/Download から VS Code のインストーラをダウンロードしてインストールしましょう。

細かい手順については Visual Studio Code (Windows版) のインストール のエントリが詳しかったので
そちらを参考にしてください。

User Installer と System Installer (とインストーラなしの ZIP ファイル) がありますがお好みで。
迷う場合は User Installer にしましょう。

VS Code の日本語言語パックをインストールする

この節はオプションです。「英語完全にマスターした」という場合は飛ばして構いません。
ただし、以降の手順は日本語言語パックがインストールされている前提で進めます。

VS Codeで表示言語を変更するには の手順に従ってインストールしましょう。

Q： 丸投げ？
A： はい。

VS Code の Elm サポートプラグインをインストールする

拡張機能 ビューを表示し、検索用のテキストボックスに elm と入力しましょう。
検索結果にある elm の インストール をクリックすると
Elm サポートのプラグイン (以降 vscode-elm) がインストールされます。

インストールが終わったら右ペインの 再読み込みしてアクティブにする をクリックして
vscode-elm を有効にします。

vscode-elm のインストールはこれで OK です。

なお、vscode-elm の設定 (ファイル - 基本設定 - 設定 - 拡張機能 - Elm configuration) には
elm コマンドや elm-format コマンドのパスの項目がありますが、これらは設定不要です。
npm でグローバルインストールした際に各コマンドのインストールディレクトリ ³ が
PATH に追加されているためです。
何らかの事情で PATH への追加が失敗している場合のみ、コマンドのパスを設定しましょう。

Hello wolrd!

環境を構築したら動作確認しましょう。

プロジェクトディレクトリの作成と初期化

まず Elm のプロジェクト用のディレクトリを作成します。
ここでは C ドライブ直下に elm_from_vscode というディレクトリを作成します。

C:\Users\win_user>cd C:\

C:\>mkdir elm_from_vscode

C:\>

次に elm_from_vscode 内に移動し、プロジェクトディレクトリの初期化のため elm init を実行します。

C:\>cd elm_from_vscode

C:\elm_from_vscode>elm init
Hello! Elm projects always start with an elm.json file. I can create them!

Now you may be wondering, what will be in this file? How do I add Elm files to
my project? How do I see it in the browser? How will my code grow? Do I need
more directories? What about tests? Etc.

Check out <https://elm-lang.org/0.19.0/init> for all the answers!

Knowing all that, would you like me to create an elm.json file now? [Y/n]: 

elm.json を作成するかどうか確認されるので Y を入力して進めます。

Knowing all that, would you like me to create an elm.json file now? [Y/n]: Y
Okay, I created it. Now read that link!

C:\elm_from_vscode>

これで C:\elm_from_vscode ディレクトリに elm.json ファイルと src ディレクトリが作成されました。

Elm ソースファイルの作成と編集

VS Code に移り、メニューバーの ファイル - フォルダーを開く で表示されるダイアログで
C:\elm_from_vscode を選択して フォルダーの選択 をクリックします。

エクスプローラービューの src ディレクトリ上で右クリックし、
新しいファイル を選択して Elm のソースファイルを作成します。
ここでは Main.elm というファイル名にしましょう。

Main.elm を編集していきます。
まず下記の 1行だけ記述してください。

Main.elm

main = div [] [ text "Hello world!" ]

この状態で Alt + Shift + F を入力してください。
下記のように整形＋ module 文の追加 がされたでしょうか？

Main.elm

module Main exposing (main)


main =
    div [] [ text "Hello world!" ]

整形されたのであれば VS Code から elm-format コマンドを呼び出せています。
整形されなかった場合は elm-format コマンドの呼び出しに失敗していますので、
elm-format のインストールや VS Code の設定手順を見直してください。

次に、編集した Main.elm を保存します (既に保存していても問題ありません) 。
div と text の下に波線が引かれているでしょうか？

この時点でコンパイルエラーになっているので elm コマンドを呼び出せていることが分かります。
ただし Main.elm を実行できるようにしたいので修正しましょう。

main = の上の行で imp と打ち込んで Enter を入力してみてください。
補完が働いて import Name exposing (..) と入力され、Name の部分が選択状態になると思います。

選択されている Name の部分を Html に置き換えて保存しましょう。
div と text に引かれていた波線が消えるはずです。

これでコンパイルエラーのないコードができました。

Elm コードの実行

Elm のコードを実行してみます。
Elm Reactor を使うのが一番楽だと思うので、コマンドパレットから Elm Reactor を起動しましょう ⁴ 。

Ctrl + Shift + P を入力してコマンドパレットを表示し、
elm reactor start と打ち込んで Enter を入力します。

そうすると 出力 ビューが表示されます (でもなぜか何も出力されない…) 。

特に変化がないように見えますが、Web サーバが起動しているはずなので
Web ブラウザから http://localhost:8000/src/Main.elm にアクセスします。

上記のように Hello world! と表示されれば OK です。
これで動作確認は完了です。

不要であれば Elm Reactor を停止させておきましょう。
コマンドパレットで elm reactor stop と打ち込んで Enter を入力すれば停止します。

おわり

以上で Elm の環境構築は終わりです。
他にも色々便利な設定やプラグインはありますが、それらは実際に Elm に触れながら
追々導入していくとよいと思います (自分もこれから調べます) 。

参考

• Node.js / npmをインストールする（for Windows）
• Visual Studio Code (Windows版) のインストール
• VS Codeで表示言語を変更するには
• vscode-elm

1. 「最新版」で試したところ elm のインストールに失敗したことがありました。elm のインストールには最新の機能を必要としないので、無難に「推奨版」でやっていきましょう。 ↩

2. Elm には Windows 用公式インストーラ もありますが、これは elm コマンドのみをインストールするもので、その他の Elm 関連コマンドのインストールはできません。後々他のコマンドをインストールすることも考慮し、最初から npm を使用していきます。 ↩

3. C:\Users\win_user\AppData\Roaming\npm ↩

4. Elm Reactor についての説明は割愛します。説明を読むより、動かして触ってみる方が理解が早いと思うので。 ↩