完全未経験が２ヶ月半で一からWebアプリを作ったお話

はじめに

ポートフォリオとして作成したWebアプリの紹介記事です。
アプリを作成する際に自分が何を考えて作成したのか、その過程をご紹介します。
苦労したことや楽しかったことなどもまとめましたので、是非最後まで読んでいただければと思います！

簡単に自己紹介

• 商社の営業マンとして働く29歳
• ポートフォリオ作成前は、Progateで基礎学習、Railsチュートリアルを一通りした程度

アプリの概要と開発背景

アプリ概要

• 自分の欲しいものを管理して支出予測するアプリです。
• サービス名は『Wantest』にしました。
• 欲しいものを登録して一覧化し、その合計金額を表示させます。

開発背景

• アプリの制作理由
  みなさんは欲しいものを買うか迷ったり、欲しいものを買ってみて後悔した経験はありませんか？
  私自身、本を買っても読まなかったり、ゲームを買っても結局やらなかったりと、買って後悔した経験が多々あります笑。
  このアプリはそんな経験を少しでも減らせればという思いで開発に至りました。

• 誰のどんな課題を解決するか
  欲しいものを買うか迷っている人
  何か欲しいものを買って後悔をしたことがある人
  をターゲットにしました。

• どうやって解決するのか
  自分の欲しいものを登録して一覧化する
  登録した商品の合計金額を表示する
  ことで、欲しいものを可視化させました。

• なんでそれをするのか
  欲しいものを的確に管理し、支出の最適化を図る
  支出予測を立て、買いたいものを買えるタイミングを知る
  ことで、少しでも無駄な買い物を減らすためです。

使用技術

• フロントエンド
  • HTML & CSS
  • JavaScript
• バックエンド
  • Ruby(2.7.6)
  • Ruby on Rails(6.1.6)
  • MySQL(8.0.29)
• インフラ
  • AWS(EC2,RDS,Route53,ELB,ACM)
• その他
  • Git/GitHub

技術選定理由

フロントエンド：JavaScript

選定理由：

• 今回作成するアプリに動的な動きをつけたいから
• 非同期通信をするためにAjaxを使用したいから

バックエンド：Ruby on Rails

他選択肢：Laravel,Django等
選定理由：

• 日本語のドキュメントが豊富にある
• 基礎学習をRailsで行なっていたから
• Railsを使用して開発を行なっている企業が多いから

インフラ：AWS

他選択肢：Heroku
選定理由：

• AWSを採用している企業が多い
• ネットワーク全体の理解をするため

実装機能

• 新規ユーザー登録機能、ログイン機能
• 商品登録、編集、削除機能
• 登録した商品の合計金額表示機能

開発アプリの紹介

アプリ名：Wantest
URL:https://my-want.life/

アプリを開発するために以下の設計を行いました。

• 業務フロー図
• 画面遷移図
• テーブル定義書

業務フロー図

画面遷移図

テーブル定義書

ELBを使用することで、ACMで無料で証明書を発行し、HTTPS化させました。

インフラ構成図

こだわったポイント

1. 使いやすさを意識したUI/UX
   今回作成したアプリは機能がシンプルなので、商品の登録を行う際、画面遷移をさせずに、
   モーダルウィンドウを用いて同画面で登録を行えるようにしました。
2. Ajaxを用いて画面遷移をせずに情報を更新させる
   ユーザーにストレスを感じさせないために、一部機能にAjaxを用いることで情報更新の高速化を実現しました。
3. メジャーなアプリのデザインを参考にする
   今回作成したアプリがメモ帳に似ている部分があったので、メジャーなメモ帳アプリのデザインを参考にし、ユーザーにとって見やすいアプリを心がけました。
   　　

ユーザーインタビューの実施

友人3名に実際にアプリを使ってもらい意見を聞きました。
目的としては、サービスとして成立するのか、また、アプリをより良くするための改善点を見つけるためです。
色々な意見がありましたが、特に重要な意見をピックアップしました。

• サービスとしてリリースしていたら使用するか？
  使用すると答えた人はいませんでした、、、
  理由としては、
  機能がシンプルなのでわざわざ登録してまで使いたいと思わない
  メモ帳で代用可能だよね
  という意見をいただきました。

