    Route::get('/mypage', 'RoutinesController@mypage')->name('routines.mypage'); //マイページ表示
    Route::get('/routines/new', 'RoutinesController@new')->name('routines.new'); //新規作成画面表示
    Route::get('/routines/{id}/edit', 'RoutinesController@edit')->name('routines.edit'); //編集画面表示
    Route::get('/routines/{id}/prepare', 'RoutinesController@prepare')->name('routines.prepare'); //準備画面表示
    Route::get('/routines/{id}/proceed', 'RoutinesController@proceed')->name('routines.proceed'); //実行中画面表示
    Route::get('/routines/complete', 'RoutinesController@complete')->name('routines.complete'); //完了画面表示
    Route::get('/histories', 'HistoriesController@show')->name('histories.show'); //履歴表示

現時点ではログインしなくても画面が見られる状態です。
全てのviewが完成した段階でログイン認証をかけます。

これでアドレスを入力すると各画面のモックが表示できるように。

(Laravelプロジェクト作成からここまでの作業: 4時間)

ログイン関連機能の修正

ログイン機能はコマンド一発で実装できましたが
このままだとログイン後に表示されるページがhome.blade.phpのままです。

今回はマイページに遷移させたいので
RedirectIfAuthenticatedミドルウェアを変更します。

    public function handle($request, Closure $next, $guard = null)
    {
        if (Auth::guard($guard)->check()) {
            return redirect('/mypage'); //ここを変更
        }

        return $next($request);
    }

LoginControllerやRegisiterControllerを変えることでも対応出来るようです。


    protected function redirectTo()
    {
　　　　　//フラッシュメッセージ利用時はここに書く
        session()->flash('scc_message', __("Registered!")); 
        return '/mypage'; //ここに遷移先を入れる
    }

両方とも設定した場合はミドルウェアが優先されるようです。

layoutテンプレートを使ってBladeファイルを整理

現時点ではBladeファイルにそのまま画面モックを流し込んだ状態なので
ここから色々切り分けて見やすいコードに変えていきます。

Vue.jsを使うので全てをVueコンポーネントにして
Vue-routerで管理することも考えたのですが
今回は

layout/app.blade.php に全体のレイアウトを書く
headerとfooter、実行準備と実行中の画面はvueを使うので.vueファイルに書き出す
スマホ用フローティングメニューもvueコンポーネントに
その他はbladeファイルにそのまま書く

ということで、再利用しまくりのところとがっつりvueを使って
動きを付ける所だけvueコンポーネントを利用することに。
bladeのコンポーネントは使いませんでした。

BladeファイルからVueファイルにログイン状態を渡す

今回悩んだところその1。

ヘッダーメニューの内容をログインの有無で変更したかったのと
ログイン時にはユーザー名とメールアドレスを表示したかったので
bladeファイルからログイン状態を渡すことに。

まずview表示用のコントローラーはこんな感じに。

//ドメイントップ
Route::get('/', function () {
    if(Auth::check()){
        //ログインしている場合ユーザ情報を取得
        $user = Auth::user();
    }else{
        //未ログインの場合は空の連想配列
        $user = json_encode([""=>[]]);
    }
    return view('index', ['user' => $user]);
});

未ログインの場合に空の連想配列を渡しておかないと
エラーが出てしまいます。

ログインしていないと見られないページはこんな感じで書いてます。

    //マイページ表示
    public function mypage()
    {
        //ユーザ情報を取得
        $user = Auth::user();
        //自分のリストを取得
        $routines = Auth::user()->routines()->get();
        //ビュー表示
        return view('routines.mypage', ['user' => $user, 'routines' => $routines]);
    }

bladeファイル側のヘッダー部分はこんな感じ。
v-bind:を利用して情報を送ります。

  <header-component 
　　　　　　v-bind:authcheck="@auth true @endauth @guest false @endguest" 
　　　　　　v-bind:logout="'｛｛route('logout')｝｝'" 
　　　　　　v-bind:user="｛｛$user｝｝">
　　</header-component>

ログアウト用のルーティングも送ってあります。
これはvueファイル側で直接指定出来るんじゃないかな・・

