[PR] 本記事にはプロモーションが含まれています。

【開発記】React + TypeScriptで血液検査記録WEBアプリを作る（第2回：Vite環境構築とファイルの読み込み）

React

前回の全体構想を踏まえ、今回からいよいよ手を動かして開発をスタートする。

「いきなりグラフを描画する」「いきなりデータベースに繋ぐ」といった大きな飛躍は避け、まずはスモールスタートの第一歩として、「手元のExcelファイルをブラウザに読み込ませて、生データを画面にそのまま表示する」だけの最小機能を作成していく。

1. Viteを使ったReact環境の構築

今回は、高速なビルドツールである「Vite（ヴィート）」を使ってReact + TypeScriptの環境を構築する。WSL（Ubuntu）のターミナルを開き、以下のコマンドを順に実行してプロジェクトの土台を作成した。

Bash
# Viteを使ってプロジェクトを作成
npm create vite@latest blood-test-app -- --template react-ts

# 作成したディレクトリに移動
cd blood-test-app

# 必要なパッケージをインストール
npm install

# Excelファイルを読み込むためのライブラリを追加
npm install xlsx

# ブラウザでの動作確認
npm run dev

ブラウザでhttp://localhost:5173/にアクセスし初期画面が表示されるか確認。

2. 最小構成のファイル読み込み実装

初期状態の不要なファイルを整理し、メインとなる src/App.tsx を以下のコードに書き換えた。
画面の装飾や複雑なデータ処理は一切省き、「ファイルを選択する」→「中身をテキストとして表示する」という基本ルートの開通だけに集中している。

TypeScript
import React, { useState } from 'react';
import * as XLSX from 'xlsx';

export default function App() {
  // 読み込んだ生データ（配列）を保持するState
  const [rawData, setRawData] = useState<any[]>([]);

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 1. 選択されたファイルを取得
    const file = e.target.files?.[0];
    if (!file) return;

    // 2. ブラウザ標準のファイル読み取り機能を使う準備
    const reader = new FileReader();
    
    // 3. 読み込みが終わった後に実行される処理を定義
    reader.onload = (event) => {
      const bstr = event.target?.result;
      
      // Excelファイルとして解析
      const workbook = XLSX.read(bstr, { type: 'binary' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];

      // 扱いやすい2次元配列（行と列のデータ）に変換してStateに保存
      const data = XLSX.utils.sheet_to_json<any[]>(worksheet, { header: 1 });
      setRawData(data);
    };
    
    // 4. 実際のファイル読み込み処理をスタート
    reader.readAsBinaryString(file);
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h2>ステップ1: ファイル読み込みの基礎</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <input type="file" accept=".xlsx, .xls" onChange={handleFileUpload} />
      </div>

      <pre style={{ background: '#f4f4f4', padding: '15px', borderRadius: '4px', overflowX: 'auto' }}>
        {rawData.length > 0 ? JSON.stringify(rawData, null, 2) : 'ここにExcelのデータが表示されます'}
      </pre>
    </div>
  );
}

3. ファイル読み込みの仕組み（今回の学び）

このステップを通じて、React（ブラウザ）上でローカルファイルを扱う際の重要な仕組みを理解できた。

  • イベント駆動のファイル取得
    <input type="file" onChange={handleFileUpload}> によって、ユーザーがファイルを選んだ瞬間にイベント（e）が発火する。システムが勝手にファイルを覗き見することはできず、必ずこのユーザー操作（イベント）を起点として e.target.files からファイル情報を受け取る必要がある。
  • 非同期処理（FileReader）
    ファイルの読み込みには時間がかかるため、reader.readAsBinaryString(file) で読み込みを開始する前に、「読み込み終わったらどうするか（reader.onload）」という予約処理を書いておく必要がある。
  • Excelの解析
    ブラウザ標準機能だけではExcelの複雑な構造は読めないため、xlsx ライブラリの力を借りて、バイナリデータをJavaScriptで扱いやすい2次元配列に変換している。

4. 実行結果の確認

実際にローカルサーバー（http://localhost:5173/）にアクセスし、動作を確認してみる。

画面上の「ファイルを選択」ボタンから、手元にある病院のExcelファイルを選んで読み込ませる。
無事に読み込みが成功すると、画面の下部に以下のような生の文字の羅列（2次元配列データ）が表示されるはずだ。

これで「Excelの生データがプログラムで扱える状態になって、システム内に無事入ってきた」ことが証明できた。

コメント