ド素人がWebサービスを個人開発してリリースするまでに学んだこと【Laravel + Vue.js + Python】

記事内に商品プロモーションを含む場合があります

技術メモ

2019年10月に個人で開発していたサービスをリリースしました!

 

 

MusicStore Reviewsという楽器店専門のレビューサイトです。

承德汉唐装饰有限公司
承德汉唐装饰有限公司成立于2008年,建筑装饰行业知名品牌,专业从事公共建筑装饰,集装饰设计、施工、饰材研发生产等为一体的上市公司,业务涵盖装饰设计、施工、饰材研发生产三大领域,为客户提供多方位系统装饰解决方案,提供从设计、施工到主材、家具、软装、智能家居的一站式家装服务,致力于打造安全舒适的生活和商业空间。

楽器経験者の方は「ちょっとラーメン屋寄ってくか」くらいのノリでレビューしてみてください😀

 

こちらのサービスをリリースするまでの流れを備忘録としてまとめます。

これからWebサービスを開発してリリースしてみたいと考えている人に、一つのやり方として提示できればと思っています。

 

MusicStore Reviewsについて

楽器店のレビューサイトです。

開発に要した時間

150時間くらい。

期間的には一ヶ月半ほどです。

 

使用した技術・フレームワーク

  • Laravel 5.8
  • PHP 7.2.・・・メインで使用
  • Python 3.5・・・楽器店の情報(約500店舗)をスクレイピングする際に使用
  • Vue.js 2.6・・・レビューのいいね機能実装時に使用
  • Bootstrap 4
  • MySQL 5.7
  • エックスサーバー

 

実装した機能

  • SNS認証(Twitter・Facebook・Google)
  • レビューの投稿・閲覧
  • レビュー・楽器店の検索
  • レビューへのいいね!ボタン
  • ユーザーのプロフィール編集
  • レビュー投稿数表示(今日・今月・総数)
  • ユーザーランキング(いいね数基準)

 

開発者のエンジニア歴

MusicStore Reviews の開発を始めたのはエンジニアとして転職してから二ヶ月ほどなので、エンジニア歴は二ヶ月です。

ほぼ素人だと考えてもらって差し支えないです(笑)

業務ではPHPをメインに使用しています。

 

どうして楽器店のレビューサイトを作った?

単純に日本に楽器店の総合レビューサイトがなかったからです。

私自身がギターを弾いていることもあり、楽器店が好きでよく楽器を見に行っています。

 

多くの楽器店を訪れましたが、世の中にはいい楽器店とそうでない楽器店があるという印象を受けました。

私もそうでしたが、初めて楽器を始める場合は店舗に行く場合が多いと思います。

その店舗で自分が気に入った楽器と出会い、音楽人生をスタートさせます。

 

音楽は人生を豊かにしてくれると信じているからこそ、最初の楽器との出会いはすごく重要だと考えています。

また店員さんと音楽や楽器の話をすることで知識が増えて、音楽がより好きになることもあるでしょう。

 

これから楽器を始める人がスムーズに始められるように、楽器店のレビューサイトを参考にして楽器を購入する場所を選べると良いと考えてMusicStore Reviewsの開発を始めました。

 

個人開発を始める前の学習について

未経験からWebエンジニアに転職して、どのように学習してきたのかを参考までに示します。

以下の内容を時系列順にこなしました。

 

Progate

まずはみんな大好きプログラミング学習サービスのProgateです。

プログラミング完全未経験者でもとっつきやすいようにデザインや説明が考えられています。

ここでざっくりとPHPやPythonの書き方を把握しました。

 

ちなみに現在のステータスはこんな感じです。

 

 

広く浅く触れるのがいいですね。

 

ドットインストール

次に触ったのがドットインストールです。

こちらもプログラミング学習サービスですが、Progateに比べると若干難易度が高いのでProgate→ドットインストールの順番で学習しました。

