普段思ったことや、雑記。

Menu & Search

大注目のフルスタックフレームワーク「Meteor」を試してみた (1)

2016年1月8日

Githubでものすごい勢いでスター数を伸ばし、ついにはフルスタックフレームワークの頂点「Ruby on Rails」のスター数を抜きさったMeteor

2016年1月7日現在、RailsのGithubでのスター数は29,061、Meteorは31,098である。僕がMeteorを知ったのは2015年年の2月頃だったと思う。個人の開発で使用するWebアプリケーションフレームワークを選定している際にこんな記事を見かけた。

2014年 Webアプリケーションフレームワークトレンド(Node.js) – Qiita

http://qiita.com/oukayuka/items/14bfdcb6b5411a2b4b7c

Node.jsではないバージョンのまとめのほうが人気だったとは思うが、当時Node.jsのフレームワーク選定をしていて、Express、koa、Sails、Hapiくらいしか知らなかった僕には、このNode.jsのまとめがとても参考になったのを覚えている。当時はExpressが最も人気かつ注目を浴びたフレームワークと思っていたが、このまとめを見てそれを改めた。

昨年より、最も勢いがあり、注目があったのはMeteorであり、Expressはどちらかというと長くに渡り開発され、Node.jsのフレームワークの中では「枯れた」フレームワークだったという認識になった。それは、前述のまとめ以外でGithubのExpressのコミット数の推移を見れば明らかだ。一方で、Meteorは、フルスタックフレームワークであり、まだまだ製品レベルでの採用事例も少なく、よりチャレンジングな選択肢だ。余談だが、当時は製品レベルで使用をしたいアプリケーションの技術を選定していた。今もだが、製品レベルで使いたいアプリケーションにはNode.jsを扱う場合、Expressで間違いないという認識は変わっていない。実際に2016年6月現在では、僕はExpressフレームワークを使用して製品を作っている。Node.jsにおいて、選択肢としてフルスタックフレームワークではない、マイクロフレームワークという括りになると、Expressは非常に持ち出しやすい選択肢と思っている。運用の面を考えると、フレームワーク自体の理解が容易、運用していくうちにリプレースのタイミングがいつか来るということを考えると、現状ではより選択肢となりやすい。

 

それほどまでに注目されるMeteorはどんなフレームワークなのか

Meteorは、単なるフルスタックWebアプリケーションフレームワークではない。Meteorには、現代の開発の仕方そのものを変革する仕組みや、デプロイまで支援する枠組み、またモバイル向けのネイティヴアプリの作成も可能など、魅力的な機能が多い。とりあえず、箇条書きにしてみた。

  • クライアントでの開発環境から、デプロイ先でも全く変わらないJavaScriptで動く
  • Webアプリケーションだけでなく、モバイルアプリケーションも作れる
  • クライアントサイドで、リアクティブにViewを生成する
  • Viewのレンダリングの仕組みには、Meteor標準のフレームワーク「Blaze」のほか、選択肢として標準にAngular JSまたはReactをサポートしている(リアクティブ駆動の実装方法の選択肢が標準で3つある)
  • $ meteor deployで your_appname.meteor.comにオリジナルアプリがいつでもデプロイできる(※meteor.comへの無料ホスティングサービスは2016年3月25日終了)
  • 製品レベルで安全に使用する、またスケールを支援するためにGalaxyというMeteor専用のホスティングプラットフォームを提供している(DevOpsの支援)

リアクティブプログラミングが前提のフルスタックWebアプリケーションフレームワークで、なおかつ、モバイルアプリ開発もおこなえる、これまでのWebアプリケーションフレームワークとはパラダイムが異なるフレームワークと思うと良いのかもしれない。

JavaScript界隈では、仮想DOMの概念を踏襲したリアクティブなフレームワークは昨今のトレンドな技術で、ReactだったりAngular JSをはじめとする、多種多様なフレームワークがある。とにかく最近のフロントエンドの大きな潮流と感じている。Meteorはベース技術がフロントエンドもバックエンドもJavaScriptということもあってか、リアクティブプログラミングを意識している。実際にチュートリアルをこなして、Meteorを触ってみていても、フロントエンド・バックエンドの切り分けをあまり感じなく、基本的に書いたものがデフォルトでリアクティブなので、なんとなくフロントエンドのコーディングをしている感覚なのが面白いところである。

