METEOR入門

（画像元：meteor）

先週うぇぶたま勉強会でMeteorについて登壇をしてきました。

初めての登壇だったのでものすごく緊張しました。緊張しすぎて口の中の水分が全てなくなりました。

あんなに口の中が乾いたのは生涯初めてでしたがとてもいい経験ができました。

これからもどんどん登壇していきます!

さて、登壇の内容がMeteorの紹介だけだったので当記事はMeteor入門の内容でいこうと思います。

1 環境構築から実行
- 1.1 Meteorインストール
- 1.2 プロジェクト作成
2 コード解説
3 参考URL

環境構築から実行

では環境構築からMeteorを実際に動かしていこうと思います。

Meteorインストール

mac / unix

ターミナルから以下のコマンドを実行します

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

windowsはこちらからインストーラーをダウンロードできます。

たったこれだけです。

プロジェクト作成

ターミナルから以下のコマンドを実行します

$ meteor create HelloWorld

HelloWorldというフォルダができその中に以下のファイルができます。

.meteor

HelloWorld.css

HelloWorld.html

HelloWorld.js

これでプロジェクトの作成は完了です。

たったこれだけです。

htmlファイルとjsファイルを見てみるとすでにコードの記述がされています。

この状態ですでにプロジェクトを動かす事ができます。

$ cd HelloWorld
＄meteor

ブラウザでhttp://localhost:3000/にアクセスします。

Welcome to Meteor!

Click Me

と表示されるので「Click Me」のボタンをいざ押してみましょう。

すると数字がどんどん加算されていくのがわかります。

初めて見た時「すげぇ！！」と思いました。

あとここまでくるのがすごい速いですよね。

環境構築からプロジェクト作成し実行まで10分もかかってないんじゃないですか？？

簡単でありがたいです!!

コード解説

コード内で実際にどういう記述がされているか見てみます。

<head>
  <title>HelloWorld</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

HTMLファイルです。

{{> hello}} という記述があるのですがこれは <template name=”hello”> のtemplateを呼び出しています。

このようにHTMLを<template></template>にてテンプレート化ができ再利用ができます。

さらにこの”hello”のテンプレート内に{{counter}}という記述があるのですがこの部分はJsの方でcounterに対して指定した値がHTMLとして表示されます。

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Jsファイルです。

Meteor.isClient

isClient内に記述したものに関してはクライアント側で動きます。

逆にisServerはサーバーサイドで動くコードです。

Session.setDefault('counter', 0);

セッションに対して ‘counter’というkeyに対して０をセットしています。

Template.hello.helpers({
  counter: function () {
    return Session.get('counter');
  }
});

テンプレートのhelpers関数です。

HTMLの{{counter}}部分にSession変数’counter’の値が表示されます。

そしてSession変数’counter’の値が変わった時にHTMLの{{counter}}の値がリアクティブに変更されます。

Template.hello.events({
  'click button': function () {
    // increment the counter when button is clicked
    Session.set('counter', Session.get('counter') + 1);
  }
});

テンプレートのイベント関数です。

イベントを登録していきます。ここでは”hello”テンプレートのボタンのクリックイベントを登録し取得しています。

‘click button’ イベント名セレクターの書式です。

ここまでのJsのコードのサイクルをまとめると