そんな今日この頃でして、、、

コード書いたり映画みたり。努力は苦手だから「楽しいこと」を探していきたい。

今一番(?)おいしいJavascriptフレームワーク「Meteor」触ってみた

Heroku Javascript コーディング

ちょっと前こんな記事がブクマを集めていた。

JavaScript プログラマの職種は4種類くらいに分けるべき

プログラムを生業としている者としては、確かに自分の領分が拡大解釈されて仕事を押し付けられることのしんどさは凄くよく分かる。

Node.jsの登場によりサーバサイドまでもJavascriptで記述できるようになったとはいえ、実際的には考慮しなければいけない要素も記述の仕方もサーバとクライアントで全然異なるわけで、「一つの言語で全てを記述できる」とは言ってもなかなか簡単ではなかったりする。

(特にクライアントサイドはフレームワークの概念が何だか混沌としてるし)


とは言え、「単一の言語でサーバからクライアントまで弄れる」ということが大きな魅力であるのも確かなわけで、機会があれば勉強してみたいなーと思ってはいた。


そこに面白い設計思想のJavascriptフレームワークMeteorが登場！

Meteor

このフレームワークでは、サーバ側とクライアント側の処理を同じコードに記述できる!!

しかもNode.js/NoSQL(MongoDB)/データバインディング/WebSocketといったナウい要素を一気に味わえるのがおいしい。


バージョンが1に満たないとかMongoが必須とか、まだちょっと実戦で導入は厳しいかなという気はするけど、プライベートで使ってみる分には面白そうなんで触ってみた。

Meteorをインストール

CentOSに以下のコマンドで一発簡単インストール。

$ curl install.meteor.com|/bin/sh

以下のコマンドでバーション確認ができればインストール成功。

$ meteor --version
Release 0.7.2

meteoriteを導入

ついでにMeteorのバージョンとパッケージ管理を行えるmeteoriteを導入しておく。

$ sudo -H npm install -g meteorite

アプリケーションを作成してみる

meteorite経由でアプリを作成。

$ mtr create hello

アプリ名のディレクトリ以下に下記のファイルが生成される。

$ tree hello/
hello
├── hello.css
├── hello.html
├── hello.js
└── smart.json

0 directories, 4 files

実際にファイルを覗いてみる

hello.css

これはまあ普通のCSSファイル

hello.html

AngularJSみたいに{{}}で要素の挿入。

{{> [テンプレート名]}}でテンプレートタグ内を入れ込む。

<head>
  <title>hello</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>はろーわーるど</h1>
  {{greeting}}
  <input type="button" value="Click" />
</template>

hello.js

if (Meteor.isClient) {...}内でクライアント側で実行する処理、if (Meteor.isServer) {...}でサーバ側処理を記述する。

Meteor.startup(function () {...});は開始時の処理。

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "こんにちは、世界!";
  };

  Template.hello.events({
    'click input': function () {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

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

他にもクライアントからサーバ側のメソッドを呼び出すとかクライアントからのDBの値の操作とか色々面白そうな要素はあるっぽいけど、とりあえず今回はこれだけ。

起動してみる

作成されたディレクトリに移動して起動。

$ cd hello
$ meteor --port [ポート番号]

ローカルの該当ポートにブラウザでアクセスできればOK。

Herokuにデプロイしてみる

herokuで動かしてみる。

ひとまずgitに登録。

$ git init
$ git add .
$ git commit -m 'meteor hello'

ビルドパック付きでHerokuに作成。

ここで表示されるURLをメモっておく。

$ heroku create --stack cedar --buildpack https://github.com/oortcloud/heroku-buildpack-meteorite.git

さっきのURLを環境変数に入れておく。

$ heroku config:add ROOT_URL=http://[...].herokuapp.com/

MongoDBのアドオンやらWebSocketの有効化やらをしておく。

$ heroku addons:add mongohq
$ heroku labs:enable websockets

最後にプッシュして完了。

$ git push heroku master

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

僕はJavascript界隈には疎いのでまだ全然使いこなしたイメージは持ててないけれど、とりあえず「クライアントとサーバの垣根を取り払う」という発想は非常に面白いなと思った。

(職業柄あまり「全部カバーしました」なプロダクトに良いイメージはないし、正直Meteorみたいなのが主流になっていくという風には思えないけれどね)

余談

Herokuでも話題の新言語Hack使えるようになったらしい。

CentOSなんでローカルへのHHVM導入が面倒らしいのでちょっと手を出すの躊躇ってるんだけど、使ってみたい気もする・・・