Vite-React-TS①

IT

こんにちは、もちきなこです。本日は、題名にもありますが、Vite、React、Typescriptを使用した環境で、少しずつコードをアップしながら、試行錯誤していきたいと思っています。調べ物にはAI(copilot)を活用して時間短縮を図っています。

作成する処理(概要)

初めに作成を行う画面の想定としては、「CSVデータ登録処理」です。(仕事で勉強中なのですが、何か自分で腑に落ちないところがあり、自分で記載してみたら(仕事ではソースの流用で書いています)、不明点が明らかになるかと思いやってみます。)また、バック側に関しての環境設定などを全然行えていないため、フロント側のみ、データはmockで作成するものとして想定しています。

案件の環境によっては使用できるかわからないのですが、今回は私が細かい設計をしたことがないということもあり、AIの「copilot」を使用して、以下のフローチャートを作成してもらいました(家で行う分には自由なので、できるだけ最初の方は力を借りるつもりです)。

●全体処理概要(AI作成)
①[画面表示]
↓
②[CSVファイル選択]
↓
③[ファイル形式チェック(CSVか？)]
↓
④[CSVパース処理(例：papapase)]
↓
⑤[データ構造チェック(必須項目、型など)]
↓
⑥[バリデーション結果表示(エラー or　OK)]
↓
⑦[登録ボタン押下]
↓
⑧[API送信(POST)]
↓
⑨[登録結果表示]

※記載中に疑問点があり、フローチャートを修正しました。修正後は下記です。

●全体処理概要(AI作成)
①[画面表示]
↓
②[CSVファイル選択]
↓
③[ファイル形式チェック(CSVか？)]
↓
④[CSVパース処理(例：papapase)] + ⑤[データ構造チェック(必須項目、型など)]　※変更点
↓
⑥[バリデーション結果表示(エラー or　OK)]
↓
⑦[登録ボタン押下]
↓
⑧[API送信(POST)]
↓
⑨[登録結果表示]

それでは、上記の各項目について、それぞれの想定を詰めていきます。

①画面表示

目的：画面を表示させること、UI(デザイン)の確定

今回、デザインに関してはあまり想定していなくて、最初は、必要最低限処理が行えればよいと考えています。後々時間があり、できるのであれば、下記のような想定でCSSなどを調整予定です。

②CSVファイル選択

目的：CSVファイルを入力ファイルとして選択する
懸念点：
CSVファイル以外を選択した場合、エラーにできるのか？(html側で指定できる？)
ファイルの個数は、何個までOK？(上限個数以上の場合の挙動はどうなる？)

この部分に関しては、ユーザー(利用者)の動きに左右される部分で、行いたい処理の内容によっても変わるとは思います。

例えば、「ファイルの突合チェック」です。2つのファイルのデータに差異がないか確認し、差異がなかった場合にのみデータを登録し、差異があればエラーとして登録します。このような処理は、金融系処理など正確性や整合性を特に重要視する場合に行われますが、処理内容が多すぎて、仕様を深く理解していないと難しいので(コード見たことありますが、やってることはわかるけど、書けないモヤモヤ状態になるので、今の私には無理です。今回やろうとしている処理も私にとっては難しい処理です)それに、今回は処理内容の書き方を追いたいので、仕様をそんなに深堀する必要もないのでやりません。

あと、複数ファイルを受け付ける場合で考えられる処理は、「ファイルのマージ処理(2つ以上のファイルをマージしてのデータ登録)」であったりします。これも今の私には実装・設計が難しい処理のため割愛します(興味があったら調べてみてください。)

というわけで、今回は、最初なので、「1つのファイルを選択し、そのデータをすべて登録する」というところからやっていきたいと思います。

第一目標：1つのファイルを選択し、そのデータをすべて登録する

そして、第二段階として、「ファイルの中身のデータ形式によって、型変更を行う」とします。第二目標に関しては、難しそうな割によくわからなくなりそうなので、現段階で必須ではありません。

第二目標：ファイルの中身のデータ形式によって、型変更を行う

③ファイル形式チェック(CSVか？)

