Laravel × Vue.js × axiosでTODOリストを作るよ！ その1

Laravel × Vue × axiosで作るTODOリスト

SHARE

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が担います。フロントから送られてきたデータを解析し、データベースを更新します。

図で表すとこんな感じです。雑ですみません…m(_ _)m

Laravel × Vue × axiosで作るTODOリストの構造

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ファイルです。削除とある部分は行ごと消します。

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:LcYlBN709dMeZFCmfY/dGtqdxQYKmzHvQ4h0AEhuzKk=
APP_DEBUG=true
APP_LOG_LEVEL=debug
APP_URL=http://localhost

DB_CONNECTION=sqlite // ←mysqlからsqliteに変更
DB_HOST=127.0.0.1 // ←削除
DB_PORT=3306 // ←削除
DB_DATABASE=homestead // ←削除
DB_USERNAME=homestead // ←削除
DB_PASSWORD=secret // ←削除

〜 以下、略 〜

次は、configフォルダのapp.phpとdatabase.phpを編集します。

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

'timezone' => 'Asia/Tokyo', //←UTCをAsia/Tokyoに変更

'locale' => 'ja', //←enをjaに変更

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

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

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

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

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

    "devDependencies": {
        "axios": "^0.16.2",
        〜 略 〜
        "vue": "^2.1.10"
    }

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

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行目からのコードを下記のように変更・追記してください。

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

シーディング

シーディングとは、データベースにテストデータを流し込むための機能です。
主にLaravelプロジェクトの開発時に、テストデータをデータベースに入れるために使用します。

下記のコマンドをターミナルに入力してください。

php artisan make:seeder TodosTableSeeder

これで、database/seeds/に、TodosTableSeeder.phpというシーダーファイルが生成されました。

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

public function run()
{
  DB::table('todos')->insert([  //← タスクを追加
    'title' => 'お茶を淹れる'
  ]);
  DB::table('todos')->insert([  //← タスクを追加
    'title' => '洗濯物を干す'
  ]);
  DB::table('todos')->insert([  //← タスクを追加
    'title' => '玄関を掃除する'
  ]);
}

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

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

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

php artisan migrate
php artisan db:seed

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

今回はここまで

長くなってしまいましたので、今回はここまでにします。
セットアップだけで終わってしまいましたね。

次回は、レイアウトを構築していこうと思います！
では、また！

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

参考資料・リンク

前の記事

Webデザイナーおすすめのテックブログ
Webデザイナーとんよー。がおすすめするテックブログ10選

次の記事

Laravel × Vue.js × axiosでTODOリス…
Laravel × Vue × axiosで作るTODOリスト