Zenn
📝

初心者のelm入門

2021/02/23に公開
Elm
tech

elmとは

関数型プログラミングでjavascriptを記述できるナイスな奴
https://guide.elm-lang.org/install/elm.html

前提

  • elmに初めて触れつつ本記事を書くので、導入手順と簡単なサンプルが主な内容
  • 環境構築手順などはほぼ省略

環境構築

elmインストール

Windows、centos、ubuntu、ついでにmac、どのOSでもシステム汚す系パッケージ管理ツールとユーザー環境にインストールする系（システム汚さない系）パッケージ管理ツールがあるので好きなものを使ってインストールするだけ
※お勧めはシステム汚さない系だけどよく分からない人はOSに合ったインストーラーをDLするのが無難

npmのインストール

elm同様にお好きな方法でnodejsをインストール

vscodeインストール

入れてない人は前述のパッケージ管理ツールから入れるか公式からDLしてインストールし、公式拡張機能を入れる

サンプルプログラム

elmプロジェクト作成

powershell
mkdir /elm
mkdir /elm/elm1
elm init
npm install -g elm-test elm-format

コード

とりあえずサンプルコードを動かす

src/Main.elm
module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
-- MAIN
main =
  Browser.sandbox { init = init, update = update, view = view }

-- MODEL
type alias Model = Int
init : Model
init =
  0

-- UPDATE
type Msg
  = Increment
  | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

-- VIEW
view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]
command
elm reactor

Go to http://localhost:8000 to see your project dashboard.
と出るのでアクセスすると何か整った画面が表示されるのでsrcを押して

なんか整った画面

作ったファイル名（Main.elm）が表示されるのでそれも押してみると
妙にサッパリした画面

elmで作った画面が表示される
すげえ！

ソースを見てみるとやたらと長ったらしいjavascriptと<pre id="elm"></pre>タグだけのhtmlが生成されていました

プログラム開発

elmの基礎的な概念の把握

Model — アプリケーションの状態
View — 状態を HTML に変換する方法
Update — メッセージを使って状態を更新する方法

MVCでいうとViewがV、ModelはDB[^1]（というよりreduxのstoreが正しい）、UpdateがCという感じ

Webページを作る

このあたりをコピペしても動かないので、さらに基礎のhttps://elm-lang.org/tryを参考に作る

elmモジュールのインストール

command
elm install elm/json
elm install elm/http

ただ変数を使うだけのページ

module Index exposing (..)
import Browser
import Html exposing (..)
import Html.Events exposing (..)

--変数（？）を定義して使う
one : String
one = 
  "1"

two : Int
two = 
  2
main =
  div [] [
    h1 [] [ text one]
    ,h1 [] [ text (String.fromInt(two))]
  ]

webページを作る（イベント付き）

公式マニュアルの説明を流し読みしつつサンプルコードを参考にonChangeイベントを追加して以下の画面を作る
すげえだろ
雰囲気と行き当たりばったりでコードの作成

code
module Elm exposing (..)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Browser exposing (Document)
import Main exposing (Model)

main =
  Browser.sandbox { init = initSurube, update = updateMan, view =viewDesu }

type alias Profile =
    { name : String
    , age : Int
    }

type Msg =
  Pattern1 String
  | Pattern2 String

initSurube : Profile
initSurube =
  {
    name = "lfz"
    ,age = 22
  }

updateMan : Msg -> Profile -> Profile
updateMan msg profile =
  case msg of
    Pattern1 newInput ->
      {profile | name = newInput}

    Pattern2 newInput ->
      {profile | age = profile.age + 1}



viewDesu : Profile -> Html Msg
viewDesu profile =
  div [] [
    div [] [text profile.name ]
    ,div [] [text (String.fromInt(profile.age)  ++ "歳" )  ]
    ,input [onInput Pattern1] []
    ,input [onInput Pattern2] []
  ]

所感

  • caseの部分にelixirを感じた
  • pythonやnimのようにインデントがおかしいとエラーメッセージが出る
    ※elixirとpython(nim)の両方の言語を触る人でドキュメント読まないタイプは混乱する
  • react-redux使ってゴチャゴチャすると感じている人にはヒットしそう
  • 目先の収入を増やしたいならreact-reduxを使いこなす方が良い、遊ぶならelm

Discussion