ホームページ > 記事 > ウェブフロントエンド > JavaScript と Electron.js を使用してデスクトップ GUI アプリケーションを構築する

JavaScript と Electron.js を使用してデスクトップ GUI アプリケーションを構築する

王林転載: 2023-09-14 09:57:031590ブラウズ

使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序

今日のテクノロジー時代において、デスクトップアプリケーションは、強化されたユーザーエクスペリエンスを提供し、ローカルコンピューターの機能を最大限に活用することで、私たちの日常生活において非常に重要な役割を果たしています。従来、デスクトップアプリケーションの開発にはプラットフォーム固有のプログラミング言語とフレームワークに関する専門知識が必要であり、デスクトップ開発を検討している Web 開発者にとっては課題となっていました。ただし、Electron.js はこの課題を効果的に解決します。

Electron.js (以前は Atom Shell として知られていました) は、GitHub を起源とするオープンソースフレームワークです。これにより、開発者は HTML、CSS、JavaScript などの使い慣れた Web テクノロジーを使用してクロスプラットフォームのデスクトップアプリケーションを構築できます。 Electron.js は、Web 開発とデスクトップアプリケーション開発の間のギャップを埋めることにより、開発者が強力で機能豊富なデスクトップアプリケーションを作成する新たな機会を生み出します。

Electron.js アーキテクチャ

Electron.js がどのように動作するかを理解するために、そのアーキテクチャを詳しく見てみましょう。 Electron.js は、Chromium レンダリングエンジンと Node.js ランタイムという 2 つの主要コンポーネントを組み合わせたものです。

Chromium レンダリングエンジン − Electron.js は、人気のある Web ブラウザ Google Chrome と同じレンダリングエンジン、Chromium を使用します。これにより、Electron.js アプリケーションは、Web ブラウザーと同じ機能とパフォーマンスで Web コンテンツをレンダリングおよび表示できるようになります。
Node.js ランタイム − span>Electron.js は Node.js ランタイムを統合し、基盤となるオペレーティングシステムへのアクセスを提供します。そしてネイティブAPI。これは、開発者が Node.js の能力を最大限に活用し、モジュールとライブラリの広範なエコシステムを活用してデスクトップアプリケーションを構築できることを意味します。

Electron.js はマルチプロセスアーキテクチャを利用しており、各 Electron.js アプリケーションは、メインプロセスとレンダラプロセスという 2 つの主要プロセスで構成されます。

メインプロセス − メインプロセスは、独立した Node.js プロセスとして実行され、ブラウザウィンドウの作成と管理を担当します。。レンダラープロセスと通信し、システムレベルのイベントを処理し、ネイティブ API にアクセスします。メインプロセスはアプリケーションのライフサイクルを制御し、Electron.js アプリケーションへのエントリポイントとして機能します。
レンダラープロセス − 各 Electron.js アプリケーションには複数のレンダラープロセスを含めることができ、それぞれが個別のブラウザウィンドウに対応します。レンダラープロセスは、各ブラウザウィンドウで Web コンテンツをレンダリングして表示する役割を果たします。これらは別の JavaScript コンテキストで実行され、一定レベルの分離とセキュリティを提供します。各レンダラープロセスは Electron.js API にアクセスできるため、メインプロセスと対話し、DOM の操作、ネットワークリクエストの作成、ユーザーインタラクションの処理などのタスクを実行できます。

単純な Electron.js アプリケーションの構築

Electron.js とそのアーキテクチャについて十分に理解できたので、JavaScript を使用して単純な Electron.js アプリケーションを構築してみましょう。「Hello, Electron.js」というメッセージをウィンドウに表示するアプリケーションを作成します。

開始するには、次の手順に従ってください -

開発環境をセットアップする

Electron.js は Node.js の上に構築されているため、コンピューターに Node.js がインストールされていることを確認してください。最新バージョンの Node.js を公式 Web サイト (https://nodejs.org) からダウンロードしてインストールできます。

新しい Electron.js プロジェクトを作成する

新しいプロジェクトフォルダーを作成し、コマンドラインを使用してそのフォルダーに移動します。次のコマンドを実行して、新しい Node.js プロジェクトを初期化します。 -

リーリー

このコマンドは、新しい Node.js プロジェクトをデフォルト設定で初期化します。

Electron.jsをインストールする

次のコマンドを実行して、開発依存関係として Electron.js をインストールします -

リーリー

このコマンドは、プロジェクトに Electron.js パッケージをインストールします。

メインエントリポイントを作成する

プロジェクトフォルダーに index.js という名前の新しいファイルを作成し、次のコードを追加します -

リーリー

イラスト

このコードでは、Electron.js パッケージから必要なモジュールをインポートし、createWindow 関数を定義してブラウザーウィンドウを作成し、ウィンドウの作成とアプリケーションの終了に必要なイベントハンドラーを設定します。

HTMLファイルの作成

index.html という名前の新しいファイルをプロジェクトフォルダーに作成し、次のコードを追加します -

示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1>Hello, Electron.js</h1>
   </body>
</html>

此 HTML 文件将显示在 Electron.js 应用程序的窗口中。

运行 Electron.js 应用程序

npx electron.

结论

Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、高性能且具有视觉吸引力的桌面应用程序。

在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、它的主要进程以及主进程和渲染进程的作用。我们还逐步完成了设置开发环境和构建 Electron.js 应用程序的过程。

以上がJavaScript と Electron.js を使用してデスクトップ GUI アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript node.js 架构 css chrome electron html JS 事件 dom github https atom

声明：

この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：HTML で JavaScript 関数を呼び出すにはどうすればよいですか?次の記事：HTML で JavaScript 関数を呼び出すにはどうすればよいですか?

続きを見る