teratail header banner
teratail header banner
質問するログイン新規登録
Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Vite

Viteは、フロントエンド向けのビルドツール。JavaScriptはもちろん、さまざまな環境での利用が可能です。ES Modulesを利用することで高速ビルドを実現でき、ファイルの変更時も変更箇所のみを更新できるといった特徴があります。

Q&A

0回答

73閲覧

React + TypeScript + Vite環境でgoogle-spreadsheet のAPI使用時に「process is not defined」エラーが発生する

akinote

総合スコア0

Google スプレッドシート

Google スプレッドシートは、フリーで利用できる表計算ソフト。Webアプリのためインターネットに接続することで利用できます。チャートやグラフの作成のほか、シートを他のユーザーと共有したり、同時に作業を進めることも可能です。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Vite

Viteは、フロントエンド向けのビルドツール。JavaScriptはもちろん、さまざまな環境での利用が可能です。ES Modulesを利用することで高速ビルドを実現でき、ファイルの変更時も変更箇所のみを更新できるといった特徴があります。

0グッド

0クリップ

投稿2025/06/22 15:30

編集2025/06/22 15:40

0

0

React + TypeScript + Vite の構成で、Googleスプレッドシートの読み書きを行うコードをGoogle Sheets APIを使用し localhost 環境でテストしています。
GoogleCloudConsole側では、「承認済みのJavaScript生成元」に http://localhost:5173 を指定済みです。
google-spreadsheet ライブラリ(https://www.npmjs.com/package/google-spreadsheet )を使用し、公式リファレンスに従って以下のようなコードを書いています。

main.tsx(アプリ起動部分)

import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./scss/pages/main/index.scss"; import { SheetAction } from "./SheetAction"; createRoot(document.getElementById("root")!).render( <StrictMode> <SheetAction /> </StrictMode> );

SheetAction.tsx(スプレッドシート読み込み処理)

import { GoogleSpreadsheet } from "google-spreadsheet"; import { JWT } from "google-auth-library"; const serviceAccountAuth = new JWT({ email: import.meta.env.VITE_GOOGLE_SERVICE_ACCOUNT_EMAIL, key: import.meta.env.VITE_GOOGLE_PRIVATE_KEY, scopes: ["https://www.googleapis.com/auth/spreadsheets"], }); const doc = new GoogleSpreadsheet( import.meta.env.VITE_GOOGLE_SHEETS_DOC_ID, serviceAccountAuth ); await doc.loadInfo(); console.log(doc.title); export const SheetAction: React.FC = () => { return ( <div> <h1>hoge</h1> </div> ); };

npm run dev にて開発サーバーを起動してブラウザで確認したところ、

Uncaught ReferenceError: process is not defined
のエラーが発生し、原因が分かりません。

エラーの原因と、正しい設定方法をご存知の方がいればご教示いただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問