LoginSignup
15
17

More than 5 years have passed since last update.

JavaScriptのフレームワーク、 Meteor を試してみる

Last updated at Posted at 2016-08-02

Node.jsで動くフレームワーク、Meteor :stars: のチュートリアルにチャレンジしてみた。

  • Ubuntu 16.04 でチャレンジ。
  • コードサンプルはファイル名をクリックして、diffを見ながらやったほうがよさげ。コードの削除がdiffのほうでしか見られません。

Meteor の特徴

  • サーバサイド・クライアントサイド両方込みのNode.jsなフレームワーク。
    • サーバ・クライアント両サイドでのコード共有が簡単。互いの {server,client}/main.js からimportするだけ。
  • meteor コマンドで依存性追加とか起動とかデプロイとか全部賄う系。
  • Hot code push
    • ようするにライブリロード+ホットコードデプロイ。
    • エディタで更新したら、即画面に反映。(WebSocketで更新もらってるっぽい。)
    • 特に自分でブラウザをリロードしたり、サーバを再起動させたりするほとんど必要なさそう。
  • データストアはMongoDB。

エディタ開きながら画面見つつ、テキトーにプロトタイピングしつつプログレッシブに開発できそうです。

Meteorで作られたものといえば、代表的なものに RocketChat があります。個人的にも使ってますが、なかなか出来がよく、アプリの設定を変えると即画面に反映されたり、アプリをアップデートしてもクライアントの画面を明示的にリフレッシュしないままクライアント側のアップデートが完了するのが驚きですね。

meteor立ち上げてるのに、別ターミナルでMongoDBにつながらねえ。

  • meteorは起動時にローカルでMongoDBを立ち上げますが、meteor mongoで繋がらん。
  • たぶんmeteorのバグ。 ps ax | grep -P '^\s*(\d+).+mongod .+--port (\d+) --dbpath (.+(?:\/|\\)db)' 相当の検索をして、そこで取れたポートやDBパスをプロジェクトのものと比較するようだが、それの比較に失敗していると思う。
  • 自前でMongoDBクライアントインストールしてつなぎましょう。
    • sudo apt install -y mongodb-clients してから、 mongo localhost:$(cat .meteor/local/db/METEOR-PORT)/meteor
    • ポートは多くの場合、3001だと思います。 .meteor/local/db/METEOR-PORT に書いてあります。(普通にこっちに繋いでくれりゃいいのに…)

感想

  • Webアプリをプロトタイピングしながら高速に作りたい人向け。
    • ライブリローディング。
    • MongoDBがスキーマレス。
    • ログイン用のUIと仕組みとか最初から用意されてる。
    • おそらくミッションクリティカルなシステムには向いてないと思う。
    • Meteorから外れた使い方をしたい場合には向いてなさそう。
  • ↓いつ画面にリロードかかってもいいような書き方を強制されている気がする。
Template.task.events({
  'foo'() {
    //
  },
  'bar'() {
    //
  },
});
  • スタック、コードの置き方がまとめられていて応用しやすい。まさにフレームワーク!
  • MongoDBの高性能さをうまく利用したリアクティブな使い方をしている。(MongoDBの中の値を変更 → 画面に即反映とか。)
  • テンプレート用ミニ言語が嫌いなんですが、どうにかなりませんか?
テンプレートの例
  <ul>
    {{#each tasks}}
      {{> task}}
    {{/each}}
  </ul>

近々しょぼい社内システムを作るかもしれないので、Meteorでチャレンジしてみるかもしれません。

参考

15
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
17