#6 Laravelでアプリケーション作成の準備

以前作ったアプリケーションをLaravelに移植する

応用1で作ったドラッグ&ドロップアプリをLaravelに移植して、Laravelでどのようにしてアプリケーションを作るのかを体感してみましょう。

migrationマイグレーションでテーブル定義する

まずはデータベースの整備をしていきましょう。
応用1 #9で「cri_sortable」テーブルを作成したように、 Laravelでもテーブルを作りカラムやデータを追加していきます。
その際、応用編の時のように手動でカラムを設定しても良いのですが、せっかくなのでここでLaravelの便利な機能を使ってみたいと思います。

Laravelにはマイグレーションという機能が予め備わっています。
簡単にいえば「テーブル定義を作成/管理」してくれる仕組みです。
テーブル定義とは、テーブル名やカラム等のテーブルを構成する要素を定義することです。

応用編の時もカラムを作成する際に、色々と条件をつけたと思います。例えば、
「id」カラムはint(整数)型で、Auto Increment属性を付与する。
「name」カラムはtext型で、照合順序は「utf8_generral_ci」
などなど...
これらの設定を予めphpファイルにまとめて記述しておき、実行することによってテーブル定義を自動で設定してくれる機能です。
早速、マイグレーションしてみましょう。まずはマイグレーション設定ファイルの作成からです。

①migrationファイル作成

下図の様な流れでコマンドを実行していきましょう。

$ cd ~/job/stg/8026-laravel/CBC_Laravel/
作成したLaravelプロジェクトまで移動します。パスは各々作成したLaravelプロジェクトまでのパスに合わせてください。

$ php artisan make:migration create_sortables_table --create=sortables

↓上記のコマンドを実行するとこのように表示されます。
⇨Created Migration: 2020_01_28_070250_create_sortables_table
migrationファイルの作成実行コマンドです。
「php artisan make:migration」でmigrationファイル作成の指示。
create_****_tableは **** = テーブル名 となっておりテーブル名を指定します。
オプションの--create=****は **** = テーブル名 となっており同じくテーブル名を指定します。
※後ほど使うのでターミナルはこのまま閉じないでください。

②作成したmigrationファイルの編集

中身の編集を行います。作成したmigrationファイルをエディタで開いてください。
ファイルパス:8026-laravel/CBC_Laravel/database/migrations/2020_01_28_070250_create_sortables_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateSortablesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('sortables', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('sortables');
    }
}
自動作成されたマイグレーションファイルには、「up」と「down」という二つのメソッド(関数)があります。 今回はテーブルの作成を行いますので、「up」メソッドの記述内容を修正していきます。
upメソッド内を下図の様に修正してみてください。

public function up()
{
    Schema::create('sortables', function (Blueprint $table) {
        $table->integer('id')->autoIncrement();
        $table->text('name')->nullable(false);
        $table->integer('left_x')->nullable();
        $table->integer('top_y')->nullable();
    });
}
応用編を振り返ってみましょう。
「cri_sortable」テーブルには四つのカラム「id」「name」「left_x」「top_y」が設定されていました。
マイグレーションでの設定方法を見てみましょう。

$table->integer('id')->autoIncrement();
引数$tableは、作成するテーブル、すなわち「sortables」テーブルのことを指しています。
「->(アロー演算子)」を使って、後に$table内に設定するカラムを設定しておきます。
「integer('id')」は「Integer型のidカラム」という意味です。
「autoIncrement()」で、そのカラムにAutoIncrement属性を付与することができます。
まとめると、「AutoIncrement属性を持ったInteger型のカラム「id」をsortablesテーブルの中に定義する」と書かれているわけですね。
ここまで分かれば下の3行も何が書かれているのかは分かると思います。「name」「left_x」「top_y」カラムに関する設定を記述しています。
ちなみに、「nullable()」はそのカラムに値「null」が入って来ることを許容するかどうかの設定です。 ()の中に引数を指定しなければnullを許容し、「false」を指定すればnullを拒絶するようになります。

③migration実行

マイグレーションファイルの修正が完了したら、早速マイグレーションを実行してみましょう。
※実行する前に、デフォルトで作成されているマイグレーションファイルは全て削除しておいてください。
アプリケーションディレクトリまでcdコマンドで移動てあることを確認して下図のコマンドを実行してください。

$ php artisan migrate

//↓ 実行するとこのように表示されます
Migration table created successfully.
Migrating: 2020_01_28_081102_create_sortables_table
Migrated:  2020_01_28_081102_create_sortables_table (0.03 seconds)
エラー分が出て実行できない場合は、エラー内容を確認して修正しましょう。データベースのcharasetが同じかなど確認しましょう。

