Rails 8 + Importmap/Propshaft環境で高機能UI「Tabler」導入手順完全ガイド (Node.js活用)

2025年4月16日2025年4月20日

最新のRails 8（またはRails 7以降）では、Importmap と Propshaft が標準となり、Node.jsへの依存を減らしたシンプルなフロントエンド開発が推奨されています。
しかし、「高機能な管理画面UIを効率よく導入したい」「外部ライブラリのCSSやJSのアセット管理はどうすれば？」とお悩みではありませんか？

この記事では、人気のUIキット Tabler を、Importmap/Propshaft というモダンなRails環境下で効率的に導入・管理する方法を、ステップバイステップで徹底解説します。
Node.js (npm/yarn) を活用して Tabler のコアアセット (CSS/JS) をスマートに管理し、開発効率とパフォーマンスを両立させながら、洗練された管理画面UIを構築しましょう。

なぜこの構成？モダンRails + Tabler + Node.jsのメリット解説

Rails 8 と Importmap/Propshaft

Importmap: JavaScriptのバンドル不要を実現。ビルドステップが減り、開発サーバーの起動が高速化します。
ブラウザネイティブのES Modulesを利用するため、設定も非常にシンプルです。
Propshaft: アセットパイプラインを簡素化。主にフィンガープリント付与と本番環境への効率的な配信を担当し、設定も容易です。
メリット: Node.jsへの依存度を最小限に抑え、Rails開発者がバックエンド開発に集中しやすくなります。
開発環境のセットアップやデプロイもシンプルになる傾向があります。

Tabler UI Kit

高機能＆高品質: Bootstrap 5をベースに、洗練されたデザインと豊富なコンポーネント（チャート、データテーブル、カード、アイコン、フォーム要素など）を提供。
管理画面やダッシュボード構築に最適です。
レスポンシブ対応: モバイルからデスクトップまで、様々なデバイスで適切に表示されます。
メリット: デザインに時間をかけずに、迅速に見栄えの良い管理画面を構築でき、開発工数を大幅に削減できます。
Tabler Icons (SVG) も統合されており、アイコン利用も容易です。

Node.js によるアセット管理

課題: Importmap/Propshaft環境では、Tablerのような外部ライブラリのCSSやJSを手動でvendorディレクトリ等にコピー・管理する必要があり、バージョン追跡や更新が煩雑になりがちです。
解決策: Node.js (npm/yarn) を活用します。package.json でTablerのバージョンを宣言的に管理し、コマンド一つで最新版の取得や、必要なアセットファイルのみをRailsプロジェクト内の適切な場所へコピーできます。
メリット: ライブラリのバージョン管理が容易になり、更新漏れや手作業によるミスを防ぎます。
Railsのシンプルさを維持しつつ、外部ライブラリの恩恵を最大限に受けられます。

開発を始める前に：前提条件のチェックリスト

Ruby: バージョン 3.1 以降推奨
Rails: バージョン 8.0 以降、またはImportmap-railsとPropshaftが導入済みの 7.0 以降
Node.js: 最新のLTS版推奨 (npm または yarn がコマンドラインで利用可能な状態)
基礎知識: 基本的なRailsアプリケーション開発（MVC、ルーティングなど）とターミナル（コマンドライン）操作の知識

セットアップ手順：Node.js連携でTablerをRailsに導入

Rails 8 アプリケーションの準備 (Importmap/Propshaft確認)

新しいRailsアプリケーションを作成するか、既存のプロジェクトを使用します。Rails 7以降はデフォルトでImportmapとPropshaftが使われますが、念のため確認しましょう。

Node.js (npm/yarn) でTablerをインストール

Railsプロジェクトのルートディレクトリで、Node.jsのパッケージマネージャーを使って@tabler/coreをインストールします。
これにより、Tablerのソースファイルがnode_modulesディレクトリにダウンロードされます。

# npm で Tabler を開発時依存としてインストールする場合
npm install @tabler/core --save-dev

# yarn で Tabler を開発時依存としてインストールする場合
yarn add @tabler/core --dev

--save-dev または --dev オプションは、このパッケージが本番環境の実行には不要で、開発時にのみ必要であることを示します。

アセットコピー用npmスクリプト作成 (CSS, JS)

package.jsonファイルを開き、scriptsセクションにアセットファイルをコピーするためのコマンドを追加します。ここではTablerのコアCSSとJSファイルをコピーします。

JavaScript: node_modules -> vendor/javascript/

CSS: node_modules -> app/assets/stylesheets/

{
  "scripts": {
    "build:assets": "npm run copy:tabler:css && npm run copy:tabler:js",
    "copy:tabler:css": "mkdir -p app/assets/stylesheets && cp node_modules/@tabler/core/dist/css/tabler.min.css app/assets/stylesheets/",
    "copy:tabler:js": "mkdir -p vendor/javascript && cp node_modules/@tabler/core/dist/js/tabler.min.js vendor/javascript/"
  },
  "devDependencies": {
    "@tabler/core": "^1.1.1",
  }
}

重要

