プログラミング未経験の31歳男がRuby on Rails, jQuery, AWS, Docker, CircleCIといった技術を使ってWebアプリを作りました。
この記事では、最初にアプリの紹介をした後に、
- どれくらいの時間かけて作ったのか
- なぜこれらの技術を使うことにしたのか
- 特に大変だったところ
- どのように学習したのか
といったことについて、お伝えできればと思います。
どんなアプリを作ったのか
減量アプリです。（筋トレしてる人が健康的に体脂肪を減らすためのアプリ）
「これなら自分でも続けられる」をコンセプトに「PFC MASTER」というアプリを開発しました。
アプリのURLはこちらです。
https://pfcmaster.work/
現在は閲覧できません。ご了承ください。
Githubはこちらです。
https://github.com/naota7118/pfc-master
なんでこのアプリを作ったのか
僕自身が「減量がなかなか続かなくて、まだ腹筋を割れたことがない」という悩みを抱えていました。
自分自身の悩みを解決するようなアプリを作りたいと思い、減量アプリを作ることにしました。
「どうしたら減量を途中で挫折せずに続けられるようになるかな？」
今まで減量に挫折した原因を考えたところ、下記の2つが思い当たりました。
〈これまで減量が続かなかった原因〉
- 1日どれくらい食べれば体脂肪落とせるのかわからなくて、適当に食べてしまっていた。
- 減量が進んでいるのかどうか、進捗がわからなくてモチベーションが保てなかった。
このような原因に対してどうしたら減量を続けやすくなるか考えた結果、下記の2つを思いつきました。
- 「1日何キロカロリーまで食べていいのか」を自分の体重から自動で計算してくれて、食べるごとに確認できたらカロリーコントロールしやすくなるのではないか。
- 体重やカロリーの推移をグラフで見られるようにすれば、成果が出てるのがわかってモチベーションが保てるのではないか。
このように原因やそれを解決する策を考えて、グラフ機能をメインとした減量アプリを作ることにしました。
アプリの写真と説明
トップページ
使い方を細かく説明しなくても、パッと見て一目で使い方わかる外観を意識して作りました。
グラフ
体重とカロリーの推移がグラフという形で見られるようにしました。
自分の頑張りが目に見えることで「よし、いい感じだ。もっと頑張ろう」と思えるのではないかと考えたのです。
カレンダーと画像一覧
食べたものや筋トレをカレンダーや写真で記録して確認できるようにしました。
写真でカラダの変化を可視化することでそれもモチベーションにつながると考えました。
また、他の減量に成功した方がどんなものを食べて減量できたのか知って真似できるため、という目的もあります。
カロリーの自動計算
「1日○キロカロリー食べれば体脂肪を落とせる」という減量の目安となる"1日の摂取カロリー目をユーザーが体重と体脂肪率を入力したら自動で計算されるようにしました。
※ちなみに、摂取カロリーの計算式はバズーカ岡田先生の著書『除脂肪メソッド』を参考にしました。
自動計算機能によって、「今日あと何キロカロリーまで食べて大丈夫か」がわかるようにしました。
これで減量の成功率を高められると考えました。
使用技術
-
フロントエンド
HTML(Haml), CSS(Sass), jQuery, boostrap4 -
サーバーサイド
Ruby 2.5.1, Rails 5.2.4.3 -
インフラ
CircleCI, Nginx, MySQL, Docker/Docker-compose, AWS（VPC, EC2, RDS, IAM, Route53, S3）
サーバーサイドはRuby on Rails、フロントエンドはSassとjQueryで実装しました。
開発環境にはDocker-composeを使用しました。
CI/CDパイプラインに関しては、CircleCIによりmasterブランチにmergeしたら自動でRSpecのテストとRubocopのリファクタリングが実行されるように設定しました。
ER図
インフラ構成図
アプリを作るのにかかった期間
トータル6ヶ月です。
当初の予定では8月にはAWSにデプロイした時点で転職活動を始める予定でしたが、「DockerやCirlcleCIを導入するところまでやり切りたい」と思い、結局6ヶ月かかりました。
半年間どのように進めてきたかは下記の通りです。
| 期間 | やったこと |
|---|---|
| 2020年4月 | テーマを決めた。データベース設計。 |
| 2020年5〜7月 | （スクールのチーム開発と並行する形で） RailsのCRUD機能、いいね機能(非同期通信)、コメント機能(非同期通信)、フォロー機能。 Chart.jsを使ったグラフ機能、jQueryを使った自動計算機能。 |
| 2020年8月 | Unicorn, Nginxを使ってAWSにデプロイ。 Capistranoを使って自動デプロイ。 |
| 2020年9月 | Haml, Sassで各ページのマークアップ。 Boostrapを使ってレスポンシブ対応させる。 Dockerを使って開発環境を構築。 |
| 2020年10月 | CircleCIでRSpecの自動テスト、Rubocopの自動リファクタリングを通す。 Gitのエラー解決で誤ってGitリポジトリのファイルを消してしまい、その修復のためAWSへのデプロイをやり直す。 |
| 2020年11月 |
TwitterAPIを使って投稿するとTwitterに自動投稿されるように設定(ローカル環境のみ)。 転職活動開始。現在PHPで2つ目のアプリを開発中。 |
なぜ6ヶ月もかかってしまったのか
誰にも相談せず1人でエラーを解決することにこだわり過ぎて、エラー解決に時間をかけ過ぎたことがいちばんの原因です。
エンジニアになるためには、「エラーに直面した時に"すぐ質問せず自分で問題解決する力"が求められる」との考えから、できるだけ自分でエラーを解決することにこだわっていました。
今振り返ると、リミットを設けてある程度自分で考えたら、リミットがきた時点で質問すべきだったと思います。
実際の仕事では1人のエラー解決をずっと待ってもらえないからです。
現在、「2020年中に完成させる」というリミットを決めて2つめのアプリを開発しています。
なぜRails, jQuery, Docker, CircleCIを使うことにしたのか？
RailsとjQueryを選んだ理由
最速で開発する方法として、これらの技術を選びました。なるべく早くアプリを完成させ、転職活動を開始し、1日も早くエンジニアとして働きたいと思ったためです。
（結果的に半年もかかったので説得力ありませんが...）
なぜRubyとjQueryを使えば最速で開発できると思ったかというと、スクールで簡単なCRUD機能を持ったアプリを開発した経験があり、他の言語に比べて理解していた部分が大きく開発する「こうやって作っていくんだ」というイメージがしやすかったためです。
AWS, Docker, CircleCIを使うことにした理由
これらの技術を使用した理由は、wantedlyで求人情報を見たところ、多くの企業でこれらの技術を使用していたためです。
「多くの企業で使われている技術はどんな技術なのだろう」と興味を持ったのと、実務で使うことを見越して「早いうちから自分で使って慣れておきたい」と考えたためです。
特に大変だったところ
特に挙げるとすると、下記の6点です。
詰まったエラーの解決法をQiita記事にアウトプットしていました。
- Chart.jsを用いたグラフ機能
体重とカロリーをどうやってグラフで表示させるかで苦労しました。ただ大変さを感じると同時に、自分でロジックを考えるのが楽しく、プログラミングを始めて以来いちばん面白さを瞬間でもありました。
- AWSへのデプロイ
Qiita記事：デプロイしたのにアプリがブラウザに表示されない原因はunicorn.rbの設定にあった
Qiita記事：Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'の解決法
Qiita記事：libmysqlclient.so.18: cannot open shared object file: No such file or directoryの解決法
- Capistranoでの自動デプロイ
Qiita記事：bundle exec cap production deployで生じた6つのエラーの解決法(bundle exec cap production deployで生じた6つのエラーの解決法)
- CirlcleCIのconfig.ymlの設定
Qiita記事：CicleCIでRspecとRubocop通すまでにつまずいたところとその解決法
- Gitの中身が大きすぎる問題の解決
誤ってGitオブジェクトの中身を削除してしまい、その修復に苦労しました。
Qiita記事：[エラー解決プロセス説明].gitディレクトリ階下の容量が大きすぎるので小さくしたい
どのように学習したのか
| 技術 | 学習方法 |
|---|---|
| HTML/CSS/Ruby/Rails/jQuery | スクールのカリキュラム |
| Boostrap4 | Boostrap日本語リファレンス |
| AWS |
AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得 (デプロイ編①)世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで |
| Docker | 米国AI開発者がゼロから教えるDocker講座 |
| CircleCI | 米国AI開発者がゼロから教えるDocker講座 |
| Chart.js | Chart.js日本語ドキュメント |
今後の課題
- 2日連続投稿した時に「すごい！！」と表示されるようにする。
- プロフィール画像を登録できるようにする。（現状は女性ユーザーも外国人男性がプロフィール画像になってしまう。）
- 運動した日と運動しなかった日をカレンダーでわかるようにする。
ここまでお読みいただきありがとうございました。