SQLを使わずにできる！Retoolでのデータ操作＆可視化入門 🚀

Retoolは、ドラッグ＆ドロップで内部ツールを素早く構築できるローコードプラットフォームです。この記事では、SQLの知識がなくてもRetoolを活用してデータ操作や可視化を実現する方法を、実際のコード例や図を交えて解説します。

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.