2020/10/9 追記 Laravel 6.x にアップデート済です。
2019/11/25追記 Laravel 5.5 -> 5.8 にアップデートしました。
以前『techpit』というプログラミング学習サイトよりお声がけをいただいておりまして。
この投稿から約3ヶ月。
ようやく【Laravel】初心者向けマッチングアプリのつくり方 がリリースできました。
【Laravel】Tinder風マッチングアプリを作ってみよう！
この記事では、【Laravel(PHP)】初心者向けアプリについてまとめてみることにします。
2020/2/19追記
がとうございますm(_ _)m
2020/2/14追記
『PHP/Laravel』初心者向け動画もリリースしたのでこちらもぜひチェックくださいませ。
【Laravel(PHP)】初心者向けアプリのつくり方 をつくったきっかけ
きっかけはツイッターでした。
2019年4月中旬頃、『techpit』の中の人よりお声がけいただいて。
的なオファーをいただいて。
数日後『Zoom』を使ってテレビ会議して、
- 日本の教育全般
- エンジニア向け教材
などのお話をさせていただきまして。
さて、いざ何を作ろうかと話していた時に、
『Tinder風マッチングアプリ』が『RubyOnRails』向けはあるけれど、
『Laravel』向けがないのでどうでしょうかとなり、
お手本もあるならつくりやすいかなと受託したのでした。
【Laravel(PHP)】初心者向けアプリで苦労した事
『RubyOnRails』でつくられたお手本アプリがあったとはいえ、
いざ『Laravel』に移植しようとするもなかなかうまくいかず。
マニュアルで解説があるにはあるものの、
と思う箇所がちらほらあり、
せっかく自分がつくるんだからとほぼ全ての文章を一から書き直し、
もちろん『Ruby』コードも全て『PHP』に変換し、
使っている『jQuery』も調整し、
できるだけ解説を加えたのでした。
『techpit』の中の人からも細かく調整・指摘をいただいて、
専門用語もりもりな一般的な技術系文章と比べれば、
だいぶ読みやすくなっているんじゃないかと思います。
【Laravel(PHP)】初心者向けアプリでできる事
今回の教材は『Tinder』というマッチングアプリを真似ています。
画面構成はこんな感じです。
できることは以下。
- Laravel5.8を使った実践的な開発スキル(MVC)
- Laravel初期設定(タイムゾーン、文字コード設定、日本語化)
- composerを使ったインストール方法
- http通信の解説・設定($get/$post/$request)
- データベース設計・マイグレーション
- Eloquent/クエリビルダ/コレクションの解説・コマンド
- リレーション設定(1対多、多対多)
- 初心者向けのXAMPP/MAMPを使った開発
- Laravel Auth を使ったサインアップ・サインイン機能(生成されるファイル郡の説明)
- Bootstrap4の設定方法(レスポンシブ対応)
- Node.js(npm)インストール・設定方法
- ユーザー登録・編集機能
- 画像アップロード機能
- Intervention Imageを使った画像リサイズ機能
- フォームリクエストを使ったバリデーション機能
- jQueryを使いスワイプ時の動作(ライブラリ使用)(Ajax)
- mysqlとの連携(phpMyAdminも利用)
- シーダーを使ったダミーデータ登録
- tinkerを使ったテストユーザー登録
- デバッグの方法(debugbar, var_dump, ddなど)
- ログ出力の設定方法（Log::Debug)
- Laravel Echo / Pusher を使ったチャット機能の開発(websocket)
- コツ：サービスの分離(ファットコントローラを避けるために)
- コツ：ルーティングのグループ化
- ★とにかくめちゃくちゃ丁寧に解説しています★
- 質問しっかり回答します！
特に大変だったのは『Laravel Echo』で、
実装するとこんな動作になります。
techpit向け教材、最後の砦のチャット機能ようやく実装。把握するまで3日かかった、、けど達成感たっぷり。とにかく丁寧に解説つくってまいります。 pic.twitter.com/Rb8LVkFHk2
— 世界のアオキ🥑プログラミングをもっと身近に (@aoki_monpro) 2019年6月2日
techpit向け教材、最後の砦のチャット機能ようやく実装。把握するまで3日かかった、、けど達成感たっぷり。とにかく丁寧に解説つくってまいります。
あとは『MVC』とはなんぞやから、
データベースの『リレーション』設計から、
非同期通信の『Ajax』や『websocket』まで、
とにかくわかりやすさ重視でもりもり文章書いているので、
という方にはピッタリの教材じゃないかと自負しております。
教材内で問い合わせの機能もありますので、
という場合でも遠慮なく聞いてもらえればと思います。
【Laravel】Tinder風マッチングアプリを作ってみよう！
【Laravel(PHP)】初心者向けアプリでやらない事
『Laravel』初心者向けにつくった教材なので、
下記は説明していません。
- HTML/CSS解説
- Sassの細かい解説
- テスト全般
- DI/サービスプロバイダー等の解説
- レンタルサーバーへのアップロード方法
HTML/CSSは、なんとなく意味がわかればOKと思いますが、
もし全く初めてとなれば、
『Progate』や『ドットインストール』などのオンライン教材に加え、
こちらのページのような書籍も参考になればと思います。
『Sass』もメインじゃないので解説していませんが、
もし知りたい場合はこちらの記事が参考になるかもです。
DIやサービスプロバイダーも細かくなってしまうのですが、
こちらの記事にざーっと書いております。
『Laravel』は『PHP』の万能フレームワークなので、
- クラス
- トレイト
- DI(ディペンデンシーインジェクション)
- サービスプロバイダー
- ファサード
あたりの機能が最初から組み込まれているのですが、
そこから始めるとややこしくなってしまうので、
とにかくまずはつくってみて、
成功体験を得てから知識を広げた方がいいんじゃないかなと思います。
もし細かい仕様を知りたい場合は、
公式ドキュメントと、この本がおすすめです。
【Laravel(PHP)】初心者向けアプリの想定対象者
想定ユーザーは下記です。
- progateなどのPHPの教材を見ながら簡単なアプリを作ったことがある
- PHPは学んだことがあるけど、Laravelはあまり触ったことがない
- Laravelの開発の大まかな流れを把握したい
- Laravelを使ってなにかWebアプリ(Webサービス)をつくってみたい
HTML/CSSの解説はしていないので、
あらかじめ『progate』なり『ドットインストール』で
雰囲気を体験してもらった方がいいかなと思います。
『PHP』ももちろんできたほうがいいのはいいんですが、
こちらもつくりながら知識を広げるスタンスでいいんじゃないかなと思います。
【Laravel(PHP)】初心者向けアプリをポートフォリオに組み込むなら
エンジニアとして就職・転職を視野にいれるなら、
スキルの証明として『ポートフォリオ』に組み込むのもいいかと思います。
ステップ1 完成させることを目標に
まずは今回の教材をしっかりと読み込みつつ、
読んでるだけだとなかなか身につかないので、
実際に指を動かして、アプリをつくってみてください。
幸い『XAMPP/MAMP』も『Laravel』も無料で取り組むことができます。
『GitHub』も使えるとなお良いですね。
ステップ2 サービスの分離を意識して
『Laravel』に限らず『MVCフレームワーク』初心者にありがちと言われているのが、
『ファットコントローラ問題』。
初心者は処理を全て『コントローラ』に書きがちなので、
『コントローラ』の行数がどんどん増えて見づらくなってしまうという現象です。
実際にググってみても、ほとんどの記事でコントローラに書くような記載があるのですが、
実際の開発現場では、できるだけ『ファットコントローラ』は避け、
『サービス』、『リポジトリ』、『モデル』などに分離するのが一般的です。
今回の教材では、
『コントローラ』に書いたコードを『サービス』として分離させる方法を書いています。
実際の現場でも、
『分離』して見やすく読みやすくするというのはとても重視されます。
良いコード・・意味がわかりやすい、読みやすい、書き換えやすい
第3者が見たとして、
どうすればコードが読みやすくなるかというのしっかり意識して、
『コードの分離』を意識しながら作り変えてみるといいかなと思います。
ステップ3 見た目や機能をカスタマイズしてみる
『Tinder』風アプリというテーマで作成していますが、
- データの新規登録・参照・変更・削除(いわゆるCRUD)の方法
- データベース(リレーション)の設定方法
- Webアプリ全体に必要なこと・流れ
がわかってしまえば、どんなアプリにでも応用できるようになります。
アプリ応用例：
- ToDoリスト
- 家計簿
- タスク管理システム
- 勤怠管理システム
- 在庫管理システム
- ブログ
- マッチングサイト
- ランキングサイト
- ショッピングサイト
- レビューサイト(口コミサイト)
- 画像投稿(共有)サイト
- 動画投稿(共有)サイト
- 会員専用サイト
また、『Tinder』風アプリという関係上、
スワイプで相手を探すUIになっていますが、
ここをスワイプではなくリスト表示にすれば、
より一般的なアプリとして運用もできるかなと思います。
【Laravel(PHP)】初心者向けアプリをつくった感想まとめ
普段ブログを書いている分、
文章を書くこと自体は問題ないのですが、
どうやったらよりわかりやすくなるか？というのを意識して、
流れを整理して、説明をどんどん追加していきましたので、
当初思っていたよりだいぶ分厚い教材ができたんじゃないかなと思います。
『Laravel』は今一番勢いがある『フレームワーク』だと思いますし、
機能盛りだくさんで最初はとっつきにくいかもですが、
しっかり使いこなせるようになればいろんなアプリ・サービスがつくれるようになるので、
本当に汎用性が高いと思います。
『Laravel』学習のとっかかりとして、
渾身の力をこめた教材ですので、ぜひ手にとっていただきつつ、
本音の感想をいただければと思います。
【Laravel】Tinder風マッチングアプリを作ってみよう！
【Laravel(PHP)】初心者向けアプリ 追記
2019/8/16 追記
とある学習されている方より質問をいただきました。
この方は、教材をただなぞるだけではなく、自分のやりたいように少しずつアレンジされているようで。
素晴らしいなと思います。
techpit教材、しっかり質問してもらえるのでありがたいです。個人的にはどんどんアレンジしてもらって大丈夫なので、どんどんアレンジしてどんどん質問して成長してもらえれば。やっぱ、自分ごととして取り組むのが一番進化すると思うんですよね。 #techpit
— 世界のアオキ🥑プログラミング×教育×熊本 (@aoki_monpro) August 14, 2019
techpit教材、しっかり質問してもらえるのでありがたいです。個人的にはどんどんアレンジしてもらって大丈夫なので、どんどんアレンジしてどんどん質問して成長してもらえれば。やっぱ、自分ごととして取り組むのが一番進化すると思うんですよね。
『Laravel』って本当にどんどん拡張できるし、
『Webアプリ』であればほぼほぼ対応できるかと思いますので、
ぜひどんどんアレンジしていただいて、
わからないところはバシバシ質問していただければと思います。
【Laravel】Tinder風マッチングアプリを作ってみよう！
2019/9/25 追記
とある学習されている方より質問をいただきました。
よくよく見ればソースが足りていない事がわかり・・
できるだけわかりやすく作っているつもりではいましたが、
ご指摘いただけて初めて気付ける事もありました。
もし教材中わからない箇所、思っていた動作と違う箇所などあれば、
ぜひご遠慮なくご連絡いただければと思います。
2019/9/25 追記
とある学習されている方よりお褒めの言葉をいただきました。
おぅ、めっさ嬉しい・・
次の講座やるとしたら、
今回の『Laravel』講座をベースにしつつ、Nuxt.js/Vue.js/JavaScript あたりを組み合わせたなにかだろうなと思ってはいるのですが、
仕事しながら教材をつくるのってなかなかパワーがいるので、
しっかり練ってつくりあげたいなと思います。
もしこんなのが知りたいなどあれば、
ぜひご遠慮なくご連絡いただければと思います。
ブログ拝見しました。
かなり細かい仕様だと感じました。
tinder風以外にもぜひ、laravelを使った王道どころの他のサービスtechpitにupしてください
コメントありがとうございます。
今回の教材は、
基本的な所をかなり細かく解説していることもあり、
新しい教材を作るにしても、
7割くらいは同じ内容になるかなと思ったりします。
今回の教材を読んでいただいた前提で、
例えば検索システムなどを
もうちょっと割安でご提供というのはありかなぁと思ったりはします。
リレーションの組み方がわかれば、
あとはどんどん広げていけますので。
>王道どころの他のサービス
リレーションさえわかれば、
あとはテーブルを10つくるか、30つくるか、
というような違いになるかなと思います。
techpitにすでにリリースされている教材はつくれないので、
それ以外でもしリクエストあれば、
(なるべく具体的に)ご連絡いただければと思います。
PS.この教材つくるのに60時間くらいかかり、出し切った感がありまして、
次つくるにしてもなかなか大変なので、
この教材がどーんと人気が出たら、次つくるモチベーション湧いてくるかも、です。