初学者がelm-workshopを通じてElmを学ぶ

Elm初心者です。
しかし、初心者という立場だと何を学べばいいかわからなくなりがちです。
自分も、はじめAltJSの一つだと考えて、node向けにビルドしてまずは標準出力にHello Worldかみたいに考えて初めての一歩を踏み間違えて消耗しました。

そこで、elm-workshopです。

https://github.com/rtfeldman/elm-workshop

これは、ElmHubをいうGitHub APIを使ったのElmのアプリケーションを組み立てていくチュートリアルで、基本的なことを穴埋め形式で学ぶことができます。
自分は見てませんが、8時間に及ぶ動画もあります(有料)

準備

readmeのGetting Startedに書いてある通りに環境を用意します。

node v6.9.2以上
お好みのエディタにElmのパッケージの導入(自分はVSCodeにelmというプラグインを入れました)
elm-formatをインストール(jsでいうところのprettierみたいなもので非常に便利)
依存のインストールnpm install -g elm elm-test elm-css elm-live@2.6.1(自分はelmはbrewで入れてたので、他のライブラリをyarnで導入しました)

レポジトリのクローン

git clone https://github.com/rtfeldman/elm-workshop.git
cd elm-workshop

GitHubのSearchAPIを使うために、github.com/settings/tokens/newにアクセスして、トークンを取得します。Token descriptionと書いてあるところにElm Workshopなどのわかりやすい名前を入力し、取得したトークンをプロジェクトのルートにAuth.elmとして配置します。

Auth.elm

module Auth exposing (token)


token =
    -- あなたのトークン
    "abcdef1234567890abcdef1234567890abcdef12"

依存をインストールして、セットアップが完了してるか確認します。
以下の画面が表示されたら、part1に進みます。

elm-package install --yes
elm-live Main.elm --open --pushstate --output=elm.js

PART 1

自分が書いた回答を一つ一つ貼っていくのが芸がないので、とりあえずPART 1だけ見てみます。
最終的には、PART14まであり、jsとのやりとりの方法やテスト、elm-cssまで一つのアプリケーション構築を通して学べます。

elm-liveで立ち上げます。
ライブリロードです。

$ cd part1
$ elm-package install
$ elm-live Main.elm --open --pushstate --output=elm.js

Main.elmを見ると、TODOがあります。
これを1つ1つクリアして行きながら学ぶ形になります。

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)


main =
    div [ class "content" ]
        [ header []
            [ -- TODO wrap this text in an <h1>
              text "ElmHub"
            , span
                [-- TODO give this span a class="tagline" attribute.
                 --
                 -- HINT: look at how our <div class="content"> does this above.
                ]
                [{- TODO put some text in here that says:
                    "Like GitHub, but for Elm things."
                 -}
                ]
            ]
        ]

TODOを穴埋めすると以下のようになります。

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)


main =
    div [ class "content" ]
        [ header []
            [ h1 [] [ text "ElmHub" ]
            , span
                [ class "tagline" ]
                [ text "Like GitHub, but for Elm things." ]
            ]
        ]