0Pricing
Electron Desktop App Development · レッスン

アプリケーションのライフサイクルイベント管理

`ready`、`window-all-closed`、`activate`、`quit`などのアプリケーションライフサイクルイベントを処理し、適切な動作を実現します。

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

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

App's Journey: Lifecycle Events

Just like people, software applications have a lifecycle! They start, run, and eventually close. In Electron, these stages are managed through "lifecycle events".

  • These events let your app react to important moments, like when it's ready to show a window or when all its windows are closed.
  • Properly handling them ensures your app behaves predictably and professionally on different operating systems.

Meet the `app` Module

Electron provides a special module called app. This module is the heart of your application's lifecycle management.

  • You use the app module to control your application's events.
  • It allows you to listen for events like when the app is ready, when windows close, or when the app is about to quit.
  • It also provides methods to manage the app, such as quitting or restarting.

App is Ready! The `ready` Event

The ready event is the most fundamental lifecycle event. It fires when Electron has finished initializing and is ready to create browser windows and interact with the system.

You must wait for this event before performing most operations. Try running this simple example:

const { app } = require('electron');

app.on('ready', () => {
  console.log('Electron app is ready!');
  // In a real app, you'd create windows here.
});

// Minimal handler to allow the app to quit when needed
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Launching Your First Window

The ready event is typically where you create your application's main window. This ensures the Electron environment is fully initialized before the UI appears.

We import BrowserWindow and create an instance, loading simple HTML content directly.

const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });

  // Load a simple HTML string directly for a self-contained example
  mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Hello Electron!</h1><p>This is your window.</p>');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Closing All Windows? `window-all-closed`

The window-all-closed event fires when all of your application's windows have been closed. How you respond depends on the operating system.

  • On Windows and Linux, apps usually quit when all windows close.
  • On macOS, apps often stay active in the dock.

This code ensures the app quits on Windows/Linux but stays open on macOS.

const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Close Me!</h1>');
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  // On macOS, it's common for apps to remain active in the dock
  // until the user quits explicitly with Cmd + Q.
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Reactivating Your macOS App

The activate event is specific to macOS. It fires when the application is activated, typically when the user clicks on the app's icon in the dock, but no windows are currently open.

This is where you'd re-create a window if mainWindow is null.

const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Activated!</h1><p>A new window was opened.</p>');
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On macOS, re-create a window when the dock icon is clicked
  // and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

Last Chance: `will-quit`

The will-quit event fires just before the application begins to close its windows and quit. This is your last opportunity to perform synchronous cleanup operations.

  • For example, you might save unsaved data or close database connections.
  • This event is emitted before the quit event.
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Will Quit Demo</h1>');
  mainWindow.on('closed', () => { mainWindow = null; });
}

app.on('ready', createWindow);
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } });
app.on('activate', () => { if (mainWindow === null) { createWindow(); } });

app.on('will-quit', (event) => {
  console.log('Application is about to quit! Performing final cleanup...');
  // event.preventDefault(); // Uncomment to prevent quitting
  // Perform synchronous cleanup here, e.g., save data.
});

The Final Goodbye: `quit`

The quit event is emitted when the application successfully exits. By this point, all windows have been closed, and the main process is shutting down.

  • This event is primarily for logging or very simple, final notifications.
  • It's generally too late to perform significant cleanup or prevent the app from quitting.
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadURL('data:text/html;charset=utf-8,<h1>Quit Demo</h1>');
  mainWindow.on('closed', () => { mainWindow = null; });
}

app.on('ready', createWindow);
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } });
app.on('activate', () => { if (mainWindow === null) { createWindow(); } });
app.on('will-quit', () => { console.log('Will quit...'); });

app.on('quit', (event, exitCode) => {
  console.log(`Application has quit with code: ${exitCode}`);
  // This is the very last event.
});

Lifecycle Event Check

You've learned about several key Electron application lifecycle events. Now, let's test your understanding!

Lifecycle Events: Key Takeaways

Great job! You've learned how to manage your Electron application's lifecycle, ensuring it starts, runs, and quits gracefully on different operating systems.

  • The app module is central to event handling.
  • ready is crucial for initialization and window creation.
  • window-all-closed and activate handle window behavior across platforms.
  • will-quit and quit manage the final stages of app termination.

Mastering these events is fundamental for building robust Electron applications. Keep practicing!

よくある質問

「アプリケーションのライフサイクルイベント管理」レッスンは無料ですか?

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

「アプリケーションのライフサイクルイベント管理」で何を学びますか?

`ready`、`window-all-closed`、`activate`、`quit`などのアプリケーションライフサイクルイベントを処理し、適切な動作を実現します。 ブラウザで直接実行するハンズオンコードでElectron Desktop App Developmentを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「アプリケーションのライフサイクルイベント管理」レッスンにはどのくらい時間がかかりますか?

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

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

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

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

  1. アプリケーションのライフサイクルイベント管理
  2. 自動更新の実装
  3. クラッシュレポート
  4. ディープリンクとプロトコルハンドラー
← Electron Desktop App Developmentに戻る