バックエンド

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

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

この投稿から約3ヶ月。

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

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

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

2019/9/22追記

アオキ
現在39名の方にご購入いただいております、ありがとうございますm(_ _)m

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

できることは以下。

  • Laravel5.5を使った実践的な開発スキル(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.5

【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』だけで事足りると思います。
アオキ
ぜひとも挑戦してみてください^^

2019/8/16 追記

techpit教材を購入いただいている方より質問をいただきました。

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

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

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

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

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

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

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

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


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

コメント

    • 白河
    • 2019年 7月 11日

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

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

      • aoki_monpro
      • 2019年 7月 12日

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

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

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

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

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

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

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

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

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

CAPTCHA


最近の記事

  1. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  2. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  3. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  4. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  5. バックエンド

    【Python】手軽に試す方法2つとwebフレームワークについて【初心者向け】
PAGE TOP