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

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

楽器店のレビューサイトを公開しました！

・これから楽器を始める人
・楽器を愛するプレイヤー

が最高の楽器店に出会えることを目指しています🎸

ぜひ皆さん一押しの楽器店をレビューしてみてください！https://t.co/vTiGwHVTtO

もしよろしければ、拡散していただけるとありがたいです🙇‍♂️#ギター pic.twitter.com/9aBM1lB5Et

— とんでもくん🎸楽器店レビューサイト公開🎸 (@guitar_blues_) October 17, 2019

MusicStore Reviewsという楽器店専門のレビューサイトです（現在は閉鎖中）

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

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

これから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アプリを作ろうとしている人は注意してください。

【送料無料】 PHPフレームワーク Laravel入門 / 掌田津耶乃 【本】

posted with カエレバ

楽天市場で見る

Amazonで見る

Yahooショッピングで見る

Youtube

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

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

私はなりました。

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

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

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

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

４時間の動画です。

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

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

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

Udemy

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

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

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

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

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

２８時間という圧倒的ボリューム...！

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

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

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

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

Webアプリの開発を開始！

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

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

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

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

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

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

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

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

良かった点

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

改善点

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

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

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

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

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

Webエンジニアはいいぞ！

未経験エンジニアはポートフォリオ無しで転職できます【20代必見】

まだポートフォリオで消耗してるの？ 実務未経験からwebエンジニアとして転職しようとする際にこのような話を聞くことが多いと思います。 Web エンジニア 実務未経験からwebエンジニアとして転...

yaba-blog.com