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

プログラミング
公開日:2018年11月6日

制作:monomode inc.

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

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

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

フレームワークとは?

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

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

 

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

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

2.スポンジケーキミックスをつかってつくる=フレームワーク

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

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

 

フレームワークの種類

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

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

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

 

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

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

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

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

 

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

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

 

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

 

今回は、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.必要な環境をインストール

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

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

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

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

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

1文目:ユーザーディレクトリに入って、
2文目:Homesteadリポジトリをクローン、
3文目:今つくったHomesteadディレクトリに入って、
4文目:初期化(WindowsではGitBash使う前提)

すると、Homesteadディレクトリの中に「Homestead.yamlファイルができているので、それを編集します。今回は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ファイルを編集します。

3.Vagrantの実行

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

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

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

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

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

5.DBとの紐づけも設定

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

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

 

まとめ

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

The following two tabs change content below.
トゥイスク 美雪

トゥイスク 美雪

フロントエンジニアのトゥイスクです。 名前の割に生粋の日本人です。 日々美味しい担々麺屋を探しています。

monomodeのウェブサイトをご覧いただき有難うございます。広報担当モノモです。 更新情報をfacebook、もしくはtwitterから配信しています。

    SNSアカウント

  • feedly

ご相談・お問合せはこちら

ページトップへ戻る