ワイのElmデビュー【前編】

「純粋関数型言語と参照透過性」の続きやで。
別に前の記事は読まんでも大丈夫やけどな。

いつものブラック会社にて

ワイ「あー」
ワイ「今日はやることない日やな」

社長「（そんな日はないで・・・）」

ワイ「Twitterでもしよか」
ワイ「・・・あっ、せや！」
ワイ「昨日ハスケル子ちゃんが言うてたElmいう言語でも勉強してみよか！」

Elmのお勉強開始

ワイ「Elm-jpいう日本のコミュニティがあって、その人らのサイトに公式ドキュメントの日本語版があるらしいんや」
ワイ「このサイトやな」
ワイ「お、なんや可愛いヤギさんの写真が出てきたで」
ワイ「これは違うサイトを開いてもうたかな？」

Elm-jp は日本を活動拠点とする、Elmユーザーの集まりです。

ワイ「いやいや、このサイトで合ってるみたいや・・・」
ワイ「ほな公式ドキュメント翻訳プロジェクトってやつを読んでいこか」
ワイ「・・・ふむふむ」
ワイ「なんか翻訳文なのにムッチャ読みやすいな」
ワイ「もともと日本語で書かれてる文章みたいや」
ワイ「これはありがたいこっちゃで・・・」

ワイ「なになに」
ワイ「GitHubからサンプルコードをクローン出来るんやな」
ワイ「早速クローン、と」
ワイ「おお、色んなサンプルコードが入っとるな」
ワイ「シンプルなコードやからザコーダーのワイでもけっこう読めるで」

なんか作ってみる

ワイ「ほな、サンプルコードを元に」
ワイ「何か簡単なものでも作ってみよか」
ワイ「・・・よっしゃ、ワイが敵と戦うゲームでも作ろか」
ワイ「ワイと敵がおって、攻撃しあって体力を奪い合うゲームや」

ワイ「ほな、ワイっていうキャラクターと敵っていうキャラクターの」
ワイ「体力とかそういう状態を管理していかなあかんわけや」

ワイ「Elmには再代入いう概念がないらしいけど、そんなんでどうやってキャラクターの状態を管理していくんやろ？」
ワイ「キャラクターは攻撃を受けたらHPが減るやん？」
ワイ「その状態変化を、再代入なしにどうやってプログラミングすんねやろ」
ワイ「ハスケル子ちゃん曰く、そこはやってみんと分からんらしいから、とりあえず作っていこか」

ワイ「Elmは静的型付き言語やから、まずは型の定義をキッチリするとええらしいな」
ワイ「やってみよか」
ワイ「ほなまずは、状態を意味するModel型を定義すればええんやな」
ワイ「ワイっていうキャラと敵っていうキャラの状態を管理していきますよ、と」

type alias Model =
    { wai : Character
    , teki : Character
    }

ワイ「こうやな」

ワイ「そんで、次はそのキャラクターってのは何なのかを定義するで」
ワイ「せやから、Character型っていう自作の型を定義すんねや」

type alias Character =
    { name : String
    , hp : Int
    , offensivePoint : Int
    }

ワイ「キャラクターいうのは、名前とHPと攻撃力を持ってるやつですよ、と」
ワイ「こうやな」

ワイ「なんか設計書を書いてるみたいやな」

ワイ「次はModelの初期状態をinitっちゅう値として設定すんねやな」

init : Model
init =
    { wai =
        { name = "ワイ"
        , hp = 1000
        }
    , teki =
        { name = "敵"
        , hp = 2000
        }
    }

ワイ「waiの表示名はワイで、HPは1000」
ワイ「tekiの表示名は敵で、HPは2000」
ワイ「これでよし、と」
ワイ「保存や」

ワイ「お、コンパイルエラーが出てもうた」

型の不一致
ヒント：offensivePointがないように見えます。

ワイ「おう、そういえばまだ攻撃力の値を書いてなかったわ」
ワイ「なるほど、さっき定義した型のとおりにコード書かんと怒られるんやな」
ワイ「親切なもんやで。」
ワイ「これが静的型付き言語の恩恵やな」
ワイ「設計書の通りにコーディングせんかったら怒ってもらえるなんて、ワイのようなザコーダーにもぴったりや」

ビューを書く

