はじめに
今回「Webエンジニア」としての知識が０だった私が、書籍や動画などあらゆるものを使用して学習し、Railsのポートフォリサービス「IkujiApp」を開発するまでをまとめた記事です。
これからポートフォリを開発する予定の方や、既に開発中の方の参考になれば幸いです。
まず簡単な自己紹介
私は現在、公務員として約５年ほど勤務しております。Web業界とは全く関係のない職業です。そのためもちろん知識もありませんし、スマホを触りながら「このアプリってどう開発しているんだろうね」程度でした。
１年半ほど前に第一子が誕生し、現在まで育児休業を取得しています。ですが、育休でお仕事は休みとはいえ育児は想像の何倍も大変で、もちろん家事もありますし妻と２人で協力しても大してまとまった時間など取れません。働いている時と同じくらいの忙しさですので、今回アプリを開発する際も育児の合間を縫ったり朝一と夜など「空き時間」を活用して取り組みました。
実際の学習時間は４ヶ月程、ポートフォリオ開発期間は６ヶ月ほどになります。
目次
1. ポートフォリオの紹介
2. 技術選定理由
3. 学習期間中に学んだ内容
4. ポートフォリオ開発時の流れ
5. よく参考にしたサイトなどについて
6. 微力ながら最後にアドバイス
1. ポートフォリオの紹介
サービスURL
サービス概要
IkujiApp は、「シンプルな操作性」と「十分な機能性」を両立した育児記録Webアプリです。
既存の育児記録アプリには、大きく分けて2つの傾向があります。 1つは、入力や画面が非常にシンプルで使いやすい一方、機能面では物足りなさを感じるもの。 もう1つは、多機能で情報量が豊富な反面、操作が複雑で慣れるまで時間がかかるものです。
実際に身近な育児の現場では、 「シンプルで使いやすいが、もう少し記録したい」 「機能は豊富だが、操作に迷ってしまい継続できない」 という声を聞きました。
IkujiApp はこのギャップを解消することを目的に開発しました。 画面構成や入力導線はできる限りシンプルに保ちつつ、 まめに記録したいユーザーにも応えられるよう、以下のような機能を備えています。
- 記録作成
- 各項目ごとの記録一覧
- 日毎の記録まとめ
- スケジュールカレンダー
- 成長記録グラフ
- 睡眠分析
- リアルタイム通知機能
- 育児情報Tips
- 日記機能
- ダッシュボード
- ダークモード
また、PCではサイドバー、スマートフォン・タブレットでは SNSアプリのようなナビゲーションを採用し、 デバイスを問わず直感的に操作できるUIを意識しています。
「簡単に使いたい人」と「しっかり記録したい人」の両方にとって、 無理なく続けられる育児記録アプリを目指しています。
GitHubのリポジトリ
なぜ育児記録アプリを開発したのか
私の妻は約１年半前に子供が生まれてから、ある育児記録アプリの使用を開始したのですが、そのアプリはとてもシンプルな画面で操作しやすく、少しめんどくさがりな妻にはぴったりだったそうです。
しかし「満足しているか」と尋ねると「概ね満足だけどもっと機能が多くても良いかな」とのことでした。
逆に大手有名育児記録アプリなどは機能がとても多くて素晴らしいのですが、機能が多すぎてなんだかパッと見て少し見づらいと感じたようです。
妻の友達で子供がいる方にもヒアリングをしてもらったところ、同じような意見が多かったです。
つまり、育児現場の現状を聞いた上で私が作るべきなのは「シンプルな画面で見やすく」「十分な機能が揃っている」アプリと方針が決まりました。
上記２つの条件を満たしたアプリであれば、もっと快適に記録をつけることができ、ストレスも軽減するだろうと考え、若干ですが少子化対策にも貢献できるのではないかと感じたため、当該方針で開発しようと決めました。
工夫した点
「シンプル画面で見やすく」「十分な機能が揃っている」条件を満たすために以下に注力しました。
- シンプル画面
- UI / UX向上（ユーザーの快適性UP）
- レスポンシブ対応(デバイス問わず)
- 非同期通信（ローディング時間をなくす）
- 十分な機能
- リアルタイム通知機能
- ダークモード機能
- グラフ分析機能
- カレンダー機能
主な内容はこんな感じです。
現状は初期リリースとしての公開なので、これからも機能を追加したりUI / UX改善に取り組んでいく余地があると思っています。
メイン機能の使い方
| 子供を切り替える | 記録作成・一覧表示 | スケジュール管理 | 成長記録・睡眠分析 |
|---|---|---|---|
子供を切り替えて表示できるため、兄弟・姉妹それぞれの記録を分けて管理できます。
|
ナビゲーションバーから各記録を入力し、ワンタップで登録できます。記録は項目別・日別の一覧やダッシュボードからまとめて確認できます。
|
家族ごとの予定をカレンダーで一元管理でき、育児や生活のスケジュールを把握しやすくします。
|
成長の推移や睡眠状況をグラフで可視化し、日々の変化を直感的に確認できます。
|
利便性を高めるその他の機能
| リアルタイム通知 | ダークモード対応 | レスポンシブ対応 |
|---|---|---|
記録や予定に応じて、リアルタイムで通知が届きます。
通知のON/OFFや時間は設定画面から柔軟にカスタマイズできます。
|
ダークモードに対応しており、夜間や暗い環境でも
目に優しく快適に記録できます。
|
PC版でもサイドバーを活用でき、
大画面で快適に利用できます。
|
※gitファイルの体裁が崩れてしまいますので、恐れ入りますが正式版はGitHubのリポジトリREADMEをご参照ください。
使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド |
主要言語：HTML / CSS / JavaScript 非同期通信・画面遷移：Hotwire Turbo CSSフレームワーク：Tailwind CSS 4.1.11 グラフ描画：Chart.js 4.5.0 UI補助：Stimulus ビルド・実行環境：Node.js 20.19.6 / Yarn 1.22.22 / esbuild（JavaScript依存管理・アセットバンドル） 主要パッケージ：Font Awesome |
| バックエンド |
言語：Ruby 3.4.4 フレームワーク：Rails 8.0.2 認証：Devise 非同期処理：Sidekiq リアルタイム通信：Action Cable テスト：RSpec コード解析 / フォーマッター: Rubocop |
| データベース | MySQL 8.0.42 |
| インフラ | AWS（ECS Fargate / ECR / ALB / VPC / RDS / ElastiCache（Redis） / Route 53 / Secrets Manager / IAM） |
| CI/CD | GitHub Actions |
| 環境構築 | Docker / Docker Compose |
2. 技術選定理由
主要な技術について、なぜその技術を選んだのかを説明します。細かい理由は以下ですが、共通する点は「モダンであること」「需要があること」に重点を置きました。
バックエンド：Ruby on Rails
選定理由
- Progateに初学者用チュートリアルがあるので、学習難易度が低く様々な言語の中では比較的習得しやすかったため。
- ポートフォリオ開発前に募集求人数をLaravel、Rails、Pythonで調べたところ、Railsが多かったため。
- Ruby開発者が日本人の方のため、解説本がわかりやすかったり直感でコードを書くことができたため。
フロントエンド：JavaScript / Hotwire(Turbo / Stimulus)
選定理由
- 実装必須項目であった「非同期通信」について、Rails7.0から導入された「Hotwire」によりRailsでもフロントを作れることを学んだため。
- 基本的なフロントエンドの部分はJavaScriptを使用。今後は機能追加などに伴い、ReactやNext.jsを導入していく予定。
インフラ：AWS
選定理由
- Herokuなども検討したが、企業ではAWSを使用することが多いと知り、覚えておくべきと感じたため。
- 他の応募者との技術力に差別化を図りたかったため。
CI / CDツール：GitHub Actions
選定理由
- CircleCIも検討したが、Git / GitHubを使用する上で同時に学べることや開発効率が良さそうだったため。
- 最近はGitHub Actionsを導入する企業も多いと聞いたので、経験しておいて損はないと感じたため。
3. 学習期間中に学んだ内容
私がどのように学習を開始し、どういう順番で進めていったのかをまとめます。
(1) HTML / CSS 0~1ヶ月
まずは基本のマークアップ言語を学びました。プログラミング言語との違いがわからない状態からスタートしましたが最終的にはサイトの模写まですることができました。
教材
「やさしくわかる HTML & CSS の教室」
「Progate 有料版全編」
(2) JavaScript １ヶ月~１ヶ月半
次にJavaScriptを学びました。ここでは「エレメント」「オブジェクト」「メソッド」「プロパティ」あたりの違いを漠然と理解する程度でしたが、後のポートフォリオ開発で実装していた際に理解が深まりました。やはりインプットだけでなく実際に手を動かしてみるというのは大事ですね。
教材
「3ステップでしっかり学ぶ JavaScript 入門」
(3) Ruby １ヶ月半~２ヶ月
いよいよプログラミング言語の学習に入りました。基本はJavaScriptと同じ書き方ですが、Ruby特有のメソッドや記述方式を覚えることが大事と感じました。またこの段階で「VSCode」も導入しました。
教材
「ゼロからわかる Ruby 超入門」
(4) Linux ２ヶ月~２ヶ月半
順番が少し前後しましたがここでOracle VirtualBoxによるLinuxサーバーの立ち上げからディストリビューションについて理解しました。
当初CentOSがインストールできなく、Ubuntuに切り替えたら成功したのですが原因はCentOSが既にサポート終了…というのもありましたが、MacBook M3チップなのにアーキテクチャをamdにしていたため。正しくはarmです。
このようなトラブルにもなんとか自力で抜けてまいりました。
他にはWindowsとMacbookを繋げてみたり…。SSHはTeraTeamやWinSCPを使ってコンテンツをサーバーに置く操作の勉強もしたり、apache2を置いたり色々しました。
この経験が、後々ポートフォリオをAWSのEC2に置くときの糧となりました。（実際はDockerを使用したのでECSです）
教材
「ゼロからわかる Linuxサーバー 超入門 Ubuntu対応版」
「ゼロからわかる Linuxコマンド 200本ノック」
「しっかりわかる Linux 入門」
(5) Ruby on Rails ２ヶ月半~３ヶ月半
ついにフレームワークのRailsの学習に入りました。主にProgateを使って学習したのですが、最初は意味がわからないことも多かったです。しかし、飛ばそうと思えば飛ばせた内容も「なぜこうなるのか」を根本的に解決するまで行いました。
例えば「paramsはどういう仕組みなのか」や「なぜインスタンス変数はeditで初期値を取得してくれるのか」など少しでも疑問があったら調べるようにしました。
おかげで後々のポートフォリオ開発ではバックエンド側はサクサク進む場面も多くて楽しかったです。
*教材
「Progate 有料版全編」
(6) SQL / CommandLine等 3ヶ月半~4ヶ月
このフェーズでは残っているProgateを総なめしていきました。具体的には「SQL(MySQL)」「CommandLine」「JavaScript」「Sass」などです。
ここでReact以外のProgateは全てやりきりました。
(7) Git / GitHub ４ヶ月~５ヶ月
ここでUdemyを使ってマストな Git / GitHubを学びました。動画解説してくれているので理解が早かったですが、実際ポートフォリオ作り始めの時は、間違ったコマンドを打ったり、gitコマンドを打ち忘れたり、ブランチを混ぜたりしてしまい苦労しましたが、なんとか正常に使えるようになりました。
またポートフォリオ開発中は常に「擬似チーム開発」を想定した運用を行いました。
pushしたのち、プルリクを作成、自分でレビューを加え、mainにマージする。
開発中盤ではIssuesも使いこなしながら開発することができました。
教材
「もう怖くないGit！チーム開発で必要なGitを完全マスター」
(8) データベース / Docker / web技術 / TCP/IP 4ヶ月~５ヶ月
この１ヶ月は開発直前で濃厚だったのでまとめます。
データベース
書籍により学びましたが、私の理解力不足のためか理解が少し難しく…日々のXへのアウトプットでポストしたら、著者？の方から引用ポストが。内容は「わかりやすく書いたつもりだけど、これ以上わかりやすく書くには職業エンジニアが書いてはダメかもしれない」とのことでした。
申し訳ありません。私の理解力がないだけです。と謝りたい所存であります。ただXで日々勉強記録をアウトプットしていると色んな方からの応援いいねや、使用した勉強サイトの公式アカウントから反応があるのでやる気が上がりますね。
教材
「おうちで学べる データベースのきほん」
Docker / Docker compose
ここで重要なDockerの登場です。書籍で勉強したのですがとても難しかったです。コンテナという概念は理解できるのですが、実際にどうコマンドで作業するのか当時はわかりませんでした。Dockerfileとは？docker-compose.ymlとは？これらの悩みを１つずつ紐解き、なんとかコンテナ化することができた時は嬉しかったです。
なお、冒頭のDocker / Docker compose部分のみの勉強となります。インフラはAWSを使用したのでkubernetesはなんとなくしかわかりません。
教材
「Docker/kubernetes 実践コンテナ開発 入門」
web技術
以下の書籍は「一度は読んでおいた方がいい」との解説を見つけたので一読しました。一応しっかり読み切りましたが初学者にはなかなか理解しづらい部分もあったので、単語を検索しながら読むと理解が進むと思います。
教材
「プロになるための Web技術 入門」
TCP /IP
ポートフォリオ開発前最後にTCP / IPについて学びました。ここで学んだことで開発時にはhttpリクエストの流れや、データはどのように流れているのか概要を掴めたので役に立ちました。
教材
「スラスラわかる ネットワーク & TCP / IPのきほん」
4. ポートフォリオ開発時の流れ
サービスの開発 5ヶ月~11ヶ月
いよいよ開発に入っていきます。どんなサービスを作るのかは既に決まっていたので、まずは環境構築からでしたが、「DB操作」で初めの壁に当たりました。Railsが立ち上げられないほどんどの理由はMySQLとの接続失敗。単純な理解不足でしたが、もがいてなんとか構築完了できました。
構築が完了したらあとはひたすら開発していくだけです。
私の場合は、最初に「Device」によりログイン機能の実装をしました。ここで感じたのは学習段階でのProgateで習った内容は全く使わなかったということです。もちろんProgateを学習しなかったら理解できませんでしたが、手動で「authenticate_user」をしていたのをDeviceにより「authenticate_user!」一発で実装できることや、ルーティングを１ページずつ書いていたのを「resources」１行でできること。この時に「RESTful設計」も経験することができました。
このような感じで新たな経験と実装を繰り返し、ひたすら開発の日々を送っていきました。
ベータ版ユーザーテスト 11ヶ月~
一通り完成したところで、妻や知り合いにローカル環境で使ってもらいました。ここで受けた指摘を修正したり、良い部分はさらに良くするように試行錯誤したりを繰り返しました。
テストコードの実装 11ヶ月~
「RSpec」を使って、「単体テスト」「結合テスト」を実装しました。本当はコードを書く前にテストを書き、そのテストに沿って開発を進めるやり方のようですが、順番を逆にしてしまったので反省しています。
AWSへのデプロイ
ついにサービスを公開できるレベルまでになったのでAWSの学習に入りました。最初は書籍にてEC2を学びました。私の場合はDocker環境なのでECS fargateの方がいいということを知り、新たに勉強。
クラスター、タスク、サービスなどEC2にはないものが出てきたので、壁に当たりましたがなんとかALB、RDSなどを使用し、Route 53など独自ドメイン & SSL化にて公開することができました。
教材
「さわって学ぶクラウドインフラ Amazon Web Services 基礎からのネットワーク & サーバー構築」
「AWSでDockerを本番運用！AmazonECSを使って低コストでコンテナを運用する実践コース」
※またECS関連につきましては、他にもQiita記事やChatGPTなどを駆使しました。
READMEの追加
公開まで終わったので、サービス概要をREADMEにまとめました。
- サービスURL
- サービス概要
- 私のXアカウント
- Qiita
- はてなブログのリンク
- メイン機能の使い方
- 使用技術
- 機能 / 非機能一覧
- テスト
- インフラ構成図(AWS構成図)
- ER図
この辺りを追加しました。構成図やER図については、わかりやすいQiita記事をまとめてくれている方がいるのでそれを参考にしました。（次章で紹介）
5. よく参考にしたサイトなどについて
私が今まで参考にしたサイトは主に以下です。
開発全般
AWS ECS関連
他にも単発ではまだまだありますが、特に何回もお世話になりました。
6. 微力ながら最後にアドバイス
ここまでご覧いただき、ありがとうございました。
現在私は家族と子供がいるので、安定したWebエンジニアの正社員を目指しております。
ですが私自身も学習を始める前は「どうやって開発するんだろう」と漠然な気持ちでいました。
しかし、YouTubeに乗っているロードマップなどを複数見ながら「皆が共通して解説している技術は必要な技術なんだな」と私なりに「勉強やることリスト」をまとめました。すると膨大の量の勉強項目があり「自分にできるかな」と心配でした。
しかし、やはり「やる気」だけが全てを解決します！やる気の源は「なぜWebエンジニアになりたいのか」「どうなりたいのか」を勉強前にはっきりさせておくことだと思います。
私の場合は、現職では思ったよりもやりがいを感じらないと悩む日々を過ごしていました。
そこで見つけた職業がWebエンジニアです。
まだ実際にエンジニアになれたわけではありませんが、なった時の自分を想像して「楽しそうに仕事をしている」「明るい未来が待っている」とイメージが容易についたのです。
なぜかというと、私にとってWebエンジニアは合っているのだと感じたからです。
世の中たくさんの職種があり、大半の方はお金を稼ぐために働いていると思います。これ自体は当たり前の価値観です。
しかし私はお金とか待遇だけではなく、自分が働きたいと思える「やりがい」が大事だと思いました。
１日の大半は仕事をするわけですから、人生やりたいことをやる！という意気込みです。
私はそれがエンジニア職だったというわけです。皆さんも自分なりの「やる気スイッチ」を見つけることで、学習や遠い道のりに感じる開発もきっとやり通せるはずです！
以上がアドバイスとなりますが、これから開発する方も開発中の方もぜひ良い未来が待っていることをイメージしてお互いに頑張りましょう！