elmで乱数を扱う

はじめに

6月のShinjuku.LTで話そうと思ってたけど 恥ずかしくて怖くて緊張して 話せなかった内容のelmの部分を書きます。 次回は7/20です。

shinjukult.netlify.com

年度末あたりに基礎からわかるElmを購入したものの全然読んでなかったので読み始めました。 ランダムな操作の紹介がテストの部分しかなかった(と思う)のでelmのそのあたりを調べました。

elmで乱数

ボタン駆動乱数

qiita.com

こちらの記事が最強に最高なのですが、 elmのバージョンが 0.18 だったので、 0.19 に書き換えました。

module MyRandom exposing (Model, Msg(..), init, main, subscriptions, update, view)

import Browser exposing (element)
import Html exposing (..)
import Html.Events exposing (..)
import Random


main =
    Browser.element
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }



-- MODEL


type alias Model =
    { dieFace : Int
    }


init : () -> ( Model, Cmd Msg )
init _ =
    ( Model 1, Cmd.none )



-- UPDATE


type Msg
    = Roll
    | NewFace Int


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Roll ->
            ( model, Random.generate NewFace (Random.int 1 6) )

        NewFace newFace ->
            ( Model newFace, Cmd.none )



-- SUBSCRIPTIONS


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



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ h1 [] [ text (String.fromInt model.dieFace) ]
        , button [ onClick Roll ] [ text "Roll" ]
        ]

変更点

• Html.program
  • Brower.element になりました
    • init の定義が init : flag -> ( Model, Cmd Msg ) に変わっています
    • 今は引数使わないので init : () -> ( Model, Cmd Msg ) にしてます
• toString
  • なくなったので String.fromInt に変更してます

これでボタン押すたびに1~6がランダムで出てきます

初期値をランダムにする

今のままだと初回は 1 しか出ないのでもう少しいじります。 init の結果の二つ目、Cmd Msg で初回に実行したいコマンドを実行できます。 Cmd Msg は update の結果の二つ目と同じなのでそのまま持ってくるだけですね。

init : () -> ( Model, Cmd Msg )
init _ =
    ( Model 1, Random.generate NewFace (Random.int 1 6) )

vimの練習するやつ

乱数も扱えるようになったし、vimで記号と数字をタイピングするのは相変わらず遅いし、記号と数字だけがひたすら出てくるタイピングゲームを書きました。

• netlify便利だわ
• NES.css 良いわ

qsk.netlify.com

よろしくおねがいします。

おわり

乱数を扱うのはやっぱり面倒だなあと思いました。 flags に Math.random() を渡せば良いのでは？と思ったけど完全に外道感あったのでやめた。 実際はどうなんでしょう？ Cmd/Sub がまだ全然わからない。 あと開発していったら update がすごい大きくなっていく気がするんだけど、そこはいい感じでモジュール分けてくのかな？ 処理の流れは少しわかってきたので書くのはだんだん楽しくなってきました。

次回のShinjuku.LTは フリーランスのPros/Cons みたいなお話をする予定です。（宣言） 何かしらは話します。