Create a gist now

Instantly share code, notes, and snippets.

@tily /list.md
Last active Dec 16, 2015

What would you like to do?
モダンなクライアントサイド JavaScript について少しずつ勉強するゴミメモ

ゴミメモ

coffeescript 周辺のいろいろ

基本的な使い方 (単一ファイルの変換)

$ vi test.coffee

class Test

-c (--compile) で JavaScript にコンパイルする。

$ coffee -c test.coffee
$ cat test.js
// Generated by CoffeeScript 1.6.2
(function() {
  var Hoge;

  Hoge = (function() {
    function Hoge() {}

    return Hoge;

  })();

}).call(this);

-b (--bare) をつければ即時実行関数みたいなやつをつけなくなる。

$ coffee -bc test.coffee
$ cat test.js
// Generated by CoffeeScript 1.6.2
var Hoge;

Hoge = (function() {
  function Hoge() {}

  return Hoge;

})();

ディレクトリ毎コンパイルすることも可能。

$ ls coffee/
one.coffee      two.coffee
$ coffee -c coffee/
$ ls coffee/
one.coffee      one.js          two.coffee      two.js

別ディレクトリに吐き出すには -o(--output) でディレクトリを指定する。

$ ls coffee/
one.coffee      two.coffee
$ ls js/
$ coffee -c -o js/ coffee/
$ ls js/
one.js  two.js

-w で inotify で監視して自動コンパイル。

$ ls coffee/
one.coffee      two.coffee
$ ls js/
$ coffee -cw -o js/ coffee/
17:31:56 - compiled coffee/one.coffee
17:31:56 - compiled coffee/two.coffee
# 別ターミナル
$ ls js/
one.js  two.js # ファイルできてる
$ vi coffee/three.js
$ ls js/
one.js          three.js        two.js # three.coffee もコンパイルされた

grunt と組み合わせて使ってみる

http://qiita.com/items/1d10874dc0956d30fd92

準備

package.json でインストールしてもいいかも。というかそのほうがメジャーなのか?

npm install grunt
npm install grunt-contrib-coffee # grunt coffee 使ったり Gruntfile.coffee を読めるようにしたりするやつ (?)
npm install grunt-contrib-watch  # grunt watch できるようにするやつ

設定

coffee ディレクトリの中にある *.coffee を階層まるごと js ディレクトリへコンパイルするには下記のような感じで行った。

Gruntfile.coffee:

module.exports = (grunt) ->
  'use strict'
  grunt.loadNpmTasks 'grunt-contrib-coffee'
  grunt.loadNpmTasks 'grunt-contrib-watch'
  grunt.initConfig
    watch:
      coffee:
        files: 'coffee/**/*.coffee'
        tasks: 'coffee'
        options:
          interrupt: true
    coffee:
      compile:
        expand: true
        #flatten: true
        cwd: 'coffee'
        src: '**/*.coffee'
        dest: 'js'
        ext: '.js'


grunt watch

amd/require.js 周辺のいろいろ

基本を理解する

r.js を使ってみる

r.js は require.js 互換のモジュール群を 1 つのファイルに連結できるやつ。 build.js という設定ファイルかコマンドラインで連携の操作を実行できる。 backbone tutorial でも r.js と cloudfront を組み合わせて使うことを勧めている。 http://backbonetutorials.com/organizing-backbone-using-modules/

grunt 周辺のいろいろ

  • タスク一覧は grunt --help
  • プロジェクト毎に grunt-contrib を入れたりしなければならないのは仕方ないっぽい?

その他課題

  • いちいち node_moudules ができるのうざい
  • HTTP サーバーを立てたい (grunt connect?)

twitter

  • Backbone.sync で backbone.js デフォルトの REST っぽいモデルの挙動を上書きすることができる
  • $.support.cors
  • OpsWorks の UI では chaplin.js で model/base/collection.js の defaults というプロパティにさまざまなデフォルト値を列挙して、全てのコレクションから見えるようにしている
  • chaplin.js には View にも CollectionView と View の 2 つがあって、backbone.js をより統一的に使えるようになっている
  • coffeescript、new Something{@options} ってやると new Something({options: this.options}) に変換してくれるの便利
  • ルーティングは便利だけど、共通パーツ (ナビゲーションバーとか) の View/Model 管理はどうやればいいのかな?
  • common.js 方式を AMD に変換するやつがあるのかな?
  • chaplin-boilerplate と grunt-init-chaplin でスケルトン構造が結構違うし、前者は AMD で coffeescript を書いているのに後者は common.js 方式で書いている
  • モデルに変更があった場合に発生し、それをビューが監視する -> モデルに変化があった場合に対応するビューにも変更を加えたいから
  • View クラスの定義時に Model クラスを定義するのか、それとも View クラスのインスタンス生成時に Model クラスのオブジェクトを渡してやるのか? どっちがよくやるのか?
  • @model = new Model(); @view = new View(model: @model);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment