プログラミング

前回の記事 →Laravel × Vue.js × axios で TODO リストを作るよ! その 1
次回の記事 →Laravel × Vue.js × axios で TODO リストを作るよ! その 3

Laravel × Vue.js × axios で TODO リストを作るよ!

前回は Laravel のインストール・セットアップ、Vue.js・axios のインストール、データベースの用意で止まっていたと思います。

  1. Laravel のインストール・セットアップ
  2. Vue.js と axios のインストール
  3. データベースの用意
  4. Laravel のルーティング設定 ← 今ココ
  5. Laravel のビュー設定
  6. Laravel・Vue.js・axios で TODO リストのプログラム構築
  7. 完成

--- 広告 ---

TODO リスト構築

Laravel のルーティング設定

今回はどんな URL に対しても、1 つのビューを返します。
返すビューは「resources/views/welcome.blade.php」です。
初回のみビューファイルを返して、フロントからのリクエストは、API サーバーで処理するようにします。
Laravel のルーティングの設定は「routes/web.php」に記述する決まりになっています。

「web.php」を開き、下記のように編集します。

1
//  Route::get('/', function () {  //←元々記述されているコードはコメントアウト
2
//    return view('welcome');
3
//  });
4
5
Route::get('/{app}', function () {  //←追記
6
  return view('welcome');
7
})->where('app', '.*');

正規表現でどんな文字列がきても「welcome.blade.php」のビューを返す。といった処理を記述しました。
「php artisan serve」でローカルサーバーを立ち上げているのなら、試しにテキトーに URL を入力してみてください。
どんな URL でも「welcome.blade.php」が返されるはずです。

Laravel のビュー設定

次に「welcome.blade.php」の中身を編集していきます!
一度、ターミナルへ「npm run dev」とコマンドを入力した後、「welcome.blade.php」を下記のように編集してください。

1
<!doctype html>
2
  <html lang="{{ app()->getLocale() }}">
3
    <head>
4
      <meta charset="utf-8">
5
      <meta name="csrf-token" content="{{ csrf_token() }}"> <!-- ←① -->
6
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
      <meta name="viewport" content="width=device-width, initial-scale=1">
8
      <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <!-- ←② -->
9
      <title>Laravel-Vue-todo</title>
10
    </head>
11
    <body>
12
      <div id="app"> <!-- ←③ -->
13
        <div class="container">
14
          <div class="row">
15
            <div class="col-xs-12">
16
              <br>
17
            </div>
18
            <div class="col-xs-6">
19
              <table class="table">
20
                <thead>
21
                  <tr>
22
                    <th>ID</th>
23
                    <th>タスク名</th>
24
                    <th>完了ボタン</th>
25
                  </tr>
26
                </thead>
27
                <tbody>
28
                  <tr>
29
                    <td>1</td>
30
                    <td>お茶を汲む</td>
31
                    <td><button class="btn btn-primary">完了</button></td>
32
                  </tr>
33
                </tbody>
34
              </table>
35
            </div>
36
            <div class="col-xs-6">
37
              <div class="input-group">
38
                <input type="text" class="form-control" placeholder="タスクを入力してください">
39
                <span class="input-group-btn">
40
                  <button class="btn btn-success" type="button">タスクを登録</button>
41
                </span>
42
              </div>
43
            </div>
44
          </div>
45
        </div>
46
      </div>
47
      <script src="{{ asset('js/app.js') }}"></script> <!-- ←④ -->
48
    </body>
49
</html>

そして「php artisan serve」でローカルサーバーを立ち上げると、下記のキャプチャのような画面が表示されるはずです。
「welcome.blade.php」のレイアウト

「welcome.blade.php」のレイアウトでは、「welcome.blade.php」の詳細を解説していきますね。

  1. Laravel で ajax 通信を行う際は CSRF 対策のために、head に上記のコードを追記する必要があります。
    Laravel の CSRF 対策について詳しい解説はコチラ →Laravel 5.5 CSRF 対策
  2. 「npm run dev」コマンドで生成した「app.css」を読み込んでいます。
    asset()は Laravel のヘルパーです。asset()は、現在のリクエストのスキーマ(HTTP か HTTPS)を使い、アセットへの URL を生成します。 Laravel のヘルパーについて詳しい解説はコチラ →Laravel 5.5 ヘルパー
    ちなみに、Laravel の package.json には、bootstrap-sass の ver.3.3.7 がインストールされるように記述されています。
    今回のレイアウトは、この Bootstrap ver.3 を使いました。好みの CSS フレームワークがありましたら、ご自身で適宜インストールしてください。
  3. body タグ直下の div タグに「#app」を付与しました。
    後でこの div タグに Vue.js でマウントし、タスクを表示してきます。
  4. 「npm run dev」コマンドで生成した「app.js」を読み込んでいます。 css と同様、asset()で読み込んでいます。

今回はここまで

これでレイアウトは作れましたね。
次回からは、どんどんロジックを書いていこうと思います!

では、また!
次回の記事 →Laravel × Vue.js × axios で TODO リストを作るよ! その 3

参考資料・リンク