@tabler/core のバージョン (^1.0.0-beta20の部分) は、実際にインストールしたバージョンに合わせてください。
パスの確認: node_modules/@tabler/core/dist/ 以下の構造はバージョンによって変わる可能性があります。必ず実際の node_modules ディレクトリを開いて、tabler.min.css, tabler.min.js の正確なパスを確認し、cp コマンドのパスを修正してください。

npmスクリプト実行！アセットをRailsプロジェクトへコピー

Tabler をインストールまたはアップデートした後、以下のコマンドを実行して、定義したスクリプトを起動し、必要なアセットファイルをRailsプロジェクト内にコピーします。

npm run build:assets
# または (yarn を使っている場合)
yarn build:assets

成功すれば、以下の場所にファイルがコピーされます。

app/assets/stylesheets/tabler.min.css
vendor/javascript/tabler.min.js

これで、Rails (Importmap/Propshaft) からTablerのアセットを利用する準備が整いました。

実装してみよう：管理画面へのTabler適用例

コピーしたアセットファイルを使って、具体的な管理画面 (/adminなど) に Tabler のスタイルと機能を適用してみましょう。

管理画面用のコントローラーとルーティング設定

まず、管理画面専用のベースコントローラー、表示用のコントローラー（例: DashboardController）、およびそれらに対応するルーティングを設定します。

# 管理画面用ベースコントローラー生成
bin/rails g controller Admin::Base --skip-routes --no-helper --no-assets

# ダッシュボードコントローラー生成 (Admin::BaseControllerを継承)
bin/rails g controller Admin::Dashboard index --parent=Admin::BaseController --skip-routes --no-helper --no-assets

# app/controllers/admin/base_controller.rb
class Admin::BaseController < ApplicationController
  layout 'admin'
end

# app/controllers/admin/dashboard_controller.rb
class Admin::DashboardController < Admin::BaseController
  def index; end
end

# config/routes.rb
Rails.application.routes.draw do
  namespace :admin do
    root "dashboard#index"
  end
end

Tablerの基本構造を持つ管理者用レイアウト作成 (erb)

app/views/layouts/admin.html.erb という名前で管理画面用のレイアウトファイルを作成します。ここにTablerの基本的なHTML構造と、管理画面専用のCSS (admin.css) と JavaScript (admin.js) を読み込むタグを記述します。

# 管理画面用CSSファイルを作成
touch app/assets/stylesheets/admin.css

# 管理画面用JavaScriptファイルを作成
touch app/javascript/admin.js

# app/views/layouts/admin.html.erb
<!DOCTYPE html>
<html>
  <head>
  <title><%= content_for(:title) || "管理画面" %> - <%= Rails.application.class.module_parent_name %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "tabler.min", data_turbo_track: "reload" %>
    <%= stylesheet_link_tag "admin", data_turbo_track: "reload" %>

    <%= javascript_importmap_tags "admin" %>

    <%= yield :head %>
  </head>

  <body>
    <div class="page">
      <%= render 'admin/shared/sidemenu' %>
      <%= render 'admin/shared/header' %>

      <div class="page-wrapper">
        <div class="page-body">
          <div class="container-xl">
            <%= yield %>
          </div>
        </div>

        <%= render 'admin/shared/footer' %>
      </div>
    </div>
    <%= yield :scripts %>
  </body>
</html>

# app/views/admin/shared/_header.html.erb
<header class="navbar navbar-expand-md d-print-none">
  <div class="container-xl">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
      <%= link_to admin_root_path, class: "navbar-brand" do %>
        MyApp
      <% end %>
    </h1>
  </div>
</header>

# app/views/admin/shared/_sidemenu.html.erb
<aside class="navbar navbar-vertical navbar-expand-lg d-none d-lg-block" data-bs-theme="dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu" aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <h1 class="navbar-brand navbar-brand-autodark">
      <%= link_to admin_root_path, class: "navbar-brand" do %>
        MyApp
      <% end %>
    </h1>
    <div class="collapse navbar-collapse" id="sidebar-menu">
      <ul class="navbar-nav pt-lg-3">
        <li class="nav-item">
          <%= link_to admin_root_path, class: "nav-link" do %>
            <span class="nav-link-title">
              ホーム
            </span>
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to "#", class: "nav-link" do %>
            <span class="nav-link-icon d-md-none d-lg-inline-block">
               <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-adjustments" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M6 4v4" /><path d="M6 12v8" /><path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M12 4v10" /><path d="M12 18v2" /><path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M18 4v1" /><path d="M18 9v11" /></svg>
            </span>
            <span class="nav-link-title">
              他のページ
            </span>
          <% end %>
        </li>
      </ul>
    </div>
  </div>
</aside>

# app/views/admin/shared/_footer.html.erb
<footer class="footer footer-transparent d-print-none">
  <div class="container-xl">
    <div class="row text-center align-items-center flex-row-reverse">
      <div class="col-12 col-lg-auto mt-3 mt-lg-0">
        <ul class="list-inline list-inline-dots mb-0">
          <li class="list-inline-item">
            Copyright © <%= Time.zone.now.year %>
            All rights reserved.
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

ポイント

サイドバー、ヘッダー、フッターなどはパーシャル化してrenderで呼び出すことを推奨します。

