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で使いたい、という方は、
を試してみてもいいかもしれません。(正式サポートではないので、現時点ではあまりお勧めできません)
ファイル見えないと辛い(これも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
を下記のように修正することで回避できます。
変更前
function hello() {
console.log("Hello");
}
変更後
hello = function() {
console.log("Hello");
}
なんで?
Meteorでは、変数が下記のように扱われます。
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が実行する時に、下記のように 関数の中に押し込められる からです。
実行時
(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) テンプレートを使ってみる