> ## Documentation Index
> Fetch the complete documentation index at: https://clickhouse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> marimo は、データを扱うための次世代の Python ノートブックです

# ClickHouse で marimo を使う

export const CommunityMaintainedBadge = () => {
  return <div className="CommunityMaintainedBadge">
            <div className="CommunityMaintainedIcon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                <path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"></path>
            </svg>
        </div>
            コミュニティ管理
        </div>;
};

export const Image = ({img, alt, size = "lg"}) => {
  const normalizedSize = ["sm", "md", "lg"].includes(size) ? size : "lg";
  return <div className={`ch-image-${normalizedSize}`}>
      <Frame>
        <img src={img} alt={alt} />
      </Frame>
    </div>;
};

<CommunityMaintainedBadge />

[marimo](https://marimo.io/) は、SQL を標準搭載した、Python 向けのオープンソースのリアクティブノートブックです。セルを実行したり UI 要素を操作したりすると、marimo は影響を受けるセルを自動的に実行し (または古い状態としてマークし) 、コードと出力の整合性を保ちながら、不具合を未然に防ぎます。すべての marimo ノートブックは純粋な Python として保存され、スクリプトとして実行可能で、アプリとしてデプロイすることもできます。

<Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/clickhouse-connect.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=2d6094ac7d7a879f44e63831d65fc479" size="md" border alt="ClickHouse に接続" width="1536" height="864" data-path="images/integrations/sql-clients/marimo/clickhouse-connect.webp" />

<Steps>
  <Step title="SQL サポート付きで marimo をインストールする" id="install-marimo-sql">
    ```shell theme={null}
    pip install "marimo[sql]" clickhouse_connect
    marimo edit clickhouse_demo.py
    ```

    これにより、localhost で動作している Web ブラウザーが開くはずです。
  </Step>

  <Step title="ClickHouse に接続する" id="connect-to-clickhouse">
    marimo エディターの左側にあるデータソースパネルに移動し、'Add database' をクリックします。

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/panel-arrow.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=75bac97edf62ac55175b895c4f84ce82" size="sm" border alt="新しいデータベースを追加する" width="491" height="561" data-path="images/integrations/sql-clients/marimo/panel-arrow.webp" />

    データベースの詳細を入力するよう求められます。

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/add-db-details.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=e6ed8197162ee8fbec6bb1718b093ef3" size="md" border alt="データベースの詳細を入力する" width="818" height="487" data-path="images/integrations/sql-clients/marimo/add-db-details.webp" />

    その後、接続を確立するために実行できるセルが表示されます。

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/run-cell.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=4b0b04adf173fe505c95b513d80c94e3" size="md" border alt="セルを実行して ClickHouse に接続する" width="995" height="283" data-path="images/integrations/sql-clients/marimo/run-cell.webp" />
  </Step>

  <Step title="SQL を実行する" id="run-sql">
    接続を設定したら、新しい SQL セルを作成し、ClickHouse engine を選択できます。

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/choose-sql-engine.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=9ebaa1aa13470dc0137a99fd1292e1bd" size="md" border alt="SQL エンジンを選択" width="2762" height="709" data-path="images/integrations/sql-clients/marimo/choose-sql-engine.webp" />

    このガイドでは、New York Taxi データセットを使用します。

    ```sql theme={null}
    CREATE TABLE trips (
        trip_id             UInt32,
        pickup_datetime     DateTime,
        dropoff_datetime    DateTime,
        pickup_longitude    Nullable(Float64),
        pickup_latitude     Nullable(Float64),
        dropoff_longitude   Nullable(Float64),
        dropoff_latitude    Nullable(Float64),
        passenger_count     UInt8,
        trip_distance       Float32,
        fare_amount         Float32,
        extra               Float32,
        tip_amount          Float32,
        tolls_amount        Float32,
        total_amount        Float32,
        payment_type        Enum('CSH' = 1, 'CRE' = 2, 'NOC' = 3, 'DIS' = 4, 'UNK' = 5),
        pickup_ntaname      LowCardinality(String),
        dropoff_ntaname     LowCardinality(String)
    )
    ENGINE = MergeTree
    PRIMARY KEY (pickup_datetime, dropoff_datetime);
    ```

    ```sql theme={null}
    INSERT INTO trips
    SELECT
        trip_id,
        pickup_datetime,
        dropoff_datetime,
        pickup_longitude,
        pickup_latitude,
        dropoff_longitude,
        dropoff_latitude,
        passenger_count,
        trip_distance,
        fare_amount,
        extra,
        tip_amount,
        tolls_amount,
        total_amount,
        payment_type,
        pickup_ntaname,
        dropoff_ntaname
    FROM gcs(
        'https://storage.googleapis.com/clickhouse-public-datasets/nyc-taxi/trips_0.gz',
        'TabSeparatedWithNames'
    );
    ```

    ```sql theme={null}
    SELECT * FROM trips LIMIT 1000;
    ```

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/results.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=eddde02c1c117400f526cde6b5212a97" size="lg" border alt="DataFrame 内の結果" width="947" height="415" data-path="images/integrations/sql-clients/marimo/results.webp" />

    これで、結果を DataFrame で確認できるようになりました。次に、指定した乗車場所からの料金が最も高い降車地点を可視化してみましょう。marimo には、そのために役立つ UI コンポーネントがいくつか用意されています。ここでは、場所の選択にドロップダウンを使い、グラフの描画には altair を使います。

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/dropdown-cell-chart.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=543179507d3ef8834984689b9dfffcba" size="lg" border alt="ドロップダウン、テーブル、グラフの組み合わせ" width="2720" height="2115" data-path="images/integrations/sql-clients/marimo/dropdown-cell-chart.webp" />

    marimo のリアクティブ実行モデルは SQL クエリにも適用されるため、SQL を変更すると、依存するセルの後続の計算が自動的にトリガーされます (計算コストが高い場合は、セルを古い状態としてマークすることもできます) 。そのため、クエリを更新するとグラフとテーブルも変わります。

    データをすっきりしたインターフェイスで探索できるよう、App View に切り替えることもできます。

    <Image img="https://mintcdn.com/private-7c7dfe99/B2SPNiDHMxYV1gTC/images/integrations/sql-clients/marimo/run-app-view.webp?fit=max&auto=format&n=B2SPNiDHMxYV1gTC&q=85&s=6ef7bec53db738b66dfb8dd51a5cdda7" size="md" border alt="App View の実行" width="2209" height="1534" data-path="images/integrations/sql-clients/marimo/run-app-view.webp" />
  </Step>
</Steps>
