rails tutorial 3章をlaravelで実装

[takanori-matsushita]

branch: static-pages

[takanori-matsushita]

3.1 セットアップ

リスト 3.4: helloアクションをApplicationコントローラーに追加する app/Http/Controllers/Controller.php

  public function hello()
  {
    return 'Hello World';
  }

リスト 3.5: ルートルーティングを設定する routes/web.php

Route::get('/', 'Controller@hello');

[takanori-matsushita]

3.2 静的ページ

ブランチを切る git switch -c static-pages

[takanori-matsushita]

3.2.1 静的なページの生成

リスト 3.6: StaticPagesコントローラを生成する php artisan make:controller StaticPagesController

[takanori-matsushita]

リスト 3.7 StaticPagesコントローラー内のhomeアクションとhelpアクションで使うルーティング

Route::get('static_pages/home', 'StaticPagesController@home');
Route::get('static_pages/help', 'StaticPagesController@help');

[takanori-matsushita]

リスト 3.8: リスト 3.6で生成されるStaticPagesコントローラ Railsと違って、コントローラ内にアクションは生成されないので、手動で入力 StaticPagesController.php

  public function home()
  {
    return view('static_pages.home');
  }

  public function help()
  {
    return view('static_pages.help');
  }

[takanori-matsushita]

リスト3.9: Homeページ用に生成されたビュー ビューも自動で生成されないので手動で新規フォルダー&ファイル作成 resources/views/static_pages/home.blade.php

<h1>StaticPages#home</h1>
<p>Find me in resources/views/static_pages/home.blade.php</p>

リスト3.10: Helpページ用に生成されたビュー resources/views/static_pages/help.blade.php

<h1>StaticPages#home</h1>
<p>Find me in resources/views/static_pages/help.blade.php</p>

[takanori-matsushita]

3.2.2 静的なページの調整

リスト3.11: HomeページのHTMLを修正する リスト 3.12: HelpページのHTMLを修正する

このあたりはそのままコピペ

[takanori-matsushita]

3.3.1 最初のテスト

Railsではコントローラ作成時にテストファイルも同時に作成されるが、Laravelは以下のコマンドで作成する必要がある。

php artisan make:test StaticPagesControllerTest

これでtests/Featureの中にテストファイルが生成される。

[takanori-matsushita]

リスト 3.13: StaticPagesコントローラのデフォルトのテスト tests/Feature/StaticPagesControllerTest.php

以下のように記述する

  public function testStaticPagesController()
  {
    $response = $this->get('/static_pages/home');
    $response->assertStatus(200);

    $response = $this->get('/static_pages/help');
    $response->assertStatus(200);
  }

[takanori-matsushita]

リスト 3.14: green

$ vendor/bin/phpunit
OK (1 tests, 2 assertions)

[takanori-matsushita]

3.3.2 Red

リスト 3.15: Aboutページのテストred

  public function testStaticPagesController()
  {
    ~省略~

    $response = $this->get('/static_pages/about');
    $response->assertStatus(200);
  }

[takanori-matsushita]

3.3.3 Green

リスト 3.17: red

$ vendor/bin/phpunit
FAILURES!
Tests: 1, Assertions: 2, Failures: 1.

[takanori-matsushita]

リスト 3.18: about用のルートを追加するred routes/web.php

Route::get('static_pages/about', 'StaticPagesController@about');

[takanori-matsushita]

リスト 3.20: aboutアクションが追加されたStaticPagesコントローラred

class StaticPagesController extends Controller
{
 ~省略~

  public function about()
  {
    return view('static_pages.about');
  }
}

[takanori-matsushita]

リスト 3.21: Aboutページのコードgreen resources/views/static_pages/about.blade.php を作成しrailstutorialのリストをコピペ

[takanori-matsushita]

リスト 3.22: green

$ vendor/bin/phpunit
OK (1 test, 3 assertions)

[takanori-matsushita]

3.4 少しだけ動的なページ

3.4.1 タイトルをテストする (Red)

タイトルのテストはlaravel/duskをインストールしないといけない。

$ composer require --dev laravel/dusk

インストールが終わったら以下のコマンドを実行

$ php artisan dusk:install

.envファイルでAPP_URL環境変数を指定(ポートを指定しなければ8000がデフォルトなので以下のように指定する)

APP_URL=http://localhost:8000

Laravel Dusk 公式ページ

[takanori-matsushita]

テストファイルの作成

php artisan dusk:make StaticPagesControllerBrowserTest

リスト 3.24: StaticPagesコントローラのタイトルをテストする red tests/Browser/StaticPagesControllerBrowserTest.php

class StaticPagesControllerBrowserTest extends DuskTestCase
{
  /**
   * A Dusk test example.
   *
   * @return void
   */
  public function testHome()
  {
    $this->browse(function (Browser $browser) {
      $browser->visit('/static_pages/home')
        ->assertTitle('Home | Ruby on Rails Tutorial Sample App');
    });
  }

  public function testhelp()
  {
    $this->browse(function (Browser $browser) {
      $browser->visit('/static_pages/help')
        ->assertTitle('Help | Ruby on Rails Tutorial Sample App');
    });
  }

  public function testAbout()
  {
    $this->browse(function (Browser $browser) {
      $browser->visit('/static_pages/about')
        ->assertTitle('About | Ruby on Rails Tutorial Sample App');
    });
  }
}

[takanori-matsushita]

リスト 3.25: red

$ php artisan dusk
FAILURES!
Tests: 3, Assertions: 3, Failures: 3.

[takanori-matsushita]

リスト 3.26, 3.27, 3.28 そのままそれぞれのBladeテンプレートへコピペ