• どのような機能があったら使いたいと思う？
  自分の予算を入力して、購入希望日を設定し、月ごとに予算との兼ね合いをグラフ化してくれる
  実際に使用した金額を知りたい
  登録順や、金額順に並び替えができる機能
  という意見をいただきました。

ユーザーインタビューを通して、今の機能のままでは不十分だと感じました。
より多くの人に使いたいと思ってもらえるためにも、他のアプリにはない便利に機能を追加していければと思います。

今後の課題

今後の課題としては、以下の３点を優先的な課題と考えています。
①基礎力強化
②機能追加
③CI/CD、テストコード追加

• 基礎力強化
  今回のポートフォリオを通して、自分の基礎力がまだまだ足りていないと痛感しました。
  1つの処理を書くのにも時間がかかってしまい、なんでもないようなコードを書くのにも
  時間を要してしましました。また、読みやすいコードを意識せずに書いてしまっていたので、
  わかりにくいコードが多々あります。
  実務では共同開発が当たり前になります。自分が書いたコードに責任が持てるように、
  読みやすいコードを意識し、人に説明ができるくらい理解力を深めていきたいです。

• 機能追加

  • 並び替え機能の追加
    現状は商品を登録するとランクごとに自動的に割り振られて登録されます。
    登録の日付順や、金額順などの並び替えができるようにUI/UXを改善していきます。

  • 購入希望日を入力し、予算との兼ね合いをグラフ化
    現状は商品の合計金額しか表示ができないので、支出予測をさせるという点で、上記機能を実装して予算との兼ね合いを可視化していきます。

• テストコード、CI/CD追加
  　手動のみの動作確認になっているため、テストコードにて自動化を図りたいです。
  　また、本番環境へのデプロイは全て手動で行なってきました。
  　そこで、CI/CDを実装し作業効率を上げていきたいです。

開発で苦労したこと

インフラ構築

AWSでの本番環境構築に苦労しました。AWSの中で、どの機能を使って構築するのか手探りからのスタートでした。Udemyや書籍を参考にしながら構築をしていきましたが、当然教材とは環境が違うので、違っている部分は調べたりしながら進めていきいました。サーバ設置後は、Railsのインストールは比較的簡単にできたのですが、NginxとUnicornのインストールと設定には苦労しました。そもそもNginxとUnicornが何かわからなかったので、どのような物なのかを調べながら設定をしていきました。
設定が終わり、いざアプリのURLを入力したらエラーが出てアプリが表示されませんでした、、、
ここがインフラ構築の部分で一番苦労した部分です。
エラーコードをきちんと読み解き、ググったりしながら原因特定をしました。どうやらRails6のWebpackerが標準になったというところが関係したエラーでした。開発環境のコードを修正して、無事アプリが本番環境で表示されました。
本番環境には開発環境の内容が深く関係してくると実感できるいい機会になりました。

一意性を保たせることの難しさ

viewsファイル内でHTMLの記述をする際に、id属性に一意性を保たせるのに苦労をしました。Railsの部分テンプレート機能を使用したり、eachメソッドを使用して繰り返し処理の記述を行なっている部分がありました。その部分でidが重複してしまい、動作がうまくいかなくなりました。
ここで心掛けたことは、丁寧に書くです。一意性を保たせるために、一つ一つコードを確認しながら修正を行い、想定した動作ができるようになりました。
処理を行うコードは正しく書けているのに、idが重複するだけで動作が変になってしまうというのは、自分の中では面白い発見でした。正しいコードを書くことの重要性を再認識できました。

最後に

ここまで読んでくださりありがとうございました！最後に開発を通して学んだことと感想を書いて終わりにしたいと思います。

機能をただ実装すればいいというわけではなく、ユーザー側の視点にたって機能を実装していくことが重要だなと実感しました。ユーザーにとっては便利な機能があるのは当たり前のことです。自分が苦労して実装をしたとしてもユーザー側が使いやすさに不満に感じていたら何も意味がありません。
技術や機能を実装するのは、このポイントが重要だと学びました。実務に入ってからもポートフォリの作成で得られた視点を持って、技術選定や機能の実装を行なっていければと思います。
また、自分の作ったアプリを人に使ってもらうのは緊張するのと同時にすごく楽しいなと感じました。ここの機能がいいねと言ってもらえた時はさらに喜びが込み上げてきました笑。
まだまだ未熟な自分ですが、今回のポートフォリオで学んだことを糧にして一歩一歩前進していきます！！