40
35

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 5 years have passed since last update.

Elm3(予備)Advent Calendar 2018

Day 1

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

Last updated at Posted at 2018-12-01

正式なタイトルは「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 という気運があるようだが…。

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)」と「最新版」がありますが、ここでは「推奨版」を選択してください 1

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

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

elm をインストールする

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

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!NOENTEACCESS などが表示されている場合は elm のインストールに失敗しています。
その場合は…エラーメッセージでググるなどしてどうにかしましょう。健闘を祈ります。:pray:

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

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

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

Elm コードのフォーマッタである elm-formatelm 同様に 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 InstallerSystem Installer (とインストーラなしの ZIP ファイル) がありますがお好みで。
迷う場合は User Installer にしましょう。

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

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

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

Q: 丸投げ?
A: はい。

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

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

image.png

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

image.png

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

なお、vscode-elm の設定 (ファイル - 基本設定 - 設定 - 拡張機能 - Elm configuration) には
elm コマンドや elm-format コマンドのパスの項目がありますが、これらは設定不要です。
npm でグローバルインストールした際に各コマンドのインストールディレクトリ 3
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 を選択して フォルダーの選択 をクリックします。

image.png

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

image.png

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 を保存します (既に保存していても問題ありません) 。
divtext の下に波線が引かれているでしょうか?

image.png

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

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

image.png

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

image.png

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

Elm コードの実行

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

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

image.png

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

image.png

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

image.png

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

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

おわり

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

参考

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

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

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

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

40
35
3

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
40
35

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?