第0回: Hello World

この連載では、簡単なRailsアプリケーションを作りながらCoffeeScriptとJQueryについて学んでいきます。

Webページの中のある区域をユーザーがダブルクリックすると正方形が現れ、それをマウスでドラッグしたり、ゴミ箱に捨てたりする、というアプリケーションを作ります。まったく実用的ではありませんが、お許しください。

Railsアプリケーションの名前は「Toraja」とします。

本連載での記法

本題に入る前に、本連載での記法を説明しておきます。

次のように書いてあったら、ターミナル（Windowsの場合は「コマンドプロンプト」）で rails s というコマンドを実行してください。行頭の % は入力しません。

% rails s

「app/views/foo/bar.html.erb を作成」と書いてあったら、エディタでそのファイルを新規作成してください。書き込むソースコードは、次のように示されます。

<h1>Title</h1>

同様に「app/views/foo/bar.html.erb を修正」と書いてあったら、エディタでそのファイルを開いて編集してください。

Railsアプリケーションの準備

早速始めましょう。Railsアプリケーションを生成します。

% rails new toraja
% cd toraja

public/index.html を削除します。

% rm public/index.html

topコントローラのindexアクションを生成します。

% rails g controller top index

config/routes.rb を修正。

Toraja::Application.routes.draw do
  root to: "top#index"
end

app/views/top/index.html.erb を修正。

<div id="canvas"></div>

app/assets/stylesheets/top.css.scss を修正。

div#canvas {
  position: relative;
  width: 400px;
  height: 400px;
  background-color: silver;
}

これで、ひとまず準備完了です。

アプリケーションを起動します。

% rails s

ブラウザで http://localhost:3000 を開くと、次のような画面になります。

Hello World!

では、記念すべき初めてのCoffeeScriptコードを書きましょう。

app/assets/javascripts/top.js.coffee を修正。

$ ->
  $("div#canvas").dblclick ->
    alert("Hello World!")

CoffeeScriptはインデント（字下げ）によってプログラムの構造を表現しますので、行頭にあるスペースの個数に注意してください。1行目は0個、2行目は2個、3行目は4個です。

ソースコードを読んでいきましょう。

$ ->

これは「HTMLドキュメント全体が読み込まれた時に以下のコードを実行せよ」という意味になります。

$ と -> の間のスペースは必須です。スペースをなくしてしまうと、CoffeeScriptのコードとして正しくないため ExecJS::ProgramError という例外が発生します。

  $("div#canvas").dblclick ->

こちらは「canvas という id 属性を持つ div 要素がダブルクリックされたら以下のコードを実行せよ」という意味です。

"div#canvas" という文字列は、「CSSセレクタ」というものです。"div.foo" は foo という class 属性を持つ div 要素を選択(select)し、"span#bar" は bar という id 属性を持つ div 要素を選択します。

app/views/top/index.html.erb の中身は現在次のようになっていますね。

<div id="canvas"></div>

$("div#canvas") でこのdiv要素が選択されます。この要素に対して dblclick メソッドを呼ぶと、この要素が「ダブルクリック」というイベントに反応するようになります。

要素がイベントに対してどのように反応すべきかを -> に続いて記述します。CoffeeScript 独特の記法です。

    alert("Hello World!")

alert は、JavaScriptの関数(function)です。ブラウザにポップアップメッセージを表示させます。

ソースコード全体を再び見てください。

$ ->
  $("div#canvas").dblclick ->
    alert("Hello World!")

全体としては、「HTMLドキュメント全体が読み込まれた後、CSSセレクタ div#canvas に該当する要素がダブルクリックされたら、「Hello World!」 というポップアップメッセージを表示せよ」という意味になります。

動作を確認しましょう。ブラウザを再読込してから、ページ上の灰色の部分をダブルクリックすると次のような表示になります。