LaravelとVue.jsでtodoっぽいwebアプリをつくってみる【その１：概要説明～Laravelインストールまで】

こんにちは。チャリスクです。大変ご無沙汰しております。

最近、PHPフレームワークのLaravelというものを使いだしまして、結構便利そうと思ったので、今回はそのLaravelについて紹介したいと思います。

フレームワークとは？

プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである（Wikipediaより）

と書いてましたが、ざっくり言うと、「フルスクラッチでアプリをつくるよりだいぶ楽に、安全なプログラムを書ける機能が備わっているモノ」という感じです。

 

例えば、ケーキをつくるとして、

１．薄力粉とか自分でちゃんと配分してイチからスポンジもつくる＝フルスクラッチ

２．スポンジケーキミックスをつかってつくる＝フレームワーク

３．既に出来ているスポンジを買ってきて中身とかデコレーションだけ自分仕様にする＝CMS

というイメージです。この例えがうまいかはわかりません。

 

フレームワークの種類

フレームワークはたくさんありますが、PHPのフレームワークだと、2018年現在、有名どころはCakePHP、Laravel、FuelPHP、Symfonyでしょうか。

日本では、割と昔からあるCakePHPのシェアが一番高いようで、案件数、技術者数も多いようです。

しかし、「やっぱこれからはLaravelでしょ」的風潮を感じ、私自身はLaravelを学ぶことにしました。

 

フレームワークで何がつくれる？？

基本なんでもイケる。のですが、ベタなもので言えば、CRUDをつかうシステムが異常に簡単につくれます。

CRUDとは、「作って、表示して、編集して、削除して」という機能のこと。

例えばブログみたいな機能を自分で作ることができるのです。

 

ブログ以外にも、予約サイトとか、アルバムとか、todoリストとか、とにかくCRUDでデータベースの情報を更新するものであれば、なんでも作れるのです。

ちなみに、私はmonomode内のお菓子屋「マルカイ商店」の簡易的な会計アプリをつくりました。

 

これも、たぶんフレームワークなしだと３週間くらいかかりそうなところを、Laravel先輩のおかげで２日くらいで基本機能を実装できました。

 

今回は、todoリスト的なものをつくります

ということで、本題のLaravelの紹介です。実際作ったほうがよいかと思いまして、何かしらつくろうと思います。

ただし、私も勉強中の身なので、変なことを言っていたり、コードがイケてない可能性もありますので、そちらはご了承ください。

 

（コードはgithubか何かに上げる予定なので、、、、やばかったらご指摘、あわよくばプルリクエストしてもらえるとありがたいです。）

 

環境、ツールなど

以下のものを使います。コマンドなどすべてその仕様となりますので、ご注意ください！

・Windows

・Git Bash

・Vagrant、VirtualBox

・Laravel Homestead（あとで説明します）

仕様

・やること（テキスト）の追加、編集、削除、リストの並べ替え

・↑をすべて非同期通信でSPA的にする

・ユーザーアカウントを作成、ユーザーごとに内容を表示する

ひとまずLaravelの開発環境をつくります

Laravelの開発環境には「Laravel Homestead」という、Vagrantのボックスが用意されています。ものすごく簡単に開発環境がつくれますし、現在公式ドキュメントでもこちらが推奨されていますので、今回もこちらで構築することにします。

公式ドキュメント（日本語）https://readouble.com/laravel/5.7/ja/homestead.html

 

1.必要な環境をインストール

まずは、VagrantとVirtualboxをインストールします。すでに入っている方はそのままでいいですが、バージョンが推奨環境になっているか確認することをおすすめします。

2.ドキュメントどおりに、Homesteadセットアップ

まず、VagrantのBoxを追加します。

vagrant box add laravel/homestead

次に、Homesteadインストールのための、環境設定configファイル的なものを作ります。homesteadは、Dockerのように、プロジェクトごとに別のBoxという考えではなく、「すべてのプロジェクトを一つのhomestead boxに入れる」という感覚です。どこか適当な場所にvagrant upするディレクトリを作りましょう。
私は、ユーザーの直下にHomesteadの管理用フォルダを入れています。

例えば、ユーザー直下にする場合は

cd ユーザーディレクトリ
git clone https://github.com/laravel/homestead.git ~/Homestead
cd Homestead
bash init.sh

１文目：ユーザーディレクトリに入って、
２文目：Homesteadリポジトリをクローン、
３文目：今つくったHomesteadディレクトリに入って、
４文目：初期化（WindowsではGitBash使う前提）

すると、Homesteadディレクトリの中に「Homestead.yaml」ファイルができているので、それを編集します。今回はTODO用に編集しました。

 

provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

# ①ソース参照場所の設定
folders:
    - map: ~/Laravel Sites
      to: /home/vagrant/code/Laravel Sites/

# ②サイトの参照URLの設定
sites:
    #ToDoList
    - map: todo.test
      to: /home/vagrant/code/Laravel Sites/todo/public/
# ③DBの設定
databases:
    - todo

ちなみに、SSHの鍵も予めつくっておきます。こちらもGit Bashでやるのがおすすめ。（参考：https://qiita.com/reflet/items/5c6ba6e29fe8436c3185）

初期状態でも、他の情報が入っているかもしれませんが、今回設定するのは、①～③です。

①ソース参照場所の設定

map：ローカルマシン上のソースの参照場所（実際に自分がコードを置くところ）
to：Vagrantのソース参照場所（マッピングする場所）

②サイトの参照URLの設定

sitesの設定では、参照したいurlと公開フォルダのマッピングを行います。
map：URL（なんでも良いけど、.testとかわかりやすく、絶対に既存サイトとかぶらないものが良い）
to：Vagrant上のパブリックフォルダ

③DBの設定

データベースの名前を書くことで追加できます。

次に、Hostsファイルを設定します。
Windowsの場合は、メモ帳を「管理者権限で実行」して、C:\Windows\System32\drivers\etcのhostsファイルを編集します。

#192.168.10.10 todo.test

3.Vagrantの実行

設定が終了したので、Homestead.yamlがあるフォルダに入って、

vagrant up

して、仮想サーバーを動かします。
先ほどのtodo.testを見てみると、「ファイルがありません」的な表示になっているはずです。

4.Laravel インストーラーのダウンロード、プロジェクトのインストール

あとは、Composerという魔法のようなパッケージ管理ソフトでインストーラをインストールして、プロジェクトを作るだけ！

//vagrant でssh接続して
vagrant ssh
//LaravelのインストーラをComposerでダウンロード
composer global require "laravel/installer"
//Laravelプロジェクトをインストールしたいディレクトリ（Homestead.yamlのマッピング先）に移動
cd code/Laravel Sites/
//Laravelプロジェクト「todo」をインストール
laravel new todo

そして、ブラウザで先ほど設定したtodo.testを開いて、以下の画面が出ればインストールは無事完了です。

5.DBとの紐づけも設定

インストールされたプロジェクトのルートの、「.env」ファイルでDBの設定をします。

今回は、「todo」というDBを作ったので、「DB_DATABASE=todo」とします。

 

まとめ

今回は、インストールだけでだいぶかかってしまいました。次回以降は、②DBの構造を考えて、実際にLaravelで更新機能を作る③Vueで非同期処理とかの設定くらいで３回にまとめようと思います。