タグ別アーカイブ: JavaScript

昨今のWebフロントエンド開発環境を調べてみた(2014年ごろ)


メモっていたのを、、忘れてしまうので公開します。

参考

資料

Javascript周り

Grunt

タスクランナー(Rakeのようなもの)
JavaScriptの連結や圧縮、SCSSなどのコンパイルをするときに使う。それだけじゃなくファイル更新をトリガに一連のタスクを自動実行するなどにも使える.

glup.jsというのもある

gulp.js チートシート – Qiita
【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 | Developers.IO

bower + require.js

bower.jsonに利用するライブラリを書いてbower installすると.bowerrcに書かれたライブラリを一括ダウンロードできる。
インストールしたライブラリを<script src=“”>で読み込むものを一個ずつ指定するのは面倒なときにrequire.jsを利用する

mocha + expect.js

BDDスタイルテストフレームワークであるmocha、マッチャーを提供するアサーションライブラリのexpect.js

sinon.js

mockやstubなどテストダブル(ダミーオブジェクト)を利用するときに使用する。
「Spy」「Stub」「Mock」「Fake Timer」「Fake XHR」

karma

testの自動実行(遠隔実行)ライブラリ。テストの更新を検知して複数のブラウザでテストを自動実行してくれたりする。
Karma(元Testacular)を使って簡単にテストを実行しよう

testemというのもある

phantom.js

WebブラウザなしでJavascriptの実行などが行える。コマンドラインから扱えることが便利。ただwebkitエンジンのみ
JavaScriptの自動テスト <=だけどphantom.jsのことが書かれている

backbone.js + underscore.js

backbone.jsとその依存ライブラリのunderscore.js。
使ったこと無いから以下を参考にしよう。

jquery

いつものですね。

jquery-template or ejs

テンプレートエンジン

foreman

プロセスを管理。Gruntとアプリサーバなどを同時に管理したいときなど


CSS周り

sass + compass

sassですね。sassの拡張compassですね

twitter bootstrapなどのCSSフレームワークはいろいろある。

http://liginc.co.jp/web/html-css/html/21108

Font Awesome

http://fortawesome.github.io/Font-Awesome/examples/
フォントのアイコンライブラリ


特記

Middleman

上に書いたようなGruntとかを使った環境のオールインワンパッケージ
http://hokaccha.github.io/slides/middleman_frontend_dev/

pub / sub のメッセージングモデルの考え方について


関連記事

実装編

require.jsを利用した場合のディレクトリ構成

/
├── sources/
│     ├── css/
│     │   ├── lib/
│     │   └── sass/
│     ├── js/
│     │   ├── lib/
│     │   ├── src/
│     │   │    └── require.config.js
│     │   └── test/
│     │        └── require.config.js
│     ├── node_modules/
│     ├── Gruntfile.coffee
│     ├── config.rb
│     ├── karma.conf.js
│     └── package.json
│     
└── public/
      ├── api_stub/
      │   └── recent_sites.json
      ├── css/
      │   ├── common/
      │   ├── lib/
      │   └── 各種CSSファイルやディレクトリ
      ├── js/
      │   ├── common/
      │   ├── lib/
      │   ├── 各種JSファイルやディレクトリ
      │   └── require.config.js
      └──img/
          ├── common/
          └── 各種画像ファイルやディレクトリ

require.jsの実践編

以下の通りhtmlでrequire.js関連ファイルを読込む

<script src="/js/require.config.js"></script>
<script src="/js/lib/require.js" data-main="/js/users/index.js"></script>

上記のタグで読み込んでいる箇所は require.js を読み込んだあとに data-main のjsファイルを読み込むことができる。

ここでは /js/require.config.js では実際に require メソッドを使ってconfigを実行していなくて、設定のハッシュだけを作成している状態。

data-mainで指定している各ディレクトリのjsの中で require メソッドで実行して、require.config.js 内のハッシュ設定部分を実行させている。

npm Tips

以下のコマンドにてnpmインストールしすつつpackage.jsonを更新できる。

# package.jsonのdevDependenciesに追加される
npm install hogehoge --save-dev
# package.jsonのdependenciesに追加される
npm install hogehoge --save

