日々新しい技術が生み出され、トレンドが目まぐるしく移り変わる現在のフロントエンド開発環境においては、TypeScriptが最も大きくかつ拡大中のコミュニティと言えるでしょう。となれば反骨精神を持つプログラマとして、今さらながらElmに手を出し始めるのも自然の摂理ではないでしょうか。しかし、単に逆張りを狙うのでは面白みが足りません。ある程度流行に乗っておきつつ、奇抜な組み合わせを採用することで学友や同僚を牽制していきましょう。この記事では、denoとviteを使用してElmの環境を構築し、最終的にdeno Deployへデプロイするまでを解説します。
<h1 id="%E4%B8%8B%E6%BA%96%E5%82%99" data-line="2" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%8B%E6%BA%96%E5%82%99" aria-hidden="true"></a> 下準備</h1>
まずは下準備としてdenoをインストールしておきます。
<h1 id="%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83%E6%A7%8B%E7%AF%89" aria-hidden="true"></a> 環境構築</h1>
<h2 id="deno-%2B-vite" data-line="6" class="code-line">
<a class="header-anchor-link" href="#deno-%2B-vite" aria-hidden="true"></a> deno + vite</h2>
まずはdenoで以下のコマンドを実行します。project-nameで指定した名前のディレクトリがつくられます。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="8">deno run -A npm:create-vite-extra@latest --template deno-vanilla-ts
</code></pre></div>作成したディレクトリに移動し、<code>deno task dev</code>を実行すると<code>localhost:5173</code>で以下のようなサイトが開きます。
<img src="https://res.cloudinary.com/zenn/image/fetch/s--1WXOkfoI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/15c8b9623f4a0afe51f033ca.jpg%3Fsha%3D36f1a0b65d26b0d3db14ed491220e558ca1be2ff" alt="Vite + TypeScript" loading="lazy" class="md-img">
<h2 id="vite-plugin-elm" data-line="16" class="code-line">
<a class="header-anchor-link" href="#vite-plugin-elm" aria-hidden="true"></a> vite-plugin-elm</h2>
vite経由でElmを使うため、Elm本体と<a href="https://github.com/hmsk/vite-plugin-elm" target="_blank" rel="nofollow noopener noreferrer">vite-plugin-elm</a>をインストールします。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="18">deno install npm:vite-plugin-elm
deno install --allow-scripts=npm:elm@0.19.1-6
</code></pre></div>そして<code>vite.config.ts</code>に以下を追記:
<div class="code-block-container">
<div class="code-block-filename-container">vite.config.ts</div>
<pre class="diff-highlight "><code class="diff-highlight code-line" data-line="24"> import { defineConfig } from "vite";
 import deno from "@deno/vite-plugin";
+ import elmPlugin from "vite-plugin-elm";

 export default defineConfig({
 plugins: [
 deno(),
+ elmPlugin(),
 ],
 });
</code></pre>
</div>また、<code>deno.json</code>に以下を追記します:
<div class="code-block-container">
<div class="code-block-filename-container">deno.json</div>
<pre class="diff-highlight "><code class="diff-highlight code-line" data-line="37"> {
 "tasks": {
 "dev": "deno run -A --node-modules-dir npm:vite",
 "build": "deno run -A --node-modules-dir npm:vite build",
 "preview": "deno run -A --node-modules-dir npm:vite preview",
 "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/"
 },
+ "nodeModulesDir": "auto",
 "compilerOptions": {
 "lib": ["ES2020", "DOM", "DOM.Iterable"]
 },
 "imports": {
 "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.4",
 "elm": "npm:elm@^0.19.1-6",
 "vite": "npm:vite@^6.1.1",
 "vite-plugin-elm": "npm:vite-plugin-elm@^3.0.1"
 }
 }
</code></pre>
</div>そして、インストールしたelmを使って<code>elm.json</code>を生成します。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="59">elm init
</code></pre></div><h2 id="main.elm" data-line="63" class="code-line">
<a class="header-anchor-link" href="#main.elm" aria-hidden="true"></a> Main.elm</h2>
Elmでコードを書けるようにします。<code>src</code>配下に<code>Main.elm</code>を作成し、以下を記入:
<div class="code-block-container">
<div class="code-block-filename-container">src/Main.elm</div>
<pre class="language-elm"><code class="language-elm code-line" data-line="65">module Main exposing (main)

import Html

main = Html.text "Hello, World!"
</code></pre>
</div>さらに<code>src/main.ts</code>の内容を以下に書き換え:
<div class="code-block-container">
<div class="code-block-filename-container">src/main.ts</div>
<pre class="language-ts"><code class="language-ts code-line" data-line="74">import { Elm } from "./Main.elm";

