目次
教材のご紹介
今回、私が学習した教材はLaravel(+Vue.js)でSNS風Webサービスを作ろう！です。
★参考までに今までのTechpit歴
・Techpitの学び放題会員2か月
・(残念ながら)学び放題に入っていない教材5個くらい単発購入(してやられた)
ちなみにRails、Laravel、Python、Vue.jsなど含め、Techpit教材はかなり漁ってきました。その中でもかなりおすすめの教材です。
初学者がポートフォリオ作成で躓く(私含め)であろうミドルウェア、リクエスト、認可、ポリシー、さらにはフロンドエンドフレームワーク(Vue.js)との連携まで、実際にアプリを作りながら体験できます。
(他にもLaravelに関しては、AWSを用いた教材やVue.jsのSPAまで実装できる教材もあるので、そちらもおすすめです。(回し者ではありません。))
教材通り、herokuでデプロイも完了しております。参考までに。
http://laravel-vue-sns.herokuapp.com/
動機
Laravel+Vue.jsのポートフォリオ制作をしたい！の一言に尽きます。
※3/20に1周目。4/10に2周目実施。
感想
はじめに(環境について)
教材では、Mac&Laradock(PostgreSQL)を用いた開発になりますが、私はWindows&XAMPP(MySQL⇒PostgreSQL)に置き換えて挑戦しました。
追記：1周目の後、Dockerの環境構築のためにPostgreSQLをアンインストール。再度MySQLで挑戦したらマイグレーションできました。
環境を置き換えてできなかったこと
・Mailhogの実装。(教材ではDocker環境で説明。XAMPPは調べたけど難しめだったので未挑戦。)
・PostgreSQLからMySQLへの置き換えとXAMPP&PostgreSQLでの環境構築は別の記事にまとめています。
良かった点
・XAMPP環境にPostgreSQLを紐づける方法を理解できたので、herokuも今後は積極的に利用していこうかなと思いました。
(※herokuはPostgreSQLを推奨。かつFTPでデプロイするのは時間がかかりすぎるので。。。)
・冒頭で記載の通り幅広く且つ深く学習することができる。(2周目でだいぶ深堀りしました。)
・Googleアカウントによるユーザー登録機能の実装ができる。
・VueからLaravelへの非同期通信を学べた。
その他の学び
・Laravelではパスワード再設定など認証系は一通り既にルーティングされている。
・Vue.jsのディレクトリで作成していたapp.jsはLaravel Mixによるトランスパイル(ソースコードからソースコードへのコンパイル)後、ファイルがpublic/js/app.jsになる。
また、npm run watchでLaravel Mixによるトランスパイルが行われる。blade側ではこのpublicディレクトリのjsファイルをmix関数(常に最新の状態にする)を用いて読み込ませる。
・MDBootStrapを使うことで簡単にアニメーションが実装できる。
Vue+Laravelでの非同期通信まとめ
※ざっくり自分用にまとめています。
当教材では、api.phpを使わずに連携しています。
また、同じくLaravel+Vue.jsの教材である【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！とはアプローチ方法がかなり異なっています。
Laravel(+Vue.js)でSNS風Webサービスを作ろう！ Blade側でメインとなるビューを生成し、＋αでVue.jsを活用している。
【Laravel x Vue.js】SPAクイズアプリケーションを作ってみよう！ Vue.js側でメインのビューを生成。Blade側は、DB処理などサーバー側の処理メインに留める。
Laravel to Vue
・いいねに伴うハートの色付け
blade側のVueコンポーネント読込用タグに@jsonで値としてVue側に渡す。propsで受け取り。
その後dataオプションに代入。true/falseでバインドされているクラスにいいねの色を付けるか判断。
・いいね数のカウント
Laravelコントローラでアクションメソッド作成。モデルから数をカウント。@jsonで値を渡す。
ハートの色付けと同じくblade側のVueコンポーネント読込部分でv-bind、データを渡してる。
・タグ入力
フォームタグを利用。
フォームリクエストでバリデーション&正規表現。json_decodeで受け取り、Blade側でビューを生成。
Vue to Laravel
・いいねする/取り消す(POST送信/axios)
①web.phpでルーティング追加。
②コントローラに専用のアクションメソッドを追加する。
③Vueコンポーネント側にリクエスト先のURLを記載。
④@clickでメソッド実行。async/awaitを用いつつ三項演算子でtrue/false切替。
活用ライブラリ・機能など
CSS
・MDBootstrap
CDNリンク欄 CDNで活用できるのがいいところ。アイコンリスト
・Vue Tags Input
Laravel
formatメソッド(Carbonで使える)、Remember me(ログイン維持)、認証メッセージの日本語化、リソースコントローラ
その他
Sendgrid(メール機能/API)、Googleログイン(API)
おわりに
今後のアレンジ検討案
①ユーザーページのいいねボタンと記事一覧もVueで切り替える実装
②Twitterログイン
Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ ※2019年8月時点の情報
2周目
Twitter上ではこのアプリをアレンジされている方もいるので僕も理解を深めたら挑戦したい。
また、この教材で触れられていることを深堀したら、長文になってしまったので記事をわけました。笑
1周目
今回のMailhogの実装失敗などを踏まえ、Laradockでのアプリ制作ができたほうが良いなと痛感しました。
また、この教材を参考にしながらVue.jsまで連携させたポートフォリオ制作に挑戦していこうと思います。
引き続き頑張ります✌
追記：MailHogは別アプリですが実装しました。
コメントを残す