elmとBootstrapやTailwind CSSを組み合わせて簡単なWebサービスを開発する方法
はじめに 私はブラウザ上で動く簡単なアプリを作る際にelmを用いることが多い。 elmはブラウザの状態とユーザーの入力を言語の機能とそのアーキテクチャで簡単に管理できるため、簡単なアプリであればほとんど迷うことがなく作りたいものが作れる点で気にいっている。 ただ最近では、elmの便利な状態管理の手法は JS のフレームワークにも導入され、React のコンポーネントを用いた UI 開発や JS のその他の資源と組み合わせることで効率的にフロントエンドを開発することが主流になってきている。 このような流れのためか、ここ数年はelmを用いた開発を行う人が極端に少なくなってきていると感じている。 ただフロントエンドの専門家ではない私からすると、フレームワークの選定に迷う必要がない点や、tsにするかjsにするか迷わなくて良い点や、Haskellライクな言語の楽さとelm-formatの利便性などの観点から考えると、簡単な Web アプリであれば依然としてelmを用いて開発を行うことは悪くない選択肢だと思っている。 この記事ではelmとBootstrapやelmとTailwind CSSを組み合わせたサンプルアプリの構築方法を解説する。 環境構築(Bootstrap 編) プロジェクトを作成 $ mkdir elm-bootstrap-sampleapp $ cd elm-bootstrap-sampleapp $ npm init -y bootstrap をインストール（参考） $ npm i --save-dev parcel $ npm i --save-dev bootstrap @popperjs/core elm をインストールして環境を構築 $ npm i --save-dev elm @parcel/transformer-elm $ npx elm init 必要なファイルを作成 $ touch src/index.html src/index.js src/index.scss src/Main.elm src/index.htmlを書く。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1....