SQL不要でサクッとデータ操作！Retool入門ガイド 🚀💡

![スクリーンショット 2025-02-04 21.28.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/4451723d-4179-c534-0e2e-64bbc6c922a6.png)


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

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

---

## 目次

- [Retoolとは？](#retoolとは)
- [SQLを使わないデータ操作のメリット 🎉](#sqlを使わないデータ操作のメリット-)
- [Retoolでできるデータ接続と操作](#retoolでできるデータ接続と操作)
- [ドラッグ＆ドロップで作る可視化ダッシュボード 📊](#ドラッグ＆ドロップで作る可視化ダッシュボード-)
- [カスタムJavaScriptコードでデータ変換＆チャート作成](#カスタム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の魅力のひとつは、複雑なコードを書かずにダッシュボードや可視化が作れる点です。

### 基本手順

1. **リソースの作成：** APIや外部サービスを「リソース」として設定  
2. **新規アプリの作成：** 画面右上の「Create new」ボタンをクリックし、ブランクアプリを作成  
3. **コンポーネントの配置：** テーブルやチャート、フォームコンポーネントをドラッグ＆ドロップ  
4. **データバインディング：** 各コンポーネントのプロパティに、リソースから取得したデータを設定  
5. **各種設定の微調整：** 軸のラベルや色、タイトルなどをカスタマイズ

### サンプルダッシュボードの図

```mermaid
flowchart TD
    A[API/データソース] --> B[リソース設定]
    B --> C[データ取得クエリ]
    C --> D[テーブルコンポーネント]
    C --> E[チャートコンポーネント]
    E --> F[可視化ダッシュボード]
```

このように、Retoolでは設定やデータバインドをGUI上で完結できるため、迅速なダッシュボード作成が可能です。

---

## カスタムJavaScriptコードでデータ変換＆チャート作成

デフォルトの設定以上に柔軟な操作が必要な場合、内蔵のJavaScriptエディターでカスタムロジックを追加できます。ここでは、取得したデータを加工してPlotlyチャートに渡す例を紹介します。

### 【例】データ集計とチャート用データ作成

以下のコードは、テーブルから取得したデータ（製品カテゴリと売上額）を集計し、チャート用のオブジェクトに変換するサンプルです。

```javascript
// 取得した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の魅力と可能性を理解する一助となれば幸いです。コメントやフィードバックがあれば、ぜひシェアしてくださいね。

## **🐮✨**

<p class="codepen" data-height="618" data-default-tab="result" data-slug-hash="NPKVXeE" data-pen-title="💖 ご支援いただけませんか？" data-editable="true" data-user="yamamotoyushi" style="height: 618px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/NPKVXeE">
  💖 ご支援いただけませんか？</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>