feat: ファイルピッカーでのインポート機能を追加

src/components/ControlUI.vue

@@ -6,6 +6,7 @@
       <template #loading>クリップボードを読み取り中……</template>
       <template #completed>クリップボードからインポートしました</template>
     </ButtonWithState>
+    <button @click="importFromFile">ファイルからインポート</button>
     <button
       @click="
         confirm('リセットすると入力中のすべてのデータが破棄されます。') &&
@@ -36,6 +37,24 @@ const importFromClipboard = async () => {
     .map((line) => line.split('\t'))
   book.value = b
 }
+
+const importFromFile = async (event: Event) => {
+  const input = event.target as HTMLInputElement
+  if (!input.files?.length) return
+
+  const file = input.files[0]
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    const text = (e.target?.result as string) || ''
+    try {
+      dataStore.importCSVString(text)
+    } catch (error) {
+      alert('ファイルを正しく読み取ることができませんでした。正しいファイルが選択されているか確認してください。');
+      console.error('Error importing CSV:', error)
+    }
+  }
+  reader.readAsText(file)
+}
 </script>
 
 <style scoped>

src/components/DragDropImporter.vue

@@ -5,11 +5,8 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useDataStore } from '../store/data'
-import { storeToRefs } from 'pinia'
-import { parse as parseCSV } from 'papaparse'
 
 const dataStore = useDataStore()
-const { book } = storeToRefs(dataStore)
 
 const isDragging = ref(false)
 
@@ -27,8 +24,7 @@ const onDrop = (e: DragEvent) => {
     const reader = new FileReader()
     reader.addEventListener('load', (e) => {
       const text = e.target?.result as string
-      const { data } = parseCSV<string[]>(text)
-      book.value = data
+      dataStore.importCSVString(text)
     })
     reader.readAsText(files[0])
   }

src/store/data.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { Transaction, TransactionCategory } from '../types/transaction'
 import { replaceFullWidthWithHalfWidth } from '../lib/string'
+import { parse as parseCSV } from 'papaparse'
 
 /** 仕訳に応じて収支のセルの値を選択し返す
  *
@@ -172,6 +173,11 @@ export const useDataStore = defineStore('data', () => {
     )
   }
 
+  const importCSVString = (csvString: string) => {
+    const { data } = parseCSV<string[]>(csvString)
+    book.value = data
+  }
+
   return {
     /** 団体名 */
     orgName,
@@ -226,5 +232,8 @@ export const useDataStore = defineStore('data', () => {
 
     /** ストアを初期状態を戻す */
     reset,
+
+    /** CSV文字列をパースしてbookに設定する */
+    importCSVString,
   }
 })