adash333/index.html_(Elm-bulma-browser-element)

## index.html_(Elm-bulma-browser-element)
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Main</title>
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
        <script defer
            src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
        <script src="main.js"></script>
    </head>

    <body>
        <div id="elm"></div>
        <script>
            // Elmアプリの初期化時にlocalStorageからinitial stateをゲットするとき以外は以下の2行は不要
            var storedState = localStorage.getItem('elm-todo-save');
            var startingState = storedState ? JSON.parse(storedState) : null;

            var app = Elm.Main.init({
                node: document.getElementById('elm'),
                flags: startingState
                // 特にlocalStorageを利用しない場合はflags: は以下のような書き方になる
                // flags: {greeting: "Hello Again, World!", times: 8, initializedAt : Date.now() }
            });
            // Elm から値を受け取る
            app.ports.setStorage.subscribe(function(state) {
                localStorage.setItem('elm-todo-save', JSON.stringify(state));
            });
            // Elm に値を返す
            app.ports.inPortName.send(somdeData);
        </script>
    </body>
</html>

## src_Main.elm_(template)
port module Main exposing (..)

import Browser
import Browser.Dom as Dom
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Keyed as Keyed
import Html.Lazy exposing (lazy, lazy2)
import Json.Decode as Json
import Task


---- PROGRAM ----


main : Program Flags Model Msg
main =
    Browser.element
        { init = init
        , view = view
        , update = updateWithStorage
        , subscriptions = subscriptions
        }


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

port setStorage : Model -> Cmd msg


{-| We want to `setStorage` on every update. This function adds the setStorage
command for every step of the update function.
-}
updateWithStorage : Msg -> Model -> ( Model, Cmd Msg )
updateWithStorage msg model =
    let
        ( newModel, cmds ) =
            update msg model
    in
        ( newModel
        , Cmd.batch [ setStorage newModel, cmds ]
        )


-- MODEL

type alias Model = { ... }

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

-- UPDATE

type Msg = Reset | ...

update : Msg -> Model -> Model
update msg model =
  case msg of
    Reset -> ...
    ...


-- VIEW

view : Model -> Html Msg
view model =
  ...
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Main</title>
	<link rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
	<script defer
	src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
	<script src="main.js"></script>
	</head>

	<body>
	<div id="elm"></div>
	<script>
	// Elmアプリの初期化時にlocalStorageからinitial stateをゲットするとき以外は以下の2行は不要
	var storedState = localStorage.getItem('elm-todo-save');
	var startingState = storedState ? JSON.parse(storedState) : null;

	var app = Elm.Main.init({
	node: document.getElementById('elm'),
	flags: startingState
	// 特にlocalStorageを利用しない場合はflags: は以下のような書き方になる
	// flags: {greeting: "Hello Again, World!", times: 8, initializedAt : Date.now() }
	});
	// Elm から値を受け取る
	app.ports.setStorage.subscribe(function(state) {
	localStorage.setItem('elm-todo-save', JSON.stringify(state));
	});
	// Elm に値を返す
	app.ports.inPortName.send(somdeData);
	</script>
	</body>
	</html>
	port module Main exposing (..)

	import Browser
	import Browser.Dom as Dom
	import Html exposing (..)
	import Html.Attributes exposing (..)
	import Html.Events exposing (..)
	import Html.Keyed as Keyed
	import Html.Lazy exposing (lazy, lazy2)
	import Json.Decode as Json
	import Task


	---- PROGRAM ----


	main : Program Flags Model Msg
	main =
	Browser.element
	{ init = init
	, view = view
	, update = updateWithStorage
	, subscriptions = subscriptions
	}


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

	port setStorage : Model -> Cmd msg


	{-\| We want to `setStorage` on every update. This function adds the setStorage
	command for every step of the update function.
	-}
	updateWithStorage : Msg -> Model -> ( Model, Cmd Msg )
	updateWithStorage msg model =
	let
	( newModel, cmds ) =
	update msg model
	in
	( newModel
	, Cmd.batch [ setStorage newModel, cmds ]
	)



	-- MODEL

	type alias Model = { ... }

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

	-- UPDATE

	type Msg = Reset \| ...

	update : Msg -> Model -> Model
	update msg model =
	case msg of
	Reset -> ...
	...


	-- VIEW

	view : Model -> Html Msg
	view model =
	...