【ThoughtSpotTips】ThoughtSpot Developer機能向けの開発環境構築

2025年9月23日 2025年9月22日 7分19秒

猪股伸太郎

ThoughtSpot Developer機能を試してみたい方に向けて、開発環境の構築方法をご紹介します。

こんにちは！ShintaroInomataです。

ThoughtSpot では、Embed などの機能を利用する際に Web 関連の知識が求められます。この分野に詳しくない方は、途中で挫折してしまうこともあるのではないでしょうか。

今回は、Web 系初心者向けに ThoughtSpot 用のローカル開発サーバーを作成する方法について解説します。

この記事を読むことで、 ThoughtSpot SDK やカスタムチャートなどの検証・実装をスムーズに進められるようになります。

用語解説：今回使うツールなど

まず最初に、環境構築で使用するツールについて簡単に説明します。すでにご存じの方は読み飛ばしていただいて構いません。

Node.js

JavaScript をサーバーサイドで実行できるようにするランタイム環境。パッケージ管理ツール（npm）も付属していて、Web アプリ開発の基盤となります。

npm(Node Package Manager)

Node.js に標準で付属しているパッケージ管理ツール。外部ライブラリのインストールや依存関係の管理に使用します。

Vite

高速なビルドツール兼開発サーバー。フロントエンド開発に適しており、開発効率が高いです。

TypeScript

JavaScript に型付け機能を加えた言語。ThoughtSpot では TypeScript を使ったコードが見受けられるため、今回の検証ではこちらを利用します。

ローカルサーバー

開発者の PC 上で動作するテスト用サーバー。本番公開前に動作確認や検証を行う際に利用します。

開発用サーバーの作成

まずはNode.jsをインストールします。公式サイトからダウンロードすることができます。

インストールが完了したら、コマンドプロンプトを開きます。

以下のコマンドを実行し、バージョンが表示されればインストールは正常に完了しています。

node -v      #Node.jsのバージョン確認 
npm -v       #npmのバージョン確認

次に、作業用ディレクトリを作成して移動します。

フォルダの場所は任意ですが、見失わないよう、分かりやすい場所に作成するのがおすすめです。

ドキュメントやデスクトップ内、もしくは、ユーザーフォルダ直下に作成する開発用フォルダ内などが良いです。

ここでは例として thoughtspot-sample というフォルダを作成し、その中に移動します。

md thoughtspot-sample    #フォルダを作成
cd thoughtspot-sample    #作成したフォルダに移動

移動したフォルダ内でVite のプロジェクトを作成します。

ここでいう「プロジェクト」とは、必要なファイルなどをまとめたひとつの作業単位のことです。

npm create vite@latest

コマンドを実行すると、対話形式でいくつかの選択肢が表示されます。

以下の画像のように選択していきます。

プロジェクト名

ここではフォルダ名と同じ thoughtspot-sample にしています。
入力した名前でフォルダが作成され、その中に必要なファイルや設定（アセット）が自動で入ります。

フレームワークの選択

フレームワークを使わない Vanilla を選びます。

言語の選択

本記事では TypeScript を選びます。
もちろん JavaScript を選んでも問題ありません。

続いて、表示されている指示に従ってコマンドを実行します。

cd thoughtspot-sample 　 #作成したフォルダに移動
npm install           　 #必要なパッケージをインストール
npm run dev              #開発サーバーを起動

実行すると以下のような出力が表示されます。

Local: の URL をコピーし、ブラウザのアドレスバーに貼り付けてアクセスします。

この画面がブラウザに表示されれば、開発環境構築は完了です。

サーバーを停止するときは、コマンドプロンプトで「Ctrl+C」もしくは「q+Enter」を押してください。

最後にファイル構成を確認していきます。以下の画像のようになっています。

node_modules

プロジェクトで利用する外部ライブラリ（npm パッケージ）が格納されるフォルダ。

public

画像やアイコンなど、ビルド時にそのまま出力される静的ファイルを配置するフォルダ。

src

アプリケーションのソースコードを配置するフォルダ。

.gitignore

Git で管理対象外とするファイルやフォルダを指定する設定ファイル。

index.html

公開される HTML ページの本体。

package-lock.json

インストールしたライブラリのバージョンを固定しておくファイル。

package.json

プロジェクトの基本情報や依存関係、利用できるスクリプトを定義するファイル。

tsconfig.json

TypeScript のコンパイル方法を指定する設定ファイル。

初期状態では index.html から src/main.ts が参照されています。今回の構成で検証を行う際は、main.ts に ThoughtSpot の埋め込みコードなどを記述します。

まとめ

Node.js と Vite を使えば、ほんの数コマンドで開発用サーバーを立ち上げることができます。

今後は、この環境を使って ThoughtSpot の Embed やカスタムチャートなどを機能を解説していく予定ですので、そちらもぜひご覧ください。

参考URL

GitHub: ThoughtSpot Charts SDK