UIコンポーネントの状態管理をuseAtomValueとuseSetAtomを使用するようにリファクタリング

- Blob URLのクリーンアップ処理を追加しました。
- いくつかのコンポーネントでuseAtomからuseSetAtomに切り替え、状態管理の明確さと一貫性を向上させました。
- tauri.conf.jsonのバージョン番号を0.2.1から0.2.2に更新しました。

これらの変更により、アプリケーション全体の状態管理が効率化され、パフォーマンスと保守性が向上します。

app/components/ConvertButton/ConvertButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   filePathsAtom,
   fileInfosAtom,
@@ -16,15 +16,15 @@ import "@ant-design/v5-patch-for-react-19";
 import { useState } from "react";
 
 export default function ConvertButton() {
-  const [filePaths] = useAtom(filePathsAtom);
-  const [fileInfos] = useAtom(fileInfosAtom);
-  const [extensionType] = useAtom(extensionTypeAtom);
-  const [quality] = useAtom(qualityAtom);
+  const filePaths = useAtomValue(filePathsAtom);
+  const fileInfos = useAtomValue(fileInfosAtom);
+  const extensionType = useAtomValue(extensionTypeAtom);
+  const quality = useAtomValue(qualityAtom);
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
-  const [, setTabSelected] = useAtom(tabSelectedAtom);
+  const setProcessedFilePaths = useSetAtom(processedFilePathsAtom);
+  const setTabSelected = useSetAtom(tabSelectedAtom);
   const [dialog, setDialog] = useState<React.ReactNode | null>(null);
-  const [, setOutputTempDir] = useAtom(outputTempDirAtom);
+  const setOutputTempDir = useSetAtom(outputTempDirAtom);
 
   const handleConvert = async () => {
     const errorDialog = await convert(

app/components/Dropzone/Dropzone.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { useEffect, useState } from "react";
-import { useAtom } from "jotai";
+import { useSetAtom } from "jotai";
 import { filePathsAtom, tabSelectedAtom } from "../../lib/atom";
 import { WarningDialog, ErrorDialog } from "../Dialog/Dialog";
 import { listen } from "@tauri-apps/api/event";
 
 export default function Dropzone() {
-  const [, setFilePaths] = useAtom(filePathsAtom);
-  const [, setTabSelected] = useAtom(tabSelectedAtom);
+  const setFilePaths = useSetAtom(filePathsAtom);
+  const setTabSelected = useSetAtom(tabSelectedAtom);
   const [warningModalOpen, setWarningModalOpen] = useState(false);
   const [errorModalOpen, setErrorModalOpen] = useState(false);
   const [extensions, setExtensions] = useState<string[]>([]);

app/components/InputTab/InputNavMenu.tsx

@@ -2,12 +2,12 @@ import "@ant-design/v5-patch-for-react-19";
 import FileDialog from "../FileDialog/FileDialog";
 import { Button } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import { useAtom } from "jotai";
+import { useSetAtom } from "jotai";
 import { filePathsAtom, fileInfosAtom } from "../../lib/atom";
 
 export default function InputNubMenu() {
-  const [, setFilePaths] = useAtom(filePathsAtom);
-  const [, setFileInfos] = useAtom(fileInfosAtom);
+  const setFilePaths = useSetAtom(filePathsAtom);
+  const setFileInfos = useSetAtom(fileInfosAtom);
 
   const removeAll = () => {
     setFilePaths([]);

app/components/InputTab/InputTab.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 import SelectFiles from "../SelectFiles/SelectFiles";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { tabSelectedAtom, filePathsAtom } from "../../lib/atom";
 import InputNubMenu from "./InputNavMenu";
 import Null from "./Null";
 import Dropzone from "../Dropzone/Dropzone";
 
 export default function InputTab() {
-  const [tabSelected] = useAtom(tabSelectedAtom);
-  const [filePaths] = useAtom(filePathsAtom);
+  const tabSelected = useAtomValue(tabSelectedAtom);
+  const filePaths = useAtomValue(filePathsAtom);
 
   return (
     <div

app/components/LoadingModal/LoadingModal.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import {
   isProcessingAtom,
   isSavingAtom,
@@ -9,9 +9,9 @@ import { Spin } from "antd";
 import "@ant-design/v5-patch-for-react-19";
 
 export default function LoadingModal() {
-  const [isProcessing] = useAtom(isProcessingAtom);
-  const [isSaving] = useAtom(isSavingAtom);
-  const [extensionType] = useAtom(extensionTypeAtom);
+  const isProcessing = useAtomValue(isProcessingAtom);
+  const isSaving = useAtomValue(isSavingAtom);
+  const extensionType = useAtomValue(extensionTypeAtom);
   return (
     <div
       className={`fixed h-[calc(100vh-30px)] bottom-0 left-0 right-0 top-[30px] bg-black/50 flex justify-center items-center z-50 ${

app/components/OutputTab/OutputNavMenu.tsx

@@ -1,5 +1,5 @@
 import { Button } from "antd";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   processedFilePathsSortedAtom,
   checkboxSelectedAtom,
@@ -21,10 +21,10 @@ export default function OutputNavMenu() {
     processedFilePathsSortedAtom
   );
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
-  const [, setIsSaving] = useAtom(isSavingAtom);
+  const setProcessedFilePaths = useSetAtom(processedFilePathsAtom);
+  const setIsSaving = useSetAtom(isSavingAtom);
   const [dialog, setDialog] = useState<React.ReactNode | null>(null);
-  const [outputTempDir,] = useAtom(outputTempDirAtom);
+  const outputTempDir = useAtomValue(outputTempDirAtom);
 
   const handleSaveAll = async () => {
     const result = await saveAll(setIsSaving, processedFilePathsSorted, setDialog);

app/components/OutputTab/OutputTab.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { useAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { tabSelectedAtom } from "../../lib/atom";
 import ProcessedFiles from "../ProcessedFiles/ProcessedFiles";
 import OutputNavMenu from "./OutputNavMenu";
 
 export default function OutputTab() {
-  const [tabSelected] = useAtom(tabSelectedAtom);
+  const tabSelected = useAtomValue(tabSelectedAtom);
   return (
     <div
       className={`flex flex-col w-full h-full relative pb-2 bg-white/80 ${

app/components/ProcessedFiles/File.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { ProcessedFilesProps } from ".";
 import RightArrow from "../icons/RightArrow";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { checkboxSelectedAtom, filePathsAtom } from "@/app/lib/atom";
 import { ProcessedFileInfo } from "@/app/index.d";
 import { useEffect, useState } from "react";
@@ -26,7 +26,7 @@ export default function File({
   processedFileInfo,
 }: ProcessedFilesProps) {
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [filePaths] = useAtom(filePathsAtom);
+  const filePaths = useAtomValue(filePathsAtom);
 
   const [imageSrc, setImageSrc] = useState<string | null>(null);
 
@@ -43,6 +43,12 @@ export default function File({
     };
 
     handleImageLoad(filePaths[index]);
+
+    return () => {
+      if (imageSrc) {
+        URL.revokeObjectURL(imageSrc);
+      }
+    };
   }, [processedFileInfo.file_name_with_extension]);
 
   const compressionRate = getCompressionRate(processedFileInfo);

app/components/ProcessedFiles/ProcessedFiles.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   fileInfosAtom,
   processedFilePathsAtom,
@@ -14,15 +14,15 @@ import { getProcessedFileInfo } from "../SelectFiles/utils";
 import type { ProcessedFileInfo } from "@/app/index.d";
 
 export default function ProcessedFiles() {
-  const [fileInfos] = useAtom(fileInfosAtom);
-  const [processedFilePaths] = useAtom(processedFilePathsAtom);
+  const fileInfos = useAtomValue(fileInfosAtom);
+  const processedFilePaths = useAtomValue(processedFilePathsAtom);
   const [processedFileInfos, setProcessedFileInfos] = useAtom(
     processedFileInfosAtom
   );
   const [processedFilePathsSorted, setProcessedFilePathsSorted] = useAtom(
     processedFilePathsSortedAtom
   );
-  const [, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
+  const setCheckboxSelected = useSetAtom(checkboxSelectedAtom);
 
   useEffect(() => {
     const fetchProcessedInfos = async () => {

app/components/SelectFiles/File.tsx

@@ -2,15 +2,15 @@
 import { FileProps } from "./index.d";
 import { Button } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { filePathsAtom, fileInfosAtom } from "../../lib/atom";
 import { useState, useEffect } from "react";
 import { readFile } from "@tauri-apps/plugin-fs";
 import "@ant-design/v5-patch-for-react-19";
 
 export default function File({ fileInfo, index }: FileProps) {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [, setFileInfos] = useAtom(fileInfosAtom);
+  const setFileInfos = useSetAtom(fileInfosAtom);
   const [imageSrc, setImageSrc] = useState<string | null>(null);
 
   useEffect(() => {
@@ -26,6 +26,12 @@ export default function File({ fileInfo, index }: FileProps) {
     };
 
     handleImageLoad(filePaths[index]);
+
+    return () => {
+      if (imageSrc) {
+        URL.revokeObjectURL(imageSrc);
+      }
+    };
   }, [fileInfo.file_name_with_extension]);
 
   const extension =

app/components/SelectFiles/SelectFiles.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { filePathsAtom, fileInfosAtom } from "@/app/lib/atom";
 import { FileInfo } from "@/app/index.d";
 import { useEffect } from "react";
@@ -9,7 +9,7 @@ import { getFileInfo } from "./utils";
 import { readFileAsync } from "../FileDialog/utils";
 
 export default function SelectFiles() {
-  const [filePaths] = useAtom(filePathsAtom);
+  const filePaths = useAtomValue(filePathsAtom);
   const [fileInfos, setFileInfos] = useAtom(fileInfosAtom);
 
   useEffect(() => {

app/components/WindowMenu/ContextMenu/FileMenu.tsx

@@ -2,7 +2,7 @@
 
 import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   fileInfosAtom,
   filePathsAtom,
@@ -53,21 +53,21 @@ const items: MenuProps["items"] = [
 
 export default function FileMenu() {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [isFocused] = useAtom(isFocusedAtom);
+  const isFocused = useAtomValue(isFocusedAtom);
   const fileButtonRef = useRef<HTMLButtonElement | null>(null);
   const [fileInfos, setFileInfos] = useAtom(fileInfosAtom);
   const [tabSelected, setTabSelected] = useAtom(tabSelectedAtom);
   const [processedFilePathsSorted, setProcessedFilePathsSorted] = useAtom(
     processedFilePathsSortedAtom
   );
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
+  const setProcessedFilePaths = useSetAtom(processedFilePathsAtom);
   const [isSaving, setIsSaving] = useAtom(isSavingAtom);
-  const [quality] = useAtom(qualityAtom);
-  const [extensionType] = useAtom(extensionTypeAtom);
+  const quality = useAtomValue(qualityAtom);
+  const extensionType = useAtomValue(extensionTypeAtom);
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [, setDialog] = useAtom(windowMenuDialogAtom);
-  const [, setOutputTempDir] = useAtom(outputTempDirAtom);
+  const setDialog = useSetAtom(windowMenuDialogAtom);
+  const setOutputTempDir = useSetAtom(outputTempDirAtom);
 
   const handleConvert = async () => {
     const result = await convert(
@@ -224,13 +224,13 @@ function FileOpen(): React.ReactNode {
 
 function FileRemoveAll(): React.ReactNode {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
-  const [tabSelected] = useAtom(tabSelectedAtom);
-  const [, setFileInfos] = useAtom(fileInfosAtom);
+  const tabSelected = useAtomValue(tabSelectedAtom);
+  const setFileInfos = useSetAtom(fileInfosAtom);
   const [processedFilePathsSorted, setProcessedFilePathsSorted] = useAtom(
     processedFilePathsSortedAtom
   );
-  const [, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
+  const setCheckboxSelected = useSetAtom(checkboxSelectedAtom);
+  const setProcessedFilePaths = useSetAtom(processedFilePathsAtom);
 
   function removeAll() {
     setFilePaths([]);
@@ -283,8 +283,8 @@ function FileRemoveAll(): React.ReactNode {
 
 function FileSaveAll(): React.ReactNode {
   const [isSaving, setIsSaving] = useState(false);
-  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
-  const [, setDialog] = useAtom(windowMenuDialogAtom);
+  const processedFilePathsSorted = useAtomValue(processedFilePathsSortedAtom);
+  const setDialog = useSetAtom(windowMenuDialogAtom);
   const handleSaveAll = async () => {
     const result = await saveAll(
       setIsSaving,
@@ -323,9 +323,9 @@ function FileSaveAll(): React.ReactNode {
 
 function FileSaveSelected(): React.ReactNode {
   const [isSaving, setIsSaving] = useState(false);
-  const [processedFilePathsSorted] = useAtom(processedFilePathsSortedAtom);
-  const [checkboxSelected] = useAtom(checkboxSelectedAtom);
-  const [, setDialog] = useAtom(windowMenuDialogAtom);
+  const processedFilePathsSorted = useAtomValue(processedFilePathsSortedAtom);
+  const checkboxSelected = useAtomValue(checkboxSelectedAtom);
+  const setDialog = useSetAtom(windowMenuDialogAtom);
   const handleSaveSelected = async () => {
     const result = await saveSelected(
       setIsSaving,
@@ -365,14 +365,14 @@ function FileSaveSelected(): React.ReactNode {
 
 function FileConvert(): React.ReactNode {
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
-  const [, setProcessedFilePaths] = useAtom(processedFilePathsAtom);
-  const [, setDialog] = useAtom(windowMenuDialogAtom);
-  const [filePaths] = useAtom(filePathsAtom);
-  const [fileInfos] = useAtom(fileInfosAtom);
-  const [quality] = useAtom(qualityAtom);
-  const [extensionType] = useAtom(extensionTypeAtom);
-  const [, setTabSelected] = useAtom(tabSelectedAtom);
-  const [, setOutputTempDir] = useAtom(outputTempDirAtom);
+  const setProcessedFilePaths = useSetAtom(processedFilePathsAtom);
+  const setDialog = useSetAtom(windowMenuDialogAtom);
+  const filePaths = useAtomValue(filePathsAtom);
+  const fileInfos = useAtomValue(fileInfosAtom);
+  const quality = useAtomValue(qualityAtom);
+  const extensionType = useAtomValue(extensionTypeAtom);
+  const setTabSelected = useSetAtom(tabSelectedAtom);
+  const setOutputTempDir = useSetAtom(outputTempDirAtom);
   const handleConvert = async () => {
     const result = await convert(
       setIsProcessing,

app/components/WindowMenu/ContextMenu/HelpMenu.tsx

@@ -2,7 +2,7 @@
 
 import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
-import { useAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import {
   isFocusedAtom,
   isLicenseDialogOpenAtom,
@@ -21,9 +21,9 @@ const items: MenuProps["items"] = [
 ];
 
 export default function HelpMenu() {
-  const [isFocused] = useAtom(isFocusedAtom);
-  const [isProcessing] = useAtom(isProcessingAtom);
-  const [isSaving] = useAtom(isSavingAtom);
+  const isFocused = useAtomValue(isFocusedAtom);
+  const isProcessing = useAtomValue(isProcessingAtom);
+  const isSaving = useAtomValue(isSavingAtom);
   const helpButtonRef = useRef<HTMLButtonElement | null>(null);
   useEffect(() => {
     const handleKeyDownSelectShortcut = async (event: KeyboardEvent) => {
@@ -57,7 +57,7 @@ export default function HelpMenu() {
 }
 
 function Help(): React.ReactNode {
-  const [, setIsLicenseDialogOpen] = useAtom(isLicenseDialogOpenAtom);
+  const setIsLicenseDialogOpen = useSetAtom(isLicenseDialogOpenAtom);
   return (
     <>
       <button