Electron+React+Typescriptの開発環境を作る

Electron+React+Typescriptで何かWebアプリを作ってみたいという人のために、Electronで開発を始めるまでの過程を書いていこうと思います。

※2019/09/25追記
create-react-appがTypescriptをサポートしたことによってこのQiitaの記事は非推奨になったので最新の開発環境を作りたい場合はElectron+React+Typescriptの開発環境を作る・改をみてください。

事前準備

create-react-appをグローバルにインストールする。

npm install -g create-react-app

アプリ起動まで

アプリ作成

今回はTypescriptを使用するために、react-scripts-tsを使用しアプリを作成する。

npx create-react-app --scripts-version=react-scripts-ts [アプリ名]

※Could not create a project called "[アプリ名]" because of npm naming restrictions:

• name can no longer contain capital letters
  このようなエラーが出た場合はアプリ名が悪いようなので先頭を小文字にするなどしてみるとエラーがなくなるはずです！

Electronの設定

electronとforemanをインストールする。

yarn add --dev electron
yarn add foreman

https://github.com/csepulv/electron-with-create-react-app 内の下記ファイルを同じ場所にコピーする

Procfile
src/electron-starter.js
src/electron-wait-react.js

package.jsonを編集する

package.json

{
 .
 .
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    .
    .
    "electron": "node_modules/.bin/electron .",
    "dev" : "nf start -p 3000"
  }
}

tslint.jsonに下記の"rules"を追加する

tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": {
    "no-console": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": true,
    "strict-boolean-expressions": false,
    "jsx-boolean-value": false
  },
  "jsRules": {
    "no-console": false
  }
}

アプリ起動

yarn dev

最後に

今回は環境構築だけでしたが、これを用いてお天気アプリの作成も行いました。それに関してはElectron+React+Typescriptでお天気アプリを作るに書きました。
メモ程度ですが参考にしてください。

参考

React + TypeScript (+ Electron)でアプリを書き始めるときにやってること