Electron

エレクトロン

Electron

Next.js

TypeScript

エレクトロンを分かりやすく

Electron（エレクトロン）は、ウェブ技術を使用してクロスプラットフォームのデスクトップアプリケーションを開発するためのフレームワークです。これにより、JavaScript、HTML、CSS を使ってデスクトップアプリを構築できます。

Next.js と TypeScript を使った Electron アプリケーションのセットアップ

プロジェクトの初期化

まず、Next.js と TypeScript のプロジェクトを作成しましょう。

npx create-next-app my-electron-app --typescript
cd my-electron-app

Electron のインストール

次に、Electron をプロジェクトに追加します。

npm install electron@latest

Electron のエントリーポイントの作成

プロジェクトルートに electron.ts ファイルを作成し、以下のコードを追加します。

import { app, BrowserWindow } from 'electron'
import * as path from 'path'
import * as url from 'url'

let mainWindow: Electron.BrowserWindow | null

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  const startUrl =
    process.env.ELECTRON_START_URL ||
    url.format({
      pathname: path.join(__dirname, '../out/index.html'),
      protocol: 'file:',
      slashes: true,
    })

  mainWindow.loadURL(startUrl)

  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()
  }
})

ビルドと実行の設定

package.json に以下のスクリプトを追加し、ビルドと実行の設定を行います。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "electron": "tsc && electron .",
  "electron-dev": "ELECTRON_START_URL=http://localhost:3000 electron ."
}

tsconfig.json に以下の設定を追加します。

"compilerOptions": {
  "outDir": "dist",
  "module": "CommonJS",
  "target": "ES2017",
  "lib": ["DOM", "ES2017"],
  "allowJs": true,
  "skipLibCheck": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "strict": true,
  "forceConsistentCasingInFileNames": true,
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmit": true,
  "jsx": "preserve",
  "incremental": true,
  "noImplicitAny": false
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "dist"]

Next.js と TypeScript を使った Electron アプリケーションの開発

コンポーネントの作成

components ディレクトリに Counter.tsx ファイルを作成し、以下のコードを追加します。

import React, { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h2>カウンター: {count}</h2>
      <button onClick={() => setCount(count + 1)}>増加</button>
      <button onClick={() => setCount(count - 1)}>減少</button>
    </div>
  )
}

export default Counter

インデックスページの編集

pages ディレクトリにある index.tsx ファイルを開き、Counter コンポーネントをインポートして使用します。

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Counter from 'components/Counter'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Electron + Next.js + TypeScript</title>
        <meta name="description" content="Electron + Next.js + TypeScript のデモアプリケーション" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Electron + Next.js + TypeScript</h1>

        <Counter />
      </main>

      <footer className={styles.footer}>
        <span>Powered by Electron, Next.js, and TypeScript</span>
      </footer>
    </div>
  )
}

export default Home

アプリケーションの実行

開発環境でアプリケーションを実行するには、以下のコマンドを実行します。

npm run dev
npm run electron-dev

これで、Electron アプリケーションが起動し、Next.js と TypeScript を使用したウェブアプリケーションが表示されます。カウンターコンポーネントを使って、増加ボタンと減少ボタンでカウントを増減させることができます。

Next.js を学ぶ一覧へ