Play Frameworkの仕組みを理解する①

今回はPlay Frameworkのサンプルプロジェクトをローカルで立ち上げて、MVCモデルにおけるViewとController、そして、Routingの設定の3者の関係にフォーカスして、理解を深めようと思います。

サンプルプロジェクトは、Play Frameworkの公式ホームページ内からダウンロードできる「Play Java Hello World Tutorial」を使用します。

サンプルプロジェクトをダウンロード後、コマンドプロンプト上で「sbt run」コマンドを実行して、ブラウザ上で「http://localhost:9000/」へアクセスすると、以下のような画面が立ち上がるはずです。

EclipseやIntelliJ IDEAなどのIDEを起動し、プロジェクトフォルダ内を確認すると、以下のように様々なフォルダやファイルが格納されていることが確認できます。

プロジェクト内ディレクトリ

View、Controller及びRoutingの関係を理解する

今回のView、Controller及びRoutingの関係を理解するためには、appフォルダ配下のcontrollersフォルダとviewsフォルダ、そして、confフォルダ配下のroutesファイルが確認対象となり重要です。

まずは、conf配下のroutesファイルを確認してみましょう。

最も基本的な6行目のコードを例に説明します。まず、「GET」、「/」、「controllers.HomeController.index」という3つのパートに分かれていることが確認できます。

最初の「GET」は、ページを取得するという意味になります。詳しくお知りになりたい場合は、HTTPメソッドについて、調べてみてください。

次の「/」はURLを表します。ここでは、ローカルで立ち上げているため、省略せずにすべて書くと「http://localhost:9000/」となりますが、「http://localhost:9000」の部分は共通のURLのため、コード上では省略されています。

最後の「controllers.HomeController.index」は、app配下のcontrollersフォルダ内にあるHomeControllerクラスのindexメソッドを呼ぶという意味になります。

上記３つを合わせて書くと、URL「http://localhost:9000/」へアクセスすると、app配下のcontrollersフォルダ内にあるHomeControllerクラスのindexメソッドを呼んで、ページを取得するということになります。

では、次に、app配下のcontrollersフォルダ内にあるHomeController.javaファイルを確認してみましょう。

先ほどのrouteファイルで確認したように、確かにHomeControllerクラス内にindexメソッドが確認できます。メソッド内を確認すると、「return ok(views.html.index.render());」とあります。

「views.html.index.render()」の意味は、app配下viewsフォルダ内のhtmlファイルで、index.scala.htmlにアクセスし出力・表示するということになります。app配下viewsフォルダには、index.scala.htmlファイルが存在することを確認できます。

実践して理解を深める

それでは、ここまでの内容を理解したところで、今度は実際にView、Controller及びRoutingの関係性を利用して、「Hello World」と表示されるウェブページを作成してみましょう。

手順１：Routingの設定
まず、以下routesファイルに以下の通り、9行目を追加します。この1行は、URL「http://localhost:9000/hello」へアクセスすると、app配下のcontrollersフォルダ内にあるHomeControllerクラスのhelloメソッドを呼んで、ページを取得するという設定になります。

手順２：HomeController.javaファイルにhelloメソッドを作成する
以下のように、HomeController.javaファイルのHomeControllerクラスにhelloメソッドを追記します。ここでは、app配下viewsフォルダ内のhtmlファイルで、hello.scala.htmlにアクセスし出力・表示するという設定としました。

手順３：viewsフォルダ内にhtmlファイルを作成し編集する
HomeController.javaファイルのhelloメソッド内で指定したように、viewsフォルダ内にhello.scala.htmlを作成します。「Hello World」と表示するHTMLを以下のように記入してみます。

これで、「Hello World」と映るウェブページを表示させる準備が整いました。routesファイル内で設定したように、プロジェクトを立ち上げ、ブラウザ上で「http://localhost:9000/hello」へアクセスしてみましょう。以下の通り、意図した通りの画面が表示されました。

なお、今回の投稿は、Play Framework TutorialsというYoutubeも参考にしていますので、英語を理解される場合は、併せて以下をご参考になってください。
https://www.youtube.com/playlist?list=PLYPFxrXyK0Bx9SBkNhJr1e2-NlIq4E7ED