twentyhq/twentyって何？コスプレイヤーあるあるで学ぶ新CRMツール！

twentyhq/twenty

コスプレイヤーさんにとって、イベントでの交流、衣装の管理、撮影の計画って、めちゃくちゃ大事だよね？それを「ソフトウェアエンジニアのあるある」に置き換えると、twentyhq/twentyはまさにそんな感じ！

「イベントでの交流」= 顧客との関係構築 (CRM)

コスプレイヤー
イベントで名刺交換したり、SNSで繋がったりして、新しい友達やフォロワーを増やすのが楽しいよね！

twentyhq/twenty
これまでのSalesforceみたいに、企業が顧客情報を管理したり、営業活動を記録したり、サポートを提供したりするのに使うんだ。顧客との関係をしっかり築くことで、ビジネスを大きくしていくのに役立つよ。まさに「顧客と仲良くなるためのツール」って感じ！

「衣装の管理」= プロジェクト管理・タスク管理

コスプレイヤー
あのキャラの衣装はどこに仕舞ったっけ？この小道具、まだ作ってない！ってなっちゃう時ない？ちゃんと管理しておかないと、撮影当日に困っちゃうよね。

twentyhq/twenty
顧客とのやり取りやプロジェクトの進捗をしっかり管理できるよ。例えば、「A社への提案資料、まだ途中だっけ？」とか、「B社からの問い合わせ、誰が対応するんだっけ？」みたいな情報を一元的に管理できるから、誰が何をすべきか、パッと見てわかるようになるんだ。

「撮影の計画」= 自動化・効率化

コスプレイヤー
撮影のスケジュール調整、スタジオの予約、カメラマンさんとの打ち合わせ、メイクの準備…って、やることいっぱい！もっと効率よく進められたら、その分、もっと素敵な写真が撮れるのに！

twentyhq/twenty
定型的な作業を自動化したり、情報を連携させたりすることで、これまで手作業で時間がかかっていた部分を大幅に効率化できるんだ。例えば、「新しい顧客が登録されたら、自動でウェルカムメールを送る」とか、「特定の条件を満たしたら、担当者にタスクを割り当てる」みたいなことができるようになるよ。

つまり、twentyhq/twentyは、これまで企業の「顧客関係管理（CRM）」で定番だったSalesforceの「もっと使いやすくて、もっと柔軟なオープンソース版」みたいな存在なんだ！コミュニティの力で進化していくから、新しい機能がどんどん追加されて、私たちエンジニアにとってもワクワクするプロジェクトだよ！

さて、ここからはちょっと技術的な話になるけど、安心してね！コスプレイヤーさんが衣装を自作する時のように、イチから作っていく楽しさをイメージしながら見てみてね。

twentyhq/twentyは、Webアプリケーションとして動くから、動かすための「土台」が必要になるんだ。

コスプレ衣装を作るのに布やミシンが必要なように、twentyhq/twentyを動かすにはいくつか必要なものがあるよ。

Node.js
JavaScriptを動かすための実行環境。最新のLTSバージョンがおすすめだよ。

npm または Yarn
JavaScriptのパッケージ管理ツール。

Git
twentyhq/twentyのコードをダウンロードするために使うよ。

Docker および Docker Compose (推奨)
データベースなどの依存関係を簡単に動かすために使うと便利だよ。

まずはtwentyhq/twentyのソースコードを自分のパソコンにダウンロードするよ。GitHubからクローンするんだ。

git clone https://github.com/twentyhq/twenty.git
cd twenty

次に、プロジェクトが使うライブラリやツールをインストールするよ。

# npmを使う場合
npm install

# yarnを使う場合
yarn install

さあ、いよいよtwentyhq/twentyを動かしてみよう！開発環境で試す場合は、Dockerを使うと簡単にデータベースなども立ち上げられるよ。

Docker Composeを使う場合 (一番簡単でおすすめ！)

twentyhq/twentyのプロジェクトには、Docker Composeの設定ファイルが用意されていることが多いよ。これを使えば、必要なサービス（データベースなど）をまとめて立ち上げられるんだ。

docker-compose up -d  # -d はバックグラウンドで実行するオプション

データベースなどの準備ができたら、アプリケーション本体を起動するよ。

