Go と React を使用して再利用可能なテーブル コンポーネントを構築する方法

Web アプリケーションの複雑さが増し続けるにつれて、テーブルは多くの Web アプリケーションに必要なコンポーネントの 1 つになりました。ただし、強力で保守が容易なテーブルを構築するには、多大な時間と労力を投資する必要があります。この問題を解決するには、Go 言語と React を使用して、複数のプロジェクトで使用する再利用可能なテーブル コンポーネントを構築します。

この記事では、Go 言語と React を使用してテーブル コンポーネントを構築し、プロジェクトで簡単に再利用できるようにする方法を紹介します。

1. テーブル コンポーネントの基本を理解する

テーブル コンポーネントの構築を開始する前に、いくつかの基本概念を理解する必要があります。テーブル コンポーネントは通常、次の部分で構成されます。

• Header: 列のタイトルを表示します。
• Row: 各行にはセルのグループが含まれます。セル内のデータは、テキスト、数値、画像などです。
• 列: 各列にはセルのグループが含まれます。通常、列はテーブル内の属性またはデータを記述します。

2. Go 言語と React のインストール

Go 言語と React をインストールしていない場合は、最初にインストールしてください。次のリンクからダウンロードしてインストールできます:

• Go 言語: https://golang.org/
• React: https://reactjs.org/

インストールが完了したら、Go のバージョンが 1.11 以降、React のバージョンが 16.x 以降であることを確認してください。

3. 基本的なテーブル コンポーネントの作成

次に、基本的なテーブル コンポーネントを作成しましょう。 Reactを使用してコンポーネントを作成し、Go言語を使用してバックグラウンドでデータを処理します。まず、コマンド ラインで新しい Go 言語プロジェクトを作成する必要があります。

$ mkdir my-table-app
$ cd my-table-app
$ go mod init my-table-app

次に、プロジェクト内に新しい React コンポーネントを作成する必要があります。プロジェクトのルート ディレクトリで、次のコマンドを実行します。

$ npx create-react-app my-table-app
$ cd my-table-app

React プロジェクトを作成したので、基本的なテーブル コンポーネントを作成しましょう。 src ディレクトリに「Table.js」という名前のファイルを作成します。このファイルには、基本的なテーブルを作成するコードを記述します。

import React from 'react';

function Table(props) {
  return (
    <>
      <table>
        <thead>
          <tr>
            {props.columns.map(column => (
              <th>{column}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {props.rows.map(row => (
            <tr>
              {Object.values(row).map(value => (
                <td>{value}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

export default Table;

このコンポーネントでは、列と行という 2 つのプロパティを受け取ります。 columns 属性はテーブル内のすべての列のタイトルを含む配列であり、rows 属性はテーブル内のすべての行のデータを含む配列です。コンポーネントでは、map() 関数を使用してこのデータを反復処理し、テーブルにレンダリングします。

4. テーブル データ取得インターフェイスの実装

次に、テーブル データを取得するインターフェイスを Go 言語で実装する必要があります。 Go言語ではginフレームワークを利用してRESTful APIを簡単に作成できます。まず、プロジェクトに gin フレームワークをインストールする必要があります。コマンド ラインで次のコマンドを実行します。

$ go get -u github.com/gin-gonic/gin

次に、プロジェクトのルート ディレクトリに「main.go」という名前のファイルを作成し、次のコードを記述します。

package main

import (
    "net/http"

    "github.com/gin-gonic/gin"
)

type Row struct {
    ID       int
    Name     string
    Age      int
    Location string
}

var rows = []Row{
    {1, "John", 28, "New York"},
    {2, "Jane", 32, "Chicago"},
    {3, "Mary", 24, "San Francisco"},
    {4, "Bob", 41, "Miami"},
}

func main() {
    r := gin.Default()

    r.GET("/api/rows", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "rows": rows,
        })
    })

    r.Run(":8080")
}

このファイルには、 ID、名前、年齢、場所の 4 つの属性を含む Row という名前の構造を定義します。次に、テーブル内のすべての行のデータを含む配列 rows を定義します。次に、リクエストが到着したときにすべての行のデータを返す「/api/rows」という API インターフェイスを作成しました。最後に、r.Run(":8080") メソッドを使用して API サービスを開始しました。

5. React でテーブル コンポーネントを使用する

これで、テーブル コンポーネントとデータ取得インターフェイスの作成が完了しました。これらを組み合わせて、完全なテーブル アプリケーションを実装してみましょう。まず、React プロジェクトのルート ディレクトリで次のコマンドを実行して、Axios および React Table コンポーネント ライブラリをインストールします。

$ npm install axios react-table

次に、src ディレクトリに「App.js」という名前のファイルを作成し、次のように記述する必要があります。次のコードを入力します。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Table from './Table';
import './App.css';
import 'react-table/react-table.css';

function App() {
  const [columns, setColumns] = useState([]);
  const [rows, setRows] = useState([]);

  useEffect(() => {
    axios.get('/api/rows').then(response => {
      setColumns(Object.keys(response.data.rows[0]));
      setRows(response.data.rows);
    });
  }, []);

  return (
    <div className="App">
      <h1>My Table App</h1>
      <Table columns={columns} rows={rows} />
    </div>
  );
}

export default App;

このコンポーネントでは、useState() フックと useEffect() フックを使用してコンポーネントの状態を管理します。 useEffect() では、Axios ライブラリを使用して GET リクエストを API インターフェイスに送信し、コールバック関数で応答データをコンポーネントの状態に設定します。最後に、この状態データを前に作成したテーブル コンポーネントに渡すことによって、テーブルをページ上にレンダリングします。

6. 結論

この記事では、Go 言語と React を使用して再利用可能なテーブル コンポーネントを構築し、それを紹介する単純な Web アプリケーションを作成しました。これらの手法を使用すると、テーブル コンポーネントを簡単に再利用でき、さまざまなプロジェクトでテーブル コードを記述する時間と労力を削減できます。 Go 言語と React について詳しく知りたい場合は、公式ドキュメントを参照してください。

以上がGo と React を使用して再利用可能なテーブル コンポーネントを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。