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

# Meteorとは?

[Meteor.js](https://www.meteor.com/)は、 **Webアプリづくりを楽しくする** フレームワークです。

<a href="https://www.meteor.com/"><img src="http://img.dfm.lrv.jp/meteor7/meteorlogo.png"></a>

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

# はじめるには?

> 2014.12.19更新

### [本家Tutorial](https://www.meteor.com/install)

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

### [リアルタイムWebアプリケーションフレームワークMeteorについて](http://qiita.com/m0a/items/cf7a57face7a0e264881)

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

### [フルスタックJSフレームワークMeteorのメリット＆デメリット](http://qiita.com/ytakzk/items/f5417c1fe3cc9b5e80c8)

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

### [体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説](http://gihyo.jp/dev/serial/01/meteor)

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

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

### [Meteor Kaiso](http://arumtaunsaram.github.io/meteor_jp/)

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

### [meteor本家サイト](http://meteor.com/)

本家サイト（英語）です。ドキュメントがかなり充実しています。
常に最新バージョンにドキュメントが対応しているのは素晴らしいです。
また、バージョンアップの要点などは、[meteor blog](https://www.meteor.com/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!](http://win.meteor.com/)

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

## ファイル見えないと辛い（これもMacだけ）

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

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

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

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

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

参考：[Macで不可視ファイルと不可視フォルダを表示、非表示する方法](http://www.magical-remix.co.jp/magicalog/archives/2007)

## サンプル動かす前にupdate

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

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

[体感！JavaScriptで超速アプリケーション開発 －Meteor完全解説 第2回のサンプル1-1 ](http://image.gihyo.co.jp/assets/files/dev/serial/01/meteor/0002/sample1-1.zip)を例に、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 ](http://image.gihyo.co.jp/assets/files/dev/serial/01/meteor/0002/sample1-2.zip)でも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でのテンプレートエンジンの変更について](http://qiita.com/tadfmac/items/823fd909bf3af2f6c7b7)
[JavaScript超初心者向け Meteor メモ (3) シンプルなチャットを作ってみる](http://qiita.com/tadfmac/items/e7e0d95b2affcf2438a9)
[JavaScript超初心者向け Meteor メモ (4) ログイン画面を作る （基本編）](http://qiita.com/tadfmac/items/714654958c127c053d51)
[JavaScript超初心者向け Meteor メモ (5) ログイン画面を作る （Google/Twitterアカウント編）](http://qiita.com/tadfmac/items/5bfe73f181f9b45abe71)
[JavaScript超初心者向け Meteor メモ (6) 外部パッケージを使ってみる](http://qiita.com/tadfmac/items/48d160ecba779237c771)
[JavaScript超初心者向け Meteor メモ (7) テンプレートを使ってみる](http://qiita.com/tadfmac/items/2b5e111e8986fc98f6f8)