ElectronでMacOSデスクトップアプリを作ろう！初心者向けステップバイステップガイド

## はじめに

こんにちは！今回は、Electronを使ってクリックするたびに名言が変わるおしゃれなデスクトップアプリを作成します。このアプリは初心者でも簡単に作れるので、初めてのデスクトップアプリ開発にぴったりです。ぜひ一緒にチャレンジしてみましょう！

## Electronとは？

**Electron**は、JavaScript、HTML、CSSを使用してクロスプラットフォームのデスクトップアプリケーションを作成できるフレームワークです。GitHubによって開発され、Visual Studio CodeやSlackなどの有名なアプリケーションにも使われています。

## 事前準備

まずは、Electronを使うために必要な環境を整えましょう。

### 1. Node.jsのインストール

Electronを動かすためにはNode.jsが必要です。以下の公式サイトからNode.jsをダウンロードしてインストールしてください。

[Node.js公式サイト](https://nodejs.org/)

### 2. Electronのインストール

Node.jsのインストールが完了したら、次にElectronをインストールします。コマンドプロンプトまたはターミナルを開き、以下のコマンドを実行します。

```bash
npm install --save-dev electron
```

これでElectronのインストールは完了です。

## アプリケーションの作成

次に、アプリケーションのファイルを作成し、コードを書いていきましょう。

### 1. プロジェクトのセットアップ

新しいフォルダを作成し、ターミナルでそのフォルダに移動します。

```bash
mkdir my-quote-app
cd my-quote-app
```

次に、`npm init`コマンドを使用して、プロジェクトを初期化します。

```bash
npm init -y
```

### 2. 必要なファイルを作成

以下の3つのファイルを作成します：

- `main.js`：アプリのメインプロセスを管理するファイル
- `index.html`：ユーザーインターフェースを作成するHTMLファイル
- `renderer.js`：ユーザーインターフェースの動作を制御するJavaScriptファイル
- `styles.css`：スタイリングのためのCSSファイル

#### `main.js`

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'renderer.js')
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
```

#### `index.html`

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quote App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="quote-container">
    <div id="quote">クリックして名言を表示</div>
  </div>
  <script src="renderer.js"></script>
</body>
</html>
```

#### `renderer.js`

```javascript
const quotes = [
  "成功する人は失敗するまでやめない。- 田中角栄",
  "失敗は成功の母である。- スピノザ",
  "努力は夢中に勝てない。- スティーブ・ジョブズ",
  "夢を追いかける勇気を持ちなさい。- ウォルト・ディズニー",
  "どんなに暗い夜でも必ず明ける。- 西郷隆盛",
  "行動することでのみ、希望は現実になる。- アインシュタイン",
  "学びて思わざればすなわち罔し、思いて学ばざればすなわち殆し。- 孔子",
  "昨日の自分に勝つ。- 本田圭佑",
  "運命を切り開くのは自分自身だ。- ナポレオン",
  "変化を恐れるな、それは常にチャンスだ。- アンドリュー・カーネギー",
  "幸福は作るものであって、得るものではない。- デイル・カーネギー"
];

document.getElementById('quote').addEventListener('click', () => {
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById('quote').innerText = randomQuote;
});
```

#### `styles.css`

```css
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  transition: background-color 0.5s ease;
}

#quote-container {
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 15px;
  padding: 30px;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

#quote-container:hover {
  transform: scale(1.05);
}

#quote {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
```

### 3. アプリケーションの起動

全てのファイルを保存したら、ターミナルで次のコマンドを実行してアプリを起動します。

```bash
npm start
```

## 画面表示
![スクリーンショット 2024-08-23 19.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/e3b61d8c-788c-71ee-1296-86ee41dd5ae4.png)
![スクリーンショット 2024-08-23 19.57.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/96ccaf72-6d0a-fa96-47db-a32c8a493c29.png)



これで、クリックするたびに背景が変わり、名言がランダムに表示されるスタイリッシュなデスクトップアプリが完成です！

## おわりに

Electronを使えば、JavaScriptとHTML、CSSだけでこのようなデスクトップアプリを簡単に作成することができます。さらに機能を追加して、より複雑なアプリケーションを作ってみてください！

ご質問やフィードバックがあれば、コメント欄でお知らせください。