こちらはビンゴシートや掲示板など、実際に動くものを作れるのでモチベーションは上がりました。

またLaravelの学習コースもあるので、フレームワークの概要も掴めます。

 

書籍

ネットの情報量は凄まじく、大抵は検索すれば解決します。

しかし記事の内容が古かったり、自分と環境が違うことも多いので混乱することも多々あります。。

網羅的に知識を補完するなら、書籍を活用するのがいいと思います。

 

Laravelに関しては、PHPフレームワーク Laravel入門で学習しました。

現在の初学者向けLaravel参考書の中だと、とりあえずこの本を選んでおけば間違いないという印象です。

 

Laravelの基本は網羅されているので、これを読んでおけば壁に当たってもスムーズに検索して問題を解決できると思います。

ただし、何か動くものを作る参考書ではなく、Laravelの機能を網羅的に説明するタイプの参考書なので、この本だけを参考にしてWebアプリを作ろうとしている人は注意してください。

 

 

Youtube

ここまでくると、だいたいの文法やWebアプリの作り方が頭に入っていると思います。

でも、いざ作るとなると「どうすればいいんや。。」となると思います。

私はなりました。

 

そこでチュートリアル動画を活用して、アプリの作り方を頭に入れました。

Youtubeで「Laravel tutorial」と検索すると一からアプリを作る解説動画が出てきます。

英語が問題なければ、無料で質のいいチュートリアルが見放題です!

 

ちなみに私は、Laravelでインスタグラムっぽいアプリを作る以下の動画で学習しました。

4時間の動画です。

動画を見ながら手を動かすだけで、一からインスタグラムのようなアプリが作れます。

こんなものが無料で観れるYoutubeすごい。。

 

スピードラーニング感覚で英語を聞き流すことで、英語力も知らぬ間に上がります(願望)

 

Udemy



もし英語ではなく、日本語で質のいい動画を求めるならUdemyがいいです。

Udemyは世界最大級のオンライン学習プラットフォームで、自分が学びたい技術を検索してその学習動画を購入する形式になっています。

 

動画なので書籍よりも早く最新の技術やトレンドを知ることができる上、日本語の動画も多いのでオススメです。

私はPythonの学習にあたり、シリコンバレーでエンジニアとして働かれている酒井潤さんの動画を購入しました。

Python 3 入門+アメリカのシリコンバレー流コードスタイル

28時間という圧倒的ボリューム...!

そのほかReact NativeやGoの講座も購入しました。評価が高い講座にハズレはないなという印象です。

積んでる講座をやらないと。。

 

動画は買い切り型で普段は2万円くらいするのですが、定期的にセールで1500円程度まで下がります。

定価で買っている人いるんだろうか。。

 

Webアプリの開発を開始!

上記の学習で一通りアプリの作り方、コードの書き方を学びMusicStore Reviewsの開発を始めました。

しかし、そこには様々な壁が。。

 

めちゃくちゃ壁にぶつかる

具体的にぶつかった壁をまとめるとこんな感じです。

 

・スクレイピングした情報をDBに格納する方法
・エックスサーバーでPythonを使う方法
・Vue.jsとJavaScriptライブラリをどこに、どの順番で書くのか(Chart.jsが動かなかった。。)
・画像の処理(パスの設定)
・アプリをエックスサーバーにデプロイする方法(Gitを使用)
・本番環境に移行する際に .envファイルをどう書き換えるのか
・テーブルが増えた場合のマイグレーションの順番(テーブルに外部キー制約を付ける場合、順番によってはエラーが発生する)
・Twitter、Facebookのシェア機能(公式に書いてあったので解決)
・SNSログイン機能(Twitter・Facebook・Google)
・いいね機能
・サイト全体のデザイン

 

壁にぶつかるたびにググりにググりを重ねて解決しました。

完全に一人で開発したので中々大変でしたが、メンターをつけて相談すればもっと早くリリースできたかもしれません。

 

