MeteorをMacにインストールしTodo管理のWebサービスを作る方法

公式サイト

Meteor公式サイトのチュートリアルはこちら。

環境

MeteorをMacにインストールする

Meteorをインストールするコマンド
curl https://install.meteor.com/ | sh
Meteorをダウンロード中
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  6121    0  6121    0     0   2683      0 --:--:--  0:00:02 --:--:--  3075
Downloading Meteor distribution
######################################################################## 100.0%
 
Meteor 1.0.3.2 has been installed in your home directory (~/.meteor).
Writing a launcher script to /usr/local/bin/meteor for your convenience.
 
To get started fast:
 
  $ meteor create ~/my_cool_app
  $ cd ~/my_cool_app
  $ meteor
 
Or see the docs at:
 
  docs.meteor.com

新しいプロジェクトを作ってみる

新規プロジェクトの作成

新規プロジェクトの作成コマンド
meteor create simple-todos
実行結果
% meteor create simple-todos
 
simple-todos: created.
 
To run your new app:
  cd simple-todos
  meteor

プロジェクトの中に入っているもの

プロジェクトの中身を確認してみる
% cd simple-todos
% ls -al
 
total 24
drwxr-xr-x   6 zero  staff  204  3  4 04:40 .
drwxr-xr-x   7 zero  staff  238  3  4 04:40 ..
drwxr-xr-x  10 zero  staff  340  3  4 04:40 .meteor
-rw-r--r--   1 zero  staff   31  3  4 04:40 simple-todos.css
-rw-r--r--   1 zero  staff  225  3  4 04:40 simple-todos.html
-rw-r--r--   1 zero  staff  478  3  4 04:40 simple-todos.js

ブラウザで確認する

サーバを立ち上げブラウザで確認する
simple-todos% meteor
[[[[[ ~/projects/materializer/simple-todos ]]]]]
 
=> Started proxy.
=> Started MongoDB.
=> Started your app.
 
=> App running at: http://localhost:3000/

プロジェクトの中に入っているもの

simple-todos.html

simple-todos.html
  1 <head>
  2   <title>simple-todos</title>
  3 </head>
  4
  5 <body>
  6   <h1>Welcome to Meteor!</h1>
  7
  8   {{> hello}}
  9 </body>
 10
 11 <template name="hello">
 12   <button>Click Me</button>
 13   <p>You've pressed the button {{counter}} times.</p>
 14 </template>

simple-todos.css

simple-todos.css
 1 /* CSS declarations go here */

simple-todos.js

simple-todos.js
  1 if (Meteor.isClient) {
  2   // counter starts at 0
  3   Session.setDefault('counter', 0);
  4
  5   Template.hello.helpers({
  6     counter: function () {
  7       return Session.get('counter');
  8     }
  9   });
 10
 11   Template.hello.events({
 12     'click button': function () {
 13       // increment the counter when button is clicked
 14       Session.set('counter', Session.get('counter') + 1);
 15     }
 16   });
 17 }
 18
 19 if (Meteor.isServer) {
 20   Meteor.startup(function () {
 21     // code to run on server at startup
 22   });
 23 }

"hot code push"の体験

上記のhtmlファイル内のボタンテキストなどをエディタで変更すると、変更内容がリアルタイムにブラウザに反映されます。 これがリアクティブプログラミングを体現するMeteorの大きな特徴です。“hot code push“と呼ばれています。

関連

Plugin Backlinks: 該当文書はありませんでした。
, , , ,