以前にElmで簡単なTodoリストを作成しました。

【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る

今回はこのTodoリストの見栄えを良くしたいと思うのですが私はあまりスタイルが得意ではありません。。。
ですのでBootstrapを利用してスタイルを整えたいと思います。

Elmにはelm-bootstrapというBootstrapのパッケージがありますのでこちらを使います。

http://elm-bootstrap.info/

インストール

パッケージをインストールします。
インストールコマンドはelm installなので以下のようにパッケージ名を指定してインストールします。

$ elm install rundis/elm-bootstrap

インストールが無事完了するとelm.jsonにパッケージ名が追加されているかと思います。

"dependencies": {
        "direct": {
            "elm/browser": "1.0.1",
            "elm/core": "1.0.2",
            "elm/html": "1.0.0",
            "rundis/elm-bootstrap": "5.1.0"
            ...

Button

まずはボタンから。

View.elmを編集します。
以下を追加してBootstrapパッケージをimportしましょう。

import Bootstrap.Button as Button
import Bootstrap.CDN as CDN

次にview関数のdivタグを修正します。

view model =
    div []
        [ CDN.stylesheet
        , viewTable model.todos
        , Button.button [ Button.primary, Button.attrs [ onClick Add ] ] [ text "Add" ]
        ]

CDN.stylesheetを追加し、ボタンをBootstrapのButtonに変更しています。
Buttonの記述は少し複雑ですがBootstrapを使ったことがある人であれば意味は通じると思います。
インラインスタイルなどはonClickと同じようにButton.attrsに追加することで反映されます。

ElmReactorを起動して結果を確認しましょう。

$ elm reactor --port=3000

http://localhost:3000/src/Main.elm

にアクセスし、結果を確認します。

ボタンが見慣れたBootstrapのものに変更されています。

Table

次にTableをBootstrap化します。

先ほどと同じようにまずはimportを行います。

import Bootstrap.Table as Table

テーブルを表示する関数はviewTableと、tbodyを表示するviewTrに分けていますので、まずはviewTableから変更します。

Buttonの時と同じようにTable.tableとし、BootstrapのTableを使用します。
optionとしてstripedとhoverを設定していますが不要であれば削除しましょう。

viewTable : List Todo -> Html Msg
viewTable todos =
    Table.table
        { options = [ Table.striped, Table.hover ]
        , thead =
            Table.simpleThead
                [ Table.th [] [ text "title" ]
                , Table.th [] [ text "description" ]
                ]
        , tbody =
            Table.tbody [] (List.map viewTr todos)
        }

ほぼElmの記述と同じですのでここで詰まることはないかと思います。

続いてviewTr関数です。
こちらもほとんどElmの記述のままです。

viewTr : Todo -> Table.Row Msg
viewTr todo =
    Table.tr []
        [ Table.td [] [ text todo.title ]
        , Table.td [] [ text todo.description ]
        ]

変更が完了したらElmReactorで確認します。

Bootstrapのテーブルが反映されています。

まとめ

ElmでのBootstrap適用についてご紹介致しました。
elm-bootstrapを利用することでElmの記述からかけ離れることなく、Bootstrapを採用することができると思います。
ぜひ試してみてはいかがでしょうか。