このページの本文へ

ElectronとMeteorの違い JavaScriptでアプリを作るなら何を使えばいい?

2016年12月06日 04時42分更新

文●Zack Wallace

  • この記事をはてなブックマークに追加
本文印刷
フロントエンドエンジニアが「アプリも作ってよ」と頼まれたときのために知っておきたい、人気JavaScriptフレームワークの特徴と違い。

MeteorElectronはどちらもJavaScript、Node、HTML、CSSなどのWeb言語や技術を利用してアプリを開発するためのクロスプラットホームです。

これまでMeteorとElectronは同じ作業をするもので、互いに競い合っていると思っていました。なぜなら、この2つのプラットホームの紹介Webサイトで次のように書かれていたからです。Electronは、「JavaScript、HTML、CSSを使ってクロスプラットホームなデスクトップ用アプリを作成します」、一方でMeteorは「MeteorはWeb、モバイル、デスクトップ用のオープンソースプラットホームです」と書かれていました。

どちらの方が「デスクトップ用」アプリを作成するに「適している」か、どちらの使い方を学ぶのに時間を費やすのがいいか調べました。大きな違いがどこにあるかを調べようとしましたが、比較情報がほとんどないことに驚きました。

どちらも「デスクトップ」アプリを作成すると唱っているので混乱します。Meteorがなぜそのように唱っているか分かりません。分かる人もいるのでしょうか。

それぞれがどのような用途に適しているか説明します。

Meteor

Meteor logo

MeteorはWeb、モバイル、デスクトップ用のJavaScriptアプリを作成するものです。プログラムをOSにインストールしてプロジェクト上でコマンドを実行すれば使えます。

MeteorはNode.js、一般的なJavaScriptコミュニティのAPI、ビルドツール、キュレーションされたパッケージを含むフルスタックなJavaScriptプラットホームです。Meteor自体がNode.jsを含んでいますが、Nodeをローカルにインストールもできます。

Meteorを使い始めるには、WebサイトからWindows、Mac、LinuxなどのOSにインストールします。そして、meteor create myappでアプリを作成し、meteorと実行すると、開発用のローカルサーバが動き始めます。詳しくはMeteorガイドを参照してください。

MeteorはMeteor専用のライブラリーを備えている「Atmosphere」と呼ばれるパッケージライブラリーがあります。ライブラリーによってはほかのAtmosphereライブラリーに依存するものもあります。Meteorはnpmを使用できます。将来的にはすべてのパッケージがnpmに組み込まれることになるでしょう。作成したMeteorアプリ自体もほかのプロジェクトに含められるライブラリーにできます。

プロジェクトが用意できたら、アプリをデプロイします。MeteorはNodeベースのアプリを作成するため、Nodeホスティングが必要です。MeteorはAmazon Web Service(AWS)をベースにしたGalaxyと呼ばれる独自のホスティングサービスを推奨しています。

現在、大きいMeteorアプリのほとんどがGalaxyで管理されています。Galaxyを使うと、デプロイがより簡単になります。AWSをベースにしているので、問題もありません。安心してアプリの管理を任せられます。

Galaxyは、データの記録、分析、監視、アップデート、継続的インテグレーション、移行、ステージングをより簡単に実行するツールとして役立ちます。必ずしもGalaxyを使う必要はありませんが、Galaxyの使用を強くすすめます。複雑なホスティングの問題を軽減する以外の効果も期待できます。

AndroidアプリまたはiOSアプリとしてもデプロイできます。そのためには、開発環境に設定やツールを追加する必要がありますが、ツールを追加すればテスト用にエミュレータを実行できます。Windows用のMeteorはモバイルアプリのビルドをサポートしておらずCordovaを使います。Cordova自体がWeb言語を使ったモバイルアプリを作成するフレームワークです。

注意しなければいけないのは、MeteorのWebサイトには「MeteorはWeb、モバイル、デスクトップのオープンソースプラットホームです」と書いてあっても、実際にはデスクトップアプリを作成できるわけではないことです。これには最初戸惑いました。みなさんもおそらくそうでしょう。

