はじめに
はじめまして！そらぼー（@sora154cm）と申します。
私は実務未経験からエンジニアへの転職を目指しており、その過程で作成した献立アプリと学習過程を紹介したいと思います！
自己紹介
- サーバーサイドのエンジニアを目指す26歳
- 現職は通信・IT業界で営業担当の縁の下の力持ち的なポジション
- 性格は親しい人ほど「穏やかだけども実は気が強い」とも言われることが多い
- 好きなものはゲーム🎮、読書📖、犬🐕🦺、猫🐈
- 猫の下僕
- 2023年4月から本格的に学習開始（学習期間は5ヶ月、そのうちアプリ開発期間は1ヶ月半ほど）
- お客様の課題をプログラミングの手段によって解決できるようになるべく、技術力とヒューマンスキルの向上に日々努めています
目次
1.オリジナルプロダクトの紹介
■サービスURL
現在はサーバーを閉じています(2023/11/08~)
GitHubのリポジトリ
■サービス概要
その日の献立を考えるうえで手助けとなるアプリです。
使いたい食材を入力して検索して、自分の登録したレシピをを確認して考える手間を省いてきます。
■サービスを作った背景
友人に向けて作ったものとなります。
元々、何か手間が省けるサービスをつくりたいと思っていたところ、
自炊生活を送っている友人が「料理自体は楽しいけど献立を考えるのが面倒」とボヤいていたので、その問題を解決できるものを作りたいと思いました。
献立を考える手間を減らして、
その分を料理やその他の充実した時間に集中できるようになることがゴールとなります。
■課題と実現方法
どうして、献立を考えるのが面倒になってしまうのか？
⇓
献立一つ考えるにしても、使う食材や自分のスキル感など意外と考えることが多い
(友人から、そのようなことを実際に聞きました
)
⇓
従来の料理系のサービスで食材などから検索をかけると、
相当数のレシピが出てきてくれる反面、結局そこから考える必要があるので選択肢を敢えて少なくすることが大事なのでは？
⇓
検索で出てくるレシピが自分の登録したレシピ内などからで敢えて限定していく
■サービス利用画面
機能一覧(詳細はこちらから)
| トップ画面 | ログイン画面 |
|---|---|
 |
 |
| サービス内容のイメージが 湧くように実装しました |
他の方のレシピも見れるような サービスとなるため ログイン機能を実装しました |
| ホーム | レシピ一覧 |
|---|---|
 |
 |
| 自分のレシピが表示され、 検索をかけると 自分のレシピ内で探します。 |
他の方のレシピも表示され、 このページでは全ユーザーの レシピが検索対象となります。 |
| レシピ登録 | レシピ詳細 |
|---|---|
 |
 |
| レシピ名、写真、使う食材、 調理工程などのメモ欄、 これらを入力して登録します。 |
一覧ページ等からレシピを クリックするとレシピが見れます。 自分のレシピであれば 編集や削除が可能です |
| レシピ編集 | レシピ検索 |
|---|---|
 |
 |
| 登録した情報をもとに レシピ編集が可能です。 |
食材名が一致された レシピが一覧で表示されます。 |
| ユーザー詳細 | プロフィール編集 |
|---|---|
 |
 |