コードのリファクタリングはやりたいので、メンターをつけて見ていただこうかなと考えています。

 

初めて個人開発してみた感想

良かった点

  • ゼロから実際に動くものを作ったという自信がついた→調べれば大抵何とかなるな。。
  • 本番環境にデプロイして公開したことで、実際に使ってもらえる嬉しさ(レビュー数はまだまだですが)
  • 開発言語にPHP、フレームワークにLaravelを選択した点(当初の選択肢として、Python + Djangoも考えていたが日本語情報の多さからLaravelを選択。この選択が功を奏し比較的短期間でアプリをリリースできた)

 

改善点

  • JavaScriptの理解を深めることで、より複雑な処理ができると感じた。
  • 公開時点でレビュー数ゼロはまずい→公開時点である程度のレビュー数を確保する必要があった。
  • ユーザーにレビューをしてもらうための動機付けについてより深く考える必要がある。
  • 開発段階から、SNS・ブログを通して情報発信をすべきだった。
  • デザインの難しさ(とりあえず公開したがBootstrap臭がすごい)
  • コントローラーにゴリゴリコードを書きすぎてファットコントローラーになっている→リファクタリングの必要性

 

とりあえず個人開発→公開まで持っていくことができたので、気長に更新・機能追加していきたいと思います。

承德汉唐装饰有限公司
承德汉唐装饰有限公司成立于2008年,建筑装饰行业知名品牌,专业从事公共建筑装饰,集装饰设计、施工、饰材研发生产等为一体的上市公司,业务涵盖装饰设计、施工、饰材研发生产三大领域,为客户提供多方位系统装饰解决方案,提供从设计、施工到主材、家具、软装、智能家居的一站式家装服务,致力于打造安全舒适的生活和商业空间。

 

では最後に全エンジニアの座右の銘を

Done is better than perfect.
完璧を目指すよりまず終わらせろ

 

 

このポスター壁に貼ったらめちゃくちゃ生産性上がりそう。

 

Webエンジニアへの転職を考えている人へ向けて以下の記事を書きました。

Webエンジニアはいいぞ!

技術メモ
スポンサーリンク
スポンサーリンク
のすけをフォローする
やばブロ!

コメント

  1. おすし より:

    参考になりました!
    ありがとうございます。

    ちなみに利用規約等は何を参考にされましたか?
    注意した点も教えていただきたいです^^

    • 参考になればとても嬉しいです!
      利用規約に関してはWeb上のテンプレートを参考に一部改変して使用しています。
      (本格的にサービス運用する場合は、弁護士に監修してもらうのが適切なのでしょうが。。)

      特に注意した点はなかったのですが、機能追加や提供するサービスが複雑になれば利用規約等も適宜修正していく必要があると考えています。

  2. あじと より:

    素人からでも開発できるということで勇気づけられました、ありがとうございました!
    SNS認証周り、どのようなソースを参考にされたか教えていただけないでしょうか。

    • のすけのすけ より:

      あじとさん、コメントありがとうございます!
      そう言っていただけるとすごく嬉しいです。

      SNS認証はLaravel Socialiteで実装しました。
      実際に参照した記事は覚えていないのですが、公式やQiitaの記事を参考にしていました。

      個人ブログやQiitaを参考にする際はなるべく更新日時が新しい記事を参考にしてみてください!

  3. えねごり より:

    はじめまして。
    “めちゃくちゃ壁にぶつかる”のわかりみが深すぎたので思わずコメントさせていただきました。
    自分も同じようにはじめてサイトを作ったときに見事に全部ぶち当たりました。。

    これからもサイト更新楽しみにしています!

    • のすけのすけ より:

      共感いただいてすごく嬉しいです!
      こちらのブログとは別に個人開発用のブログ(https://nosuke926.com/)も運営しているので、お暇な時にでもチェックいただけると嬉しいです。
      お互いに開発楽しんでいきましょう!