React Nativeの統合開発環境Deco IDEをレビュー
こんにちは。F.S.です。
近年、我々のチームではReact（JS）を使ったWebアプリ開発がスタンダードになり、開発経験をもつエンジニアも徐々に増えています。周囲を見てもReact（JS）は多くの事例を見かけます。
一方、React Nativeの事例は国内ではあまり見かけません。我々が開発しているモバイルアプリも現在はネイティブで開発していますが、機会を見てReact Nativeの導入も検討したいと考えています。今回は関連トピックとして、先日オープンソースとして公開されたDeco IDEをレビューしてみたいと思います。
Deco IDEとは？
Deco IDEhttps://www.decosoftware.com
タイトルそのままですが、React Native によるアプリ開発の統合開発環境です。
Deco Softwareが開発しており、オープソースとして公開されています。
GitHubでは2016/6/4現在で3,000を超えるスターが付いています。
パッケージのインストール
2016/6/4現在は Mac OS X 版のみが提供されています。別途、Xcodeが必要になります。Deco IDEはReact+Reduxで開発されたWebアプリを Electron でデスクトップアプリとしてパッケージングしているため、Windows版もそれほど苦にせずできるのですが、Windows版がすぐに欲しければプルリクを送ってくれ、とのことです。
Windows support? Not yet. However, Deco is written as a web app (React + Redux) and packaged as a desktop app via Electron. So it shouldn't be too much effort to build for Windows. If you want Windows support immediately, please consider contributing a pull request to the Deco IDE repository.FAQより引用
https://www.decosoftware.com/faq
Deco IDEの特徴
プロジェクトの作成
Deco IDEを起動し、新規プロジェクトを作成します。react-native-cliの「react-native init」により生成されるプロジェクトファイルができているのがわかります。
シミュレータの起動
ツールバーのSimulatorボタンから起動するシミュレータを選択します。
シミュレータでアプリが起動すると、おなじみのReact Nativeの画面が出てきます。
Deco IDEでは、Cmd-D ->「Enable Live Reload」でLive Reloadを有効にするように推奨されています。これは後述のコンポーネントのプロパティ変更を即時反映させるためだと思われます。
シミュレータの選択を見てわかるように、現在IDEから起動できるシミュレータはiOSのものしかありません。Androidについては、今のところターミナルからreact-native-cliの「react-native run-android」を実行するしかないようです。こちらもコントリビューション歓迎、という状況です。
Android support? Mostly. You can run your Android apps from the command line using the standard react-native run-android. Then use Deco as your text editor. Hot reloading will work as expected (you will need to enable it in your emulator by shaking the device once your app loads). For now, Deco only supports running the packager/simulator if you're using iOS. If you want better Android support immediately, please consider contributing a pull request to the Deco IDE repository.FAQより引用
新規コンポーネントのテンプレート
Projectペインで右（2本指）クリックより新規ファイルやディレクトリが作成できますが、「＋」によりコンポーネントのテンプレートが作成できます。
Componentのテンプレート
Stateless Componentのテンプレート
ビルトインコンポーネント
ウインドウ左下にComponentsというペインがあります。ここには、Deco IDE用に提供されたJSXテンプレートが検索できるようになっています。
このコンポーネントをソースコードにドラッグ＆ドロップすると、JSXがソースコードに挿入され、実行中のアプリにも反映されます。
また、ソースコード上で Cmd-i ショートカットにてカーソル位置にコンポーネントを挿入することもできます。
コンポーネントにはReact Nativeが提供するコアコンポーネントの他、サードパーティー製のコンポーネント（npm install で追加するもの）もあります。
MapView（コアコンポーネント）の例
Gifted Messenger（react-native-gifted-messengerモジュール）の例
このようにして挿入したコンポーネントは右側のPropertiesペインにて属性値を調整することができます。これがDeco IDEの一つのウリになっています。Live Reloadが推奨なのもこのためです。
Deco IDEが有用なものになるかどうかは、このコンポーネントの充実にあると思われます。
ただし、コンポーネントを追加する方法はまだ確立されてないようです。現時点ではDeco Softwareのコンポーネントレポジトリの package.json に所定のスキーマで追加し、プルリクを送る手法を取っているようです。
コンポーネトレポジトリ
https://github.com/decosoftware/deco-components
nodeモジュールのインストール
メニューの Install > Install npm module（Cmd-M）から、nodeモジュールのインストールができます。
インストール中はプログレスバーが表示されます。npm install が必要なコンポーネントを新規に使用する場合も同様にプログレスバーが表示されます。
インストールしたモジュールはプロジェクト内の package.json に追加されます。
コンポーネントの挿入で追加されたモジュールも同様に追加されていることがわかります。
おわりに
Deco IDEはテキストエディタとして基本的なシンタックスハイライト、補完機能は備えてますが、Project内のファイル検索や、定義へジャンプするなどのIDEの基本的な機能がありません。また、Git等のソースコートレポジトリとの連携機能もありません。この辺りはコマンドラインを併用する必要があります。現時点では発展途上で、まだまだサポートツールといったところです。2000人以上の開発者が参加して開発が進められているので、不足している機能も充実していくでしょう。コミュニティに参加して貢献するのもいいでしょう、
それではまた。
次世代システム研究室では、アプリケーション開発や設計を行うアーキテクトを募集しています。アプリケーション開発者の方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ 募集職種一覧 からご応募をお願いします。
