オンライン教材

【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【techpit】

2020/10/9 追記 Laravel 6.x にアップデート済です。
2019/11/25追記 Laravel 5.5 -> 5.8 にアップデートしました。

以前『techpit』というプログラミング学習サイトよりお声がけをいただいておりまして。

この投稿から約3ヶ月。

ようやく【Laravel】初心者向けマッチングアプリのつくり方 がリリースできました。

【Laravel】Tinder風マッチングアプリを作ってみよう!

この記事では、【Laravel(PHP)】初心者向けアプリについてまとめてみることにします。

2020/2/19追記

アオキ
約100名の方に学習いただいております、あり
がとうございますm(_ _)m

アオキ
techpitに定額制プランが登場し、そちらでご覧いただけるようになりました。正確なご購読人数がわかり次第、こちらでもご報告したいと思います。

2020/2/14追記
『PHP/Laravel』初心者向け動画もリリースしたのでこちらもぜひチェックくださいませ。

【Laravel(PHP)】初心者向けアプリのつくり方 をつくったきっかけ

きっかけはツイッターでした。

2019年4月中旬頃、『techpit』の中の人よりお声がけいただいて。

techpitの中の人
ぜひ『教材作成』をしてみませんか。

的なオファーをいただいて。

数日後『Zoom』を使ってテレビ会議して、

  • 日本の教育全般
  • エンジニア向け教材

などのお話をさせていただきまして。

さて、いざ何を作ろうかと話していた時に、

『Tinder風マッチングアプリ』が『RubyOnRails』向けはあるけれど、
『Laravel』向けがないのでどうでしょうかとなり、

お手本もあるならつくりやすいかなと受託したのでした。

アオキ
こういうのってノリと勢いですよね、うん。

【Laravel(PHP)】初心者向けアプリで苦労した事

『RubyOnRails』でつくられたお手本アプリがあったとはいえ、

いざ『Laravel』に移植しようとするもなかなかうまくいかず。

マニュアルで解説があるにはあるものの、

アオキ
ここもうちょっと説明してほしいかも・・・

と思う箇所がちらほらあり、

せっかく自分がつくるんだからとほぼ全ての文章を一から書き直し、

もちろん『Ruby』コードも全て『PHP』に変換し、

使っている『jQuery』も調整し、

できるだけ解説を加えたのでした。

『techpit』の中の人からも細かく調整・指摘をいただいて、

専門用語もりもりな一般的な技術系文章と比べれば、

だいぶ読みやすくなっているんじゃないかと思います。

アオキ
このブログの雰囲気が大丈夫なら大丈夫ですえぇ。

【Laravel(PHP)】初心者向けアプリでできる事

今回の教材は『Tinder』というマッチングアプリを真似ています。

画面構成はこんな感じです。

スライドショーには JavaScript が必要です。

できることは以下。

  • 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日かかった、、けど達成感たっぷり。とにかく丁寧に解説つくってまいります。

あとは『MVC』とはなんぞやから、
データベースの『リレーション』設計から、

非同期通信の『Ajax』や『websocket』まで、

とにかくわかりやすさ重視でもりもり文章書いているので、

Laravel初心者
『Laravel』ちょっと触ったけどよくわからないんです・・

という方にはピッタリの教材じゃないかと自負しております。

教材内で問い合わせの機能もありますので、

ララベラー
ここもうちょい詳しく教えて・・

という場合でも遠慮なく聞いてもらえればと思います。

【Laravel】Tinder風マッチングアプリを作ってみよう!

【Laravel(PHP)】初心者向けアプリでやらない事

『Laravel』初心者向けにつくった教材なので、
下記は説明していません。

  • HTML/CSS解説
  • Sassの細かい解説
  • テスト全般
  • DI/サービスプロバイダー等の解説
  • レンタルサーバーへのアップロード方法

HTML/CSSは、なんとなく意味がわかればOKと思いますが、