目的：ファイル形式がCSVであるかを確認する(違う場合は、エラー)

④CSVパース処理　＋　⑤データ構造チェック

目的：CSVファイルをデータとして扱いやすいJSON形式に変換し、データ構造が正しいかチェックを行う

懸念点：
CSVをJSON形式にパースする際に、ライブラリは何を使用するか？もしくは使用しないのか。
受け付けるファイルの型形式をどのように定義するか(バリデーション)
パースをするデータに、カンマ(,)以外の要素が含まれているのか(仕様確認)
→含まれている場合は、上記2点にも関連する
日付形式など正規表現等のデータ確認、変換が必要か？
値が抜けている、またはすべてない場合は？

まず、そもそものCSVファイルを形式チェックする際の前処理として、JSON形式にCSVをパースする処理が挙げられます。そもそも、CSV(Comma-separated Values)がその名の通り、カンマ(,)で値が分けられたシンプルなファイル形式であり、データ操作や配列操作が難しいということがこの処理が必要となってくる主な理由です(from copilot)。

対して、JSON(JavaScript Object Notation)は、オブジェクト構造を持つデータ形式で、プログラムで扱いやすいことが特徴です。

●CSV→JSONパースが必要な理由(from copilot)

①JSONはJavaScriptやTypeScriptで直接オブジェクトとして扱えるため、データ操作が簡単になる
②JSONに変換することで、各フィールド(数値や文字列等)の型チェックがしやすくなります
③JSONは、ネスト(入れ子)構造や配列を扱えるため、複雑なデータにも対応できます
④多くのWEB APIはJSON形式でデータを送受信するため、統一しやすい

JSONは、javaScriptのオブジェクト構文をベースにしたテキスト形式のデータ構造です。といわれてもイメージがしにくいかもしれませんが、実際にtype.jsなどで定義する以下のような値の形式をイメージしていただけるとわかりやすいと思います。(下記はUserというオブジェクトに、idとnameというフィールドがあります。)

type User = {
 id:string;
 name:string;
}

次にパース時のデータ構造チェックの注意点です(from copilot)。

①ヘッダーとデータの整合性
→ヘッダー(1行目)とデータの列数が一致しているか。
　(値が欠けるとデータが正常に読み込まれない)

②データ型の変換
→CSVはすべて文字列として読み込まれるため、数値や日付は手動で変換が必要
　（例：'12'→12(数値)、'2025-08-05'→new Date()など）

③空白や改行の処理
→セル内にカンマや改行が含まれる場合、"(ダブルクォーテーション)で囲まれているか？
　(そのままsplit(',')すると誤って分割されることがある(シングルクォーテーション))

④日本語CSVはShift_JISで保存されていることが多く、UTF-8に変換しないと文字化けすることがある。

⑤エスケープ文字の扱いに気を付ける
→カンマ(,)や改行(\n)、ダブルクォーテーション(")など(たいてい、"で囲む)

⑥バリデーション結果表示(エラー or　OK)

目的：データ構造チェックでエラーがあった場合にエラーメッセージを表示する

上記エラーメッセージの表示の工夫としては、下記が挙げられる(from copilot)。

①行番号を表示(どの行にエラーがあるかを明示する)
②間違えている項目を表示
③色や警告アイコンで視認性を高める

けれど、今回に関しては、エラーが発生したということがわかればOKのため、細かい行や項目名は表示させないものとする。

⑦登録ボタン押下

目的：イベントハンドラの起動

ユーザー(利用者)イベントのため、割愛

⑧API送信(POST)

目的：API送信でデータ内容を登録する

今回はmockで返す想定のため、割愛

⑨登録結果表示

目的：どのファイルを登録したのか、登録番号などの情報をユーザーに知らせる

一時まとめ①

一旦ここまで頭を整理して、情報を一度に入れて、頭がこんがらがってきたので、今日はこれくらいで考えるのをやめます。APIのところ、もう少し深堀したいんですけど、、、環境がないので、ちょっと保留です。

あとはこれをコーディングできるくらい粒度を細かくしていきたい。。。

本日は以上です。

コメント