これでheaderComponent.vueへ情報を送れましたので
受け取り側の設定をvueファイル側でします。

     export default {
        name: "HeaderComponent",
        data: function () {
            return {
　　　　　　　　　　//省略
            }
        },
        props: {
　　　　　　　//ここで情報を受け取る
            authcheck: Boolean, 
            logout: String,
            user: Object
        },
        computed: {},
        methods: {
            //省略
        }

後はv-ifを使って、authcheckの値次第で表示を変えるように
テンプレートを書けば完成。

        <nav>

       <!-- ログインしている場合 -->
            <ul class="nav-menu" v-if="this.authcheck">
                <li class="nav-menu__list"><p><i
                    class="fas fa-user nav-menu__icon"></i>user:
                    ｛｛this.user['name']｝｝ </p></li>
                <li class="nav-menu__list">||</li>
                <li class="nav-menu__list"><a href="/mypage">マイページ</a></li>
                <li class="nav-menu__list">|</li>
                <li class="nav-menu__list"><a href="/histories">履歴を見る</a></li>
                <li class="nav-menu__list">|</li>
                <li class="nav-menu__list" v-on:click="doLogout"><p>ログアウト</p>
                </li>
            </ul>

       <!-- ログインしていない場合 -->
            <ul class="nav-menu" v-else>
                <li class="nav-menu__list"><a href="/login">ログイン</a></li>
                <li class="nav-menu__list">|</li>
                <li class="nav-menu__list"><a href="/register">新規登録</a></li>
            </ul>

        </nav>

今回ログアウト時にaxiosを使っています。
ログアウトした後トップページへ遷移するように書いたのですが
最初そのまま書いたら

ログアウトは出来ているけど表示がログイン時のヘッダーのまま

という事態が発生。

どうやらログアウト処理後一定時間をおいてから遷移しないと
いけなかったようです。
ということでsetTimeoutを設定し、1秒後に遷移するようにしています。

   methods: {
            //ログアウト機能
            doLogout: function () {
                //axios使ってlogoutをpost送信
                axios.post(this.logout)
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                //ログアウト後トップページへ遷移
                //データ反映を待つので1000ms後
                setTimeout(function () {
                    window.location.href = '/'
                }, 1000)
                }
            }
        }

この
「axios使って非同期通信した後の処理は
setTimeout使って時間を置いてから発動させる」

パターンは、この後の処理で結構使いまくりました(*´ω｀*)

フラッシュメッセージ実装

今回悩んだところその2。

vueでコンポーネント化するかどうか悩んだ結果
今回はlayout/app.blade.phpに直接書き込んだ上で
vueを使って1.2秒後に消えるようにしてみました。

また成功時とエラー時で表示を変えたかったので
2パターンのフラッシュメッセージを作成しています。

    <!-- フラッシュメッセージここから -->
    @if (session('scc_message'))
        <div class="p-message__container p-message__container--success" v-bind:class="{'is-active': isActive}">
            <i class="fas fa-check-circle p-message__icon"></i>
            <div class="p-message__text">
                <p >｛{session('scc_message')}｝</p>
            </div>
        </div>
@endif
    @if (session('err_message'))
        <div class="p-message__container p-message__container--error" v-bind:class="{'is-active': isActive}">
            <i class="fas fa-exclamation-circle p-message__icon"></i>
            <div class="p-message__text">
                <p >｛{session('err_message')}｝</p>
            </div>
        </div>
@endif
<!-- フラッシュメッセージここまで -->

これをapp.jsで操作。
親のapp.jsに直接記入する形になり
保守性など考えるとvueコンポーネントにした方が良かったのかどうか
今でもちょっと悩んでいます。

data: {
        isActive: true
    },
    props: {},
    mounted: function () {
        this.isActive = true
        //マウント後1.2秒経ったらeraseMessageを呼ぶ
        setTimeout(this.eraseMessage, 1200)
    },
    methods: {
        //フラッシュメッセージを見えなくする
        eraseMessage: function(){
            this.isActive = false
        }
    }

最初、setTimeoutに直接メソッドを書いたら
「this.isActiveなんて無いがな！」と怒られましたw

そりゃそうだ、スコープ考えたらそこでは使えませんなww
てことで、methodに処理を書いたものを呼び出す形に。
分かれば単純なことですが、これに2時間くらいかかってます・・

(ログイン関連機能、リスト実行以外のviewとvue機能実装 : 9時間)

リスト関連機能

リストの新規登録・編集・削除及びマイページに自分のリスト表示。
この辺はウェブカツで習ったことがそのまま使えたので
割とすんなり実装できました。

(リスト関連機能実装: 3時間半)

タスク実行準備〜完了までの機能

今回一番の難関であり、機能実装までロジックが決まらなかった部分です。
実際のコードはgithubに上げた物を最後にリンクしてありますので
そちらを見て頂くとして
今回は機能を実装するまでの大まかな流れを書いてみようと。

プロの方々がどういう思考手順を取っているかは分かりませんが
自分の場合、何かしら機能を付けるときには