もし全く初めてとなれば、
『Progate』や『ドットインストール』などのオンライン教材に加え、

こちらのページのような書籍も参考になればと思います。

『Sass』もメインじゃないので解説していませんが、
もし知りたい場合はこちらの記事が参考になるかもです。

DIやサービスプロバイダーも細かくなってしまうのですが、
こちらの記事にざーっと書いております。

『Laravel』は『PHP』の万能フレームワークなので、

  • クラス
  • トレイト
  • DI(ディペンデンシーインジェクション)
  • サービスプロバイダー
  • ファサード

あたりの機能が最初から組み込まれているのですが、

そこから始めるとややこしくなってしまうので、

とにかくまずはつくってみて、

成功体験を得てから知識を広げた方がいいんじゃないかなと思います。

もし細かい仕様を知りたい場合は、
公式ドキュメントと、この本がおすすめです。

Laravel公式ドキュメント5.8

【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)】初心者向けアプリをつくった感想まとめ

普段ブログを書いている分、

文章を書くこと自体は問題ないのですが、

どうやったらよりわかりやすくなるか?というのを意識して、

流れを整理して、説明をどんどん追加していきましたので、

当初思っていたよりだいぶ分厚い教材ができたんじゃないかなと思います。

アオキ
その分2019年5月はほとんどブログ書けませんでした・・

『Laravel』は今一番勢いがある『フレームワーク』だと思いますし、

機能盛りだくさんで最初はとっつきにくいかもですが、

しっかり使いこなせるようになればいろんなアプリ・サービスがつくれるようになるので、

本当に汎用性が高いと思います。

『Laravel』学習のとっかかりとして、
渾身の力をこめた教材ですので、ぜひ手にとっていただきつつ、
本音の感想をいただければと思います。

【Laravel】Tinder風マッチングアプリを作ってみよう!

アオキ
『Webアプリ』作るなら『Laravel』だけで事足りると思います。
アオキ
ぜひとも挑戦してみてください^^

【Laravel(PHP)】初心者向けアプリ 追記

2019/8/16 追記

とある学習されている方より質問をいただきました。

修行中
ユーザー情報の新規登録ができません。画面・入力情報の変更前(testユーザー)ではDBにきちんと登録されています。ただ、登録情報を追加した後は、登録ができなくなってしまいました。サイトの流れにそって、必要な対応は全てしていると思います。お手数ですがご確認お願いいたします。
アオキ
テストデータ消えてもよければ、一度php artisan migrate:refreshと打っていただいて、データベースのテーブル構成をリフレッシュしつつ、再度登録を試していただけますでしょうか。
アオキ
それでも登録できない場合は、View側のフォームか、フォームリクエストに問題があると思われるので、登録ボタンを押した後のコントローラ側で dd($request) をかませて、リクエストデータがコントローラ側に来ているか(意図したデータが正しく来ているか)、確認したいところです。(0-5 Laravelデバッグ方法を参照ください)
修行中
ご返信ありがとうございます。デバッグをしたところ、PWが6文字以上必要であることが分かり、無事に解決しました。ありがとうございました。

この方は、教材をただなぞるだけではなく、自分のやりたいように少しずつアレンジされているようで。

素晴らしいなと思います。

techpit教材、しっかり質問してもらえるのでありがたいです。個人的にはどんどんアレンジしてもらって大丈夫なので、どんどんアレンジしてどんどん質問して成長してもらえれば。やっぱ、自分ごととして取り組むのが一番進化すると思うんですよね。

『Laravel』って本当にどんどん拡張できるし、
『Webアプリ』であればほぼほぼ対応できるかと思いますので、
ぜひどんどんアレンジしていただいて、
わからないところはバシバシ質問していただければと思います。

アオキ
どんどんアレンジしてどんどん進化していきましょー^^

【Laravel】Tinder風マッチングアプリを作ってみよう!

