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

By インモビ運営局

2025年4月30日

0

1

Logicool G ワイヤレスゲーミングマウス G703h LIGHTSPEED HERO 25Kセンサーエルゴノミクス LIGHTSYNC RGB POWERPLAY 無線充電対応ゲーミングマウス充電式無線 PC windows mac ブラック G703 国内正規品【ファイナルファンタジー XIV 推奨モデル】

(12459)

￥9,900 (2025年4月30日 13:11 GMT +09:00 時点 - )

Anker USB3.0 ウルトラスリム 4ポートハブ USB ハブ 60cm ケーブル 5Gbps高速転送バスパワー軽量コンパクト MacBook/iMac/Surface Pro 等ノートPC 他対応 USBハブテレワークリモート在宅勤務

(21489)

￥1,299 (2025年4月30日 13:13 GMT +09:00 時点 - )

【2025新版・MFi認証・自動接続】 iPhone hdmi変換ケーブルライトニング設定不要・ APP不要・給電不要・1080PプルHD TV大画面音声同期出力ライトニング hdmi iphone tv 変換ケーブルテレビに映す遅延なし簡単接続 iPhone/iPad などに対応日本語取説付き（iOS13 - iOS18対応）

(186)

￥1,699 (2025年4月30日 13:13 GMT +09:00 時点 - )

日々新しい技術が生み出され、トレンドが目まぐるしく移り変わる現在のフロントエンド開発環境においては、TypeScriptが最も大きくかつ拡大中のコミュニティと言えるでしょう。となれば反骨精神を持つプログラマとして、今さらながらElmに手を出し始めるのも自然の摂理ではないでしょうか。しかし、単に逆張りを狙うのでは面白みが足りません。ある程度流行に乗っておきつつ、奇抜な組み合わせを採用することで学友や同僚を牽制していきましょう。この記事では、denoとviteを使用してElmの環境を構築し、最終的にdeno Deployへデプロイするまでを解説します。

まずは下準備としてdenoをインストールしておきます。

deno + vite

まずはdenoで以下のコマンドを実行します。project-nameで指定した名前のディレクトリがつくられます。

deno run -A npm:create-vite-extra@latest --template deno-vanilla-ts

作成したディレクトリに移動し、deno task devを実行するとlocalhost:5173で以下のようなサイトが開きます。

Vite + TypeScript

vite-plugin-elm

vite経由でElmを使うため、Elm本体とvite-plugin-elmをインストールします。

deno install npm:vite-plugin-elm
deno install --allow-scripts=npm:elm@0.19.1-6

そしてvite.config.tsに以下を追記:

vite.config.ts

  import { defineConfig } from "vite";
  import deno from "@deno/vite-plugin";
+ import elmPlugin from "vite-plugin-elm";

  export default defineConfig({
    plugins: [
      deno(),
+     elmPlugin(),
    ],
  });

また、deno.jsonに以下を追記します:

deno.json

  {
    "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"
    }
  }

そして、インストールしたelmを使ってelm.jsonを生成します。

Main.elm

Elmでコードを書けるようにします。src配下にMain.elmを作成し、以下を記入:

src/Main.elm

module Main exposing (main)

import Html

main = Html.text "Hello, World!"

さらにsrc/main.tsの内容を以下に書き換え:

src/main.ts

import { Elm } from "./Main.elm";

Elm.Main.init({
  node: document.getElementById("app"),
});

deno task devを実行すると、Hello World!が表示されます。Elmファイルの変更を検知してホットリロードが動作するので、他の追随を許しません。爆速で開発できます。

Tailwind CSS

せっかくなのでElmでつくったサイトに色をつけたいですね。PostCSSを使ってTailwind CSSをインストールしていきます。

deno install npm:tailwindcss npm:@tailwindcss/postcss npm:postcss

postcss.config.mtsを以下のように記述します。

postcss.config.mts

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

src/style.cssを以下に書き換え、Tailwind CSSを読み込みます。

src/style.css

@import "tailwindcss";

そしてこのCSSファイルをindex.htmlで読み込ませるように以下を追記しましょう。

これでTailwind CSSが使えるようになりました。試しにsrc/Main.elmを以下のように書き換えると、Hello World!にホバーしたときに色が変わることが分かります。これでもう誰にも屈することはありません。

src/Main.elm

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!" ]

いよいよElmのコードをDeno Deployでデプロイしてみます。これまでの変更をgitで管理し、GitHubにリポジトリを作成しておきましょう。リポジトリ自体はPrivateでも構いません。
次に、Deno DeployへアクセスしてGitHubアカウントと連携、リポジトリを指定します。以下の点に気を付けながらデプロイの設定を変更しましょう。

Framework PresetでViteを選ぶ
Install Stepを空にする
Build Stepでdeno task buildを指定する

Deno Deploy

すべて設定し終えたらDeploy Projectをクリックします。エラーを吐かずうまくデプロイが成功すると、ウェブサイトへのリンクが表示されます。
localhostで試したときと同じく、Hello World!にホバーして色が変わることを確認しましょう。

参考までに、この記事の通りに構築したリポジトリと実際のサイトを載せておきます。

https://neo-elm-deno-vite.deno.dev/

denoでviteとElmの環境を用意し、Deno Deployにデプロイするところまでを解説しました。今回はシンプルな構成ですが、vite.config.tsでjsrパッケージを使用したり、プラグインとして自前のビルド手順を追加したりすることもできます。みなさんも持ち前の反骨精神に従い、ElmとDeno Deployで同僚たちと差を付けましょう！

Source link