やりたいことを詳細に書き出す
それを実装するためにどういう処理をすれば良さそうか考える
(実装できるかどうかは置いといて)
考えた物を元にググりながらコードを紙に書いておく
実際にコードを書いて動くか答え合わせ

という手順を取ります。

今回の場合だとこんな感じ。

やりたいこと

実行準備画面で、タスクの順番をドラッグ&ドロップで入れ替える
実行準備画面で、タスクの順番をボタン一つでランダムに入れ替える
実行ボタンを押すと、タスクが入れ替えた順に実行中画面で一つずつ表示される
終わったボタンを押すと次のタスクが表示される
中断ボタンを押すと中断してマイページに
全てのタスクを終えて終わったボタンを押すと完了画面へ

考えた処理

実行準備画面で表示されるタスクはroutinesテーブルから引っ張ってくる
そこからタスク順だけを抜き出した配列データを作る
順番を入れ替えるとこのデータが連動するようにする
実行ボタンを押すと、タスクだけの配列データとroutinesテーブルから引っ張ってきたリストタイトルをPOSTで送り、historiesテーブルへ新規保存
この時一緒に開始時刻も保存し、実行中画面へ遷移する
実行中画面ではさっき保存したばかりのhistoriesテーブルのデータを使ってタスクを順番に表示
中断ボタンを押すと、終了時刻とcompletion:falseをさっきのhistoriesテーブルのデータに挿入(更新)後マイページへ遷移
全てのタスクを終えて終わったボタンを押すと、終了時刻とcompletion:trueをさっきのhistoriesテーブルのデータに挿入(更新)後完了ページへ遷移

結構細かく分けて書きます。
とにかく分解して一つの単位を小さくしていくと
案外簡単に処理を思いつくことが多いためです。

これを元にググったり本を見たりして
実際にどういうコードを書けば良いか調べていきます。

調べ物は本とスマホを使って横になって書いてるので
文字はいつも以上に乱雑ですww

時間的には5時間で実装とそれなりだったのですが
そこまでにググってる時間と参考にとひとりslackにメモった
アドレスの多さは結構なものでした。

診断テストを作ったときにも感じましたが
一見してこれ本当に出来るのか・・？と思うものも
内容を詳細に分解して把握するとすんなり実装できることが多いので
ぱっと見で出来ない！って諦めるのはもったいないなぁと。

そこで怯まずに冷静に分析していくのが大事ですね。
プログラミングに限らずの話だと思いますが。

・・と言うことを子供にも言うんだけど
中々分かっちゃくれないんだよなぁ(´・ω・`)

ドラッグ&ドロップでリスト順を並び替える

今回の悩みどころその3。

これはVue.Draggableを利用しました。

GitHub

SortableJS/Vue.Draggable

https://github.com/SortableJS/Vue.Draggable

Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating an account on GitHub.

で、これを使うところまでは良かったのですが
問題はどうやってこれで変えた順番をPOST送信で保存するの？の部分。

まずは準備画面表示時にvueコンポーネントへ
表示するリストのデータを渡します。

 <prepare-component v-bind:routine="｛{$routine}｝"></prepare-component>

データを受け取る側はこんな感じ。
createdフックを使い、受け取ったデータから
タスクだけが入った配列を作ります。

components: {
            draggable,
        },
        data: function () {
            return {
                tasks: [], //加工したタスクだけ入った配列入れ
            }
        },
 props: {
            routine: Object,
        },
        created: function () {
            //routinesテーブルからタスクのみの配列を作る
            for (let i = 0; i <= 9; i++) {
                let order = 'task' + i
                if (this.routine[order]) {
                    this.tasks.splice(i, 0, this.routine[order])
                } else {
                    //タスクがnullの時は配列に入れない
                    continue
                }
            }
        },

これをv-for使ってリストで表示。
ドラッグ&ドロップ出来る様に<draggable>タグで囲むのですが
この時にタグに v-moder=”tasks” と
先ほどの配列とデータが双方向で連動するようにしておきます。

<!-- リストスタート -->
                <ul class="p-prepare__list">

                    <draggable v-model="tasks">
                        <transition-group name="prepare">
                            <li class="p-prepare__list__item"
                                v-for="item in tasks"
                                v-bind:key="item">
                                ｛{item}｝
                            </li>
                        </transition-group>
                    </draggable>

                </ul>

これで順番が変わるとdata側のタスクの並びも変わるので
後はそれをaxios使ってPOST送信してあげればok。

このv-model使えばいける！にたどり着くまでにかなり時間がかかりました。
今回一番のアハ体験はここだと思うw

(タスク実行関連機能実装: 5時間)