ImportmapでTabler JavaScriptを読み込む設定 (`config/importmap.rb`)

Importmap を使って、管理画面専用のJavaScriptファイル (admin.js) からTablerのJavaScriptを読み込みます。

`config/importmap.rb` の設定:

admin.js のピン留めを追加します。

vendor/javascript/ にコピーした tabler.min.js を "tabler" という名前でピン留めします。

# config/importmap.rb
pin "admin"

pin "tabler", to: "tabler.min.js", preload: true

`app/javascript/admin.js` の編集

// app/javascript/admin.js
import "@hotwired/turbo-rails"
import "controllers"
import "tabler"

PropshaftでTabler CSS と管理画面用CSS (`admin.css`) を読み込む設定

管理画面のスタイルを適用するために、Propshaft 経由で tabler.min.css と admin.css を読み込みます。

レイアウトでの読み込み

レイアウトファイル (admin.html.erb) 内の stylesheet_link_tag で読み込み設定は完了しています。

<%= stylesheet_link_tag "tabler.min", data_turbo_track: "reload" %>
<%= stylesheet_link_tag "admin", data_turbo_track: "reload" %>

`app/assets/stylesheets/admin.css` の編集

先ほど touch で作成した app/assets/stylesheets/admin.css を開き、管理画面固有のスタイルルールがあれば記述します。

/* app/assets/stylesheets/admin.css */

/*
 * このファイルには、管理画面専用のスタイルや、
 * tabler.min.css のスタイルを上書きするルールを記述します。
 */

動作確認

すべての設定が終わったら、アプリケーションを起動して管理画面が正しく表示されるか確認しましょう。

Railsサーバー起動

docker compose up

ブラウザでアクセス

http://localhost:3000/admin

表示チェック

Tablerのレイアウト、色、タイポグラフィが適用されていますか？
Tabler Iconsなどのアイコンが表示されるべき箇所で表示されていますか？ (TablerのCSS/JSでSVGアイコンが扱われます)
ドロップダウンメニューやアコーディオンなど、JavaScriptに依存するUIコンポーネントは期待通り動作しますか？

ブラウザ開発者ツールで確認

Console (コンソール)

JavaScriptのエラーメッセージが出ていませんか？ [Importmap] Failed to load module script... などのエラーがないか確認。

Network (ネットワーク)

tabler.min.css がステータス 200 OK で読み込まれていますか？
tabler.min.js がステータス 200 OK で読み込まれていますか？
ファイル名の末尾にフィンガープリント (例: -a1b2c3d4...) が付与されていますか？ (本番環境モードや rails assets:precompile 後)

まとめ：Rails 8 + Tablerでモダンな管理画面開発を実現

この記事では、Rails 8 (またはRails 7+) の標準アセット管理ツール Importmap と Propshaft を活用しながら、高機能UIキット Tabler のコアアセット (CSS/JS) を導入するための実践的な手順を解説しました。

Node.js (npm/yarn) をアセット管理の補助として利用することで、Tabler のような外部ライブラリのバージョン管理や必要なファイルのコピー作業を自動化し、開発プロセスを大幅に効率化できます。

この構成の主なメリット

モダンな開発環境: Importmap/Propshaftによるシンプルかつ高速なRailsフロントエンド。
開発スピード向上: Tablerによる高品質な管理画面UIの迅速な構築。
効率的なアセット管理: Node.jsによる外部ライブラリ (CSS/JS) のバージョン管理とファイルコピーの自動化・省力化。

このアプローチを採用することで、Railsのコアなシンプルさを保ちながら、リッチで使いやすいフロントエンドUIの恩恵を受けることができます。ぜひ、あなたの次のRailsプロジェクトでこの構成を試し、モダンな管理画面開発を体験してみてください。

参考資料・リンク集

より深く学ぶための公式ドキュメントや関連情報です。

Rails 公式ガイド

Ruby on Rails ガイド

Tabler

Tabler Documentation – コンポーネントの使い方やデモはこちら。
Tabler Icons – 利用可能なアイコン一覧。
Tabler GitHub Repository – ソースコードやIssue。

関連ツール

Bootstrap Documentation – TablerのベースとなっているBootstrapのドキュメント。
npm Documentation
Yarn Documentation

未経験からエンジニアへ転職！おすすめの転職サービスはこちら

「未経験だけどエンジニアになりたい…」「IT業界に興味があるけど、どこから始めるべきかわからない…」
そんな方におすすめなのが、プログラミングスクールを活用した転職活動です。
実績豊富なスクールを利用すれば、未経験からでもエンジニアとしての転職がぐっと近づきます！

Harmonia

初心者向けプログラミングスクールおすすめを徹底比較！初心者が安心して学べるおすすめのプログラミングスクールを厳選紹介！料金や口コミ、転職支援などを徹底比較しました。失敗しないスクール選びのポイントも解説。

この記事が気に入ったら
フォローしてね！

Follow @blue3orz Follow Me

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

Rails 8 + Importmap/Propshaft環境で高機能UI「Tabler」導入手順 完全ガイド (Node.js活用)