JavaScript超初心者向け Meteor メモ (1)

  • 184
    いいね
  • 7
    コメント
この記事は最終更新日から1年以上が経過しています。

Meteorとは?

Meteor.jsは、 Webアプリづくりを楽しくする フレームワークです。

node.jsをベースとしたフルスタックフレームワークで、サーバサイドの処理も、データベース処理も、クライアントと同様に全てjavascriptで書くことができます。
大体、こうしたものは、お作法覚えるまでが大変で初心者泣かせだったりするのですが、Meteorは 初心者に鬼フォーカスしてる 点が特徴だと思っています。

はじめるには?

2014.12.19更新

本家Tutorial

Meteor 1.0のリリースに伴いチュートリアルサイトもできました!
英語ですが、こちらを進めるのが良いと思います。

リアルタイムWebアプリケーションフレームワークMeteorについて

良記事です!
Meteorを勉強するモチベーションが高まるとおもいます。

フルスタックJSフレームワークMeteorのメリット&デメリット

こちらも良いまとめです!

体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説

白石俊平さんが書かれたMeteorの解説記事です。素晴らしいです。
ただ、結構前の記事なのでMeteorはバージョンアップを続けて細かい部分の仕様が変わっています。
記事で紹介されているサンプルの中には、うまく動かないものも出て来ていますので、ご注意ください。

あとで一部修正方法などを書いてみます。

Meteor Kaiso

Meteorの情報への日本語でのポータルサイトです。リファレンスの和訳などもあります。

meteor本家サイト

本家サイト(英語)です。ドキュメントがかなり充実しています。
常に最新バージョンにドキュメントが対応しているのは素晴らしいです。
また、バージョンアップの要点などは、meteor blogの方で紹介されますので、こちらも要チェックです。

はまらないとは限らないモロモロ

初心者にこそおススメしたいはずのMeteorですが、最近の日本語の情報が少ないのと、バージョンアップで変わってしまったところなど、けっこうハマリポイントかな?という部分があると感じています。

そこで、気になった点をいくつか書いていこうと思います。

インストールできない!? (たぶんMacだけ)

コマンド1発でインストールが終わるMeteorですが、なぜか失敗して悩む場合があります。

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

これで普通はインストール終わりです。

しかし、 買ったばかりのMacとか だと、失敗することがあります。
Meteorのインストール先である /usr/local/bin が無いためです。

ターミナルから、

> ls /usr

と入力して、 localがあるか、確認しましょう。
localがなければ、

> cd /usr
> mkdir local

localを作ります。
localの次はlocalの下のbinがあるか確認しましょう。

> cd local

のあと、

> ls

で、bin があるか確認します。
無ければ、

> mkdir bin

binも作ります。

その後、

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

で、再度インストールしてみましょう。

これで成功しなければ、インターネットに接続されていないかもしれません。
ネットに接続されているか、確認してください。

また、念のために書いておきますが、 ここに書いてある方法はWindowsは対応していません。
Meteorを、どうしてもWindowsで使いたい、という方は、

Meteor on Windows!

を試してみてもいいかもしれません。(正式サポートではないので、現時点ではあまりお勧めできません)

ファイル見えないと辛い(これもMacだけ)

Macでは /usr などのフォルダはFinderから見えません。

コマンドラインからls -aなどで見ることは出来るのですが、Meteorでは. (ドット)で始まるファイルやフォルダなどの不過視フォルダを結構使います。
Finderから不過視ファイルも見れるように設定しておいた方が何かと便利です。

やり方は、ターミナルから

> defaults write com.apple.finder AppleShowAllFiles true
> killall Finder

と入力すれば良いです。(Finderが再起動されます)

参考:Macで不可視ファイルと不可視フォルダを表示、非表示する方法

サンプル動かす前にupdate

Meteorは日々バージョンアップしています。
古いサンプルはそのままでは動かないことが多いと思います。

なんかエラーでる!という時は、最初にMeteorプロジェクトのUpdateを試してみましょう。

体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説 第2回のサンプル1-1 を例に、Updateしてみます。

このサンプルを実行すると、

> meteor

[[[[[ ~/sample1-1 ]]]]]

=> Started proxy.
=> Started MongoDB.     
W20140401-09:11:34.442(9)? (STDERR) Program has no main() function.
=> Exited with code: 1
W20140401-09:11:34.702(9)? (STDERR) Program has no main() function.
=> Exited with code: 1
W20140401-09:11:34.932(9)? (STDERR) Program has no main() function.
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.

こんな感じでエラーになってしまいます。

これは、Updateで直すことができます。
meteorプロジェクト直下で、

> meteor update

と入力するだけです。

その後、

> meteor 

とすると、今度はうまく動くはずです。(Ver.0.8.0で確認)

オブジェクトのスコープに注意

例えば体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説 第2回のサンプル1-2 でもVer.0.8.0のMeteorで実行すると

  ReferenceError: hello is not defined

というエラーが出ます。

このエラーはサンプルに含まれるcommon.jsを下記のように修正することで回避できます。

変更前

common.js
function hello() {
    console.log("Hello");
}

変更後

common.js
hello = function() {
    console.log("Hello");
}

なんで?

Meteorでは、変数が下記のように扱われます。

abc.js
var scope1 = "abcde";   // abc.jsでのみ参照可能
scope2 = "abcde";       // abc.jsの外からも参照可能
function abc(){         // abc.jsの中からのみ呼び出し可能な関数
    console.log("abc()");
}
efg = function(){       // abc.jsの外からも呼び出し可能な関数
    console.log("efg()");
}

どうして上記のようになるか、というと、abc.jsはMeteorが実行する時に、下記のように 関数の中に押し込められる からです。

実行時

abc.js
(function(){
  var scope1 = "abcde"; // abc.jsでのみ参照可能
  scope2 = "abcde";     // abc.jsの外からも参照可能
  function abc(){           // abc.jsの中からのみ呼び出し可能な関数
    console.log("abc()");
  }
  efg = function(){     // abc.jsの外からも呼び出し可能な関数
    console.log("efg()");
  }
})();

実は結構ハマりやすい部分なので、ご注意ください。

つづきもどうぞ!

JavaScript超初心者向け Meteor メモ (2) v0.8.0でのテンプレートエンジンの変更について
JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる
JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る (基本編)
JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る (Google/Twitterアカウント編)
JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる
JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる