Reactideを使ってみる

最近、Reactに入門してサーバーサイドエンジニアからフロントエンドエンジニアに転向できなかと試行錯誤しています。

そのなかで同僚にReactideってどうなの？と聞かれたのでちょっと調べて使ってみました。

Reactide:公式

環境：Ubuntu18.04
install方法は公式にあります。

まずは、git cloneします。
その後、公式の手順（以下）通り進めていきます。
みた感じスムーズにできそうなのですが、いくつかはまりポイントがありました。

手順

git checkout 3.0-release
npm install
npm run webpack-production
npm run electron-packager

###嵌りポイント1
npm run webpack-production

エラーでwebpackが失敗しました。

error

    Error: Cannot find module 'monaco-editor\esm\vs\editor\contrib\gotoSymbol\goToCo
    mmands'

どうやらissueとしても上がっているようで、そこに解決方法が載っていました。
公式のissue

cloneしたpackege.jsonを修正します。

package.json

"monaco-editor": "^0.14.3",
"monaco-editor-webpack-plugin": "^1.5.4",

↑を↓のように修正

package.json

"monaco-editor": "~0.14.3",
"monaco-editor-webpack-plugin": "~1.5.4",

###嵌りポイント2
electron-packager

error

12 info lifecycle reactide@3.0.0~electron-packager: Failed to exec electron-packager script
13 verbose stack Error: reactide@3.0.0 electron-packager: `electron-packager . --overwrite --platform=darwin --arch=x64 --icon=/Users/ep/Codesmith/reactide/icons/icon.png --prune=true --out=release-builds`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid reactide@3.0.0

エラーを読むと、--platform=darwinと出力されていました。
このスクリプト、MacOS用？？？
という事で、package.jsonの以下の箇所を修正します。

package.json

"electron-packager": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=/Users/ep/Codesmith/reactide/icons/icon.png --prune=true --out=release-builds"

↑を↓へ修正

package.json

"electron-packager": "electron-packager . --overwrite --platform=linux --arch=x64 --icon=/Users/ep/Codesmith/reactide/icons/icon.png --prune=true --out=release-builds"

--platform=darwinを--platform=linux へ

これで全てのコマンドが通りました。

おさらいですが、

Reactideのclone用フォルダを作成
git cloneする
cloneしたフォルダに入って、package.jsonを2か所修正する（Ubuntuの場合）
その後、以下のコマンドを順次実行
npm install
npm run webpack-production
npm run electron-packager

完了後、release-builds > Reactide-linux-x64 直下にReactideという実行ファイルが生成されているので実行

実行するとこんな画面が表示されます。

では開発していきます。
まずは　File > New Projectでプロジェクトを作成
※私がはまったのですが、Ubuntuでプロジェクトを作成するときに、既存のフォルダを指定すると作成できませんでした。必ず、パネル上部のinputエリアから新規プロジェクト名を入力してフォルダを作成する必要がありました

プロジェクト作成が完了するともう一つReactideが起動しますが、落としてしまって構いません。

作成後、projectに手持ちのソースを突っ込んで動かしてみます。

実行方法は他のと基本的に変わりません。
ターミナル開いて

command

npm start

その後、ブラウザでhttp://3000あたりにつなぎましょう。

で、使ってみた感想ですが、、、
これからに期待。

※terminalやシミュレーターを起動するのは右上のアイコンたちです。

時々プロジェクトの進捗を覗きに行こうとは思いました。