2026年3月4日 (水) 17:05にWikiによる

2026-03-04T17:05:11Z

← 古い版		2026年3月5日 (木) 02:05時点における版
116行目:		116行目:
	<code>readDir</code> 関数を使用して、ディレクトリ内のファイルとサブディレクトリの一覧を取得できる。<br>		<code>readDir</code> 関数を使用して、ディレクトリ内のファイルとサブディレクトリの一覧を取得できる。<br>
	<br>		<br>
	<syntaxhighlight lang="~~tsx~~">		<syntaxhighlight lang="typescript">
	import { readDir, BaseDirectory } from '@tauri-apps/plugin-fs';		import { readDir, BaseDirectory } from '@tauri-apps/plugin-fs';

Wiki: ページの作成:「== 概要 == Tauri v2のファイルシステムプラグイン (fs) は、デスクトップアプリケーションからローカルファイルシステムに安全にアクセスするための機能を提供する。
このプラグインは、テキストファイルやバイナリファイルの読み書き、ディレクトリの操作、ファイルの存在確認等の基本的なファイル操作をサポートしている。

セキュリ…」

2026-03-04T17:04:56Z

ページの作成:「== 概要 == Tauri v2のファイルシステムプラグイン (fs) は、デスクトップアプリケーションからローカルファイルシステムに安全にアクセスするための機能を提供する。 このプラグインは、テキストファイルやバイナリファイルの読み書き、ディレクトリの操作、ファイルの存在確認等の基本的なファイル操作をサポートしている。 セキュリ…」

新規ページ

== 概要 ==
Tauri v2のファイルシステムプラグイン (fs) は、デスクトップアプリケーションからローカルファイルシステムに安全にアクセスするための機能を提供する。 
このプラグインは、テキストファイルやバイナリファイルの読み書き、ディレクトリの操作、ファイルの存在確認等の基本的なファイル操作をサポートしている。 
 
セキュリティを考慮して、デフォルトではアプリケーション専用のディレクトリ内のみにアクセスが制限されており、Capabilities設定でスコープを拡張することができる。 
 
ベースディレクトリという概念により、プラットフォーム間で異なるファイルパスを抽象化し、クロスプラットフォームなファイル操作を容易にしている。 
 
主な機能には、<code>readTextFile</code> と <code>writeTextFile</code> によるテキストファイルの読み書き、<code>readDir</code> によるディレクトリ一覧の取得、<code>mkdir</code> と <code>remove</code> によるディレクトリ操作がある。 
 
非同期APIとして設計されており、React等のモダンなフロントエンドフレームワークと組み合わせて使用するのに適している。 
 

== 基本的なファイル操作 ==
==== インストール ====
ファイルシステムプラグインを使用するには、まずインストールを行う。 
 
npm run tauri add fs
 
===== テキストファイルの読み込み =====
<code>readTextFile</code> 関数を使用して、テキストファイルの内容を読み込むことができる。 
 
<syntaxhighlight lang="typescript">
import { readTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';

// ファイルを読み込む関数
async function loadConfig(): Promise<string> {
try {
// アプリケーション設定ディレクトリから設定ファイルを読み込む
const content = await readTextFile('config.json', {
baseDir: BaseDirectory.AppConfig
});
console.log('設定を読み込みました:', content);
return content;
}
catch (error) {
console.error('設定ファイルの読み込みに失敗しました:', error);
throw error;
}
}
</syntaxhighlight>
 
==== テキストファイルの書き込み ====
<code>writeTextFile</code> 関数を使用して、テキストファイルに内容を書き込むことができる。 
 
<syntaxhighlight lang="typescript">
import { writeTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';

// 設定を保存する関数
async function saveConfig(config: object): Promise<void> {
try {
const content = JSON.stringify(config, null, 2);

// アプリケーションデータディレクトリに設定ファイルを保存
await writeTextFile('settings.json', content, {
baseDir: BaseDirectory.AppData
});
console.log('設定を保存しました');
}
catch (error) {
console.error('設定ファイルの保存に失敗しました:', error);
throw error;
}
}
</syntaxhighlight>
 
==== ファイルの存在確認 ====
<code>exists</code> 関数を使用して、ファイルまたはディレクトリが存在するかどうかを確認できる。 
 
<syntaxhighlight lang="typescript">
import { exists, BaseDirectory } from '@tauri-apps/plugin-fs';

// 設定ファイルの存在を確認する関数
async function checkConfigExists(): Promise<boolean> {
const fileExists = await exists('config.json', {
baseDir: BaseDirectory.AppConfig
});

if (fileExists) {
console.log('設定ファイルが存在します');
}
else {
console.log('設定ファイルが存在しません。デフォルト設定を使用します。');
}

return fileExists;
}
</syntaxhighlight>
 

== ディレクトリ操作 ==
==== ディレクトリの作成 ====
<code>mkdir</code> 関数を使用して、新しいディレクトリを作成できる。 
 
<syntaxhighlight lang="typescript">
import { mkdir, BaseDirectory } from '@tauri-apps/plugin-fs';

// キャッシュディレクトリを作成する関数
async function createCacheDir(): Promise<void> {
try {
// 再帰的にディレクトリを作成
await mkdir('cache/images/thumbnails', {
baseDir: BaseDirectory.AppCache,
recursive: true // 親ディレクトリも必要に応じて作成
});
console.log('キャッシュディレクトリを作成しました');
}
catch (error) {
console.error('ディレクトリの作成に失敗しました:', error);
throw error;
}
}
</syntaxhighlight>
 
==== ディレクトリ内容の読み込み ====
<code>readDir</code> 関数を使用して、ディレクトリ内のファイルとサブディレクトリの一覧を取得できる。 
 
<syntaxhighlight lang="tsx">
import { readDir, BaseDirectory } from '@tauri-apps/plugin-fs';

// ドキュメントディレクトリの内容を一覧表示する関数
async function listDocuments(): Promise<void> {
try {
const entries = await readDir('documents', {
baseDir: BaseDirectory.AppData
});

for (const entry of entries) {
if (entry.isFile) {
console.log(`ファイル: ${entry.name}`);
}
else if (entry.isDirectory) {
console.log(`ディレクトリ: ${entry.name}/`);
}
}
}
catch (error) {
console.error('ディレクトリの読み込みに失敗しました:', error);
}
}
</syntaxhighlight>
 
==== ファイルとディレクトリの削除 ====
<code>remove</code> 関数を使用して、ファイルまたはディレクトリを削除できる。 
 
<syntaxhighlight lang="typescript">
import { remove, BaseDirectory } from '@tauri-apps/plugin-fs';

// 一時ファイルを削除する関数
async function cleanupTempFiles(): Promise<void> {
try {
// 単一のファイルを削除
await remove('temp/cache.tmp', {
baseDir: BaseDirectory.Temp
});

// ディレクトリを再帰的に削除
await remove('temp/old-cache', {
baseDir: BaseDirectory.Temp,
recursive: true // 中身ごと削除
});

console.log('一時ファイルを削除しました');
}
catch (error) {
console.error('削除に失敗しました:', error);
}
}
</syntaxhighlight>
 

== BaseDirectory (ベースディレクトリ) ==
BaseDirectoryは、ファイル操作の基準となるディレクトリを指定するための仕組みである。 
 
これにより、プラットフォーム間で異なるパスを意識せずにファイル操作を行うことができる。 
 
==== 利用可能なBaseDirectoryの一覧 ====
<center>
{| class="wikitable"
|+ BaseDirectoryの一覧
|-
! 定数 !! 説明 !! Windowsのパス例 !! MacOS / Linuxのパス例
|-
| <code>AppConfig</code> || アプリケーション設定ディレクトリ || %APPDATA%/{app} || ~/.config/{app}
|-
| <code>AppData</code> || アプリケーションデータディレクトリ || %APPDATA%/{app} || ~/.local/share/{app}
|-
| <code>AppLocalData</code> || ローカルアプリケーションデータ || %LOCALAPPDATA%/{app} || ~/.local/share/{app}
|-
| <code>AppCache</code> || アプリケーションキャッシュディレクトリ || %LOCALAPPDATA%/{app}/cache || ~/.cache/{app}
|-
| <code>AppLog</code> || アプリケーションログディレクトリ || %LOCALAPPDATA%/{app}/logs || ~/.local/state/{app}/logs
|-
| <code>Resource</code> || アプリケーションリソースディレクトリ || (実行ファイルと同階層) || (アプリバンドル内)
|-
| <code>Temp</code> || 一時ディレクトリ || %TEMP% || /tmp
|-
| <code>Desktop</code> || デスクトップディレクトリ || %USERPROFILE%/Desktop || ~/Desktop
|-
| <code>Document</code> || ドキュメントディレクトリ || %USERPROFILE%/Documents || ~/Documents
|-
| <code>Download</code> || ダウンロードディレクトリ || %USERPROFILE%/Downloads || ~/Downloads
|-
| <code>Picture</code> || ピクチャディレクトリ || %USERPROFILE%/Pictures || ~/Pictures
|-
| <code>Public</code> || パブリックディレクトリ || %PUBLIC% || ~/Public
|-
| <code>Video</code> || ビデオディレクトリ || %USERPROFILE%/Videos || ~/Videos
|-
| <code>Audio</code> || オーディオディレクトリ || %USERPROFILE%/Music || ~/Music
|-
| <code>Font</code> || フォントディレクトリ || %LOCALAPPDATA%/Microsoft/Windows/Fonts || ~/.fonts
|-
| <code>Home</code> || ホームディレクトリ || %USERPROFILE% || ~
|-
| <code>Runtime</code> || ランタイムディレクトリ || (なし) || $XDG_RUNTIME_DIR
|}
</center>
 
{app} はアプリケーションの識別子で、tauri.conf.json ファイルの <code>productName</code> に基づく。 
 
==== 使用例 ====
<syntaxhighlight lang="typescript">
import { readTextFile, writeTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';

// ユーザのドキュメントディレクトリにファイルを保存
async function saveToDocuments(content: string): Promise<void> {
await writeTextFile('my-app/export.txt', content, {
baseDir: BaseDirectory.Document
});
}

// デスクトップからファイルを読み込む
async function loadFromDesktop(): Promise<string> {
return await readTextFile('notes.txt', {
baseDir: BaseDirectory.Desktop
});
}
</syntaxhighlight>
 

== パーミッションスコープ設定 ==
ファイルシステムプラグインは、セキュリティのためにCapabilities設定でアクセス範囲を制御する。 
 
==== デフォルトパーミッション ====
<code>fs:default</code> パーミッションは、アプリケーション専用ディレクトリへの読み取りアクセスと、ディレクトリの作成を許可する。 
 
<syntaxhighlight lang="json">
{
"permissions": [
"fs:default"
]
}
</syntaxhighlight>
 
==== 個別パーミッション ====
より詳細な制御が必要な場合は、個別のパーミッションを指定できる。 
 
<center>
{| class="wikitable"
|+ fs プラグインのパーミッション一覧
|-
! パーミッション !! 説明
|-
| <code>fs:default</code> || デフォルトのパーミッションセット
|-
| <code>fs:allow-read</code> || ファイルの読み取りを許可
|-
| <code>fs:allow-write</code> || ファイルの書き込みを許可
|-
| <code>fs:allow-exists</code> || ファイル存在確認を許可
|-
| <code>fs:allow-mkdir</code> || ディレクトリ作成を許可
|-
| <code>fs:allow-read-dir</code> || ディレクトリ読み込みを許可
|-
| <code>fs:allow-remove</code> || ファイル削除を許可
|}
</center>
 
==== スコープ設定 ====
特定のパスへのみアクセスを許可する場合、スコープ設定を使用する。 
 
<syntaxhighlight lang="json">
{
"permissions": [
{
"identifier": "fs:allow-read",
"allow": [
{ "path": "$APPDATA/**" },
{ "path": "$RESOURCE/**" }
]
},
{
"identifier": "fs:allow-write",
"allow": [
{ "path": "$APPDATA" },
{ "path": "$APPDATA/**" }
]
}
]
}
</syntaxhighlight>
 
下表に、パスパターンの説明を示す。 
 
<center>
{| class="wikitable"
|+ パスパターンの説明
! パターン !! 説明
|-
| $APPDATA || アプリケーションデータディレクトリを表す変数。
|-
| ** || 任意の深さのサブディレクトリとファイルにマッチする。
|-
| * || 単一レベルのディレクトリまたはファイルにマッチする。
|}
</center>
 
==== 包括的な設定例 ====
<syntaxhighlight lang="json">
{
"$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default",
"description": "File system access capability",
"windows": ["main"],
"permissions": [
"fs:default",
{
"identifier": "fs:scope",
"allow": [
{ "path": "$APPDATA" },
{ "path": "$APPDATA/**" },
{ "path": "$RESOURCE" },
{ "path": "$RESOURCE/**" },
{ "path": "$TEMP" },
{ "path": "$TEMP/**" }
]
}
]
}
</syntaxhighlight>
 

== バイナリファイルの操作 ==
テキストファイル以外にも、バイナリファイルの読み書きが可能である。 
 
==== バイナリファイルの読み込み ====
<code>readFile</code> 関数は、ファイルの内容を <code>Uint8Array</code> として返す。 
 
<syntaxhighlight lang="typescript">
import { readFile, BaseDirectory } from '@tauri-apps/plugin-fs';

// 画像ファイルを読み込む関数
async function loadImage(imagePath: string): Promise<Uint8Array> {
try {
const imageData = await readFile(imagePath, {
baseDir: BaseDirectory.Resource
});
console.log(`画像を読み込みました: ${imageData.length} bytes`);
return imageData;
}
catch (error) {
console.error('画像の読み込みに失敗しました:', error);
throw error;
}
}

// Data URLとして使用する例
async function loadImageAsDataUrl(path: string): Promise<string> {
const data = await readFile(path, { baseDir: BaseDirectory.Resource });
const base64 = btoa(String.fromCharCode(...data));
return `data:image/png;base64,${base64}`;
}
</syntaxhighlight>
 
==== バイナリファイルの書き込み ====
<code>writeFile</code> 関数は、<code>Uint8Array</code> または <code>ArrayBuffer</code> をファイルに書き込む。 
 
<syntaxhighlight lang="typescript">
import { writeFile, BaseDirectory } from '@tauri-apps/plugin-fs';

// ダウンロードしたデータを保存する関数
async function saveDownloadedFile(
filename: string,
data: Uint8Array
): Promise<void> {
try {
await writeFile(`downloads/${filename}`, data, {
baseDir: BaseDirectory.AppData
});
console.log(`ファイルを保存しました: ${filename}`);
}
catch (error) {
console.error('ファイルの保存に失敗しました:', error);
throw error;
}
}
</syntaxhighlight>
 

== サンプルコード ==
==== 設定管理クラス ====
アプリケーションの設定を管理するクラスの定義例を示す。 
 
<syntaxhighlight lang="typescript">
import { readTextFile, writeTextFile, exists, BaseDirectory } from '@tauri-apps/plugin-fs';

// アプリケーション設定の型定義
interface AppConfig {
theme: 'light' | 'dark';
language: string;
autoSave: boolean;
recentFiles: string[];
}

// デフォルト設定
const defaultConfig: AppConfig = {
theme: 'light',
language: 'ja',
autoSave: true,
recentFiles: []
};

// 設定管理クラス
class ConfigManager {
private configPath = 'config.json';
private config: AppConfig | null = null;

// 設定を読み込む
async load(): Promise<AppConfig> {
// 既に読み込み済みの場合はキャッシュを返す
if (this.config) {
return this.config;
}

// 設定ファイルが存在するか確認
const configExists = await exists(this.configPath, {
baseDir: BaseDirectory.AppConfig
});

if (configExists) {
try {
const content = await readTextFile(this.configPath, {
baseDir: BaseDirectory.AppConfig
});
this.config = { ...defaultConfig, ...JSON.parse(content) };
}
catch (error) {
console.warn('設定ファイルの読み込みに失敗。デフォルトを使用:', error);
this.config = { ...defaultConfig };
}
}
else {
this.config = { ...defaultConfig };
}

return this.config;
}

// 設定を保存する
async save(config: Partial<AppConfig>): Promise<void> {
if (!this.config) {
await this.load();
}

// 設定をマージ
this.config = { ...this.config!, ...config };

// ファイルに書き込む
await writeTextFile(
this.configPath,
JSON.stringify(this.config, null, 2),
{ baseDir: BaseDirectory.AppConfig }
);
}

// 現在の設定を取得
get(): AppConfig | null {
return this.config;
}
}

// シングルトンとしてエクスポート
export const configManager = new ConfigManager();
</syntaxhighlight>
 
==== Reactコンポーネントでの使用 ====
<syntaxhighlight lang="typescript">
import { useEffect, useState } from 'react';
import { configManager, AppConfig } from './config-manager';

// 設定パネルコンポーネント
function SettingsPanel() {
const [config, setConfig] = useState<AppConfig | null>(null);
const [saving, setSaving] = useState(false);

// 初期読み込み
useEffect(() => {
configManager.load().then(setConfig);
}, []);

// 設定を変更して保存
const updateConfig = async (updates: Partial<AppConfig>) => {
setSaving(true);
try {
await configManager.save(updates);
setConfig(prev => prev ? { ...prev, ...updates } : null);
}
catch (error) {
console.error('設定の保存に失敗しました:', error);
}
finally {
setSaving(false);
}
};

if (!config) {
return <div>読み込み中...</div>;
}

return (
<div className="settings-panel">
<h2>設定</h2>

<div className="setting-item">
<label>テーマ</label>
<select
value={config.theme}
onChange={(e) => updateConfig({
theme: e.target.value as 'light' | 'dark'
})}
disabled={saving}
>
<option value="light">ライト</option>
<option value="dark">ダーク</option>
</select>
</div>

<div className="setting-item">
<label>自動保存</label>
<input
type="checkbox"
checked={config.autoSave}
onChange={(e) => updateConfig({ autoSave: e.target.checked })}
disabled={saving}
/>
</div>
</div>
);
}

export default SettingsPanel;
</syntaxhighlight>
 

== エラーハンドリング ==
ファイル操作では、様々なエラーが発生する可能性があるため、適切なエラーハンドリングが重要である。 
 
==== よくあるエラー ====
<center>
{| class="wikitable"
|+ ファイル操作のエラー一覧
|-
! エラー !! 原因 !! 対処法
|-
| NotFound || ファイルまたはディレクトリが存在しない || <code>exists()</code> で事前に確認する。
|-
| PermissionDenied || アクセス権限がない || Capabilities設定を確認する。
|-
| AlreadyExists || 作成しようとしたファイルが既に存在する || <code>exists()</code> で事前に確認する。
|-
| InvalidData || ファイルの内容が期待する形式と異なる || データの検証を行う。
|-
| StorageFull || ディスク容量が不足している || ユーザに通知する。
|}
</center>
 
==== エラーハンドリングの定義例 ====
<syntaxhighlight lang="typescript">
import { readTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';

// エラーハンドリングを含むファイル読み込み
async function safeReadFile(path: string): Promise<string | null> {
try {
const content = await readTextFile(path, {
baseDir: BaseDirectory.AppData
});
return content;
}
catch (error) {
// エラーの種類に応じた処理
if (error instanceof Error) {
if (error.message.includes('not found')) {
console.warn(`ファイルが見つかりません: ${path}`);
return null;
}

if (error.message.includes('permission')) {
console.error(`アクセス権限がありません: ${path}`);
throw new Error('このファイルにアクセスする権限がありません。');
}
}

// 予期しないエラー
console.error('ファイルの読み込み中にエラーが発生しました:', error);
throw error;
}
}
</syntaxhighlight>
 

== トラブルシューティング ==
==== ファイルが見つからない (NotFoundエラー) ====
* パスの確認
*: ファイルパスが正しいか確認する。
*: 
* ベースディレクトリの確認
*: 正しい <code>baseDir</code> を指定しているか確認する。
*: 
* exists()の使用
*: ファイル操作の前に <code>exists()</code> 関数で存在確認を行う。
 
==== パーミッションエラー (PermissionDeniedエラー) ====
* Capabilities設定の確認
*: src-tauri/capabilities/default.json ファイルで適切なパーミッションが設定されているか確認する。
*: 
* スコープ設定の確認
*: アクセスしようとしているパスがスコープに含まれているか確認する。
*: 
* 再ビルド
*: Capabilities設定を変更した後、アプリケーションを再ビルドする。
 
==== エンコーディングの問題 (テキストファイルの読み書きで文字化けが発生) ====
* ファイルのエンコーディング確認
*: TauriのfsプラグインはUTF-8を前提としている。
*: 異なるエンコーディングのファイルは、バイナリとして読み込んで変換する必要がある。
 

== 参考リンク ==
* [https://v2.tauri.app/plugin/fs/ Tauri公式ドキュメント - File System Plugin]
* [https://v2.tauri.app/reference/javascript/api/namespacefs/ Tauri API Reference - fs]
* [https://github.com/tauri-apps/plugins-workspace/tree/v2/plugins/fs Tauri fs Plugin Source (GitHub)]
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Tauri,Rust,React,TypeScript,FileSystem,fs,File,Read,Write,Desktop Application
|description={{PAGENAME}} - Tauri v2のファイルシステムプラグインに関するガイド | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]]

Tauriの基礎 - ファイルシステム - 版の履歴

2026年3月4日 (水) 17:05にWikiによる