Elm.Main.init({
 node: document.getElementById("app"),
});
</code></pre>
</div><code>deno task dev</code>を実行すると、Hello World!が表示されます。Elmファイルの変更を検知してホットリロードが動作するので、他の追随を許しません。爆速で開発できます。
<h2 id="tailwind-css" data-line="84" class="code-line">
<a class="header-anchor-link" href="#tailwind-css" aria-hidden="true"></a> Tailwind CSS</h2>
せっかくなのでElmでつくったサイトに色をつけたいですね。PostCSSを使ってTailwind CSSをインストールしていきます。
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="86">deno install npm:tailwindcss npm:@tailwindcss/postcss npm:postcss
</code></pre></div><code>postcss.config.mts</code>を以下のように記述します。
<div class="code-block-container">
<div class="code-block-filename-container">postcss.config.mts</div>
<pre class="language-ts"><code class="language-ts code-line" data-line="91">export default {
 plugins: {
 "@tailwindcss/postcss": {},
 },
};
</code></pre>
</div><code>src/style.css</code>を以下に書き換え、Tailwind CSSを読み込みます。
<div class="code-block-container">
<div class="code-block-filename-container">src/style.css</div>
<pre class="language-css"><code class="language-css code-line" data-line="100">@import "tailwindcss";
</code></pre>
</div>そしてこのCSSファイルを<code>index.html</code>で読み込ませるように以下を追記しましょう。
<div class="code-block-container">
<div class="code-block-filename-container">index.html</div>
<pre class="diff-highlight "><code class="diff-highlight code-line" data-line="105"> &lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;link rel="icon" type="image/svg+xml" href="/vite.svg" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
+ &lt;link href="/src/style.css" rel="stylesheet"&gt;
 &lt;title&gt;Vite + TS&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="app"&gt;&lt;/div&gt;
 &lt;script type="module" src="/src/main.ts"&gt;&lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>
</div>これでTailwind CSSが使えるようになりました。試しに<code>src/Main.elm</code>を以下のように書き換えると、Hello World!にホバーしたときに色が変わることが分かります。これでもう誰にも屈することはありません。
<div class="code-block-container">
<div class="code-block-filename-container">src/Main.elm</div>
<pre class="language-elm"><code class="language-elm code-line" data-line="123">module Main exposing (main)

import Html exposing (div)
import Html exposing (text)
import Html.Attributes exposing (class)

main = div [ class "hover:bg-sky-500" ] [ text "Hello World!" ]
</code></pre>
</div><h1 id="deno-deploy%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" data-line="133" class="code-line">
<a class="header-anchor-link" href="#deno-deploy%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B" aria-hidden="true"></a> Deno Deployにデプロイする</h1>
いよいよElmのコードをDeno Deployでデプロイしてみます。これまでの変更をgitで管理し、GitHubにリポジトリを作成しておきましょう。リポジトリ自体はPrivateでも構いません。 
次に、<a href="https://dash.deno.com/new_project" target="_blank" rel="nofollow noopener noreferrer">Deno Deploy</a>へアクセスしてGitHubアカウントと連携、リポジトリを指定します。以下の点に気を付けながらデプロイの設定を変更しましょう。
<ul data-line="136" class="code-line">
<li data-line="136" class="code-line">Framework PresetでViteを選ぶ</li>
<li data-line="137" class="code-line">Install Stepを空にする</li>
<li data-line="138" class="code-line">Build Stepで<code>deno task build</code>を指定する</li>
</ul>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--78MEdFq6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a2a380adafd007579248108b.jpg%3Fsha%3D4e79c1b8b63d4e301a1fa76d164cbe5d82f786a4" alt="Deno Deploy" loading="lazy" class="md-img">
すべて設定し終えたらDeploy Projectをクリックします。エラーを吐かずうまくデプロイが成功すると、ウェブサイトへのリンクが表示されます。 
localhostで試したときと同じく、Hello World!にホバーして色が変わることを確認しましょう。
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="145" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
参考までに、この記事の通りに構築したリポジトリと実際のサイトを載せておきます。 
<iframe id="zenn-embedded__2b60f9adc04b" src="https://embed.zenn.studio/card#zenn-embedded__2b60f9adc04b" data-content="https%3A%2F%2Fgithub.com%2Fglassesneo%2Felm_deno_vite" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/glassesneo/elm_deno_vite" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/glassesneo/elm_deno_vite</a> 
<iframe id="zenn-embedded__0fe66eab0585a" src="https://embed.zenn.studio/card#zenn-embedded__0fe66eab0585a" data-content="https%3A%2F%2Fneo-elm-deno-vite.deno.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://neo-elm-deno-vite.deno.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://neo-elm-deno-vite.deno.dev/</a>
denoでviteとElmの環境を用意し、Deno Deployにデプロイするところまでを解説しました。今回はシンプルな構成ですが、<code>vite.config.ts</code>でjsrパッケージを使用したり、プラグインとして自前のビルド手順を追加したりすることもできます。みなさんも持ち前の反骨精神に従い、ElmとDeno Deployで同僚たちと差を付けましょう！

Vite + Elmを爆速でDeno Deployにデプロイする

Discussion