LoginSignup
188
167

More than 3 years have passed since last update.

30代未経験からRails, AWS, Docker, CircleCIを使って減量アプリを作りました

Last updated at Posted at 2020-11-29

プログラミング未経験の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日何キロカロリーまで食べていいのか」を自分の体重から自動で計算してくれて、食べるごとに確認できたらカロリーコントロールしやすくなるのではないか。
  • 体重やカロリーの推移をグラフで見られるようにすれば、成果が出てるのがわかってモチベーションが保てるのではないか。

このように原因やそれを解決する策を考えて、グラフ機能をメインとした減量アプリを作ることにしました。

アプリの写真と説明

トップページ

使い方を細かく説明しなくても、パッと見て一目で使い方わかる外観を意識して作りました。
スクリーンショット 2020-11-23 午後8.39.00.png

グラフ

体重とカロリーの推移がグラフという形で見られるようにしました。
自分の頑張りが目に見えることで「よし、いい感じだ。もっと頑張ろう」と思えるのではないかと考えたのです。
82912645752047340005a4a76361350b.gif

カレンダーと画像一覧

食べたものや筋トレをカレンダーや写真で記録して確認できるようにしました。
写真でカラダの変化を可視化することでそれもモチベーションにつながると考えました。
また、他の減量に成功した方がどんなものを食べて減量できたのか知って真似できるため、という目的もあります。
9fd6b65dde2703f27bec05eac512d889.gif

カロリーの自動計算

「1日○キロカロリー食べれば体脂肪を落とせる」という減量の目安となる"1日の摂取カロリー目をユーザーが体重と体脂肪率を入力したら自動で計算されるようにしました。

※ちなみに、摂取カロリーの計算式はバズーカ岡田先生の著書『除脂肪メソッド』を参考にしました。
e30c9e2a5ca5a1523686697876e9b603.gif

自動計算機能によって、「今日あと何キロカロリーまで食べて大丈夫か」がわかるようにしました。
これで減量の成功率を高められると考えました。
スクリーンショット 2020-11-29 午後5.55.14.png

使用技術

  • フロントエンド
    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図

PFCMASTERのER図.png

インフラ構成図

AWSインフラ構成図.png

アプリを作るのにかかった期間

トータル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記事にアウトプットしていました。

どのように学習したのか

技術 学習方法
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日連続投稿した時に「すごい!!」と表示されるようにする。
  • プロフィール画像を登録できるようにする。(現状は女性ユーザーも外国人男性がプロフィール画像になってしまう。)
  • 運動した日と運動しなかった日をカレンダーでわかるようにする。

ここまでお読みいただきありがとうございました。

188
167
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
188
167