npm run dev # または yarn dev

これで、通常は http://localhost:3000 などでtwentyhq/twentyの画面にアクセスできるようになるはずだよ！

twentyhq/twentyは、React, JavaScript, GraphQLを使っているから、これらの知識があると、より深くカスタマイズできるよ。

例えば、新しい「顧客情報」のフィールドを追加したい場合、GraphQLのスキーマ定義を修正したり、Reactのコンポーネントを修正したりすることになるんだ。

例
新しい顧客情報フィールドを追加するイメージ (擬似コード)

twentyhq/twentyの内部構造はかなり複雑なので、ここではあくまで概念的な説明になるけど、イメージを掴んでみてね。

GraphQLスキーマの定義を更新
graphql/schema.graphql のようなファイルで、顧客エンティティに新しいフィールドを追加するよ。

type Customer {
  id: ID!
  name: String!
  email: String!
  # 新しく追加したいフィールド
  favoriteCosplayCharacter: String
}

type Query {
  customers: [Customer!]!
  customer(id: ID!): Customer
}

type Mutation {
  createCustomer(name: String!, email: String!, favoriteCosplayCharacter: String): Customer!
  updateCustomer(id: ID!, name: String, email: String, favoriteCosplayCharacter: String): Customer!
}

Reactコンポーネントの修正
顧客情報を表示・編集するReactコンポーネント (例
src/components/CustomerDetail.jsx) で、この新しいフィールドを表示したり、入力フォームを追加したりするよ。

import React, { useState, useEffect } from 'react';
import { useQuery, useMutation, gql } from '@apollo/client';

const GET_CUSTOMER = gql`
  query GetCustomer($id: ID!) {
    customer(id: $id) {
      id
      name
      email
      favoriteCosplayCharacter # 新しいフィールド
    }
  }
`;

const UPDATE_CUSTOMER = gql`
  mutation UpdateCustomer($id: ID!, $name: String, $email: String, $favoriteCosplayCharacter: String) {
    updateCustomer(id: $id, name: $name, email: $email, favoriteCosplayCharacter: $favoriteCosplayCharacter) {
      id
      name
      email
      favoriteCosplayCharacter # 新しいフィールド
    }
  }
`;

function CustomerDetail({ customerId }) {
  const { loading, error, data } = useQuery(GET_CUSTOMER, { variables: { id: customerId } });
  const [updateCustomer] = useMutation(UPDATE_CUSTOMER);

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [favoriteCharacter, setFavoriteCharacter] = useState(''); // 新しいステート

  useEffect(() => {
    if (data && data.customer) {
      setName(data.customer.name);
      setEmail(data.customer.email);
      setFavoriteCharacter(data.customer.favoriteCosplayCharacter || '');
    }
  }, [data]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await updateCustomer({
      variables: {
        id: customerId,
        name,
        email,
        favoriteCosplayCharacter: favoriteCharacter, // 新しいフィールドを送信
      },
    });
    alert('顧客情報が更新されました！');
  };

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラーが発生しました: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <br />
      <label>
        好きなコスプレキャラ:
        <input type="text" value={favoriteCharacter} onChange={(e) => setFavoriteCharacter(e.target.value)} />
      </label>
      <br />
      <button type="submit">更新</button>
    </form>
  );
}

export default CustomerDetail;

ポイント

twentyhq/twentyは大規模なプロジェクトなので、すぐに全体を理解するのは難しいかもしれないけど、まずは「どこをいじればどう変わるのか」を少しずつ試してみるのが大事だよ。

公式ドキュメントやコミュニティの情報を参考にしながら進めるのが、コスプレの作り方動画を見るように、一番の近道だよ！

困ったことがあったら、GitHubのIssueやDiscussionで質問してみるのも手だよ。オープンソースプロジェクトの醍醐味だね！

twentyhq/twentyは、企業にとっての「Salesforce」のように、顧客との関係を深め、業務を効率化するための強力なツールだよ。そして、私たちソフトウェアエンジニアにとっては、React, JavaScript, GraphQLといったモダンな技術を学びながら、コミュニティと一緒にプロダクトを成長させる楽しさを味わえる、まるで「みんなで最高の衣装を作る」ようなワクワクするプロジェクトなんだ！