QOXホームへ

METEOR入門

QOX

QOX

Tags:

meteor-logo

(画像元:meteor

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

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

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

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

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


 

環境構築から実行

では環境構築から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」のボタンをいざ押してみましょう。

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

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

meteor_click

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

環境構築からプロジェクト作成し実行まで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に対して0をセットしています。

  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のコードのサイクルをまとめると

  1. Session.setDefaultでセッションをセット
  2. Template.hello.helpers内でHTMLの{{counter}}にSession変数’counter’の値を表示
  3. Template.hello.events内でボタンにイベントを登録
  4. “hello”テンプレートのボタンがクリック => Session.setでcounterの値にプラス1
  5. “hello”テンプレートのhelpersのメソッドが再実行 => HTMLの{{counter}}の値がリアクティブに値が変わる

という感じです。

どうでしょうか?? 楽しいですね!

僕はMeteor大好きです。

これからMeteorの記事もどんどん投稿していこうと思うのでよろしくお願いします。


 

参考URL

METEOR

本家のサイトです。

QiitaのMETEORに関する投稿の一覧です

キータにも続々投稿が上がってます。

JS初心者がMeteor.jsで超シンプルなチャットを作りました

弊社のデザイナーの記事です。デザイナー目線のMETEORです。

「Discover Meteor」の日本語版です

日本語版ありがたいです。※バージョン等あるのでご注意してください。

 

Go up