2019/9/25 追記

とある学習されている方より質問をいただきました。

修行中
ログイン画面の実装・登録画面の実装をするとエラーメッセージが反映されなくなることがわかりました。view側でなにか問題があると思うのですが、原因の特定ができておりません。お手数おかけしますが、宜しくお願いいたします。

よくよく見ればソースが足りていない事がわかり・・

アオキ
ご指摘ありがとうございます。ログイン画面・登録画面のエラーメッセージ、おっしゃるとおり表示されておりませんで、コードが不足しておりました。コード修正版を作成し、先程反映いたしました。お手数おかけして申し訳ありませんでした。。

できるだけわかりやすく作っているつもりではいましたが、
ご指摘いただけて初めて気付ける事もありました。

もし教材中わからない箇所、思っていた動作と違う箇所などあれば、
ぜひご遠慮なくご連絡いただければと思います。

2019/9/25 追記

とある学習されている方よりお褒めの言葉をいただきました。

完成!
青木さん 完成しました!ありがとうございます。青木さんのサポートがあったから最後まで完遂できました。ほんとにうれしいですし、勉強になりました。もういちど最初から復習していき、しっかりと自分のものにします。復習の過程でまたわからないことがあったら教えてください。よろしくお願いいたします。
完成!
ps.青木さんはとても教えることがお上手な方だと思いました。わたしも人に物事を教えるときは参考にさせていただきます。またこのような講座を青木さんに作成していただきたいです。ありがとうございました。

おぅ、めっさ嬉しい・・

アオキ
○○さん、完成おめでとうございます!そしてお褒めの言葉もありがとうございます^^ つくった甲斐がありました👍復習、追加質問いつでもウェルカムですのでぜひぜひご連絡くださいませ^^ 次の講座はやるとしたら○○+Laravelかなと思ってはおります、ぜひ前向きに考えてみたいと思います^^

次の講座やるとしたら、
今回の『Laravel』講座をベースにしつつ、Nuxt.js/Vue.js/JavaScript あたりを組み合わせたなにかだろうなと思ってはいるのですが、

仕事しながら教材をつくるのってなかなかパワーがいるので、

しっかり練ってつくりあげたいなと思います。

もしこんなのが知りたいなどあれば、

ぜひご遠慮なくご連絡いただければと思います。

アオキ
せっかくなら長く愛用される教材をつくりたいもんです。

【Laravel】Tinder風マッチングアプリを作ってみよう!


関連記事一覧 (一部広告あり)

コメント

    • 白河
    • 2019年 7月 11日 9:42pm

    ブログ拝見しました。
    かなり細かい仕様だと感じました。

    tinder風以外にもぜひ、laravelを使った王道どころの他のサービスtechpitにupしてください

      • aoki_monpro
      • 2019年 7月 12日 8:59am

      コメントありがとうございます。

      今回の教材は、
      基本的な所をかなり細かく解説していることもあり、

      新しい教材を作るにしても、
      7割くらいは同じ内容になるかなと思ったりします。

      今回の教材を読んでいただいた前提で、
      例えば検索システムなどを
      もうちょっと割安でご提供というのはありかなぁと思ったりはします。

      リレーションの組み方がわかれば、
      あとはどんどん広げていけますので。

      >王道どころの他のサービス
      リレーションさえわかれば、
      あとはテーブルを10つくるか、30つくるか、
      というような違いになるかなと思います。

      techpitにすでにリリースされている教材はつくれないので、
      それ以外でもしリクエストあれば、
      (なるべく具体的に)ご連絡いただければと思います。

      PS.この教材つくるのに60時間くらいかかり、出し切った感がありまして、
      次つくるにしてもなかなか大変なので、
      この教材がどーんと人気が出たら、次つくるモチベーション湧いてくるかも、です。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  2. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  3. 生成AI

    Dify講座をリリースしました【非エンジニア向け】
  4. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
  5. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock