Laravel

Laravel + Vueでtrello風タスク管理アプリを作ろう!![準備編]

皆さんこんにちは!

今回から4回くらいに分けて、LaravelとVue.jsを使用した、タスク管理アプリケーションを作成したいと思います。

LaravelやVueは、結構いろいろな技術ブログでテクニックを書かれていますが、日本語のチュートリアル記事は、本当に簡単な内容で勉強になるものは少ないと思います。

これから、LaravelやVueを使用してみたい方の手助けに、少しでもなることができたら良いな、と思っています。

私自身、そんなに優秀なプログラマでは無いので、上手く説明できていない部分や、間違えている部分などありましたら、気軽にコメントください。

trelloとは

「Trello」とは、カードを動かしながらタスクを視覚的に管理できるカンバン方式のツールです。
壁面に付箋紙を貼るような感覚で、ドラック&ドロップで直感的に操作が可能。わかり易いインターフェースと、多数の外部ツール(Slack、Github、Salesforceなど)と連携したプラットフォームの構築により、サービスがとても充実しています。

とても多機能なので、全ての機能を実装するのは難しいので、今回は

「壁面に付箋紙を貼るような感覚で、ドラック&ドロップで直感的に操作」

の部分を、LaravelとVue.jsを使用して作成していきたいと思います。

開発に必要なもののインストールがわからなければ、コメントください。

開発環境

  • WindowsでもMacでも大丈夫です。
  • ローカル環境はXAMPPやMAMPでOKです。
  • DBは私はmysqlを使用します。
  • Composerは、事前に準備してください。
  • node js

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

新しいlaravelプロジェクトを作成することから始めます。
ターミナルまたは、コマンドプロンプトで、プロジェクトを作成する場所に移動し、次のコマンドを実行して下さい。

composer create-project --prefer-dist laravel/laravel kanban-board

上記、コマンドを実行すると、最新版のLaravel(私の環境では、7.2.5)がインストールされました。

今回のチュートリアルでは、認証機能やCSSの説明に手間を掛けたくなかったので、TailwindCSSをインストールします。

TailwindCSSの認証機能を利用するには、Laravel7以降のバージョンである必要があります。

Laravel6などで構築される方は、UIはともかく、認証機能はご用意ください。

データベース作成

MAMPやXAMPPを使用している方は、PhpMyAdminの画面より、今回使用するデータベースを作成して下さい。

私は、[kanban]という名前でデータベースを作成しました。

他の環境の方も、同じ様にデータベースをご用意ください。

.envの編集

プロジェクトディレクトリー直下の「.env」ファイルのDB接続情報を編集して下さい。

[user_name][user_password]となっている所は、ご自身の環境に合わせて変更ください。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=kanban
DB_USERNAME=user_name
DB_PASSWORD=user_password

TailwindCSSのインストール

この記事では認証について詳細な解説は致しません。
また、CSSフレームワークとしてTailwind CSSを使用します。

ターミナルでプロジェクトディレクトリーへ移動して、次のコマンドを実行して下さい。

composer require laravel-frontend-presets/tailwindcss --dev
php artisan ui tailwindcss --auth
npm install && npm run dev
php artisan migrate

上記、コマンド4つを実行すると、ユーザー管理に必要な全ての機能が用意されます。

次のコマンドをターミナルで実行し、確認してみましょう!

php artisan serve

これで[http://localhost:8000/register]をブラウザで開くと、下記の画面が開くと思います。

まずユーザー登録を行って下さい。

その後、[http://localhost:8000/login]へ移動して下さい。

そこで、作成したユーザーでログインして下さい。

ログイン後、下記の画面に移動できれば、ここまでの作業は完了です。

1行もコードを書かずに、本格的なアプリケーションの土台が出来上がりました。

LaravelやVueは周辺のライブラリーが非常に充実しているので、とても効率的に開発が勧められます。

まとめ

お疲れ様でした。
長くなってしまうので、「準備編」は、これでおしまいです。

次回から、本格的に「カンバンボード」の制作に入りたいと思います。
よろしくお願いいたします。