SQLを使わずにできる！Retoolでのデータ操作＆可視化入門 🚀
Retoolは、ドラッグ＆ドロップで内部ツールを素早く構築できるローコードプラットフォームです。この記事では、SQLの知識がなくてもRetoolを活用してデータ操作や可視化を実現する方法を、実際のコード例や図を交えて解説します。
目次
- Retoolとは？
- SQLを使わないデータ操作のメリット 🎉
- Retoolでできるデータ接続と操作
- ドラッグ＆ドロップで作る可視化ダッシュボード 📊
- カスタムJavaScriptコードでデータ変換＆チャート作成
- まとめ
Retoolとは？
Retoolは内部ツールやダッシュボード、管理アプリケーションを短時間で構築できるローコードプラットフォームです。
主な特徴は以下の通りです：
- データソースとの直接接続： PostgreSQL、MySQL、MongoDB、API、SaaSサービスなどを簡単に連携可能
- 直感的な UI： ドラッグ＆ドロップでコンポーネントを配置し、即座にプレビューできる
- JavaScriptによる柔軟なカスタマイズ： 必要なロジックを簡単に組み込める
Retoolの強みは、SQLを直接書かずともデータ操作や可視化ができる点です。データソースとの接続にはGUIベースの設定を使い、さらにJavaScriptでカスタムロジックを組み合わせることで柔軟に対応できます。
SQLを使わないデータ操作のメリット 🎉
従来のデータ操作ではSQLに頼るケースが多いですが、Retoolでは次のようなメリットがあります：
- 初心者にもやさしい： SQLの文法やJOINなどの複雑な構文を学ばなくても、リソース設定とUI操作だけで済む
- 迅速なプロトタイピング： ドラッグ＆ドロップで画面構築、APIや既存サービスと連携するだけで迅速にツールを試作できる
- リアルタイム操作： JavaScriptの組み込みで、ユーザの操作に応じた即時反映や動的なデータ変換が可能
Retoolでできるデータ接続と操作
Retoolではデータ操作の基本操作（CRUD）を、SQLを書かずにGUI上で実現できます。たとえば、
- API接続： 外部APIからデータを取得し、JSONデータを直接加工・表示
- ドラッグ＆ドロップUI： テーブルやフォーム、チャート、グラフといったコンポーネントをキャンバスに配置するだけ
- JavaScriptクエリ： 内蔵のコードエディターで、データの加工やフィルタリングを行う（例：配列のマッピングや集計）
※以下は、テーブルで取得したJSONデータをJavaScriptで加工し、チャート用のデータに変換する例です。
ドラッグ＆ドロップで作る可視化ダッシュボード 📊
Retoolの魅力のひとつは、複雑なコードを書かずにダッシュボードや可視化が作れる点です。
基本手順
- リソースの作成： APIや外部サービスを「リソース」として設定
- 新規アプリの作成： 画面右上の「Create new」ボタンをクリックし、ブランクアプリを作成
- コンポーネントの配置： テーブルやチャート、フォームコンポーネントをドラッグ＆ドロップ
- データバインディング： 各コンポーネントのプロパティに、リソースから取得したデータを設定
- 各種設定の微調整： 軸のラベルや色、タイトルなどをカスタマイズ
サンプルダッシュボードの図
このように、Retoolでは設定やデータバインドをGUI上で完結できるため、迅速なダッシュボード作成が可能です。
カスタムJavaScriptコードでデータ変換＆チャート作成
デフォルトの設定以上に柔軟な操作が必要な場合、内蔵のJavaScriptエディターでカスタムロジックを追加できます。ここでは、取得したデータを加工してPlotlyチャートに渡す例を紹介します。
【例】データ集計とチャート用データ作成
以下のコードは、テーブルから取得したデータ（製品カテゴリと売上額）を集計し、チャート用のオブジェクトに変換するサンプルです。
// 取得したJSONデータ例: [{ category: "A", amount: 100 }, { category: "B", amount: 200 }, { category: "A", amount: 150 }]
const rawData = {{ tableData.data }};
// カテゴリ別に売上額を合計する
const aggregatedData = rawData.reduce((acc, row) => {
if (!acc[row.category]) {
acc[row.category] = 0;
}
acc[row.category] += row.amount;
return acc;
}, {});
// Plotlyチャート用のデータオブジェクトを作成
const chartData = {
data: [
{
type: "bar",
x: Object.keys(aggregatedData),
y: Object.values(aggregatedData),
marker: { color: "#3778C2" }
}
],
layout: {
title: "カテゴリ別売上集計",
xaxis: { title: "カテゴリ" },
yaxis: { title: "売上額" }
}
};
// チャートコンポーネントのデータに設定
return chartData;
このサンプルでは、Retoolのテーブルコンポーネントから読み込んだデータ（{{ tableData.data }}）をJavaScriptで加工し、Plotly JSONチャートコンポーネントに渡せる形式に変換しています。コード中の集計処理や配列操作は、JavaScriptの基本機能を活用しており、SQLを一切使わずに実現できる点がポイントです。
まとめ
Retoolを使えば、SQLの知識がなくても直感的にデータ取得・操作・可視化ができ、迅速なプロトタイピングや内部ダッシュボードの構築が可能になります。
今回ご紹介したポイントをおさらいすると：
- GUIベースのリソース設定で、各種データソースと簡単に連携
- ドラッグ＆ドロップのUIコンポーネントで、テーブルやチャートなどを自在に配置
- JavaScriptクエリを使った柔軟なデータ加工＆カスタムチャート作成（SQL不要！）
ぜひ、Retoolを活用して、あなたのプロジェクトに合ったデータツールやダッシュボードを作成してみてください。次回は、さらに複雑なワークフローの自動化とカスタムコンポーネントの作成について詳しく解説予定です！ ✨
Happy Coding! 🖥️💡
この記事が、Retoolの魅力と可能性を理解する一助となれば幸いです。コメントやフィードバックがあれば、ぜひシェアしてくださいね。
🐮✨
See the Pen 💖 ご支援いただけませんか？ by Yushi Yamamoto (@yamamotoyushi) on CodePen.