[takanori-matsushita]

リスト 3.29: green

$ php artisan dusk
OK (3 tests, 3 assertions)

[takanori-matsushita]

リスト 3.30: 基本タイトルを使ったStaticPagesコントローラのテスト green tests/Browser/StaticPagesControllerBrowserTest.php

class StaticPagesControllerBrowserTest extends DuskTestCase
{
  /**
   * A Dusk test example.
   *
   * @return void
   */
  public function setUp(): void
  {
    parent::setUp();
    $this->base_title = 'Ruby on Rails Tutorial Sample App';
  }

  public function testHome()
  {
    $this->browse(function (Browser $browser) {
      $browser->visit('/static_pages/home')
        ->assertTitle('Home | ' . $this->base_title);
    });
  }

  public function testhelp()
  {
    $this->browse(function (Browser $browser) {
      $browser->visit('/static_pages/help')
        ->assertTitle('Help | ' . $this->base_title);
    });
  }

  public function testAbout()
  {
    $this->browse(function (Browser $browser) {
      $browser->visit('/static_pages/about')
        ->assertTitle('About | ' . $this->base_title);
    });
  }
}

[takanori-matsushita]

リスト 3.31: タイトルにERBを使ったHomeページのビューgreen

@section('title', 'Home')
<!DOCTYPE html>
<html>

<head>
  <title>@yield('title') | Ruby on Rails Tutorial Sample App</title>
</head>

<body>
  <h1>Sample App</h1>
  <p>
    This is the home page for the
    <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </p>
</body>

</html>

[takanori-matsushita]

リスト 3.32: green

php artisan dusk
OK (3 tests, 3 assertions)

[takanori-matsushita]

リスト 3.33: タイトルにERBを使ったHelpページのビューgreen

@section('title', 'Help')
<!DOCTYPE html>
<html>

<head>
  <title>@yield('title') | Ruby on Rails Tutorial Sample App</title>
</head>

<body>
  <h1>Help</h1>
  <p> Get help on the Ruby on Rails Tutorial at the
    <a href="https://railstutorial.jp/help">Rails Tutorial help
      page</a>.
    To get help on this sample app, see the
    <a href="https://railstutorial.jp/#ebook">
      <em>Ruby on Rails Tutorial</em> book</a>.
  </p>
</body>

</html>

[takanori-matsushita]

リスト 3.34: タイトルにERBを使ったAboutページのビューgreen

@section('title', 'About')
<!DOCTYPE html>
<html>

<head>
  <title>@yield('title') | Ruby on Rails Tutorial Sample App</title>
</head>

<body>
  <h1>About</h1>
  <p>
    <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    is a <a href="https://railstutorial.jp/#ebook">book</a> and
    <a href="https://railstutorial.jp/#screencast">screencast</a>
    to teach web development with
    <a href="http://rubyonrails.org/">Ruby on Rails</a>.
    This is the sample application for the tutorial.
  </p>
</body>

</html>

[takanori-matsushita]

共通テンプレートの作成 Laravelでは、共通テンプレートは手動で作成しなければならない。

リスト 3.35: サンプルアプリケーションのレイアウト green resources/views/layouts/layout.blade.php を作成

<!DOCTYPE html>
<html>
<head>
  <title>@yield('title') | Ruby on Rails Tutorial Sample App</title>
  <meta name="csrf-token" content="{{csrf_token()}}">
  <link rel="stylesheet" href={{ asset('/css/app.css') }}>
  <script src={{'/js/app.js'}} defer></script>
</head>
<body>
  @yield('content')
</body>
</html>

• metaタグのcsrfはセキュリティ対策
• cssとjsファイルはwebpackでビルドした際にpublicフォルダ内にそれぞれ配置されるファイルを読み込むように指定している。
• 開発環境だとyarn devでビルドしてくれる。
• scriptタグのdeferは遅延読み込みの指定。

[takanori-matsushita]

リスト 3.36: HTML構造を削除したHomeページgreen

@extends('layouts.layout')
@section('title', 'Home')
@section('content')
<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>
@endsection

[takanori-matsushita]

リスト 3.37: HTML構造を削除したHelpページgreen

@extends('layouts.layout')
@section('title', 'Help')
@section('content')
<h1>Help</h1>
<p> Get help on the Ruby on Rails Tutorial at the
  <a href="https://railstutorial.jp/help">Rails Tutorial help
    page</a>.
  To get help on this sample app, see the
  <a href="https://railstutorial.jp/#ebook">
    <em>Ruby on Rails Tutorial</em> book</a>.
</p>
@endsection

[takanori-matsushita]

リスト 3.38: HTML構造を削除したAboutページgreen

@extends('layouts.layout')
@section('title', 'About')
@section('content')
<h1>About</h1>
<p>
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  is a <a href="https://railstutorial.jp/#ebook">book</a> and
  <a href="https://railstutorial.jp/#screencast">screencast</a>
  to teach web development with
  <a href="http://rubyonrails.org/">Ruby on Rails</a>.
  This is the sample application for the tutorial.
</p>
@endsection

[takanori-matsushita]

リスト 3.39: green

$php artisan dusk
OK (3 tests, 3 assertions)

[takanori-matsushita]

リスト 3.41: HomeページをルートURLに設定する

Route::get('/', 'StaticPagesController@home');
Route::redirect('static_pages/home', '/');
Route::get('static_pages/help', 'StaticPagesController@help');
Route::get('static_pages/about', 'StaticPagesController@about');
Route::get('static_pages/contact', 'StaticPagesController@contact');

[takanori-matsushita]

3章終了 あとは、rails tutorial通りにstatic-pagesをmasterにmergeする。