Electron Desktop App Development · レッスン

ファイルシステムへのアクセス

mainプロセスからNode.jsの`fs`モジュールを使い、ユーザーのシステム上のファイルやディレクトリを直接読み込み、書き込み、操作する方法を学びます。

「ファイルシステムへのアクセス」はCoddyKit上の無料Electron Desktop App Developmentレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはElectron Desktop App Development学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Electron Desktop App Developmentコースには全3レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Accessing Local Files

Electron apps can do more than web pages. They can interact directly with the user's computer, including its file system!

This lesson explores how to read, write, and manage files and directories using Node.js's fs module.

Node.js `fs` Module Explained

The fs (File System) module is a core Node.js feature. It provides methods to interact with the file system.

Reading Files: Get content from existing files.
Writing Files: Create new files or update existing ones.
Managing Directories: Create, delete, or list folders.

It's your gateway to persistent local data.

`fs` & The Main Process

For security, you should primarily use the fs module in Electron's main process.

The main process has full Node.js access, while renderer processes (your web pages) are typically sandboxed. This prevents malicious web content from directly accessing user files.

If a renderer needs file access, it should request it securely from the main process via IPC.

Reading Files (`readFileSync`)

The simplest way to read a file is synchronously using fs.readFileSync(). This means your code will pause until the file is read.

Specify the file path and encoding (e.g., 'utf8') to get the content as a string.

const fs = require('fs');
const path = require('path');

// Create a temporary file for demonstration
const tempFilePath = path.join(__dirname, 'hello.txt');
fs.writeFileSync(tempFilePath, 'Hello CoddyKit!', 'utf8');

try {
  const content = fs.readFileSync(tempFilePath, 'utf8');
  console.log('Read content:', content);
} catch (error) {
  console.error('Failed to read file:', error.message);
}

// Clean up the temporary file
fs.unlinkSync(tempFilePath);

Writing Files (`writeFileSync`)

To write content to a file, use fs.writeFileSync(). If the file doesn't exist, it will be created. If it does, its content will be overwritten.

Always handle potential errors with try...catch blocks.

const fs = require('fs');
const path = require('path');

const outputFilePath = path.join(__dirname, 'output.txt');
const dataToWrite = 'This is some new content for the file.';

try {
  fs.writeFileSync(outputFilePath, dataToWrite, 'utf8');
  console.log('File written successfully to', outputFilePath);
} catch (error) {
  console.error('Failed to write file:', error.message);
}

// Clean up the temporary file
fs.unlinkSync(outputFilePath);

Appending Data (`appendFileSync`)

If you want to add content to the end of an existing file without overwriting it, use fs.appendFileSync().

This is useful for logging or adding new entries to a list.

const fs = require('fs');
const path = require('path');

const logFilePath = path.join(__dirname, 'app.log');

// Ensure the file exists (or create it)
fs.writeFileSync(logFilePath, 'Initial log entry.\n', 'utf8');

const newLogEntry = 'Another event happened now.\n';
try {
  fs.appendFileSync(logFilePath, newLogEntry, 'utf8');
  console.log('Appended to log file.');
  console.log('Current log content:\n', fs.readFileSync(logFilePath, 'utf8'));
} catch (error) {
  console.error('Failed to append to file:', error.message);
}

// Clean up the temporary file
fs.unlinkSync(logFilePath);

Asynchronous `fs` Methods

Synchronous operations can block your application's main thread, making your UI unresponsive. For better performance, especially with larger files, use asynchronous methods.

fs.readFile() and fs.writeFile() use callbacks or Promises (with fs/promises module) to handle completion.

const fs = require('fs/promises'); // Using promise-based fs
const path = require('path');

const asyncFilePath = path.join(__dirname, 'async_data.txt');
const data = 'Data for async file.';

