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