React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法

React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法

はじめに:
今日の情報爆発の時代では、データ分析が重要な部分になっています。さまざまな業界とのつながりに欠かせない存在。中でも、高速かつ効率的なデータ分析アプリケーションを構築することは、多くの企業や個人が追求する目標となっています。この記事では、React と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法を紹介し、詳細なコード例を示します。

1. 概要
React は、ユーザー インターフェイスを構築するために使用される JavaScript ライブラリであり、インタラクティブな Web アプリケーションを簡単に作成できます。 Google BigQuery は、フルマネージドで弾力性のある高性能の分散データ ウェアハウスであり、ビッグ データ分析に非常に適しています。 React と Google BigQuery を組み合わせると、強力なデータ分析アプリケーションを構築できます。

2. 準備

1. React と関連依存関係のインストール:
   まず、Node.js 環境がインストールされていることを確認します。次に、次のコマンドを使用して、新しい React アプリケーションを作成できます:

   npx create-react-app data-analysis-app

2. Google Cloud プロジェクトを作成します:
   Google Cloud コンソールにログインし、新しいプロジェクトを作成します。プロジェクトで BigQuery API を有効にし、サービス アカウントを作成して、その認証情報ファイルをダウンロードします。

3. Google Cloud SDK をインストールします:
   Google Cloud SDK をインストールし、次のコマンドを使用して Google Cloud アカウントにログインします:

   gcloud auth login

3 React に接続する Google BigQuery で関連する依存関係をインストールする

1. #

   npm install @google-cloud/bigquery

2. BigQuery クライアントを作成する:

   ルート ディレクトリの下の src ディレクトリにReact アプリケーションの新しいファイル bigquery.js を作成し、次のコードを記述します:
   

   const { BigQuery } = require('@google-cloud/bigquery');
   
   // 设置Service Account凭证
   const bigquery = new BigQuery({
    keyFilename: '<path-to-service-account-json>'
   });
   
   module.exports = bigquery;

「」を独自のサービス アカウントに置き換えます。認証情報ファイルのパス。

React コンポーネントでの BigQuery の使用:
3. データ分析を使用する必要がある React コンポーネントでは、BigQuery クライアントをインポートし、クエリを実行するために提供されるメソッドを使用できます。たとえば、コンポーネントのライフサイクル メソッドでクエリを実行し、結果をコンポーネントの状態に保存できます。
   

import bigquery from './bigquery.js';

class DataAnalysisComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            result: []
        };
    }

    componentDidMount() {
        this.executeQuery();
    }

    executeQuery() {
        bigquery
            .query('<your-query>')
            .then((results) => {
                this.setState({ result: results });
            })
            .catch((err) => {
                console.error('Error executing query:', err);
            });
    }

    render() {
        // 渲染数据分析结果
        return (
            <div>
                {this.state.result.map((row, index) => (
                    <div key={index}>{row}</div>
                ))}
            </div>
        );
    }
}

'' を独自のクエリ ステートメントに置き換えます。

4. データ分析アプリケーションを構築する

上記の手順により、React と Google BigQuery の接続に成功しました。次に、特定のニーズに基づいてデータ分析アプリケーションを構築できます。

1. データ分析ページを作成します:

   React アプリケーションの src ディレクトリに新しいファイル DataAnaracyPage.js を作成し、次のコードを記述します:
   

   import React from 'react';
   import DataAnalysisComponent from './DataAnalysisComponent';
   
   function DataAnalysisPage() {
    return (
        <div>
            <h1 id="数据分析应用">数据分析应用</h1>
            <DataAnalysisComponent />
        </div>
    );
   }
   
   export default DataAnalysisPage;

2. ルートの追加:

   React アプリケーションの src ディレクトリにある App.js ファイルに、データ分析ページのルートを追加します:
   

   import React from 'react';
   import { BrowserRouter as Router, Route } from 'react-router-dom';
   import DataAnalysisPage from './DataAnalysisPage';
   
   function App() {
    return (
        <Router>
            <Route exact path="/" component={DataAnalysisPage} />
        </Router>
    );
   }
   
   export default App;

アプリケーションを実行します:
3. React apply を実行し、ブラウザから http://localhost:3000 にアクセスしてデータ分析ページを表示します。
   

概要:

React と Google BigQuery を組み合わせることで、高速かつ効率的なデータ分析アプリケーションを簡単に構築できます。 React の柔軟性と BigQuery の機能を活用することで、さまざまな複雑なデータ分析のニーズを満たすことができます。この記事のコード例がデータ分析アプリケーションの構築に役立つことを願っています。

以上がReact と Google BigQuery を使用して高速データ分析アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。