Elm 0.18で作っていたプロジェクトを0.19に上げてみる #Elm

これはなに

Elm 0.18で作っていたnekobitoという趣味で作っているアプリを0.19に上げました。

追記(elm-upgradeについて)

コメントいただいて気づいたのですが、elm-upgradeの存在を見逃していました…。elm-upgradeを利用すれば、下に書いてある修正はある程度自動で出来るようなので、全て頑張って手で書き換える必要はなさそうです。

試してみたところ、パッケージの整理（モジュールが移動されてしまったものは新しい方に置き換えたり)などが行われ、最終的に以下のようなメッセージが表示されました。親切ですが、全て自動で一発で置き換えられるという美味しい話ではありませんでした。

SUCCESS! Your project's dependencies and code have been upgraded.
However, your project may not yet compile due to API changes in your
dependencies.

See <https://github.com/elm/compiler/blob/master/upgrade-docs/0.19.md>
and the documentation for your dependencies for more information.

Here are some common upgrade steps that you will need to do manually:

- elm/core
  - [ ] Replace uses of toString with String.fromInt, String.fromFloat, or Debug.toString as appropriate
- undefined
  - [ ] Read the new documentation here: https://package.elm-lang.org/packages/elm/time/latest/
  - [ ] Replace uses of Date and Time with Time.Posix
- elm/html
  - [ ] If you used Html.program*, install elm/browser and switch to Browser.element or Browser.document
  - [ ] If you used Html.beginnerProgram, install elm/browser and switch Browser.sandbox
- elm/browser
  - [ ] Change code using Navigation.program* to use Browser.application
  - [ ] Use the Browser.Key passed to your init function in any calls to Browser.Navigation.pushUrl/replaceUrl/back/forward
- elm/url
  - [ ] Changes uses of Navigation.Location to Url.Url
  - [ ] Change code using UrlParser.* to use Url.Parser.*

前置き

趣味で作ってる超小規模ぺらぺらアプリなので、仕事でちゃんとしたアプリケーション作ってる場合はこれでいいのかわかりません。

こうすると良い、このガイドを読めなどあれば教えてほしいです。あと、今回対象のアプリはcreate-elm-appを使っています。

やったことざっくり

create-elm-appのバージョンをElm 0.19対応したものに上げる
create-elm-app nekobito-0.19して、新たにプロジェクトを作る
既存のnekobito下からsrc, tests, public ディレクトリと.git を新しいnekobito-0.19の方へコピー
既存のelm-package.jsonを見ながらElmパッケージをインストール
ビルドして出てくるエラーを地道に潰す

やったこと詳しく

ビルドして出てくるエラーを地味に潰す

ひたすら以下のリンクを見ながら対応していくだけです。

https://github.com/elm/compiler/blob/master/upgrade-docs/0.19.md

Html.programはBrowserの方へ移動されていた

I cannot find a `Html.programWithFlags` variable:

340|     Html.programWithFlags
         ^^^^^^^^^^^^^^^^^^^^^
The `Html` module does not expose a `programWithFlags` variable. These names
seem close though:

    Html.progress
    Html.details
    Html.param
    Html.article

Hint: Read <https://elm-lang.org/0.19.0/imports> to see how `import`
declarations work in Elm.

Html.programWithFlags相当の関数はBrowserの方へ移されたようです。

Browserをインポートして、Browser.elementに置き換えればOK。

style関数の仕様変更

style : List (String, String) -> Attribute msg becomes String -> String -> Attribute msg

とのこと。

div [] [
  style [
    ("margin", "10px"),
    ("padding", "5px")
  ]
]

↑0.18版でこういうのを書いていたとしたら、

0.19ではこうしないといけないってことですね。

div [] [
  style "margin" "10px"
  style "padding" "10px"
]

Shadowing

こういうエラーも出てきました。

-- SHADOWING ------------------------- /Users/gaaamii/nekobito-0.19/src/Main.elm

The name `note` is first defined here:

230|         note =
             ^^^^
But then it is defined AGAIN over here:

237|         Just note ->
                  ^^^^
Think of a more helpful name for one of them and you should be all set!

Note: Linters advise against shadowing, so Elm makes “best practices” the
default. Read <https://elm-lang.org/0.19.0/shadowing> for more details on this
choice.

エラーに出ているリンクを読みます。

https://elm-lang.org/0.19.0/shadowing

0.18でこう書いていたとしたら、

let txt = "hogehoge"
in
  case txt of
    Nothing ->
      ...
    Just txt ->
      ...

それはやめてこうしろということらしい。

let maybeTxt = "hogehoge"
in  
  case maybeTxt of
    Nothing ->
      ...
    Just txt ->
      ...

`(!)`が使えなくなった

(!)という関数がショートハンドとしてあったのですが、これは0.19から使えなくなったようです。久しぶりにElmのコードみるたびに「なんだこのびっくりマークは」みたいに感じていたので良いと思います。

-- 0.18だとこれを、
(model, Cmd.none)

-- こう書くことができていた
model ! []

感想

アプリ自体が小さく、コンパイル時のエラーも丁寧なのもあって変なハマり方はしませんでしたが、変わったところはけっこうあるので対応箇所が多いと大変そうだと感じました。

Elm 0.18で作っていたプロジェクトを0.19に上げてみる