プログラミング

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

今回は私の勉強がてら、Laravel と Vue.js と axios を使って、簡単な TODO リストを作ってみます!
※本記事で、Laravel や Vue.js などについて詳しい説明は行いません。
また、個人的メモのような記事ですので、説明不足な点が所々あると思います。
適宜、Google 先生に聞いてみてください。Google 先生の方が絶対に詳しいです。

Laravel・Vue.js・axios についてさらっと解説

Laravel

Laravelは PHP フレームワークの一種です。
比較的最近に登場した PHP フレームワークで、自由なディレクトリ構成・Eloquent モデルなどが特徴です。

Vue.js

Vue.jsは、最近躍進している JavaScript フレームワークです。
プログレッシブフレームワークの理念を元に作られており、小規模から大規模まで柔軟に組み込めるのが特徴です。

axios

axiosは、HTTP 通信のための JavaScript のライブラリです。
少量のコード・簡単な設定をするだけで、POST や GET が使えます。とても便利!
ちなみに読み方はアクシオスだそうです。

TODO リスト・データベースの構成について

今回作るのは、簡単な TODO リストです。構造も至って単純。
フロントでの処理は Vue.js が担います。主にユーザーの入力を検知して、適宜イベントを発火させ、axios でサーバーと通信します。
バックでの処理は Laravel が担います。フロントから送られてきたデータを解析し、データベースを更新します。
図で表すとこんな感じです。雑ですみません…

TODOリストのざっくりとした全体の流れです

データベースの構築は面倒なので、sqliteを使うことにします。
ファイルを用意すれば、すぐに使えるってのはお手軽で良いですよね〜。
そして、データベースの構成はこんな感じです。

Todos id title
説明 タスクの ID タスク名
INT TEXT
備考 主キー/オートインクリメント -

はい。とてつもなくシンプルですね(笑)。
タスクを識別するためのキー「id」。主キーで、オートインクリメント。 タスク名を入れる「title」。
………以上!!

…あ。バリデーションは面倒なのでナシで(汗)…。

開発環境について

本記事は下記の環境を想定して書いています。
お使いの PC の環境と異なる場合は、適宜調整してくださいませ。

  • macOS High Sierra ver.10.13.5
  • Composer - 1.6.5
  • npm - 5.6.0
  • Laravel - 5.5
  • Vue.js - 2.1.10
  • axios - 0.16.2
  • laravel-mix - 1.0

--- 広告 ---

Laravel・Vue.js・axios で TODO リストを構築する手順

変更があるかもしれませんが、流れとしてはだいたい下記のようなカタチになるかと。

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

では、さっそく作っていきましょう。

TODO リスト構築

Laravel のインストール・セットアップ

Composerを使って、Laravel をダウンロードします。
下記のコマンドをターミナルに入力しましょう。

composer create-project "laravel/laravel=5.5.\*" laravel-vue-todo

laravel-vue-todo という名の Laravel プロジェクトが生成されました。
次に、Laravel のセットアップをしていきます。
まず最初は.env ファイルです。削除とある部分は行ごと消します。

1
APP_NAME=Laravel
2
APP_ENV=local
3
APP_KEY=base64:LcYlBN709dMeZFCmfY/dGtqdxQYKmzHvQ4h0AEhuzKk=
4
APP_DEBUG=true
5
APP_LOG_LEVEL=debug
6
APP_URL=http://localhost
7
8
DB_CONNECTION=sqlite // ←mysql から sqlite に変更
9
DB_HOST=127.0.0.1 // ← 削除
10
DB_PORT=3306 // ← 削除
11
DB_DATABASE=homestead // ← 削除
12
DB_USERNAME=homestead // ← 削除
13
DB_PASSWORD=secret // ← 削除
14
15
〜 以下、略 〜

次は、config フォルダの app.php と database.php を編集します。
config/app.php の 68 行目・81 行目を、下記のように編集し、タイムゾーンと言語を日本に合わせます。

1
'timezone' => 'Asia/Tokyo', //←UTC を Asia/Tokyo に変更
2
'locale' => 'ja', //←en を ja に変更

