back

レイアウトを活用しよう (5/7)

■JavaScriptファイルを作成する

続いて、JavaScriptファイルです。JavaScriptファイルは、スタイルシートと同じく「assets」フォルダの中に用意されます。このフォルダの中に「javascripts」というフォルダがあるはずです。これが、JavaScriptファイルを配置するためのフォルダです。

このフォルダの中に、今回は「helos.js.coffee」というファイルを用意します。やはりAptana Studioを使っている場合は、既にこのファイルが作成されているはずです。ない場合は新たに作成してください。そして下のリスト欄のように記述をしておきます。といっても、これはダミーのスクリプトです。つまり、「スクリプトファイルが読み込まれ動いているのを確認するために用意しただけ」ですので、動作がわかったら消してかまいません。

今回作成したファイルは、これまた普通のJavaScriptファイルではありません。これは「CoffeeScript」と呼ばれる簡易言語のスクリプトファイルです。CoffeeScriptは、JavaScriptRuby風に記述できるようにした言語です。これで、「JavaScriptのスクリプトもRuby流に書ける」ようになる、というわけです。記述したスクリプトはそのままJavaScriptのスクリプトにコンパイルされ、ちゃんとブラウザで動くようになります。

Aptana Studioでは標準でCoffeeScriptのファイルが作成されるのでそれにあわせておきました。もちろん、ごく普通にJavaScriptのファイルを作成して使うこともできます。その場合は「helos.js」というファイル名で用意してやります。スクリプトファイルも、このように「Controller名.js(.coffee)」というファイル名で作成するのが基本です。

このスクリプトファイルを読み込むためのタグは、テンプレート側では以下のようなスクリプトを使って記述されていました。
<%= javascript_include_tag "helos" %>
これもスタイルシートとほとんど同じ仕組みです。「javascript_include_tag」というのはメソッドで、その後に記述した名前のスクリプトファイルを読み込むためのタグを返します。"helos"とすることで、「javascripts」フォルダ内の「helos.js(.coffee)」を読み込むためのタグが自動生成されます。すべてのスクリプトファイルを読み込ませたい場合は引数に「all」を指定します。――このあたりの感覚は、スタイルシートとほとんど同じですね。


※CoffeeScript参考
http://coffeescript.org/



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※helos.js.coffeeの内容

alert("Hello!"); // ダミー



   

記事のリストに戻る



PC Site G+ mail