④migration結果の確認

指定した設定が反映されているか、データベースを見てみましょう。
データベース「cbc_laravel」にテーブル「sortables」が作成され、テーブルの中には4つのカラムが設定されているはずです。
一度マイグレーションファイルを作成してしまえば、あとは実行するだけでアプリ開発に使用するテーブルを作成することが可能です。
多人数でのアプリ開発において非常に有効な機能ですので、こういった機能があることは覚えておきましょう。

artisanコマンドについて

今までに何度か登場しているartisanアルチザンコマンドですが、これはLarevel専用の作業指示コマンドです。
Laravelには、アプリケーション開発において発生する、様々な作業を簡単に実行できる機能が備わっていて、それらを呼び出し実行させる際にこの「artisan」コマンドを実行します。
今回の「artisan make」はファイル等を作成してくれるコマンドで、オプションを設定することで設定通りのファイルを作成します。 artisanコマンドは他にも沢山便利機能を持っています(全68種類)。$ artisan list で確認できます。
artisanはフランス語で「職人・匠」という意味があります。あなたの代わりに職人のように動作をしてくれます。

#7 Laravelでブラウザに表示されるかを確認する

公開用フォルダにデータを入れる

実行環境やデータベースの設定が済んだら、今度はブラウザに表示する画面周りの整備を行います。
応用2 #7で使用した「index.php」と「style.css」を用意してください。
データがない場合はこちらをダウンロード

①publicフォルダにcss、jsファイルを入れる

index.phpはのちほど中身だけ使うので、publicフォルダにはコピーしないようにしてください。
最初に入っているindex.phpを書き換えないでください。
cssファイルはcssフォルダごとpublicフォルダに入れておきます。
続いて実践2 #1で学んだように、jsファイルを別にしておきます。ファイル名はmain.jsにします。

テンプレートエンジンで画面の骨組みを作る 〜Viewビュー

次に、ブラウザでアプリを表示する際にメインで動くことになるsortable.blade.phpを作成します。
ファイル名に記載されているbladeブレードは、 Laravelに導入されている「テンプレートエンジン」のことです。
テンプレートエンジンとは、簡潔に言うと、「データ」と「テンプレート」を合体させ、文字列を作る仕組みで、 あらかじめ固定で出力したい内容を「テンプレート」として保持しておき、 データベースから取得したデータを適用させたい箇所に配置し、動的な画面を出力することができます。

応用編 #2で作成した「index.php」をもとに、新規ファイルとして「sortable.blade.php」を作成し、 ファイルパス:CBC_Laravel/resources/views/ に入れます。
その際、css読み込み箇所とjs読み込み方法と記述場所は以下のとおりに記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>8001-cri-sortable</title>
  <link href="{{ asset('css/style.css')}}" rel="stylesheet">
</head>
<body>
<div id="wrapper">

<div id="input_form">

</div>

<div id="drag-area">

</div>

</div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <script src="{{ asset('js/main.js')}}"></script>
</body>
</html>
ページが1つだとあまりメリットはありませんが、データだけが違う同じ仕組みのページが複数ある場合などは テンプレートを使うと構築が簡単になります。これはWordpressに代表されるCMSも同じような考え方です。

ルーティングでURLを設定する 〜routingルーティング

最後に、ルーティングを管理している「web.php」の編集を行います。
ファイルパス:CBC_Laravel/routes/web.php を開きます。

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    /*return view('welcome');*/
    return view('sortable');  /* welcomeとなっている部分をsortableに変更します */
});
解説▼
web.phpは、とあるURLがリクエストされた際に、アプリケーション側がどういったアクションを起こすのかを設定するファイルです。
Route::get('/' は、リクエストされたURLが / だった場合{ }内の処理を実行する、といった意味になります。
この「/」はルートのURLを指します。環境構築の際に確認した「http://localhost:8026/」のことです。
return は実際の処理内容になります。
view()メソッドはブラウザに表示させるためのメソッドで、引数に指定されているphpを呼び出し、演算してブラウザ上に表示させます。
引数は「sortable」となっています。こう指定することで、「resources」フォルダ配下に置かれている「sortable.blade.php」を呼び出すことが出来ます。

実際にブラウザ上でURLを実行し、画面表示させてみましょう。環境構築の際に確認したURL http://localhost:8026/ このURLを実行してみてください。スタートアップページではなく、下図の様なページが表示されるはずです。
コピーしました
RSS https://cbc-study.com/rss.xml
質問などあればSlackで