| 一覧ページからユーザーを クリックすると特定の ユーザーのレシピが見られます。 |
一覧ページで表示されるユーザー名 と写真の変更ができます。 |
■使用技術
| カテゴリー | 使用技術 |
|---|---|
| フロントエンド | HTML/CSS, JavaScript |
| バックエンド | Ruby3.1.2, Rails7.0.6 |
| データベース | MySQL8.0.33 |
| 本番環境 | AWS（VPC, EC2, RDS, ALB, ACM, Route53, S3） |
| 設計ツール | Figma, PlantUML |
■ER図
■インフラ構成図
■作成時に工夫した点
1.配列を活用した食材リストの一括操作
- 食材を追加や編集を行う際に一つずつデータ処理するのではなく、配列を用いて一気に食材リストを登録や更新できるようにしました
2.直感的に操作
- ヘッダーに他のサイトなどでもよく見かけるアイコンを用いる等のことを行い直感的に操作できるようにしました
3.手軽に献立を検索するコンセプト
- ログイン直後のページで登録した自分のレシピの表示やすぐに検索をできるようにと、手軽に献立を検索するコンセプトに沿うようにしました。
4.女性好みのデザイン配色
- デザイン面でミントグリーンやオレンジ色などを使って、雰囲気を柔らかく女性の好みにも合致しやすいように配色を寄せました。
2.作成から完了までの振り返り
■使用技術の選定理由
バックエンド：Ruby3.1.2/Ruby on Rails7.0.6
-
エンドユーザーと距離が近くなりがちな自社開発や受託開発で採用されてることが多いため(顧客の要件に迅速に対応することや、短いサイクルでのフィードバック取得・反映が重要)
-
日本で生まれた言語ということでドキュメントも豊富で学習する上で安心感があるため(自分の母国語でのリソースが豊富であることは、学習の障壁を下げてくれる)
-
開発速度が速く、短期間でのプロダクト完成が可能であり、個人開発に向いているため(「DRY」（繰り返しを避ける）や「CoC」（設定より規約を重視する）等の原則に基づいている)
データベース：MySQL8.0.33
- 長い歴史を持ち実績も多く、実務でも採用されていることが多いと聞くため
- Railsとの連携が容易で、初期設定等が整備されているので迅速な開発が可能
本番環境：AWS（VPC, EC2, RDS, ALB, ACM, Route53, S3）
- 多くの企業で採用されていると聞き、実務に移った際にも比較的スムーズになれると思ったため
- 複数のアベイラビリティゾーンを提供しており、高い可用性と冗長性を持っているため
■作成から完了までの手順
1.オリジナルプロダクトのテーマ決め
- 実際に使ってくれるユーザーを探す
親しい友人と雑談していた際に、ぼやき(課題)を話していたのを思い出して、
開発予定のものをざっくり話し「完成したら使ってほしい」と頼みました。
- 課題の洗い出し(3W1H)
1. 誰(Who)のどんな課題(What)を解決するのか？
2. なぜ(Why)それを解決したいのか？
3. どうやって(How)解決するのか？
2.要件定義
- 要求分析
必要な機能等を自分で想像して開発に移る前に、
ユーザーとなる人の具体的な状況等を詳しく聞きました。
聞き取った内容から改めて課題を確認して、解決に必要な方法をまとめました。
- 要件定義
要求分析で得た内容から、システムとして必要な要件をまとめました。
(これにより要件が曖昧で後から修正しないといけないことを防いでいきました)
機能要件と非機能要件のそれぞれをまとめていきました。
(システムとして達成すべき機能を定義することで、満たすべき要件を明確にできました。)
(機能面以外で実現したい機能を定義することで、コア機能以外の要件を定義することができ、
要件の抜け漏れを防ぐことができました。)
機能要件の中にも、サービスを最低限成立させるためのコア機能、
期間に余裕があれば実装したい拡張機能の2つに分けて、
開発期間内で実装したい機能の優先順位をつけていきました。
3.設計
- 業務フローの作成
プロダクト開発の流れの中において、登場人物、行動の流れを図にすることで、
開発のスケジュールを具体的にしていきました
- 画面遷移図の作成
必要なページを洗い出して、ページの流れを図にすることで、
ページの抜け漏れを防ぐようにしました。
無駄な画面遷移に気づくことができたので、シンプルな仕様に設計できました。
- ワイヤーフレームの作成
ページごとに画面レイアウト・構成要素を図にまとめることで、
実際の開発に移る前に必要となる機能・データを抜け漏れなく設計することができました。
可能な限り、実際のテキスト内容や画像を用いることで、
デザイン面を含めた完成をできる限り具体的に想像できるようにしていきました。
この段階で、現役のエンジニア等からからフィードバックをもらっておくことで、
開発段階での手戻りを最小限に抑えることができました。
業務フロー、画面遷移図、ワイヤーフレーム、
これらはFigmaのツールを用いて作成しました。
4.コア機能の実装
- ログイン機能
- レシピ登録、編集、削除機能
- レシピの検索機能
- 他ユーザーのレシピ閲覧機能
5.インフラ構築
- コア機能を実装完了したプロダクトが誰でも見れるWeb上で動作する状態にしていき、様々なユーザーが使用できるようにしました。
AWSのEC2内にWebサーバー及びアプリケーションサーバーを構築、
RDSにデータベースサーバーを構築。
(外部からデータベースサーバーにアクセスできないようにするため)
お名前.comとRoute53を用いて独自ドメインを取得し、
独自ドメインでアクセスできるように設定。
SSL化（HTTPS化）し、第三者による通信内容の傍受や改ざんを防ぎました。
6.MVP完成
- MVPとは「Minimum Viable Product」の略語で、クライアントに価値を提供できる最小限のプロダクトのことを指します。
使って頂く前にもプロダクトが想像できるように、
トップページの作成とGitHubのREADME.mdを作成を行いました。
- 実際にユーザーに使用していただきました。
使ってみての良かった点、課題となる点、感想、
これらを率直に話して頂きました。
実際に感想等を頂いて、ユーザー視点とのギャップを改めて感じ、
自分だけでは気づけない課題が浮かび上がり非常に有意義なものとなりました。
フィードバックで明らかになった内容をもとに、改善を行っていきます。
■作成時に意識していたこと
◎締切を設定する
- エンジニアの実務では必ずリリースまでの期限があると思いましたので、締切を設定することにしました。
- 開発をするうえで締切を設定することのメリットは確かにありました。
- ダラダラと開発期間が延びてしまうことを防いだ
- 逆算して計画を立てることができたので、日々のタスクを明確にできた
- 加えたい機能は数多くあったが、優先順位をつけて機能を実装できた。
◎実装手順をNotionにまとめる
- 開発中でも後から内容をすぐに振り返られるようにNotionに実装中のメモを残しました。
- 何かトラブルがあった際にもGitHub以外でも保険があるのは安心でした。
- コードを後から修正等でいじる時にも、その当時の考えが思い出せて捗りました。
- 記憶で把握すると曖昧ですが、ドキュメントに残すことで復習する際にも理解が捗りました。
◎最短でエラーを解決しようとしない
- 締切までの期間で焦りもあって、エラー発生時にすぐにググりたくなりますが、自分でも考える時間をなるべく意識しました。
- 仮にググって、あまり考えずに解決しても、その分別のところで理解していないツケが回ってきました。
- エラーログの内容から、仮説を考えきってから改善を行うようにしていきました。
- 詰まり具合によっては公式のドキュメントも見てじっくり参考にしました。
- 期限があるので、自力での解決ではあまりに時間がかかりそうな場合には、学習中のメンバーや現役のエンジニアさんなどにヒントを頂きました
3.これまで学習したこと
これまで学習ロードマップを参考にしていきましたが、
基本的に学習自体は独学で進めていました。
(かなり悩んだ部分は現役のエンジニアさんに質問しました)
そこでオリジナルプロダクト作成までに学習した内容や書籍等を紹介していきます。
- １ヶ月目（Ruby）
- ２ヶ月目（Linux / Git / データベース / SQL）
- ３ヶ月目（HTML・CSS / JavaScript / Ruby on Rails）
- ４ヶ月目（AWS / オリジナルプロダクト設計）
- ５ヶ月目（オリジナルプロダクト実装 / デプロイ）
■ １ヶ月目（Ruby / Docker）
◆Ruby
まずはバックエンドの基礎となるRubyを学習しました。
使った主な教材はProgateとプロを目指す人のためのRuby入門(チェリー本)を用いて、
基本的な文法である繰り返し処理や条件分岐、またハッシュ・シンボル、
そしてオブジェクト指向まで学習しました。
中でも、オブジェクト指向はなかなか苦労しました。
■ ２ヶ月目（Linux / Git / データベース / SQL）
◆Linux
多くの本番環境やクラウド環境でLinuxが使われており、
開発環境においてもLinuxを理解しておくことで効率的に学習を進めていけるため、
Udemyで学習しました。
◆Git/GitHub
ソースコードの管理ツールとして定番になるGit。
基本的なコマンドから、チーム開発でも必要なプルリクエストやマージも
含めて必要な知識をUdemyで学びました。
Gitの裏側の動きも把握することが大事だと思いました。
◆データベース/SQL
SQLを学ぶことで、データの操作方法（検索・更新・削除・整理）を学び、
大量のデータを扱うプロダクトでも開発できるようになることを目標としました。
また、データベース設計についても学習することで、データ構造についての理解、
データの冗長性・整合性の向上、パフォーマンスの低下防止等を学べました。
■ ３ヶ月目（HTML・CSS / JavaScript / Ruby on Rails）
◆HTML・CSS / JavaScript
HTML・CSSはプログラミングに興味を持ち始めた時に少し学習していましたが、
改めてProgateで学習しました。
JavaScriptについてはProgateで既に学んだRubyとの違いだけを確かめながら、
学習していきました。
Progateで学習した後はYoutubeを参考に模写やDOMの操作方法を学んでいき、
まとめとして実際にあるWebサイトの模写を行いました。
◆Ruby on Rails
バックエンドのフレームワークとなるRailsを学びました。
ひとまず、いつも通りProgateから手をつけました。
また、教材として評判も高いRailsチュートリアルにも手をつけるか迷いました。
しかし、以下の理由から、その都度足りないものを
キャッチアップしていく方針にしました。
- 内容自体は充実しているが初学者へのレベルは高めで学習コストがかなり大きくなってしまう
- オリジナルプロダクトに必要最低限の技術・知識を先に学ぶ方が今の自分には優先度が高い
これらに加えて、今回のオリジナルプロダクトには実装していませんが、
テストコードやAPIについても少し学習しました。
■ ４ヶ月目（AWS / オリジナルプロダクト設計）
◆AWS
日常生活で使用しているWebサービスはクラウド上で構築されることが多いです。
その中でもAWSが最も人気とされているクラウドサービスであったため、
オリジナルプロダクトをAWSにてデプロイしたいと思いました。
以下の教材を用いてAWSの基礎を学習しました。
また、AWSには無料枠があり、アラート機能もついているので、
サーバー関係はどうしてもお金がかかりますが低コストで学習できました。
◆オリジナルプロダクト設計
こちらは先程述べた通りになります
■ ５ヶ月目（オリジナルプロダクト実装 / デプロイ）
◆オリジナルプロダクト実装
いよいよ実装になります。
しかしながら、エラーの連続で決してスムーズにはなりませんでした。
中でも山場となる機能の実装には、それだけに丸々1週間以上かかってしまい、
正直、心が折れかけるほど時間がかかってしまいました。
時にはドキュメント等を改めて見て、原理原則の根本的な部分から確認して、
何とか実装していきました。
◆デプロイ
バックエンドのコア機能とJavaScriptの動きは実装したので、
デプロイに移りました。これも同じくかなり苦戦しました。
オリジナルプロダクト実装前の学習段階でAPIのデプロイを行いましたが、
Webサイトのデプロイより手間などは増えて色々とググりました。
何とかデプロイを終わった後には慌ててHTML&CSSで見た目を整えて、
ほんとギリギリで設定期間内に間に合った次第です。
■ お世話になったサービス
☆APPRENTICE
実は以前にプログラミングの挫折経験があったのですが、
以下の動画を見て諦めずにいたところ、
山浦さんのアプレンティスというサービスに出会いました。
決して、カリキュラム等は甘くないのですが、
運営側の「未経験からでも実務で活躍できるエンジニアを生み出したい」想いを
本当に体現されていて、エンジニアを本気で目指す方には間違いなく推せるものです。
☆X(旧Twitter）
既に利用されている方も多いと思いますが、
Xをやっていなかったら、ここまで頑張ることは出来なかったと思います。
現在進行系で同じくエンジニアを目指している方々、
念願のエンジニア転職を達成して、
苦労を重ねながらも充実したエンジニアライフを送っている先輩方。
周りで頑張っている方々を見て、改めて自分も頑張ろうと励みになりました。
終わりに
長々となってしまいしたが、最後まで読んでくださりありがとうございました!!
出来ないことだらけで正直、辛かったことのほうが多かったですが、
(今も出来ないことだらけだと日々感じます笑)
プログラミングや技術は魅力的だと思います
これから、出来ることや知恵が増えていけば、
プログラミングは今よりもずっとずっと楽しくなることを確信しています
なので、現在は転職活動中の身でありますが、
日々学び続け、お客様に寄り添い、課題をプログラミングで解決できるエンジニアを
目指していきたいと思います
改めまして、ご拝読頂きありがとうございました