Part4:Controller

海未「今回はコントローラについてです。モデルとビューの間でルーティングを行うものですね」

海未「自動生成されたroutes/index.jsを見てみましょう」

海未「router.getのところが、http://localhost:3000/にGETリクエストが送られた場合の処理になります」
ことり「getはイベントリスナーの登録かな?」
海未「鋭いですね。GETリクエストが送られたときに実行されるリスナーが、第2引数の無名関数です」
ことり「えへへ♪」
海未「その中身ですが、まずresはHTTPレスポンスです。それに対してrender関数を使うと、指定した名前のテンプレートをレスポンスとして送り返すことができます」
穂乃果「じゃあ、第1引数のindexindex.jadeのことなの?」
海未「そうです。index.jadeに、titleパラメータを付けてHTMLを生成していますね」
ことり「index.jadeに書いてあったtitle変数ってここで与えてるんだ」
海未「はい。このような形で、テンプレートで使う変数をコントローラから与えることができます」

海未「では前回に引き続き投票サイトを作っていきましょう。今回は、グループの新規エントリー受付の画面を作って表示させてみます」
ことり「テンプレートを作るだけじゃだめなのかな?」
海未「どのURLに対するアクセスに対しどのビューを使うかを制御するのはコントローラですから。その制御の仕方を理解してください」

海未「まずはビューから作ってしまいます。views/add.jadeをこのように作成してください」

海未「テキストボックスと登録ボタンがあるだけのシンプルなフォームですね。http://localhost:3000/addにPOSTリクエストを送るようになっています」
穂乃果「うん、これはわかるよ」
海未「ではこの画面を表示できるようにコントローラを作成しましょう。routes/add.jsを作成してください」

ことり「さっきと大体同じだね」
海未「何かのテンプレートを表示するだけならこの程度の記述で十分なのです」

海未「作成したコントローラも、それだけでは動きません。アプリケーションから読み込むには、app.jsに書き足す必要があります」
穂乃果「app.jsは・・・と。うわっ、なんかいっぱい書いてある」
海未「そのファイルが各種のモジュールを読み込んだり、ハンドラを定義しているアプリケーションの中心です。今回はそこに、今追加したaddを読み込む処理を追加します」

海未「まずは9行目。addモジュールをrequireで読み込みます」
ことり「add.jsは普通のモジュールなんだね」
海未「次に26行目、アプリケーションに/addにリクエストが来たらaddモジュールを使うように設定しています」
ことり「ここで振り分けされるんだ」
海未「書き方はいくつかあるのですが・・・アクセスされるURLごとに、ここで分けてしまうのが綺麗かなと思います」

海未「ではサーバを再起動して、http://localhost:3000/addにアクセスしてみましょう」
穂乃果「さっき作ったフォームが表示されたよっ!」
海未「では今度は、そのフォームからPOSTした場合の処理を作りましょう。・・・といっても、モデルはまだですから枠組みだけですが」

海未「http://localhost:3000/addにPOSTするという実装をしましたね。そのURLはつまり、今フォームを表示しているURLです」
穂乃果「あ、そういえばそうだ」
海未「ですから、HTTPメソッドに応じて書き分ける必要がありますね。routes/add.jsを見返すと、GETリクエストの時の処理が書いてあります」
ことり「router.getがGETの時、だよね。そしたら・・・」
海未「察しはつきそうですが、Routerにはpost関数もあります。これで、GETと同じようにPOSTに対する処理を書くことができます」

海未「ひとまず何もせずトップページへ飛ばすだけですが、今はここまででよいでしょう」

穂乃果「先生、質問」
海未「おや、穂乃果が珍しいですね」
穂乃果「router.getの第1引数で/を渡してるよね。でもapp.jsの方では/addって書いたよね。これ、どうつながってるの?」
海未「app.jsの方で/addと書くと、そこから呼び出されるモジュールの側では/addがルートとみなされます。ですから、add.jsの方で/addと書く必要はないんです」
ことり「ってことは、/addより下位にあたるURLしかルーティングできないんだね」
海未「そうやって扱える範囲を限定するのはモジュール化の持つ意義の1つですから」

海未「ではサーバを再起動して、フォームの画面にアクセスして登録ボタンを押してみてください。トップページに遷移すると思います。これが、リクエストに応じて対応する処理をするルーティングの基本です」
ことり「じゃあ、トップページも直しておかないとね」

ことり「これでエントリーページに行って、登録して戻ってこれるね」

海未「では次回はモデルに入ります。データベースにグループの情報を保存して、それを画面に表示する部分を実装しましょう」


LINEで送る
Pocket


返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です