ELMについて

ELMでフロントエンド開発はどうかと思い、試してみている。

〇まずは、設定
npmをインストールしたら

コマンドプロンプトで

npm install -g elm

npm install -g elm-format

・VS　Codeのインストール＞拡張機能 ビュー＞検索用のテキストボックスに elm ＞elm の インストール 

・日本語にするには［EXTENSIONS］ビューの一番上にある検索ボックスで「japanese」などを検索

・ファイル - 基本設定 - 設定＞右上の {} をクリック＞

ユーザー設定

{

    "elm.compiler": "C:\\Users\\win_user\\AppData\\Roaming\\npm\\elm.cmd",

    "elm.formatCommand": "C:\\Users\\win_user\\AppData\\Roaming\\npm\\elm-format.cmd",

}

〇実際に使ってみる

・ Elm のプロジェクト用のディレクトリを作成、そこでelm init を実行

　elm.json を作成するかどうか確認されるので Y を入力

・エクスプローラービューの src ディレクトリ上でElm のソースファイルを作成

・ Alt + Shift + F を入力すると module 文等が追加されます

・Ctrl + Shift + P を入力してコマンドパレット表示＞elm reactor start 

　これでWeb サーバが起動し http://localhost:8000/src/elmファイル名

　でアクセスできる

・不要であれば Elm Reactor を停止させる。コマンドパレットで elm reactor stop 

以上はhttps://qiita.com/ossan_pg/items/5c3ce00b74036139507eを参考にさせていただきました。とても詳しく説明されており助かりました。

〇elm makeについて

elm makeを使ってElmプロジェクトをビルドし、HTMLファイルなど作成できます。

elm make Main.elm --output=main.html

なお、足りないパッケージがあるとメッセージで要求されるので

elm install elm/http

elm install elm/json

のようにして、追加していく必要があります。

https://guide.elm-lang.jp/install.htmlを参考にさせていただきました。