【感想】trello風todoタスク管理アプリを作成しよう!【アレンジ計画中】

はじめに

今回、私が学習した教材はtrello風todoタスク管理アプリを作成しよう!です。

完成版サンプル

動機

今回こちらの教材でアレンジを検討中なので再チャレンジ。

感想

環境

教材

cloud9,MySQL,Laravel5.5

LaravelでInstagram風簡易SNSアプリを作成しよう!も同じ著者&環境

私の環境

XAMPP,MySQL,Laravel6.8,PHP7.3

※5.5でエラー、勉強も兼ねて6.8で制作。

※最終的に原因はLaravelではなくPHP自体のバージョンだったことが判明。7.4⇒7.3にダウングレードで解決。

良かった点

・小規模ではあるがリスト機能、カード機能共にしっかりとCRUD機能まで実装することができる。

・必要最低限のミニマムアプリ。

上記の理由よりアレンジしやすいと判断。

印象的だった点

・Laravelのバージョンが5だと6に比べ認証機能が簡単に作れる。

php artisan make:auth

アレンジしたいところ

個人的にアレンジしたいなと思ったポイントです。

・バリデーションをフォームリクエスト側で処理する実装

・Vue.jsの実装(完了/保留/作業中のボタン)

・画像投稿機能

メモ

不要なファイル削除と認証周りの整理

・Authディレクトリ下のControllerのRedirect変更

デフォルトを全て以下のように変更

- protected $redirectTo = RouteServiceProvider::HOME;
+ protected $redirectTo = "/";

・views/index.blade.phpとhome.blade.phpの削除

・web.phpの編集

- Route::get('/home', 'HomeController@index')->name('home');

躓いたところ

①サイトトップへアクセスできなくなる現象

解決策:XAMPPのPHPバージョンを7.4から7.3に変更。(再インストール)

Laravel5.5&6.8両方でエラー確認。

Trying to access array offset on value of type null(null型の値の配列オフセットにアクセスしようとしています)がリスト機能を追加した部分から出るように。

Laravel5.5

Laravel6.8

調べたところPHP7.4ではnull関連でエラーが多発するっぽい。

【参考】

Trying to access array offset on value of type null

【Laravel5.8】PHP7.4でTrying to access array offset on valueが山盛り出るようになった

②composer require laravel/uiを実行したところエラー

解決策:下記のコマンドでバージョンを指定することでLaravelのバージョンと整合を保ってインストール。

composer require laravel/ui "1.x" --dev

エラー内容詳細:Your requirements could not be resolved to an installable set of packages.(要件をインストール可能なパッケージのセットに解決できませんでした。)

③npm installとnpm run devできない

解決策①:npm installに関してはVSCodeではなくGitから試したところ解消。

解決策②:npm run devに関してはsassのバージョンを変更することで解消。

$ npm uninstall --save-dev sass-loader
$ npm install --save-dev sass-loader@7.1.0

※以下を参考にnpm install webpackをやったのも関係あり??

参考:laravelでnpm run devを実行すると「cross-env: not found」というエラーが出る件対応したった

活用ライブラリ・機能など

CSS

Sass(Composerでインストール),Bootstrap(CDN ver.),Font Awesome(CDN ver.)

その他

Font Awesome(CDN)

おわりに

curlコマンドがWindowsだと使えないので、指定されたURLから手動でコピペしながらファイル作ったのはむなしかった。

また今回はSourceTree&GitHubを活用しながら制作の記録を残していく予定です。

ソースコード

参考

コメントを残す