jpskill.com
📦 その他 コミュニティ

tooljet

ToolJetは、オープンソースのローコードプラットフォームで、管理画面の作成、データソース接続、ドラッグ&ドロップでのCRUDアプリ構築、ToolJetの自己ホストなど、内製ツール開発を効率化するSkill。

📜 元の英語説明(参考)

Build internal tools with ToolJet, the open-source low-code platform. Use when a user asks to create admin dashboards, connect data sources, build CRUD apps with drag-and-drop, or self-host ToolJet.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ToolJetは、オープンソースのローコードプラットフォームで、管理画面の作成、データソース接続、ドラッグ&ドロップでのCRUDアプリ構築、ToolJetの自己ホストなど、内製ツール開発を効率化するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o tooljet.zip https://jpskill.com/download/15488.zip && unzip -o tooljet.zip && rm tooljet.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15488.zip -OutFile "$d\tooljet.zip"; Expand-Archive "$d\tooljet.zip" -DestinationPath $d -Force; ri "$d\tooljet.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して tooljet.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → tooljet フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

ToolJet — オープンソースのローコードアプリビルダー

概要

あなたは ToolJet のエキスパートです。ToolJet は、ビジュアルアプリビルダーを使用して内部ツールを構築するためのオープンソースのローコードプラットフォームです。開発者がデータベースや API に接続し、ドラッグアンドドロップコンポーネントで CRUD アプリを構築し、カスタム JavaScript/Python を記述し、完全なデータ制御のためにセルフホストするのを支援します。

手順

セットアップ

# Docker (推奨)
docker compose up -d
# UI at http://localhost:80

# Kubernetes
helm repo add tooljet https://tooljet.github.io/helm-charts
helm install tooljet tooljet/tooljet

# Cloud: https://tooljet.com (マネージドホスティング)

データソース

// ToolJet は 50 以上のデータソースに接続できます:
// データベース: PostgreSQL, MySQL, MongoDB, Redis, BigQuery, Snowflake, DynamoDB
// API: REST, GraphQL, gRPC
// SaaS: Stripe, Airtable, Google Sheets, Notion, Slack, Twilio
// ストレージ: S3, MinIO, GCS

// 変換を伴う PostgreSQL クエリ
// クエリ: getOrders
SELECT o.*, u.email, u.name
FROM orders o JOIN users u ON o.user_id = u.id
WHERE o.status = {{components.statusFilter.value}}
ORDER BY o.created_at DESC

// JavaScript 変換 (クエリ実行後に実行)
return data.map(row => ({
  ...row,
  amount_display: `$${(row.amount / 100).toFixed(2)}`,
  created_display: moment(row.created_at).fromNow(),
}));

イベントとアクション

// Button の onClick イベント — 複数のアクションをチェーン
// アクション 1: クエリを実行
await queries.processRefund.run();

// アクション 2: 通知を表示
actions.showAlert('success', `Refund of $${components.table1.selectedRow.amount} processed`);

// アクション 3: データをリフレッシュ
await queries.getOrders.run();

// アクション 4: ナビゲート
actions.navigateTo('/orders');

// イベントハンドラーの条件ロジック
if (components.table1.selectedRow.status === 'refunded') {
  actions.showAlert('warning', 'Already refunded');
  return;
}

複数ページアプリ

## アプリの構造
- ページ: Dashboard, Orders, Users, Settings
- 共有コンポーネント: Header, Sidebar (ページをまたいで永続化)
- URL パラメータ: 詳細ページ用の /orders/:id
- ナビゲーション: プログラムによる (actions.navigateTo) またはリンクコンポーネント

例 1: ユーザーが tooljet のセットアップを依頼

ユーザー: "私のプロジェクトのために tooljet をセットアップするのを手伝ってください"

エージェントは以下を行う必要があります:

  1. システム要件と前提条件を確認する
  2. tooljet をインストールまたは構成する
  3. 初期プロジェクト構造をセットアップする
  4. セットアップが正しく動作することを確認する

例 2: ユーザーが tooljet で機能を構築することを依頼

ユーザー: "tooljet を使用してダッシュボードを作成してください"

エージェントは以下を行う必要があります:

  1. コンポーネントまたは構成をスキャフォールドする
  2. 適切なデータソースに接続する
  3. 要求された機能を実装する
  4. 出力をテストおよび検証する

