elm

elmでwebアプリ作成 3 〜 elm+webpackでHello

webpack.config.jsが出来たので、まずはelmで最小限のアプリを書いて動作させて見ます。
この辺りはelm tutorialとほぼ一緒です。

ソースディレクトリを作ります。

$ mkdir src

src/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Elm SPA Sample</title>
    </head>
    <body>
        <div id="main"></div>
        <script src="/app.js"></script>
    </body>
</html>

src/index.js
ここはまだ仕組みがよくわかりません。エントリーポイントはこのindex.jsなのでまずここに入り、中でMain.elmを呼んでいます。embedというメソッドが魔法のようです。webpack.dev.jsにelmファイルのローディング方法とかを書いているので、webpackがうまくやってくれるということなのかな。

'use strict';

require('ace-css/css/ace.css');
require('font-awesome/css/font-awesome.css');

require('./index.html');

var Elm = require('./Main.elm');
var mountNode = document.getElementById('main');

var app = Elm.Main.embed(mountNode);

ここまで出来たら、次はelmのコードを書いていくのでパッケージをダウンロードしましょう。これもelm tutorialと一緒です。

$ elm-package install elm-lang/html

それから、勝手に生成されているelm-package.jsonのsource-directoriesを.からsrcに変更しましょう。

"source-directories": [
    "src"
],

src/Main.elm

module Main exposing (..)

import Html exposing (Html, div, text, program)


type alias Model =
    String

init : (Model, Cmd Msg)
init =
    ( "Hello", Cmd.none )

type Msg
    = NoOp

view : Model -> Html Msg
view model =
    div []
        [ text model ]

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none

main : Program Never Model Msg
main =
    program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

src/index.html, src/index.js, src/Main.elmが出来たので、動かしてみます。

以下のコマンドでビルド

# (webpackコマンドにパスが通っている場合はそのまんまwebpackだけで良い)
$ yarn webpack

成功すると、distフォルダが出来て、中に色々ファイルが生成されます。index.htmlだけそのままで、app.jsがwebpackでコンパイルされて生成されたエントリーポイントです。

以下のコマンドでdev server立ち上げ

# (さっきと同じく、パスが通っているならyarnは要らない)
yarn webpack-dev-server --port 3000

で、http://localhost:3000/へアクセスすると、Helloと表示されるはずです。

次はこのコマンドをyarnから実行できるようにし、さらに前回の記事で作ったjson serverと今回のwebpackサーバーとを一つのコマンドで同時に起動できるようにしていきます。
elmでwebアプリ作成 4

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です