はじめまして、夏より冬派、びーさんです。

なんだか最近「○○がWEBアプリ作ってみた」みたいな記事をよく見かけるような気がして、
自然に自分でも作ってみたいと思い始めた今日この頃。

しかし、WEBの知識が全くない！！

だからこそやりがいがある!!

というわけで自己満で終わる可能性大なのですが、まったりとやっていきたいと思います。

開発準備

開発言語を何にしようか調べているうちに、Laravel + Vueで開発しようと決意しました。

選定理由は、

フロントエンド・バックエンドどちらも一通りやってみたかった
LaravelはデフォルトでVueを使えるようだった
学習コストが低い（本当かどうかは今でも疑心暗鬼）

以下を参考にLaravelの環境を準備しました。

導入手順を解説！Laravelのインストール方法【初心者向け】

こうして出来上がった環境がこちらです。

Windows
PHP 7.2.10
Composer 1.7.2
SQLite 3.23.1
Git 2.11.0
Visual Studio Code (vscode)

個人的にvscodeのデフォルトターミナル(powershell)が使いにくかったので、GitBashに変更しています。

画面左下の歯車アイコン > 設定
「terminal.integrated.shell.windows」で設定の検索
ヒットした設定の値をGitBashのexeに置き換える ※

※ Git for Windows のデフォルトだと「C:\Program Files\Git\bin\bash.exe」に配備されていると思います。

プロジェクトの作成

さて、いよいよプロジェクトを作成します。

とりあえず何も考えずに上記の参考サイトに書いてある通りにコマンドを打ちます。

$composer create-project laravel/laravel --prefer-dist myapp

しばらくするとmyappというプロジェクトのフォルダが作成されます。

これまた何も考えずに以下のコマンドを打ちます。

$cd myapp
$php artisan serve

すると次のような結果が返ってきます。

Laravel development server started: <http://127.0.0.1:8000>

出力されているURLにアクセスしてみると、

おお！それっぽい画面が出てきた！（小並感）

できたプロジェクトフォルダの中身をみてもよくわからない…、ので以下を参考にさせていただきました。

Laravelのディレクトリ構造について学ぶ

これでも読むだけではまったくイメージがつかめないので、後々学びながら理解していくことにします。

ここで確認しておきたいのは、何を表示しているかです。
どうやら、「myapp/resources/views/welcome.blade.php」を表示しているみたいです。

myapp/resources/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>
                        <a href="{{ route('register') }}">Register</a>
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Laravel
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

ではどうやって表示しているかですが、答えは「myapp/routes/web.php」にありました。

myapp/routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

「http://127.0.0.1:8000/ にアクセスしたらviewsフォルダの中のwelcome.blade.phpを表示する」という処理だそうです。

bladeやルーティングについても今後しっかり理解しないといけないようですね。

SQLiteの設定

データベースについては今のところこだわりはないので、簡単に利用できそうなSQLiteを使用します。

SQLiteのインストールは以下を参考にしました。

Windows で SQLite 3.23.1 のインストール

以下の変更を加え、SQLiteの設定を行っていきます。

「myapp/database」に、「database.sqlite」というファイルを作成

以下のコマンドでも作成できます。

$touch database/database.sqlite

[myapp/config/database.php] を編集

myapp/config/database.php

'default' => env('DB_CONNECTION', 'sqlite'),    //16行目 mysql ⇒ sqlite

'sqlite' => [ //36行目 ここに設定が書かれている（変更不要）
    'driver' => 'sqlite',
    'database' => env('DB_DATABASE', database_path('database.sqlite')),
    'prefix' => '',
],

[myapp/.env] を編集 (9行目～)

myapp/.env

DB_CONNECTION=sqlite                    #mysql ⇒ sqlite
#DB_HOST=127.0.0.1                      #コメントアウト
#DB_PORT=3306                           #コメントアウト
DB_DATABASE=database/database.sqlite    #homestead ⇒ database/database.sqlite
#DB_USERNAME=homestead                  #コメントアウト
#DB_PASSWORD=secret                     #コメントアウト

sqliteドライバの有効化

phpのフォルダにあるphp.iniファイルを編集します。

php.ini

extension=pdo_sqlite    ;セミコロンを削除

これで設定は完了のようなので以下のコマンドで動作確認をしてみます。

$php artisan migrate

以下のような結果が返ってきたらOKのようです。

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

ここで使用したマイグレーションは、データベースのバージョン管理機能のようです。
Laravelではプロジェクトを作成するとデフォルトで「users」と「password_resets」のマイグレーションが用意されているようで、上記のコマンドでsqliteにふたつのテーブルが作成されるようです。

本当にSQLiteに反映されているのか、以下で確認してみます。

$sqlite3 database/database.sqlite
sqlite> .tables
migrations      password_resets  users
sqlite> .exit

.tablesによってテーブル一覧を表示してみると、「migrations」,「password_resets」,「users」3つのテーブルが作成されていることがわかります。

マイグレーションについても詳しくは後々学んでいきたいと思います。

Vueの設定

Vueの設定といっても、Laravelではデフォルトで利用できるようになっているため特にすることはないようですね。

プロジェクト作成時に「ExampleComponent.vue」というVueファイルが作成されているので、これを表示してみたいと思います。

app.js の確認

myapp/resources/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

既に「ExampleComponent.vue」は読み込まれているようです。
利用する場合は「example-component」というタグとして指定すれば良いみたいです。

welcome.blade.phpの編集

次のように「welcom.blade.php」を編集します。

myapp/resources/views/welcome.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link href="css/app.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component />
        </div>
        <script src="js/app.js"></script>
    </body>
</html>

ブラウザで確認して、次のようなに表示されればOKのようです。

しかし、ブラウザコンソールで確認してみると次のようなエラーが表示されています。

CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token

直訳しても「CSRFトークンがない」ことがわかるので明示的に追加しないといけないようですね。
（CSRFってなんだってなってましたが…。）

headタグ部分に以下のmetaタグを追加すれば解消されました。

<meta name="csrf-token" content="{{ csrf_token() }}">

これでVueも使えるようになりました。

さてさて

これで一通り開発できそうな感じはしてきました。

とりあえず以下の書籍を購入したのでまったりゆっくりと学んでいこうかなと思います。

Web,Laravel,Vue,その他関連情報について、おススメの書籍、サイトなどありましたら教えていただけると幸いです。

知識ゼロからでもWEBアプリケーションを作ってみたい！！【Laravel + Vue】

開発準備

プロジェクトの作成

SQLiteの設定

Vueの設定

さてさて