Recommended
More Related Content
Similar to Elmでjavascript
Similar to Elmでjavascript (20)
Elmでjavascript
- 3. 自己紹介 contribute gentoo-haskellコミッタ 日本OpenSolarisユーザーグループ会 最近作ったもの Houbouブログ作成ルーツ Haskell Yesod + Elm https://github.com/calimakvo/houbou 3
- 4. なぜElmなのか… 4
- 8. elmコマンド コンパイル elm make パッケージ管理 elm init, install, brump,… インタラクティブ実行 elm repl ブラウザデバッグ elm reactor 8
- 9. elm init プロジェクトの作成 ~ $ mkdir jsproj/ ~ $ cd jsproj/ ~/jsproj $ elm init Hello! Elm projects always start with an elm.json file. I can create them! ... Knowing all that, would you like me to create an elm.json file now? [Y/n]: y Okay, I created it. Now read that link! Process /home/cuomo/node_modules/.bin/elm finished ~/jsproj $ 9
- 10. elm repl インタラクティブに実行や、関数の型の確認などができる Haskellユーザーにとってはとってもフレンドリ $ elm repl ---- Elm 0.19.1 ------------------------ Say :help for help and :exit to exit! .. ---------------------------------------- > 1 + 2 3 : number > "ABC" "ABC" : String > import Html > Html.div <function> : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg 10
- 11. elm reactor ブラウザデバッグのためのコマンド $ elm reactor Go to http://localhost:8000 to see your project dashboard. 11
- 15. サンプルコード 15
- 16. Code https://github.com/calimakvo/shizujs1.git $ npm install $ npm run build $ firefox sample.html 16
- 17. モジュール モジュールの宣言、利用するライブラリのインポートなどを行 う module名とファイル名は合わせる必要があります -- src/Counter.elm module Counter exposing (main) import Browser import Html exposing (Html, button, div, text) import Html.Events exposing (onClick) 17
- 18. Browser.element 埋め込み型アプリケーションを作成する場合、Browser.element を利用します SPAアプリケーションの場合、Browser.applicationを利用します main : Program Int Model Msg main = Browser.element { init = init , update = update , view = view , subscriptions = subscriptions } 18
- 19. Browser.elementの型 sandboxの強化版、初期化のFlagsを取ることと、モデルとコマ ンドのタプルを返すことが違います Browser.element : { init : flags -> ( model, Cmd msg ) , subscriptions : model -> Sub msg , update : msg -> model -> ( model, Cmd msg ) , view : model -> Html.Html msg } -> Program flags model msg 19
- 20. モデルの宣言 モデルの型を宣言します レコードアクセスが不要なら、これでも同じです type alias Model = { counter : Int } type alias Model = Int 20
- 21. Init(初期化) flag型をInt型と具体型にしてJavascriptからElmへ値を渡し、モ デルの初期状態を設定します init : Int -> (Model, Cmd Msg) init c = ( { counter = c }, Cmd.none ) 21
- 22. メッセージ Msg型を定義します、Cmd Increment のような感じでUpdateへ送 信されてきます type Msg = Increment | Decrement 22
- 23. モデル更新 メッセージによって、モデルを更新します update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of ... Decrement -> if model.counter > 0 then ( { model | counter = model.counter - 1 } , Cmd.none -- Taskを利用してコマンド発行可能です(ajax等) ) else (model, Cmd.none) 23
- 24. View更新 モデルが更新されると自動で呼び出されます HTMLっぽく見えますがすべて関数です、Msgを発行するので Html Msg 型だと思って問題ないと思います view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [] [ text (String.fromInt model.counter) ] , button [ onClick Increment ] [ text "+" ] ] 24
- 25. View更新 例えばdiv関数ですが、以下の型宣言を確認できます > import Html > Html.div <funciton> : List (Html.Attribute msg) -- divタグへ属性をセットできます -> List (Html.Html msg) -- Increment,Decrementのイベント -> Html.Html msg -- 上と同じ型を返す 25
- 26. Subscription javascriptランタイムから通知を受けないので今回はなにもしま せん、Sub.noneを返します ※ここで何かのコマンドを返すことによって、Updateが呼ばれるようになります subscriptions : Model -> Sub Msg subscriptions _ = Sub.none 26
- 29. ビルド Counter.elmをビルドして、counter.jsを出力させます index.htmlを出力しますが、今回はコンポーネントで利用するた めdivへカウンターサンプルを張り付かせます $ elm make src/Counter.elm --output=counter.js 29
- 30. Html ... <title>Counter Main</title> <script src="counter.js"></script> </head> <body> <h1>カウンターサンプル</h1> <div id="counter"></div> </body> <script type="text/javascript"> var app = Elm.Counter.init({ flags: 88 , node: document.getElementById('counter') }); </script> </html> 30
- 31. ブラウザでアクセスする 31
- 32. 別の場所で使いたければ増やすだけ <script type="text/javascript"> var app1 = Elm.Counter.init({ flags: 88 , node: document.getElementById('counter1') }); var app2 = Elm.Counter.init({ flags: 11 , node: document.getElementById('counter2') }); </script> 32
- 33. ブラウザでアクセスする 33
- 35. まとめ 35
- 39. 38
- 41. ありがとうございました 40