以前にElmで簡単なTodoリストを作成しました。 【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る 今回はこのTodoリストの見栄えを良くしたいと思うのですが私はあまりスタイルが得意ではありません。。。ですのでBootstrapを利用してスタイルを整えたいと思います。 Elmにはelm-bootstrapというBootstrapのパッケージがありますのでこちらを使います。 http://elm-bootstrap.info/ インストール パッケージをインストールします。 インストールコマンドはelm installなので以下のようにパッケージ名を指定してインストールします。 インストールが無事完了するとelm.jsonにパッケージ名が追加されているかと思います。 Button まずはボタンから。 View.elmを編集します。 以下を追加してBootstrapパッケージをimportしましょう。 次にview関数のdivタグを修正します。 CDN.stylesheetを追加し、ボタンをBootstrapのButtonに変更しています。 Buttonの記述は少し複雑ですがBootstrapを使ったことがある人であれば意味は通じると思います。 インラインスタイルなどはonClickと同じようにButton.attrsに追加することで反映されます。 ElmReactorを起動して結果を確認しましょう。 http://localhost:3000/src/Main.elm にアクセスし、結果を確認します。 ボタンが見慣れたBootstrapのものに変更されています。 Table 次にTableをBootstrap化します。 先ほどと同じようにまずはimportを行います。 テーブルを表示する関数はviewTableと、tbodyを表示するviewTrに分けていますので、まずはviewTableから変更します。 Buttonの時と同じようにTable.tableとし、BootstrapのTableを使用します。 optionとしてstripedとhoverを設定していますが不要であれば削除しましょう。 ほぼElmの記述と同じですのでここで詰まることはないかと思います。 続いてviewTr関数です。 こちらもほとんどElmの記述のままです。 変更が完了したらElmReactorで確認します。 Bootstrapのテーブルが反映されています。 まとめ ElmでのBootstrap適用についてご紹介致しました。 elm-bootstrapを利用することでElmの記述からかけ離れることなく、Bootstrapを採用することができると思います。 ぜひ試してみてはいかがでしょうか。