ElmをWindows + Visual Studio Codeの環境で開発していて便利だったことまとめ

概要

ElmでWebページを作ってみて便利だったもののまとめ。

• 作成したページ：惨劇RoopeRオンラインツール
• ソース

環境

バージョン

• Windows 10 Home
• Vagrant 2.2.6
• virtualbox 6.0.14
• Ubuntu 18.04 LTS (Bionic Beaver)
• Docker version 19.03.2, build 6a30dfc
• docker-compose version 1.24.1, build 4667896b

Elm用のVSCode設定

Elm用の拡張機能をインストール

• elmtooling.elm-ls-vscodeを使用。一番上に出てくる、elmのマークのsbrink.elmはdeprecatedになってた。
  

拡張機能のために、elmをグローバルインストール

• 手軽に使い始めたかったので。

$npm install -g elm elm-format elm-test
$npm ls -g --depth=0
+-- elm@0.19.1-3
+-- elm-format@0.8.2
+-- elm-test@0.19.1

• 設定でelmPathを指定したあげればローカルインストールでもできるぽい。
  

VSCodeのショートカット

指定行移動 [Ctrl + G]

• elmはコンパイラがエラーの行数を出してくれるので、非常によく使った
  

指定シンボルに移動 [Ctrl+Shift+O]

• Elmのコードって縦に長くなるので。。特にMsgに移動するのによく使った気がする。
  

シンボルをリネーム (直したい名前の上にカーソルがある状態で[F2]）

• 登場箇所を一括で直してくれる。置換よりも便利。

Elmの追加パッケージ

$elm install elm-community/html-extra
$elm install elm-community/list-extra
$elm install elm-community/maybe-extra
$elm install elm-community/json-extra
$elm install NoRedInk/elm-json-decode-pipeline

elm-community/html-extra

• doc
• onChange用を使いたかった。
  • inputタグでも、onInputだと、iphoneで入力に不具合が起きたのでonChangeのほうがよい。。。

import Html.Events.Extra exposing (onChange)
import Html.Extra as ExHtml

select : String -> (String -> msg) -> String -> List ( String, String ) -> Html msg
select nodeKeySuffix chgMsg selectedKey rs =
    Keyed.node "select"
        [ onChange chgMsg ]
    <|
        List.indexedMap (\i r -> keyedOption i nodeKeySuffix r selectedKey) rs

• doc
• あとはnothingなんかも。text ""より、こっちのほうが明示的で好き。

mastermindSheets : Model -> Html msg
mastermindSheets model =
    section [ class "section" ]
        [ case model.room of
            Just room ->
                Script.scriptView room.script

            Nothing ->
                ExHtml.nothing
        ]

elm-community/list-extra

• doc
• 色々便利そうなの揃ってる
  • 今回は、removeを使いたかった。

import List.Extra as ExList


exceptList : List a -> List a -> List a
exceptList list target =
    exceptListHelp list target


exceptListHelp : List a -> List a -> List a
exceptListHelp remaining accumulator =
    case remaining of
        [] ->
            accumulator

        first :: rest ->
            exceptListHelp rest (ExList.remove first accumulator)

elm-community/maybe-extra

• docs
• ExMaybe.valuesが便利だった。
  • 例えば、[Just 1, Nothing, Just 2] を [1,2]に変換できる。
• ExMaybe.isJustも便利に使った。

import Maybe.Extra as ExMaybe


getSelectedBoardComponentTypeAll : List Hand -> List BoardType
getSelectedBoardComponentTypeAll list =
    list
        |> List.map
            (\h ->
                case h.onComponent of
                    Just (BoardComponentType t) ->
                        Just t

                    _ ->
                        Nothing
            )
        |> ExMaybe.values

elm-community/json-extra

• docs
• Maybe型のエンコードってどうやってやるんだっけ？？と。

import Json.Encode as E
import Json.Encode.Extra as ExEncode

encode : Hand -> E.Value
encode { id, formId, handType, onComponent, isUsed } =
    E.object
        [ ( "id", E.string id )
        , ( "formId", E.int formId )
        , ( "handType", E.string <| typeToString handType )
        , ( "onComponent", ExEncode.maybe (E.string << componentTypeToString) onComponent )
        , ( "isUsed", ExEncode.maybe E.bool isUsed )
        ]

NoRedInk/elm-json-decode-pipeline

• docs
• デフォルトのデコーダより見やすいなーと。

import Json.Decode as D
import Json.Decode.Pipeline as Pipeline

type ComponentType
    = CharacterComponentType CharacterType
    | BoardComponentType BoardType


type alias Hand =
    { id : String
    , formId : Int -- 選択された手札の番号
    , handType : HandType
    , onComponent : Maybe ComponentType
    , isUsed : Maybe Bool
    }

decoder : D.Decoder Hand
decoder =
    D.succeed Hand
        |> Pipeline.required "id" D.string
        |> Pipeline.required "formId" D.int
        |> Pipeline.required "handType" (D.map (typeFromString >> Maybe.withDefault ParanoiaPlus1) D.string)
        |> Pipeline.optional "onComponent" (D.map componentTypeFromString D.string) Nothing
        |> Pipeline.optional "isUsed" (D.maybe D.bool) Nothing

パッケージ検索

• Elm Search
  • 欲しい関数の型を指定して検索できる

Vagrant上でのテスト時の注意

• WindowsのVagrant上でテストを動かしているために発生する
• 直接動かしている人ならおそらく不要
• --watchオプションをつけても、そのままでは動かない。
  • chokidarにpollingしてやる設定を行う必要がある。

Dockerfile

RUN yarn add --dev elm-test
RUN sed -i -e "s/\(cwd: projectRootDir,\)/\1\n    usePolling: true, /g" /app/node_modules/elm-test/lib/elm-test.js

cd $docker_dir && docker-compose -f $composeFile run $container_name yarn run elm-test --watch

参考

【Windows版】VS Code キーボードショートカット一覧 （オススメ付き）
Elmのライブラリの探し方