Meteorは、サーバーやブラウザーまたはiOSもしくはAndroidアプリ上で動作する「Webアプリ」を適切なビルドツールを使って作成するプラットホームなのです。Meteorはフロントエンドとバックエンドのモジュールの両方のモジュールと機能を備えたフルスタックフレームワークです。たとえば、Emberのようなほかのフレームワークはフロントエンド専用です。

Meteorはもっとも人気のあるAngularやReactなどのJavaScriptライブラリーとフレームワークを統合して使えるようにサポートしています。

Meteorは独自のMongoDBをサーバー側で備えており、MiniMongoと呼ばれるDBをクライアント側で備えています。この2つのDBを同期させるとpub/sub(公開と承諾)機能の送受信ができます。データセットは非常に簡単に作成でき、配列の作成・使用と同程度の容易さですぐに使い始められます。

Meteorで構築したWebサイトの例はショーケースを参照するか、BuiltWithMeteorにアクセスしてください。例として、TrelloのようなWekanと呼ばれるカンバン方式のタスク管理ツールがあります。

Electron

Electron logo

Electronはデスクトップアプリとして動くクロスプラットホームアプリを作成できます。JavaScript、HTML、CSS、さまざまなNodeライブラリーを利用したプログラムもできます。Windows、Linux、Mac用のネイティブデスクトップアプリとしてもコンパイルできます。これは型破りな手法でMeteorではできなかったことです。

ElectronはAtomエディター用にGitHubが作ったもので、作成以来、マイクロソフトやFacebookの人たちに使われています。

インターフェイスコンテナはChromiumで管理されており、コンテナの中でアプリを「提供する」ためにバンドルされたNode.JSサーバーを利用しています。Chromeのブラウザーウィンドウのタブと同じようなフレームで動作する自己完結型のWebサーバーです。

一般的なツールはすべてReact、Angular、Nodeライブラリーのように使えます。ただし、PHP、Ruby、Javaは実行できません。

アプリはChromiumを使ってダイアログボックス、メニュー、通知などのもとから備わっているOSの機能を利用できます。Windowsアプリケーションは、インストーラプログラムを使ってパッケージ化してデプロイできます。ファイルシステムにもアクセスでき、さまざまな方法でデータを保存できます。

プログラムは自己更新、クラッシュレポートの送信、プロファイリング/デバッグができるように作成されます。

動作中のElectronを見たいと考えているかもしれませんが、おそらくすでに使っています。多くのアプリがElectronを使って動作しているからです。たとえば、Slack、Visual Studio Code、Nylas N1、Brave Browser、Atomエディターなどです。詳しくは、こちらを参照してください。

Visual Studio Code built in Electron

Mac用にコンパイルされたアプリには少なくともMac OS 10.9の64ビット版が必要です。WindowsならWindows 7以上が必要ですが、32ビット版か64ビット版は問いません。ただし、ARM版はいけません。Linuxなら、ライブラリー次第ですが、Ubuntu 12.04(またはこれ以降のバージョン)なら問題ありません。また、Fedora 21やDebian 8での動作も確認されています。

ストレージにはたくさん候補があります。もっとも小さいものとしてはLocalStorageがありますが、メガバイト単位の非常に小さなものです。「もう1つ上のサイズ」でおすすめなのが、設定が簡単なJSONストアで、electron-json-storageと呼ばれています。ここから始めてほかにも目を向けると、Pouchdbもありますが、何千行ものデータ、具体的には5万行以上を入れるとパフォーマンスが落ちるという人もいます。

おそらくもっとも大きいストレージの候補としてはIndexedDBがありますが、サイズはハードディスクの空き容量の3分の1という制限があります。IndexedDBを管理するにはDexie.jsなどのさまざまなアダプタやAPIがあります。MongoDBから着想を得たNeDBなど代替的なローカルデータベースストアも見つけられます。

つまり主な違いは...

ElectronはデスクトップアプリケーションをWindows、Linux、Mac用にコンパイルできます。それに対し、MeteorはCordovaを使ってフルスタックなWebアプリケーション、さらにはiOSアプリやAndroidアプリを作成できます。

