LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@YushiYamamoto(らくらくサイト 開発者)in株式会社プロドウガ

🚀 ノーコードで業務効率化！Retoolでアプリ開発を最速体験 ✨

Posted at

スクリーンショット 2025-02-04 18.42.21.png

はじめに

Retoolは、ノーコード／ローコードで業務アプリケーションを素早く構築できるツールです。
プログラマーなら「ドラッグ＆ドロップでUIを作って、JavaScriptやSQLでロジックを書く」という開発スタイルにとてもマッチします。
この記事では、Retoolの基本操作から実践的な使い方、さらには業務効率化のためのポイントを、具体例とともに紹介していきます。✌️

Retoolとは？

Retoolは、様々なデータベースやAPIと接続し、Webアプリケーションや業務管理画面を手軽に作成できるプラットフォームです。
主な特徴は以下の通りです。

  • ドラッグ＆ドロップでUI構築
    複雑なHTML/CSSを書く必要がなく、用意されたコンポーネントを配置するだけで業務アプリが完成します。

  • 多様なデータソースとの接続
    PostgreSQL、MySQL、Googleスプレッドシート、REST APIなど、様々なリソースと簡単に連携可能です。

  • JavaScriptによる高度なカスタマイズ
    コンポーネント間の連携や動的な処理は、Retool内で自由にJavaScriptコードで実装できます。

基本操作と開発フロー

まずは、Retoolのアカウント登録から簡単なアプリ作成までの流れを見ていきましょう。

1. アカウント作成とプロジェクトの立ち上げ

  1. Retoolのサイトにアクセスし、アカウントを作成します。
  2. ダッシュボードにログインしたら、「New App」ボタンをクリックして新規プロジェクトを開始します。

2. コンポーネントの配置

Retoolでは、右サイドバーにあるコンポーネントリストから必要なものをキャンバスにドラッグ＆ドロップします。
例えば、テーブル、フォーム、ボタン、テキストなどを配置できます。

下記は、テーブルコンポーネントを配置し、SQLクエリの結果を表示する基本的な設定例です。

// SQLクエリ例: usersテーブルから全件取得
select * from users;

そして、テーブルの「Data」プロパティに以下のように入力します。

{{ query1.data }}

この記述により、query1で取得したデータが自動的にテーブルに反映されます。📊

3. クエリの作成と接続

Retoolでは、外部データソースを「Resource」として管理します。
以下は、PostgreSQLに対するシンプルなSQLクエリの例です。

SELECT id, name, email FROM users WHERE name ILIKE '%' || {{ textinput1.value }} || '%';

このクエリは、テキスト入力コンポーネント（textinput1）の値を使ってユーザー名での検索を実現します。
「プレビュー」ボタンを押して、動作確認を行いましょう。✅

実践例：受注管理システムの構築

以下は、受注管理システムを例に、Retoolの具体的な使い方を紹介します。

アプリ概要

  • 案件一覧の表示
  • 受注データの編集や更新
  • 動的な検索ボックスでのフィルタリング

構築フローの図

      ┌────────────┐
      │  データベース  │
      │ (受注情報)   │
      └─────┬──────┘
            │
            ▼
      ┌────────────┐
      │   Retool   │
      │   App UI   │
      └─────┬──────┘
            │
            ▼
      ┌────────────┐
      │ユーザー 画面 │
      └────────────┘

  1. データベース設計
    受注管理用のテーブル（例：ordersテーブル）を用意。
    カラム例として、注文ID、顧客名、注文日時、ステータスなどを定義します。

  2. UI作成

    • 一覧表示
      テーブルコンポーネントにクエリ結果を表示。
    • フォーム実装
      編集用の入力フォームを配置し、選択した行のデータをフォームに反映。
    • 更新処理
      「保存」ボタンを作成し、更新用のSQLクエリまたはAPIリクエストをトリガーします。

受注データ更新用のサンプルコード

例えば、テーブルのセル編集後にデータベースを更新するためのクエリは以下のようになります。

UPDATE orders
SET status = {{ table1.recordUpdates.status }},
    updated_at = NOW()
WHERE id = {{ table1.recordUpdates.id }};

ボタンの「クリック時」イベントにこのクエリをバインドすれば、編集内容が即座にデータベースに反映されます。🔄

便利な機能とTips

Retoolには、業務効率化のために活用できる豊富な機能が搭載されています。

  • カスタムJavaScript
    入力フォームの検証や動的なデータ操作、独自ロジックも簡単に実装可能です。

    // ボタン押下時に入力値をチェックして通知を表示する例
if (!textinput1.value) {
  utils.showNotification({ title: '入力エラー', message: '値を入力してください', type: 'error' });
  return;
}

  • リアルタイム更新
    コンポーネント間の値の連携が可能で、入力変更と同時にクエリが再実行される機能を活用。
    例えば、検索ボックスでテキストを入力するだけでテーブル内容が自動更新されます。✨

  • バージョン管理とソース管理
    GitHubやGitLabなどとの連携で、コードの追跡も可能です。
    単純な変更もバージョン管理することで、安心して運用できます。

  • 外部API連携
    シンプルなREST APIの呼び出しから、複雑なデータ加工までRetool上で対応可能。
    APIキーや認証情報をセキュアに設定して、社内アプリケーションを構築できます。

まとめ

Retoolは、ドラッグ＆ドロップによる直感的なUI作成と、強力なJavaScript/SQLによるカスタマイズが魅力の開発ツールです。
業務効率化や内部システムの迅速な構築に大きな力を発揮し、少ない工数で高度なアプリケーションを実現できる点が特徴です。

初めてでも、今回ご紹介した基本操作やコードサンプルを参考にすれば、Retoolで実際の業務の改善につながるアプリが手軽に作成できるはずです。
ぜひ、あなたの業務システムにRetoolを取り入れて、開発効率をグッとアップさせましょう！🚀

この記事が、Retoolの導入や活用を検討しているエンジニアの皆さんの参考になれば幸いです。Happy Coding!

💖 ご支援いただけませんか？

スクリーンショット 2025-01-31 7.51.39.png

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

暗号資産による寄付

以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！ 送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

  • Ethereum (ETH)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: ERC-20）

  • BNB Chain (BNB)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: BEP-20）

  • Polygon (MATIC)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: Polygon）

  • Avalanche (AVAX)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    （ネットワーク: Avalanche C-Chain）

  • Solana (SOL)
    EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f

  • Stellar (XLM)
    アドレス: GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
    メモ: 必要に応じて入力してください。

  • Ripple (XRP)
    アドレス: r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
    タグ: 必要に応じて入力してください。

  • Cardano (ADA)
    addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7

  • Dogecoin (DOGE)
    DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H

資金用途

寄付金は以下の目的で活用させていただきます：

  1. サーバー維持費やデザインツール購入
  2. 学習活動（オンラインコース受講・書籍購入）
  3. 読者向け無料コンテンツ制作

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

補足情報

  • Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
    上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

  • USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。

  • 初回送金時には少額でテスト送金することをおすすめします。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?