Category Archives: JS

requirejsをbowerでインストールしてgruntでビルドする

私はJSを書くときはAMD推奨派なので、比較的大きめのアプリを作るときはまずrequireJSなどを使用します。
requirejsを使ってモジュールを作成すると依存関係が明確になり、テンプレートなどもrequirejs-textなどを使用すれば再利用がとても容易な形で記述することができます。

ただし、AMD時の一つの懸念点としてビルドして依存モジュールをconcat&uglifyしなくてはパフォーマンスがでないという点が挙げられます。そこで探してみるとgruntのtaskモジュールで内部的にr.jsを使用してビルド(依存モジュールの連結+compress)を行ってくれる便利ツールを発見。これを使えばパフォーマンスに関する問題は大丈夫でしょう。
以下、少し長いですがセットアップ手順です。

Continue reading requirejsをbowerでインストールしてgruntでビルドする

node expressサーバーの起動をgruntから行う

node+express環境ではnode appでサーバー起動をする方法はdeprecatedで最近はnpm startコマンドが推奨されているみたいです。

npm startを発行するとpackage.jsonの中のscriptsに記載されたコマンドが発行され、通常express環境なら/bin/wwwというスクリプトが叩かれます。

package.json

  "scripts": {
    "start": "node ./bin/www"
  },

wwwもjavascriptファイルで、中ではapp.jsを特定のポートに対してlistenしているだけです。

ただ、もしサーバーの起動をgruntに任せたい場合はどうしましょう。

Continue reading node expressサーバーの起動をgruntから行う

node.js embedの簡易版DB NeDBを使ってみる

node+expressで簡単なアプリ開発をしていて、シンプルなデータベースを使えたらなぁと思い調べてみたらNeDBというプロジェクトをgithub上で発見しました。

やはりクイックに開発するためにMySQLやMongoDBのインストールから始めたくないですよね。。NeDBというのはまだ日本語のドキュメントも存在しなくあまり知られていないですが、そこそこ活発に開発されているようなのでどんなものかと使ってみました。

以下はnode+expressの初期セットアップ環境+underscore templatesを想定しています。詳しくは前回の記事を参照してください。

NeDBのAPIはMongoDBとそろえているみたいです。MongoDBでいうcollectionがNeDBでいうDataSourceにあたります。
dbのファイルをdata/groups.dbとし、メインのapp.jsで以下のような記述を冒頭に足します。注意点はapp.use(‘/’, routes);の行より上に記述することです。(そうしないとrouter内にreq.dbが渡らない)。例がgroupなのはgroupの登録を想定したアプリを作ろうとしているからです。

app.js

var Datastore = require('nedb');
// create data collection
var db = {};
db.groups = new Datastore({filename: 'data/groups.db', autoload: true});
// Make our db accessible to our router
app.use(function(req,res,next){
    req.db = db;
    next();
});

Continue reading node.js embedの簡易版DB NeDBを使ってみる

node.js+expressのtemplates engineにunderscore templatesを使用する

nodejsとexpressを使用した時にデフォルトでテンプレートエンジンがjadeやejsになっていると思いますが、jadeなどはhtmlとかけ離れた書き方であるため新しくtemplate engine自体の学習が必要になります。

そこで単純にresponseに.htmlを使用したいケースがあると思いますので、htmlとしてviewを書き出し、必要な変数をテンプレートに埋め込むhtmlベースの簡易テンプレートとしてunderscore templatesを使った方法を紹介します。

Continue reading node.js+expressのtemplates engineにunderscore templatesを使用する

npm linkの削除

一度npm linkを行ったモジュールを削除するためには以下のコマンドでlinkを削除できる。

1. 消す前にcheck (globalであれば-gオプションを追加)
npm ls <module_name>

2. Remove link (globalであれば-gオプションを追加)
sudo npm rm <module_name>

YeomanでBackbone + requireJS

前回の記事の続きで、AMDモジュールであるrequireJSに加えてMVCフレームワークのbackboneもYeomanで準備してもらいたいということで以下のgeneratorを使ってみました。

https://github.com/yeoman/generator-backbone

まず任意のディレクトリで

npm install -g generator-backbone

その後、以下を実行(requirejsの選択を忘れずに)

yo backbone

bower listを実行してみてdependencyモジュールがまだインストールされていないので、bower installを実行

その後gruntで問題なく動作することを確認。

試しに以下のコマンドでmodelのjsファイルを作成してみる。

yo backbone:model Test

すると、app/scripts/models/Test.jsにmodelの雛形ができあがる。

あとはviewなども同様に作成し、main.jsからAMDで書き始めればOKそう。

Yeomanを使ってWebアプリ開発の雛形を簡単作成

Yeoman

http://yeoman.io/

まず使うにはnode.jsがインストールされているのが前提。

Yeoman本体をインストール

npm install -g yo

一番標準のwebapp generatorをグローバルにインストール

npm install -g generator-webapp

任意のディレクトリ(例えば/Users/tejitak/workspace/Test)を作りその下で以下のコマンド

yo webapp

するとGruntのファイルや/appなどweb applicationの雛形ができあがる。

試しにサーバーを起動してみると既にlocalhost:9000にアクセスして正しくindex.htmlがデプロイされていることを確認できる。

スクリーンショット 2014-04-26 10.14.18

自分はrequiresなどを使ってAMDでアプリを構築する場合が多かったので、試しにAMD用のwebapp generatorを使ってみる。

Continue reading Yeomanを使ってWebアプリ開発の雛形を簡単作成