とりあえず関東最速でElm+JSなアプリを作るためのレシピです

parcel

Webpackで設定ファイルを弄っていると一生終わりません。最速で作るにはparcel一択です。

parcelを導入

$ mkdir yourapp
$ npm init
$ npm install -D parcel-bundler

npmで公開しなければ以下のように private フラグを true にしておくとフィールドが減らせて楽です

parcelインストールまで完了したpackage.json

{
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  }
}

Elm実装

先に簡単なElmアプリを実装します。src ディレクトリを切って App.elm を作ります。ここでは0.19を使うこととします。

src/App.elm

module App exposing (..)

import Browser
import Html exposing (Html, div, input, text)
import Html.Events exposing (onInput)


main =
    Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model =
    { value : String
    }


init : Model
init =
    { value = "type something below"
    }



-- UPDATE


type Msg
    = UpdateModel String


update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateModel value ->
            { model | value = value }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ div [] [ text model.value ]
        , input [ onInput UpdateModel ] []
        ]

JS実装

index.js を作って下さい。 parcelを使っているのでJS側から直接Elmをrequireできます。

index.js

const { Elm } = require("./src/App.elm")

const app = Elm.App.init({
  node: document.getElementById('main')
})

HTML実装

最後にHTMLを作ります。
index.js と同じ階層に index.html を以下の内容で置きましょう。

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>YourApp</title>
</head>

<body>
  <div id="main"></div>
  <script src="./index.js"></script>
</body>
</html>

起動

start と build をコマンドとして追加しておきます。
test は一旦いらないので消してしまいましょう。

{
  "private": true,
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "parcel index.html --out-dir dist",
+   "build": "parcel build index.html --out-dir dist"
  },
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  }
}

あとは以下を実行すると起動できます。
起動と同時に node-elm-compiler のインストールが実行されます。

$ npm start

デフォルト設定であれば localhost:1234 にアクセスすると以下の画面が見れるはずです。

関東最速でElm+JSなアプリの開発環境を作る

parcel

Elm実装

JS実装

HTML実装

起動