Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

IzumiSy
Elmエンジニャー / https://dev.to/izumisy
https://izumisy.work
fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away