CoffeeScript

アセットパイプラインについて

アセットパイプラインとは

JavaScriptやCSSを結合したり圧縮したりする。また、CoffeeScriptやSass、ERBの言語を使ってJavaScriptやCSSを書くこともできる。

特徴

  • JavaScriptやCSSを結合することによって、ブラウザでのリクエスト回数を削減
  • JavaScriptやCSSを圧縮
  • SassやCoffeeScript、もしくはERBを使って記述可能
  • 「/app/assets/」「/lib/assets/」「/vendor/assets/」のディレクトリ
  • 「/app/assets/YYY/XXX」に置いたファイルは、「http://localhost:3000/assets/XXX」でアクセスが可能
  • /app/assets/」以下のサブディレクトリは、アクセスする際には無視

URLとファイルパス

URLパス
/assets/application.js<ファイル名>app/assets/javascripts/application.js
/assets/models/test.js<ファイル名>app/assets/javascripts/models/test.js.coffee
/assets/style.js<ファイル名>app/assets/stylesheets/style.js
/assets/lib_test.js/lib/assets/lib.js
/assets/vendort.js/vendor/assets/vendort.js

アクセスの流れ

  • ブラウザから「/assets/application.js」にアクセス
    1. app/assets/javascripts/application.js
    2. app/assets/javascripts/application.js.coffeeなど
    3. app/assets/stylesheets/application.jsなど
    4. app/assets/stylesheets/application.js.sassなど
    5. ・・・
  • 対象ファイルが無ければ404

その他

Asset Pipelineのパスの確認法法
Rails.application.config.assets.paths

CoffeeScriptについて

CoffeeScriptとは

公式サイトによると、CoffeeScript is a little language that compiles into JavaScript.(JavaScriptにコンパイルするシンプルな言語です)
簡単に言うとJavaScriptをRubyライクに記述できる言語だと思います。

特徴

  • 文末のセミコロンは不要
  • ブロックはインデントで表す
  • 「->」はfunctionの略
  • varは不要
  • Rubyと同様でreturnは省略可能
  • コンパイルが必要
  • JavaScriptに潜む罠をいい感じに回避
  • 出力するJavaScriptが綺麗

railsにおいて

  • Railsでは、Asset Pipelineという仕組みを使って、CoffeeScriptを自動的にコンパイル
  • 拡張子は、「.js.coffee」
  • フォルダは、「/app/assets/javascripts/」

基礎

ブロック

ブロックはインデントを使う。

関数

関数は「->」を使う。

showMsg = ->
  alert 'rails'

実行するときは、関数名()

showMsg()

引数

引数は、関数の前に記述する。

showMsg =(msg)  ->
  alert(msg)

戻り値

Rubyと同様に、最後の値を戻り値とする。意図的に戻り値を指定したい場合は、returnを記述する。

showMsg =(msg)  ->
  msg1 = "rails"
  msg2 = "ruby"
  return(msg1)

文字列

文字列は、一重引用符や二重引用符で囲む
二重引用符内の、「#{}」は、式として評価された値が展開

CoffeeScript勉強法

概要理解

概要理解に関しては、「ドットインストールのCoffeeScriptの基礎」がおすすめです。CoffeeScriptについて、1時間ぐらいで学習できます。

ある程度概要を覚えたら、公式サイトでメソッドの確認や、プログラムの実行環境があるので、そこでテストをするとがいいですね。

ソースを読む

CoffeeScriptで書かれたコードは、githubにたくさんあるので、githubで探すのがおすすめ

また、MVCフレームワークがあるので、そのコードを読むのも参考になると思います。

数値と文字列