gulpとかnpmのこととか by A Memorandum <=ここにもnpmの使い方。 –save-devの説明が簡単に載っている

gulp

# globalに入れる
npm install -g gulp

# 各プロジェクト配下に入れる
npm install --save-dev gulp
npm install --save-dev gulp-concat

Browserify

Browserify: それはrequire()を使うための魔法の杖 – Qiita
JavaScript – BrowserifyでBackbone.jsを使うときのjQueryの解決 – Qiita

かなり便利!! 正規表現を視覚化する「REGEXPER」


JavaScriptスタイルの正規表現を入力してエンターキーを押下すると、正規表現でどういう文字列が表現されているかが視覚的に表示されるというとても便利なツールです。

REGEXPER

自分で書いてない正規表現って結構わかりづらかったりしますよねー!!
その際にこのサイトに表示させてみると分かりやすく表示されると思います。PerlやJavaなどのプログラムの正規表現もUnixの正規表現もほぼJavaScriptタイプと同じなんでとても使えると思います。こういうツールを作りたいっすねー!!!!


参考までに画像をのっけておきます

この正規表現が視覚的に表示されると画像のようになります。
^http(s)?://(blog)\.takapra\.com/\2$

REGEXPERサンプル

大阪Node学園 四時限目に参加した-


またまた、参加してから数週間たってしまいましたが、参加した記録を残しておきます!
前回の三時限目からちょうど1年ぶりぐらいの開催でした。
ただ、感想としては、、、とてもおもしろかった!!!

大阪Node学園 四時限目
開催日:2012/11/24(土)

内容としては、以下の様な流れでした!

・テストについて
・実務での実例(Slidrsについて)
・yeomanについて
・東京Node学園祭参加レポート


テストについて

@craftgearさん
サーバサイドのテストはフレームワークの紹介程度であとはクライアントサイドのブラウザテストの紹介でした。個人的にもブラウザのテストって、難しいなーと思っていたのでフレームワークの使い方などとてもわかり易かった。testacularがよさそうなのと、MVCフレームワークも色々出ているけどangular.js がよさそうだなと思った。

【サーバサイド】
テストフレームワーク:mocha, expect.js(chai.js)

【ブラウザテスト】
testacular (node 0.8 over)
Angular.jsを採用している

Testem (node 0.6 over)
実行結果をブラウザで表示できる

Angular.jsの機能テスト(e2eテスト (End to End)のテスト)が使いやすい
Angular_scenario.js(Angular.jsに同梱されている)

angular.js の実装例で用意されてる機能テスト(e2e)参考
https://github.com/angular/angular-phonecat
https://github.com/angular/angular-seed


実務での実例(Slidrsについて)

@kumatchさん スライド資料

Nodeの利用したサービス(スライド共有サーービス)での環境構築から実際の中身の実装までの結構細かい内容を説明してくれた。実際のサービスで使用している例だったので、Nodeを使う上でのnginxの設定方法やNodeのデーモン化など、本番運用でのキーポイントをいくつも挙げていただき、がとても参考になった。

【nginxの設定】

  • try_files
    (メンテナンスページなどへの切り替え)
  • X-Accel-Redirect
    (大きなファイルをユーザへダウンロードさせる時などはnodeがシングルスレッドなのでnode自身がファイル転送でロックされるのを防ぐため、ファイルを生成したあとはnginxへレスポンスを返させる)

【node.jsのプロセスの管理】
・supervisord
pythonで作られたもの。簡単に利用できる!!
※自分はPerlで利用するときは「daemontools」を使ってるなー

【アプリケーションはexpress3 で開発】
2.x -> 3.x マイグレーション情報

【Redisを利用】
キャッシュなどの保持に使っている

【MongoDBを利用】
データストレージとして使用している。
monkを使っている(MongDBを簡単に叩く時に便利な簡易的なツール)
mongooseではない

【クライアントサイド】
テンプレートエンジン:jade
クライアントJSライブラリ:knockout.js

依存するモジュールも解決できる
Node/AMD (サーバ/クライアント) 共通化モジュールを書く
AMD (Asynchronous Module Definition) は、Javascript のコードをモジュールとして定義して、非同期ないし遅延ロードするための仕組みです。

【Node,ExpressのTips】
●expressのresponseオブジェクトを拡張できる

    app.response.send401 = function (realm) {...};

●initialize function

【route.js】
module.exports = function(myapp) {
    var routes = {
        index: function(req, res, next) {...}
    };
    return routes;
}
【app.js】
var routes = require('./routes')(myapp);
app.get('/', routes.index);

●ガーベジコレクション
node.jsのガーベジコレクション 処理が落ち着いた段階でGCが走る。(アクセスが終わって数秒後に)

●nodeの起動オプションで、任意のタイミングでガーベジコレクションを発生させることが出来る

起動する時に以下のオプションをつける
% node --nouse_idle_notificatio --expose_gc app.jp
実際にGCをかけるときはプログラム上で以下のようにする.
global.gc();

http://devjar.me/post/22886448979/manually-run-gc-in-node-js

【node.jsのメモリ調査ツール】
node-memwatch

【おすすめ本】
「RESTful Webサービス」 オライリーの本
「Node.js入門」


YEOMANの紹介

yeoman公式
yeomanのソース

クライアントサイドのテスト/ビルドツール
railsのような機能がある.

強力なscaffolding
cofeescript sass compass を自動でコンパイルする
構文チェック(jshintを使った構文チェック)
画像最適化
自由なテンプレート
自動リロード(ファイルの変更を監視HTTPサーバの自動うでリロード)grunt.js
パッケージ管理(Twitter Bower)


東京Node学園祭参加レポート

この報告会の内容がいつも大阪Node学園で楽しみ。。
今回の東京Node学園祭は特にホームページを見てもわかるようにすごい豪華なメンツ。
Ustreamのビデオとスライドの資料もあるので、今後見てみようと思う!

話題のMeteorを試してみた[javascript]


以下の様な特集があったので、これを機会に試してみようとおもいます。

体感!JavaScriptで超速アプリケーション開発 -Meteor完全解説

meteorについてはgithubで公開されています。

https://github.com/meteor/meteor

インストールした時のファイルは

以下にインストールされます。Homebrewと同じ/usr/localに入るのでどうかとおもいましたが、

取り敢えず入れてみました。

/usr/local/meteor

/usr/local/bin/

大阪Node学園2時限目に参加


大阪Node学園2時限目に参加してきました!

今回はnode.js のステッカーやらriakというキーバリューストアのステッカーなどたくさんのステッカーをもらいました。笑

全部貼ったらMacがすごいことになってます。

 

2012/03/24(土)http://atnd.org/events/25989

ここからはメモったことを以下に書きます!

Expressのハンズオンでした!

nodeのバージョン管理nvm は色々と問題がある。が、nvmで入れている人がほとんどだった・・・新しいnodebrewというものがある!PerlとCurlがあれば動作するので使い勝手が良さそう!

Expressは現在バージョン2系がStableのリリースバージョンだが、開発中のバージョン3もgithubから手に入れることができる。

Express 3  のインストール
% git clone https://github.com/visionmedia/express.git
% cd express; npm install
% express/bin/express ong2
% cd ong2
% npm ln ../express

Urlの定義の仕方などはちょっと疑問に思っていたのでハンズオン形式てとても参考になった!

ミドルウェアについて

同じようなURLによるルーティングの場合
next()の使い方

sendやrender()せずにnext()を呼ぶと404エラーとなる。
next()に引数を与えると500エラーをかえす。引数は何でもよい!
next(new Error(‘error message’); OR  next(‘error message’)  OR next(”aa’)   など

上記のようにエラーとなるのは
next()した場合、最後までマッチしなければ、以下のように定義されているdevelopmentではexpress.errorHandler() に要求が投げられるため。next()の最後はエラーハンドラーにマッピングされる
app.configure(‘development’, function(){
app.use(express.errorHandler());
});

バリデータのライブラリ

revalidator
Amanda   結構使っている

Testフレームワーク

mocha

chai

コールバックのネストをなくすフレームワーク

async.js

node.jsのセッション管理

redis