【Techpit】Laravelを利用したWebアプリ制作を学べる教材まとめ

はじめに

あらゆる教材に手を出すと、結局この教材はどういうことが学べるんだっけ??と失念しがちなので自分用に作ってみました。

※随時更新予定※

Techpitの教材編

Laravel(+Vue.js)でSNS風Webサービスを作ろう!

ページリンク
https://www.techpit.jp/p/laravel-vue-sns

完成見本サンプル(※私がデプロイしたもの。Mail機能のみ未実装。)
http://laravel-vue-sns.herokuapp.com/

開発環境

Mac,Docker(Laradock)

PHP 7.3、Node.js 10、Vue.js 2.6.11、Laravel 6.8、PostgreSQL 11.6

~Dockerを利用するメリット~

Webサーバーやデータベース本体やその設定内容をファイル化できるという点が挙げられます。

そのようなファイルをほかの人に配布することで、誰でも同じ環境を構築できます。

本教材では、そうしたDocker用に作られたファイルを利用して開発環境を作ります。

活用ライブラリ

MDBootStrap、Vue Tags Input

学べる内容

初学者がポートフォリオ作成で躓く(私含め)であろうミドルウェア、リクエスト、認可、ポリシー、さらにはフロンドエンドフレームワーク(Vue.js)との連携まで、実際にアプリを作りながら体験できる。

以下、以前書いた感想記事。

【感想】Laravel(+Vue.js)でSNS風Webサービスを作ろう!を終えて

 

進め方

2章・3章:ログイン機能

4章:記事投稿機能
4-3 authミドルウェア 4-4 フォームリクエストの作成 4-5 依存性の注入(DI)、fillableの利用

5章:記事更新・削除機能
5-2 null演算子 5-5 認可(ポリシーの作成)によるユーザー権限の考慮

6章:パスワード再設定メール(MailHogでのテストメール/Sendgridでの本番メール)

7章:いいね機能(VueコンポーネントをBladeに組み込み)
7-5 @json 7-7 いいね機能のアクションメソッド追加(web.php)

8章:タグ機能
8-6 フォームリクエストのバリデーション(鬼門)

9章:フォロー&ユーザーページ機能

10章:Googleアカウントを使ったログイン機能

11章:デバッグバーの活用(SQLの改善)

12章:Herokuへデプロイ

所感

このチュートリアルで連携するVue.jsに関しては、Vue Routerなどの公式ライブラリを活用しない。

また、blade側に@jsonディレクティブを記載してデータ転送(サーバー上にあげる。Vueで取り出し。)しているのが印象的。

SPA開発ではないのでVueで非同期のデータ受け渡し&装飾をしている感じ。(フォローボタン・いいね機能)

URLの遷移がある部分は全てLaravel側で構築している。

内容自体かなり濃いので、Laravel、Vue.js共にある程度わかっていないと理解が難しいが、とても勉強になる。

SPA開発まではいかずともLaravelとVue.jsを連携させたい!といった方にはとてもおすすめ!!

Googleアカウントでログイン機能を実装することで、アプリ運用に伴うセキュリティ面のハードルが少し下がる。

どこからどこまでBladeで作ってVue側で補うか、境目の判断が難しい。。。

ちょっと動的なコンテンツを入れるだけならならjQueryを活用するのもアリ??

【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう!

ページリンク
https://www.techpit.jp/p/laravel-vue-quiz

完成見本サンプル
https://laravel-vue-quiz.herokuapp.com/

開発環境

Mac,Homebrew

PHP 7.3、Node.js 10、Vue.js 2.6.10、Laravel 6.8、SQLite

活用ライブラリ

Chart.js,Axios(API※非同期でのサーバーアクセス※をより使いやすくしたもの),Laravel-Admin

学べる内容

サーバーサイドにLaravel、フロントサイド(表示部分)は、Vueで作成。

メインとなるビューはトップ(“/”)と(“/quiz”)クイズの2画面。

Vue Router(ルーティング制御ができる公式プラグイン)でSPA化(“/”と”/quiz”ページの遷移がリロードせずにできる)。

進め方

3章:Laravelプロジェクトとは別のディレクトリでVue.jsのプロジェクトを作成。

4章:LaravelディレクトリとVueディレクトリをがっちゃんこ。index.blade.phpでvueを読み込み。

5章:Vou Router(router.js)の導入でSPA化

6章:API連携の実装(api.phpの編集)。Laravel側で取得したDB情報 をVue(フロントサイド)からAPIで読み込む。

7章・8章:ログイン、ユーザー登録もVue側でビューを作成。

9章:ランキング機能、キーワード画面の実装 ※いずれもAPIを使う

10章:ブラッシュアップ

11章:Laravel-Adminの導入

12章:Herokuへデプロイ

所感

LaravelにVueを組み込むにしてもどこまで組み込むのかで難易度が大きく変わることに気付けた。

例えばいいねボタンの実装とかであれば簡単だが、SPA化するとなるとAxiosやVue Routerなどの知識も必要になる。

また、Laravel-adminが使いこなせればWordPressを使用することなくブログ運営なんかもできるなと感じた。(同じようなものだと他にはVoyagerなどがあるみたい。これを駆使したチュートリアルが見つからなかったのは残念。)

Laravel6とAWSで作るブックレビューサイト

ページリンク
https://www.techpit.jp/p/laravel6-aws

完成見本サンプル
https://laravel-vue-quiz.herokuapp.com/

開発環境

AWS,cloud9(win,mac共通)

PHP 7.3、Node.js 10、MySQL5.7、Laravel 6(Sassは使わない)

学べる内容

AWSでのアプリ開発

画像投稿機能(シンボリックリンク)

GitHubリポジトリの作成~cloud9からの独自ドメインへのデプロイ

EC2インスタンスの立ち上げ、TeraTermでのSSH接続

所感

最初に作ったポートフォリオはこちらの教材を参考にした。

削除・編集機能までは実装しないのが残念だが、AWSの活用を学べるのはありがたい。

最後にカスタマイズ提案があり、いいね機能やコメント機能など。

こちらはまだ未実装なので試してみてもいいかもしれない。

無料でできるチュートリアル

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう

ページリンク
https://www.hypertextcandy.com/vue-laravel-tutorial-introduction/

開発環境

Mac,Docker(Laradockを用いていない!!)

PHP 7.4、Node.js 10、Vue.js 2.6、Laravel 6、PostgreSQL、AWS S3(写真保存)

学べる内容

フロントエンドに Vue.js + Vue Router + Vuex 、サーバーサイドに Laravel を使用したSPAアプリ開発。

進め方

3章:Laravelプロジェクト作成。Laravel Mixでフロントをビルド。Vue Routerを導入。

4章:api.phpを編集してサーバーサイドのAPIを実装。(会員登録,ログイン,ログアウト)

6章・7章:状態管理ライブラリVuexの導入。ユーザー認証データなどコンポーネントをまたいで参照したいデータを入れておけるストアの実装。

10章:写真投稿フォーム Vue.jsで投稿機能を実装。

11章:JSONへの変換。

16章:Herokuへのデプロイ&カスタマイズ提案

所感

無料のチュートリアルとしては断トツで深いところまで学べる。

Laradockを使わずともDockerでLaravelは使えることにも気づいたので挑戦してみたい。

データの受け渡しやいいねなどあらゆる機能をVue.jsで実装。

教本含め、ここまで複雑なアプリ開発ができるチュートリアルを見たことがない。

もっとこういうチュートリアルが増えてほしい!!

おわりに

1つの教材ですべてを網羅することはできないので、いろんなチュートリアルをこなしながらスキルアップを目指したい。

コメントを残す