話を戻すと、Railsと概念が違いすぎて比較するのもどうかという話だが、Railsのエコシステムのうち、Railsをサポートする開発環境でHerokuがあると思うが、Meteorはこれと似たようなものを標準でサポートしている。2016日3月23日現在では、meteor.comへの無料ホスティングは終了とアナウンスがされているが、2016年3月25日以後は、後述のGlaxyのアカウントを取得し、1コンテナあたり一時間 $0.035(1時間あたり、日本円でだいたい4円。この数字で一ヶ月間換算すると月あたり2,976円)を払うことでGalaxyにデプロイが可能である。

プライベートな用途での利用なら$ meteor deployを実行することでオリジナルアプリをサーバがなくても即座にホスティングすることができる(※2016年4月5日追記、Galaxyになってから$meteor deploy試せてない)。

サービスをプロダクションレベルで導入する場合には、前述でも触れてはいるが、Meteorが公式に提供するホスティングプラットフォームのGalaxyがある。Galaxyは、バックエンドにAWSを使用しており、モニタリングや、スケールに対応している。また、SLAもサービスに含まれたり、選択するプランによっては、Meteor のアーキテクトによる製品の設計レビューも受けられたりもする。小ネタだが、どうしてこうもビジネスよりなんだろうと思った方もいるだろうから説明すると、それはMeteorがスタートアップの登竜門、Y Combinatorの卒業生だからだ!Railsにはないスピードでここまで一気に上り詰めたのも、オープンソースの力によるものだけでなく、スタートアップならではの資金調達による開発力増強のパワーがあってこそなのかもしれない。

 

Meteorのインストールから、ひな型アプリケーションの作成までをやってみる

Meteorのインストールはとても簡単。この記事は、基本的にはLinux(以後、Cent OS6.7にて実施)を対象としている。下記、公式サイトの手順に従う。わずか1コマンドだ。

Get started | Meteor

https://www.meteor.com/install

$ curl https://install.meteor.com/ | sh

これでmeteorコマンドが使えるようになる。あとはインストール完了後に出たメッセージを参照し、最初の雛形アプリを作成してみる。

$ meteor create ~/my_cool_app
$ cd ~/my_cool_app
$ meteor

これを実行して、正しく実行できれば該当ホストの3000ポートでmeteorアプリが立ち上がるはずだ。

meteor_01

Expressを試したことがあるかもしれないが、Expressはわりとしょっぱい感じである。それと比較すると、Meteorはフルスタックらしさ、というかリアクティブプログラミングらしさを前面に出していて、Click Meボタンを押すとカウントアップが簡単に実装されているよ!…と、ひな型アプリですらなんとなくリアクティブな雰囲気が漂っている。これにはテンションが上がることだろう。

Meteorを触るにあたり、Vagrantを使いたい方に…

少し脱線するが、VagrantにMeteorをインストールしたいという人もいるだろう。そして共有ディレクトリでローカルマシンでいつも通りやろうとすることだろう…。だが、ここには少し罠がある。

[vagrant@localhost test_app]$ meteor
[[[[[ /vagrant/test_app ]]]]]

=> Started proxy.
Unexpected mongo exit code 45. Restarting.
Unexpected mongo exit code 45. Restarting.
Unexpected mongo exit code 45. Restarting.
Can't start Mongo server.
MongoDB cannot open or obtain a lock on a file

こういう感じで、meteorコマンドでアプリケーションを起動しようとすると、そもそもバックエンドのDB、mongoが起動してくれず、アプリケーションが起動できない。これを解消するには色々やる必要がありそうで、僕は今回は諦めた。

2016年9月3日追記