ガイドライン

  1. コンプライアンスのためにセルフホスト — ToolJet はオープンソース (AGPL) です。データがインフラストラクチャ上に保持される必要がある場合は、セルフホストしてください。
  2. クエリキャッシュ — 頻繁にアクセスされるデータに対してクエリキャッシュを有効にします。データベースの負荷を軽減します。
  3. 環境 — 異なるデータベース接続で ToolJet 環境 (dev/staging/prod) を使用します。
  4. カスタムコンポーネント — コンポーネントライブラリに存在しない視覚化のために React コンポーネントを構築します。
  5. バージョン管理 — アプリを JSON としてエクスポートします。バージョン管理とバックアップのために Git に保存します。
  6. きめ細かい権限 — グループとアプリレベルの権限を使用してアクセスを制御します。
  7. マーケットプレイスプラグイン — 構築済みのデータソースコネクタについて、ToolJet のプラグインマーケットプレイスを参照してください。
  8. 監査ログ — コンプライアンスのために監査ログを有効にします。誰がどのデータにアクセスしたかを追跡します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

ToolJet — Open-Source Low-Code App Builder

Overview

You are an expert in ToolJet, the open-source low-code platform for building internal tools with a visual app builder. You help developers connect to databases and APIs, build CRUD apps with drag-and-drop components, write custom JavaScript/Python, and self-host for complete data control.

Instructions

Setup

# Docker (recommended)
docker compose up -d
# UI at http://localhost:80

# Kubernetes
helm repo add tooljet https://tooljet.github.io/helm-charts
helm install tooljet tooljet/tooljet

# Cloud: https://tooljet.com (managed hosting)

Data Sources

// ToolJet connects to 50+ data sources:
// Databases: PostgreSQL, MySQL, MongoDB, Redis, BigQuery, Snowflake, DynamoDB
// APIs: REST, GraphQL, gRPC
// SaaS: Stripe, Airtable, Google Sheets, Notion, Slack, Twilio
// Storage: S3, MinIO, GCS

// PostgreSQL query with transformations
// Query: getOrders
SELECT o.*, u.email, u.name
FROM orders o JOIN users u ON o.user_id = u.id
WHERE o.status = {{components.statusFilter.value}}
ORDER BY o.created_at DESC

// JavaScript transformation (runs after query)
return data.map(row => ({
  ...row,
  amount_display: `$${(row.amount / 100).toFixed(2)}`,
  created_display: moment(row.created_at).fromNow(),
}));

Events and Actions

// Button onClick event — chain multiple actions
// Action 1: Run query
await queries.processRefund.run();

// Action 2: Show notification
actions.showAlert('success', `Refund of $${components.table1.selectedRow.amount} processed`);

// Action 3: Refresh data
await queries.getOrders.run();

// Action 4: Navigate
actions.navigateTo('/orders');

// Conditional logic in event handlers
if (components.table1.selectedRow.status === 'refunded') {
  actions.showAlert('warning', 'Already refunded');
  return;
}

Multi-Page Apps

## App Structure
- Pages: Dashboard, Orders, Users, Settings
- Shared components: Header, Sidebar (persist across pages)
- URL parameters: /orders/:id for detail pages
- Navigation: programmatic (actions.navigateTo) or link components

Examples

Example 1: User asks to set up tooljet

User: "Help me set up tooljet for my project"

The agent should:

  1. Check system requirements and prerequisites
  2. Install or configure tooljet
  3. Set up initial project structure
  4. Verify the setup works correctly

Example 2: User asks to build a feature with tooljet

User: "Create a dashboard using tooljet"

The agent should:

  1. Scaffold the component or configuration
  2. Connect to the appropriate data source
  3. Implement the requested feature
  4. Test and validate the output

Guidelines

  1. Self-host for compliance — ToolJet is open-source (AGPL); self-host when data must stay on your infrastructure
  2. Query caching — Enable query caching for frequently accessed data; reduces database load
  3. Environments — Use ToolJet environments (dev/staging/prod) with different database connections
  4. Custom components — Build React components for visualizations that don't exist in the component library
  5. Version control — Export apps as JSON; store in Git for versioning and backup
  6. Granular permissions — Use groups and app-level permissions to control access
  7. Marketplace plugins — Browse ToolJet's plugin marketplace for pre-built data source connectors
  8. Audit logs — Enable audit logging for compliance; track who accessed what data