そして、config/database.php の 16 行目を、下記のように編集します。

1
'default' => env('DB_CONNECTION', 'sqlite'), //←mysql を sqlite に変更

はい。これで Laravel のインストール・セットアップは終わりました。

Vue.js と axios のインストール

Laravel のインストールとセットアップが終わったので、Vue.js と axios を入れます。
実は Vue.js・axios は、Laravel インストール時についてきた package.json に既に記述されています。
したがって、npm install コマンドを実行すれば、すぐ使えるようになっています。

1
"devDependencies": {
2
    "axios": "^0.16.2",
3
    〜 略 〜
4
    "vue": "^2.1.10"
5
}

では、さっそく下記のコマンドをターミナルに打ち込みましょう。

npm install

これで Vue.js・axios がインストールできました。

データベースの用意

データベースの設定が面倒なので、sqlite のファイルを用意します。
ターミナルで laravel-vue-todo フォルダに移動し、下記のコマンドを打ちます。

touch database/database.sqlite

Laravel では sqlite ファイルを利用する場合、デフォルトで database/database.sqlite が使うように設定されています。
そのため、少々の環境設定と database/database.sqlite の用意だけで、すぐに sqlite を使うことができます。

次に、マイグレーションとシーディングを行いましょう。

マイグレーション

マイグレーションとは、データベースのバージョンを管理する機能です。
マイグレーションファイルを使えば、簡単にデータベースのカラムを変更したり、削除したりできるので、普通にデータベースをいじるよりよっぽど簡単にデータベースを扱うことができます。

では、さっさとやっちゃいましょう。
下記のコマンドをターミナルに入力してください。

php artisan make:migration create_todos_table

これで、マイグレーションファイルが用意できました。

では、作成したマイグレーションファイルの中身を編集していきましょう。
database/migrations/YYYY_MM_DD_hhmmss_create_todos_table.php(YYYY_MM_DD_hhmmss は作成日時)のファイルを開き、16 行目からのコードを下記のように変更・追記してください。

1
Schema::create('todos', function (Blueprint $table) {
2
  $table->increments('id');
3
  $table->text('title'); //←追記
4
  //$table->timestamps(); //← 今回タイムスタンプは不要なので、コメントアウト or 行ごと削除
5
});

シーディング

シーディングとは、データベースにテストデータを流し込むための機能です。
主に Laravel プロジェクトの開発時に、テストデータをデータベースに入れるために使用します。
下記のコマンドをターミナルに入力してください。

php artisan make:seeder TodosTableSeeder

これで、database/seeds/に、TodosTableSeeder.php というシーダーファイルが生成されました。
TodosTableSeeder.php の 12 行目あたりから、run メソッドが記述されているので、下記のように編集しましょう。
今回は、テキトーに 3 つほどタスクを追加しました。

1
public function run(){
2
  DB::table('todos')->insert([ //← タスクを追加
3
    'title' => 'お茶を淹れる'
4
  ]);
5
  DB::table('todos')->insert([ //← タスクを追加
6
    'title' => '洗濯物を干す'
7
  ]);
8
  DB::table('todos')->insert([ //← タスクを追加
9
    'title' => '玄関を掃除する'
10
  ]);
11
}

編集したシーダーファイルを使えるようにするには、DatabaseSeeder.php にシーダーファイルを登録する必要があります。
laravel-vue-todo/database/seeds/DatabaseSeeder.php を開き、下記のように、12 行目あたりを編集しましょう。

1
public function run()
2
{
3
// $this->call(UsersTableSeeder::class);
4
  $this->call(TodosTableSeeder::class); //← 追記
5
}

これで、マイグレーション・シーディングの用意が整いました!
では、下記のコマンドをターミナルに入力しましょう。

1
php artisan migrate
2
php artisan db:seed

うまくいけば、「successfully.」とターミナルに表示されます。
これで、今回使用するデータベースとその中身が用意できました!

--- 広告 ---

今回はここまで

長くなったので、今回はここまでにします。 セットアップだけで終わってしまいましたね。
次回は、レイアウトを構築していこうと思います!
では、また!

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

参考資料・リンク