関東最速でElm+JSなアプリを作る
関東最速でElm+JSなアプリを作る:
とりあえず関東最速でElm+JSなアプリを作るためのレシピです
Webpackで設定ファイルを弄っていると一生終わりません。最速で作るにはparcel一択です。
npmで公開しなければ以下のように
先に簡単なElmアプリを実装します。
最後にHTMLを作ります。
あとは以下を実行すると起動できます。
起動と同時に
デフォルト設定であれば
とりあえず関東最速でElm+JSなアプリを作るためのレシピです
parcel
Webpackで設定ファイルを弄っていると一生終わりません。最速で作るにはparcel一択です。parcelを導入
$ mkdir yourapp $ npm init $ npm install -D parcel-bundler
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, input, div, 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 にアクセスすると以下の画面が見れるはずです。
コメント
コメントを投稿