文字列

  • 「ダブルクォート(")」、または「シングルクォート(')」で囲む
  • 二重引用符内の、「#{}」は、式として評価された値が展開
  • ヒアドキュメントは、「"""文字列"""」、または「'''文字列'''」

コメント

特徴

コメントはシャープ(#)を利用
1行コメント(#)と複数行コメント(###)があり、1行コメントはコンパイル後に破棄されます。
残したいコメントは、「###」で書く

# 1行コメント
###
複数行コメント
###

配列

特徴

  • Rubyと同じく、[]を利用
  • 区切り文字は、カンマ(,)か改行
  • 連続した値は、範囲演算子も使用可能

#カンマで区切る
ary = [1, 2, 3]
# 改行で区切る
ary2 = [
  1
  2
  3
]
# 範囲演算子
ary3 = [1..10]

ハッシュ

特徴

  • Rubyと同じく、{}を利用
  • 区切り文字は、カンマ(,)か改行

#カンマで区切る
ary = {a:1, b:2, c:3}
# 改行で区切る
ary2 = {
a: 1
b: 2
c: 3
}

条件分岐(if/unless)

特徴

  • 「()」と「{}」は省略可能
  • 末尾に記述する後置形式も可能
  • 三項演算子はない

if

if 条件式1 (then)
  処理内容1
else
  処理内容2

unless

unless 条件式1 (then)
  処理内容1
else
  処理内容2

language = (x) ->
  alert "言語は。#{x}"
 
rails =
  name: "Rails"
  language: "Ruby"
 
if rails.language is "Ruby"
  alert "言語は、Ruby"
 
language(rails.language) if rails.language?

変数

特徴

  • JavaScriptと異なり、varは不要
  • セミコロン(;)も不要
  • 予約語は、自動的にダブルクォートで囲まれる

name = "Railsドキュメント"

ループ(while/for)

特徴

  • ループは、while と untilを使用
  • 配列とハッシュは、for文を使用

while

使い方
while 条件式
  処理内容
i = 1
 
while i <= 5
  alert i
  i++

until

使い方
until 条件式
  処理内容
i = 1
 
until i >= 5
  alert i
  i++

配列

配列の場合は、for inを使用する。

使い方
for i in 配列
  処理内容
frameworks = ["Ruby on Rails", "CakePHP", "symfony", "BootStrap", "Backbone.js"]

for i in frameworks
  alert i

ハッシュ

ハッシュの場合は、for ofを使用する。

使い方
for i of ハッシュ
  処理内容
frameworks = 
  rails: "Ruby on Rails"
  cakephp: "CakePHP"
  symfony: "symfony"
  bootstrap: "BootStrap"
  backbone: "Backbone.js"

for k, v of frameworks
  alert v

関数

特徴

  • 関数は、(引数) -> 式」
  • 戻り値は、最後の式の値
  • 引数は省略可能
  • 引数の末尾に、「...」で可変長引数

引数なし
A = -> 
  "引数なし"
引数あり
A = (x) -> 
  "引数は#{x}"
引数が複数
A = (x, y) -> 
  "引数は#{x}と#{y}"
引数に初期値
A = (x, y=1) -> 
  "引数は#{x}と#{y}"

CoffeeScript関連ツール

js2coffee

js2coffeeはJavaScriptからCoffeeScriptへ変換するツール

CoffeeScriptを使うための準備

インストール

Rails3.1以降で使う場合は、デフォルトでGemfileに記述されインストールされるので作業は不要です。

コンパイル

ほとんどのブラウザは、まだCoffeeScriptの記述には対応していないので、通常はJacaScriptへのコンパイルが必要なのですが、Rails3.1以降では、Asset Pipelineという仕組みで、自動的にコンパイルしてくれるので、特に意識する必要はない。

拡張子

.js.coffee
.js.coffee.erb

設置場所

/app/assets/javascripts/

演算子

論理演算子

CoffeeScriptJavaScript
is===
isnt!==
not!
and&&
or||
true, yes, ontrue
false, no, offfalse

クラス

特徴

  • JavaScriptにはクラスはないが、CofeeScriptではそれっぽいことができる
  • コンストラクタは、constructorで定義する
  • メソッドは「:」
  • インスタンスは「@」。「this.」が付いたのと同じ扱い

class Language
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Ruby extends Language
  move: ->
    alert "Ruby..."
    super 5

class PHP extends Language
  move: ->
    alert "PHP..."
    super 45

rails = new Ruby "Ruby on Rails"
symfony = new PHP "Symfony"

rails.move()
symfony.move()

フォーム関連

フォーム共通

フォームのオブジェクトを取得する

id指定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  page_title = $('#page_title')
class指定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title, class: "title" %>
<% end %>
CoffeeScript
$ ->
  title = $('.title')
name指定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  title = $('[name="page[title]"]')

テキストボックス

テキストを取得
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  page_title = $('#page_title')
テキストを設定
View
<%= form_for(@page) do |f| %>
  <%= f.text_field :title %>
<% end %>
CoffeeScript
$ ->
  $('#page_title').val('テキスト')

チェックボックス

チェックボックスがチェックされているか
View
<%= form_for(@page) do |f| %>
  <%= f.check :flag %>
<% end %>
CoffeeScript
$ ->
  page_flag = $('#page_flag').attr('checked')
チェックボックスをチェック済みにする
View
<%= form_for(@page) do |f| %>
  <%= f.check :flag %>
<% end %>
CoffeeScript
$ ->
  $('#page_flag').val(['1'])

ラジオボタン

ラジオボタンのvalue値を取得
View
<%= form_for(@page) do |f| %>
  <%= f.radio_button :flag, 'rails', {checked: true} %>
  <%= f.radio_button :flag, 'ruby', {} %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:flag]"]:checked').val()
指定のvalue値を持つラジオボタンを選択
View
<%= form_for(@page) do |f| %>
  <%= f.radio_button :flag, 'rails', {} %>
  <%= f.radio_button :flag, 'ruby', {} %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:flag]"]').val(['ruby'])

リストメニュー

選択されているオプションのvalue値を取得
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').val()
指定のvalue値を持つオプションを選択
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').val(['ruby'])
オプション要素を追加
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').append($('<option>').val('perl').text('perl'))
オプション要素を削除
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category]"]').children('[value=rails]').remove()
要素を一括で削除
View
<%= form_for(@page) do |f| %>
  <%= f.select :category, ['rails', 'ruby'] %>
<% end %>
CoffeeScript
$ ->
  $('[name="page[:category"]').empty()