async function runAsyncOperations() {
  try {
    await fs.writeFile(asyncFilePath, data, 'utf8');
    console.log('Async file written.');

    const content = await fs.readFile(asyncFilePath, 'utf8');
    console.log('Async file read:', content);
  } catch (error) {
    console.error('Async operation failed:', error.message);
  } finally {
    // Clean up
    if (await fs.stat(asyncFilePath).then(() => true).catch(() => false)) {
      await fs.unlink(asyncFilePath);
    }
  }
}

runAsyncOperations();

Creating & Listing Directories

The fs module also lets you manage directories (folders).

fs.mkdirSync(path, { recursive: true }): Creates a directory. recursive: true creates parent directories if needed.
fs.readdirSync(path): Reads the contents of a directory, returning an array of file/directory names.
fs.rmSync(path, { recursive: true, force: true }): Removes a directory (and its contents).

const fs = require('fs');
const path = require('path');

const dirPath = path.join(__dirname, 'my_app_data');
const subDirPath = path.join(dirPath, 'logs');

try {
  // Create directories
  fs.mkdirSync(subDirPath, { recursive: true });
  console.log('Directory created:', subDirPath);

  // Write a file inside
  fs.writeFileSync(path.join(dirPath, 'config.json'), '{ "version": "1.0" }');
  fs.writeFileSync(path.join(subDirPath, 'error.log'), 'Error 1\nError 2');

  // List contents of dirPath
  const contents = fs.readdirSync(dirPath);
  console.log('Contents of', dirPath, ':', contents);

} catch (error) {
  console.error('Directory operation failed:', error.message);
} finally {
  // Clean up
  if (fs.existsSync(dirPath)) {
    fs.rmSync(dirPath, { recursive: true, force: true });
    console.log('Cleaned up directory:', dirPath);
  }
}

Paths with the `path` Module

File paths differ between operating systems (e.g., /home/user/file.txt on Linux vs. C:\Users\user\file.txt on Windows).

Use Node.js's built-in path module to construct and normalize paths reliably across platforms.

path.join(...segments): Joins path segments.
path.resolve(...segments): Resolves a sequence of paths or path segments into an absolute path.

const path = require('path');

const userDir = 'CoddyKitApp';
const dataFile = 'settings.json';

// Correct way to join paths
const fullPath = path.join(userDir, 'data', dataFile);
console.log('Joined path:', fullPath);

// Get absolute path (relative to current working directory)
const absolutePath = path.resolve(userDir, 'data', dataFile);
console.log('Absolute path:', absolutePath);

// Get directory name
console.log('Dir name:', path.dirname(fullPath));

// Get base name (file name with extension)
console.log('Base name:', path.basename(fullPath));

File System Challenge

Consider the following Node.js code snippet:

const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, 'test_file.txt');

fs.writeFileSync(filePath, 'First line.\n', 'utf8');
fs.appendFileSync(filePath, 'Second line.\n', 'utf8');
const content = fs.readFileSync(filePath, 'utf8');

console.log(content);
fs.unlinkSync(filePath); // Clean up

File System Access Recap

You've learned how to interact with the file system in Electron!

The fs module is key for file operations.
Perform file operations primarily in the main process for security.
Distinguish between synchronous (blocking) and asynchronous (non-blocking) methods.
Use the path module for cross-platform path management.

This knowledge allows your Electron apps to store and retrieve data directly on the user's machine.

よくある質問

「ファイルシステムへのアクセス」レッスンは無料ですか？

はい。「ファイルシステムへのアクセス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Electron Desktop App Developmentコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Electron Desktop App Developmentコースには全3レッスンが含まれています。

「ファイルシステムへのアクセス」で何を学びますか？

mainプロセスからNode.jsの`fs`モジュールを使い、ユーザーのシステム上のファイルやディレクトリを直接読み込み、書き込み、操作する方法を学びます。ブラウザで直接実行するハンズオンコードでElectron Desktop App Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Electron Desktop App Developmentを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのElectron Desktop App Developmentは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「ファイルシステムへのアクセス」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このElectron Desktop App Developmentレッスンでコードを書いて実行できますか？

はい。すべてのElectron Desktop App Developmentレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Electron Desktop App Developmentに戻る