ワイ「ほんで次は、view関数の中にHTMLのタグみたいなんを書くんやな」
ワイ「これはちょっと書くの面倒そうやから」
ワイ「HTMLからElmのコードに変換してくれるAtom拡張機能を使って変換や」

<ul>
    <li>
        <div>ワイ</div>
        <div>HP: 1000</div>
        <button>攻撃</button>
    </li>
    <li>
        <div>敵</div>
        <div>HP: 2000</div>
        <button>攻撃</button>
    </li>
</ul>

ワイ「これが」

    ul []
        [ li []
            [ div [] [ text "ワイ" ]
            , div [] [ text "HP: 1000" ]
            , button [] [ text "攻撃" ]
            ]
        , li []
            [ div [] [ text "敵" ]
            , div [] [ text "HP: 2000" ]
            , button [] [ text "攻撃" ]
            ]
        ]

ワイ「こう変換されるんや」

ワイ「（ちなみにこのAtom拡張機能はワイが作ったんや）」
ワイ「（Elmほぼ書いたこと無いのにな・・・）」
ワイ「（設定ムチャクチャや・・・）」

ワイ「ほんで、名前とかHPを動的に表示せんといかんから」

text "ワイ"

ワイ「の部分は」

text model.wai.name

ワイ「に変更や」
ワイ「あと、」

text "HP: 1000"

ワイ「の部分は」

text ("HP: " ++ model.wai.hp)

ワイ「に変更やな」
ワイ「おっと、またコンパイルエラーが出たで」

型の不一致
String.fromIntを使って文字列に変換してみますか？

ワイ「なるほど、HPは数値やから文字列に変換してから表示せなあかんのか」
ワイ「相変わらずエラーが親切やで」

text ("HP: " ++ String.fromInt model.wai.hp)

ワイ「こうやな」

ワイ「ほんで、攻撃ボタンをクリックすると」
ワイ「ワイの攻撃力の分だけ敵のHPが減るようにしたいんや」
ワイ「それはどうすればええねや？」

ケル子ちゃんに聞いてみる

ワイ「お〜い、ハスケル子ちゃん」

ハスケル子「はい」

ワイ「うーんと・・・」
ワイ「攻撃したらHPを減らしたいんや」

ハスケル子「・・・」
ハスケル子「なんの話ですか」
ハスケル子「よくそれで伝わると思いましたね」

ワイ「ごめん、うまく説明できひんねや・・・」

ハスケル子「もういいです、コード見ます」

ワイ「あっでも、もうすぐ定時やから明日でええで」

ハスケル子「大丈夫です。本気出してすぐ終わらせます」
ハスケル子「ちょっと、これ外しますね」

ワイ「お、おう」
ワイ「（やっぱり両腕に3つずつApple Watchを着けてると邪魔なんやな・・・）」

ハスケル子「よいしょ、っと」

ガチャン！！（床が砕ける音）

ワイ「！？」
ワイ「（おいおい、今までこんな重いApple Watchを着けてコーディングしとったっちゅうんか・・・！？）」

ハスケル子「急いでコード読みますね・・・」

ワイ「（は、速い！）」
ワイ「（凄い眼球の動きや・・・！）」
ワイ「（これが本来の力を解放したハスケル子ちゃんなんか・・・）」

社長「（Apple Watch関係あらへん）」
社長「（ていうかハスケル子ちゃん、平気な顔して会社の床を砕きよるな・・・）」

ハスケル子「あ、この部分ですね」
ハスケル子「ワイさんの攻撃ボタンにonClick属性をつける感じで、値はWaiAttackとかってしておけば、クリックと連動してキャラクターの状態を更新できます」

button [ onClick WaiAttack ] [ text "攻撃" ]

ハスケル子「こうですね」
ハスケル子「あとはHPを減らす処理をupdate関数の中に書いてください」

ワイ「おう、おおきにやで」

ワイ「update関数の中で、」
ワイ「攻撃ボタンクリック後の状態・・・つまり新しいModelがどんな感じになるんかを書けばええんやな」

ワイ「ほな、ワイが攻撃した場合は敵のHPを減らす・・・」
ワイ「逆に、敵が攻撃した場合なら、ワイのHPを減らす・・・と」

ワイ「それを書いていこか・・・」

〜後編に続く〜

後編書いたで

ワイのElmデビュー【後編】

追記: おすすめ記事

Elmで体験する関数型言語の面白さ
後編の前にこの記事を読んどくとええかもしれん。