よくある質問は、Meteorでアプリを作成しつつ、そのアプリをElectronのコンテナで実行できれば、両方のメリットを享受できるのではないか、ということです。

答えはイエスです。

注意してほしいのは、両方のプラットホームのメリットを享受して使うためのちきんと一般化された方法がない点です。しかし、Googleで少し検索すればいろいろな方法が見つかります。1番すすめられるのがMeteorのフォーラムを参照することです。ElectrometeorというMeteorをElectronで実行するプロジェクトが見つかるかもしれませんが、まだ始まってから1、2年しか経っていません。また、最新のバージョンのMeteor(この記事を書いている時点でバージョン1.4)で問題なく動作するかは分かりません。

とはいえ、この2つを組み合わせて使いたいものです。そうすれば、最終的にコードをWebサイトで実行して、iOSアプリやAndroidアプリにコンパイルすれば、複数のプラットホームのデスクトップで動作するアプリを作成できます。どのようにデプロイするにせよ、ベースとなるコードの大半は同じです。

そのほかのプラットホーム

MeteorとElectronのどちらにも代替的なプラットホームがあることは言うまでもありません。

Electronの代替プラットホームはコンパクトなもので、以前は「node-webkit」であったNW.jsが主要なライバルです。どちらもV8 Chromium JSエンジンをベースにしてる点は同じですが、Electronの方が機能面でわずかに優れています。

アプリを複数のプラットホーム向けにパッケージ化する方法はほかにもあります。ElectronはHTML、JS、CSS、Node向けです。 たとえば、Xamarinは同じことができますが、C#を使います。

Meteorの最大のライバルはおそらくNode.js用に作成されたフレームワークExpressでしょう。Expressを補うのがFeathersです。Feathersはリアルタイムアプリを構築し、Expressの機能を補完するためのモジュールや機能を追加します。

競争が非常に激しいので、MeteorとElectronのどちらを使うかを決める前にMeteorをExpressやFeathersと比較調査したいと真剣に考えています。Expressは非常に人気があり、Nodeプロジェクトを完成させるスピードが飛躍的に上がりました。FeathersはExpressと連携するリアルタイム機能やたくさんの役立つモジュールを追加できます。

最後に

JavaScriptのWebアプリを作成しオンラインでデプロイするためのローカルな開発ツールが欲しいと考えているなら、Meteorを使ってください。GalaxyのホスティングやGalaxyが提供するすべてのツールを利用すれば、アプリを拡張し、適切にモニターでき、シスアドの作業を効率化できます。

MeteorはリッチなWebアプリの開発、テスト、プロファイル、デプロイ、更新、モニターするためのフレームワークです。さらにCordovaを使えば、アプリストア用にパッケージ化し、iOSやAndroidにデプロイできます。そのあとに、Windows、Mac、Linuxなどのデスクトップで利用するため、Electronを使ってアプリのパッケージ化もできます。

Meteorは小さいアプリに使うだけではありません。数万件もの関連データやデータ集約型のインターフェースを備えたQualiaが、Meteorでどのようにシステムを構築したかを説明する「3,000 Hours Into Meteor(Meteorとの3000時間)」というタイトルの魅力的なプレゼンテーションは一見の価値があります。

オフラインでもオンラインでも動作するクロスプラットホームのデスクトップアプリを作成することだけに興味がある場合や、JavaScript、HTML、CSS、Node、npmライブラリーなどのWeb言語を使ってアプリを作成したい場合はElectronを使ってください。Electronは基本的にはJavaScript V8エンジンを使ってChromiumコンテナで動作するNodeサーバーにすぎません。理論上は、Meteorで作られていてもほかのもので作られていても、あらゆる古いNodeアプリを実行できます。

Electronでアプリを作成してからWebにデプロイする場合、ElectronのAPIを一切使わずにアプリをNodeプロジェクト単位に分解するのが必須です。Web用アプリを最初に作る方が簡単かもしれません。その次に、あとでデスクトップ用にデプロイできるようにElectronのパッケージ化や利用を考えるとよいでしょう。

(原文:What’s the Difference between Meteor and Electron?

[翻訳:中村文也/編集:Livit

Web Professionalトップへ

WebProfessional 新着記事