Edited at

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

とりあえず関東最速で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>



起動

startbuild をコマンドとして追加しておきます。

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 にアクセスすると以下の画面が見れるはずです。

Peek 2018-12-23 13-25.gif