my_cool_appというMeteorプロジェクトを作った場合の具体的なコマンド例を挙げる。下記のままコマンドを打っていけばVagrant内のローカルマシンとの共有ディレクトリで動作をする。

$ meteor create my_cool_app
$ cd ~
$ mkdir -p my_cool_app/.meteor/local
$ sudo mount --bind my_cool_app/.meteor/local/ /vagrant/my_cool_app/.meteor/local/
$ cd /vagrant/my_cool_app
$ sudo meteor

sudoでプロジェクトをマウントしているので、meteorコマンドにもsudo権での実行になることに注意。少し面倒くさい。参考にした記事はこちら。

vagrant上のUbuntuでMeteorアプリを動かす – Qiita

http://qiita.com/bumcru/items/ab212bfd8ed99a9415c8
他の参考記事はこちら

Windows環境でVagrant+CoreOS+Dockerをセットアップして共有フォルダ上でMeteorが走るまで – Qiita

http://qiita.com/insight3110/items/03a41b2aaa6deb8d4c7f

脱線終了である。

 

もっとMeteor感を味わいたい人向けに、公式で紹介されている面白いコマンドがある。

$ meteor create --example todos

これをすると、このような美麗なアプリケーションが作成される、やはり前述のようにアプリケーションのディレクトリに移動してmeteorと打つ。

meteor_02

なんかもうUIも綺麗だし、色々とすごい。公式でここまで完成度の高いものをババン!と見せられるとなるとインパクトがある。とにかく、Meteorについてテンションが上り、鼻血がでてきたことだろう。ちなみに、下記のような別パターンのアプリケーションのコマンドも紹介されている。こちらのコマンドのほうがどちらかというとすごい。なんとネイティブアプリが仕上がるので、感動することに違いない。

$ meteor create --example localmarket

 

Meteor製アプリケーションの雰囲気がより分かる、近未来的なパッケージ配布サイト「Atmosphere」

atmospherejs

ちょっとしたコマンドで生成したアプリケーションでは、Meteorというフレームワークがどんな動きをするのか理解が足りない!という人のために、紹介したいサイトがある。それは、Atmosphereだ。Atmosphereは、Meteorで使用可能なパッケージを配布している、Meteor公式のサイトである。ここに公開されているパッケージについては、meteorコマンドでインストールができる。要するに、Node.jsでいうnpmみたいなもの、Rubyでいうgemみたいなものである。このサイトがすごいのが、Meteorで組まれているらしく、サイト内を巡回した場合、ほとんど非同期で移動できたり、viewが生成されていくので、作り込まれたMeteorアプリケーションの雰囲気がよく伝わってくることだと思う。視覚的なエフェクトも目を見張ることだが、注目すべきは各所における非同期なローディング、ページのリロードなしにURLが書き換わっていたりしてかなりモダンな作りということだ。Atmosphereは面白いのでぜひ試してみてほしい。また、余談だが、好みが分かれるところではあるが、視覚エフェクトやサイトデザインも学ぶことは多いと思う。

 

日本語チュートリアル、Meteorが実際の製品に使えそうかの考察は次回へ…

公式チュートリアルのざっくり日本語訳的なものも載せようと思ったが、これをやると文章量がとても長くなるので次回に続く。次回の記事では、公式チュートリアル(英語)にあるTodoアプリを作り、デプロイするまでを日本語にておこなっている。また、チュートリアル後には、Meteorが現状で製品レベルで果たして使えそうかについて考察している。

こちらもどうぞ

(広告)

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

新品価格
¥3,456から
(2017/8/20 01:52時点)

Article Tags
mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。

Related article

Redux(react-redux)における適切な配列要素の更新

2021年8月23日…

CloudFlareの『SSL/TLS 暗号化モード(HTTPS通信設定)』を使用したとき、『ERR SSL VERSION OR CIPHER MISMATCH』のエラーでChromeで発生し、接続できない場合の対処

英語の記事は見当たっ…

Dart(Flutter)についての所見

Dart(Flutter)についての所見

第一印象では、クロス…

Discussion about this post

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Type your search keyword, and press enter to search