はじめに
はじめまして。本記事をご覧くださりありがとうございます。
Ryuyaと申します。
今回、ReactとRailsでwebアプリケーションを作成したので、開発背景や学習方法などを紹介します。
これから転職活動のポートフォリオとしてwebアプリを開発する方の一助となれば幸いです。
自己紹介
大学院を卒業後メーカーに就職し、組み込みソフトウェアの詳細設計に2年半ほど携わりました。C言語を使ってソフトウェアの新規機能の実装を行い、2年目には部署の新人教育も担当しました。
2024年7月に会社を退職、Le WagonというブートキャンプでRuby on Railsを中心としたwebアプリケーション開発の学習を開始しました。2024年9月からはブートキャンプで学んだ知識だけではwebアプリ開発をするには不十分だと考え、ReactやTypeScript, Github ActionsによるCI/CD, AWSでの環境構築などを独学で学びました。
2025年1月ごろから今回のアプリの原型となる単語帳アプリを開発し、2025年7月からエンジニア派遣の会社に就職しました。しかし、思ったような案件にはアサインされず再就活をしようと思い、2025年11月から使用技術やプロジェクト管理をブラッシュアップして再度アプリ開発を開始しました。
目次
1. ポートフォリオの紹介
2. 選定技術の採用理由
3. ポートフォリオ作成までに学習したこと
4. ポートフォリオ作成の進め方
1.ポートフォリオの紹介
サービス概要
スグ単は「英語学習中に調べた表現を後で復習して使えるようにしたい！」という想いから作られた、AI辞書機能付き単語帳アプリです。
AI辞書機能で和英・英和の両方で検索でき、検索結果はその場で作成済みの単語帳に登録できます。
単語帳に登録したカードは学習機能で復習することができます。
▼ サービスURL
▼ Github リポジトリ
バックエンド
フロントエンド
インフラ
開発背景
私は普段から英語学習をしており、アウトプットの場としてAI英会話アプリでAIと会話したり、海外の友人と会話する機会を積極的に設けています。その中でよく感じる問題として、「会話している最中にわからなかった表現があったのに、後から思い出そうとすると思い出せない」という経験がよくありました。会話が終わってすぐ、記憶が新鮮なうちに調べて、後から復習できる良い方法があればいいのにと日頃から感じていました。
この問題の解決策として、分からなかった表現をメモしておいて、後から辞書を引いて単語帳アプリに登録するなどの方法を実践してみましたが、調べた結果を単語帳アプリに手動で登録する手間がかかり、次第に面倒と感じるようになりました。
この、「辞書を引く→手動で単語帳などの復習しやすい形にする」という作業のハードルをできるだけ削減するために今回のアプリを開発することにしました。
工夫した点
PCとスマートフォンの両方で使いやすいUIを目指して、レスポンシブデザインを実装しました。ウインドウサイズに応じてメニューバーの配置を変えたり、文字の大きさが見やすくなるように調整しました。
「辞書で引いた結果を簡単に単語帳化する」ために、AI辞書の検索結果はワンクリックで単語帳に登録できるようにしました。
また、単語帳に登録した単語カードの復習に関しては効率的な学習を目指して、有名な単語帳アプリであるAnkiに倣い、復習回数に応じて出題頻度を調節するようにしました。
メイン機能の使い方
| 単語帳作成 | AI単語帳検索＆単語カード登録 | 単語カード学習 |
|---|---|---|
 |
 |
 |
| まずは、単語帳作成ボタンを押して、タイトルと単語帳の概要を記入後に作成ボタンを押す。 | 次に、AI辞書機能で知りたい表現を検索する。検索結果を登録するには登録先の単語帳を選択し、単語カード追加ボタンを押す。 | 単語帳を開き、Inputモードで学習（またはOutputモードで学習）を押すと、復習を開始できる。 |
使用技術一覧
バックエンド: Ruby 3.1.2 / Rails 7.1.5.2
- コード解析 / フォーマッター: Rubocop
- テストフレームワーク: RSpec
フロントエンド: TypeScript 5.9.3 / React 19.1.1
- コード解析: ESLint
- フォーマッター: Prettier
- テストフレームワーク: Vitest / React Testing Library
- CSSフレームワーク: Tailwind CSS
- 主要パッケージ: Axios / React Icons / React router dom / motion / React redux / React Toastify
インフラ: AWS(Route53 / Certificate Manager / Cloud Front / S3 / ALB / VPC / ECR / ECS Fargate / RDS PostgresSQL)
CI / CD: GitHub Actions
環境構築: Docker / Docker Compose
認証: Devise / devise-token-auth
主要対応一覧
ユーザー向け
機能
- メールアドレスとパスワードを利用したユーザー登録 / ログイン機能
- 単語帳の取得 / 作成 / 更新 / 削除機能
- AIを用いた英和・和英辞書機能
- 辞書検索結果から単語帳への単語カード登録機能
- 単語カードの取得 / 作成 / 更新 / 削除機能
- ユーザー情報変更機能
- 退会機能
画面
- トースト表示
- ローディング画面
- モーダル画面
- 404 / 500エラーのカスタム画面
- レスポンシブデザイン
非ユーザー向け
システム / インフラ
- Dockerによる開発環境のコンテナ化
- Route53による独自ドメイン + SSL化
- GitHub ActionsによるCI / CDパイプラインの構築
- バックエンド
- CI: Rubocop / RSpec
- CD: AWS ECS
- フロントエンド
- CI: ESLint / Prettier / Vitest
- CD: S3 / Cloud Front
- バックエンド
- TerraformによるインフラのIaC化
インフラ構成図
ER図
ワイヤーフレーム
2.選定技術の採用理由
ここでは、今回の単語帳アプリ開発に使用した技術の選定理由についてまとめています。
バックエンド : Ruby/Ruby on Rails
他検討技術 : Pyhon/Django
採用理由
- 初学者がひとまずwebアプリのバックエンドを実装する分には理解しやすく、速く開発できるから。
- 退職後に参加したブートキャンプでの採用言語で、アプリ開発スタート時に最も自信がある言語だったから。
フロントエンド : React
他検討技術 : vue.js
採用理由
- State of JavaScriptにて利用率を見てReactの方が利用率が高かったことから採用。
CI/CDツール : Github actions
他検討技術 : CircleCI
採用理由
- タスク管理をGithubのissueで行っており、プルリクエストやマージに合わせてCI/CDを実施しやすかったため。
IaCツール : Terraform
他検討技術 : AWS CDK
採用理由
- Terraform は AWS に依存しない IaC ツールであり、将来的に GCP や Azure など他クラウドを利用する場合でも、設計思想や運用ノウハウを流用できるため。
3.ポートフォリオ作成までに学習したこと
ここでは、ポートフォリオ作成にあたり学習した学習方法や所要時間をまとめています。
ただし、私の場合は2024年11月~2025年1月の期間は海外に滞在して、その間は今回の単語帳アプリの原型になるアプリを個人開発してたり、2025年7月以降は一度エンジニア派遣会社に就職したりといった状況の変化があり、学習ペースも纏まってはいないので学習期間はあまり参考にはならないかもしれません。
バックエンド：Ruby / Ruby on Rails / RSpec
- Ruby / Ruby on Rails(2ヶ月間)
- Le Wagonというブートキャンプに参加してRubyとRuby on Railsを学びました。
- 授業は文法的な知識を学んだ後に課題を解くというスタイルで、最後の2週間でチームごとに自分たちで考えたアプリを開発しました。
- 基礎的なRuby、Railsの知識をベースに、最後は実際にアプリ開発をするので、分からないことを自分で調べながら開発を進める自走力はついたと感じます。
- RSpec(20時間)
- ブートキャンプでRSpecを使った基礎的なテストコードの書き方は学びましたが、追加で下記の「RSpecによるRailsテスト入門」という教材を学習しました。
- モデルスペックやリクエストスペックの書き方が過不足なくまとめられていて理解しやすかったです。
フロントエンド：React / JavaScript / TypeScript
学習期間：2ヶ月間
- React / TypeScript(10時間 + 実践)
- 上記のブートキャンプでJavaScriptは学んでいたので、そこからさらに実際の業務でも使える技術を身につけたいと思い、Reactの学習を開始しました。
- まずはProgateのReactのコースを3日間ほどで1周して基礎知識を把握しました。
- 次に、理解を深めるために実際に練習でアプリを開発し、Reactを使ってみました。その中でRails(APIモード)とReactのやりとりの実装や、TypeScriptを使った型管理も都度学んでいきました。
- RailsとReactを使ったアプリ開発は下記のZennの教材を参考にしました。
インフラ：Docker / AWS / Terraform
- Docker(40時間)
- ブートキャンプ後に下記のZennの教材で学びました。
- Dockerの仕組みからDockerfile、docker composeの書き方まで理解しやすい教材でした。
- その後、下記の「Docker/Kubernetes実践コンテナ開発入門」の第4章までを学習し、より実践的な知識を身につけました。
- AWS(100時間)
- AWSは練習で開発したアプリをデプロイする環境を構築するために勉強しました。
- 初めは下記のZennの教材で学習しましたが、ネットワークの知識も絡めて学習するために下記の「Amazon Web Services基礎からのネットワーク＆サーバー構築」も学習しました。こちらはネットワークやサーバーのことを必要十分に理解しながら自分でAWS上にサーバー構築する知識が身に付く良書だと思います。
- Terraform(20時間)
- 一度練習でアプリを開発・デプロイした後、今回の単語帳アプリ開発にあたってさらにレベルアップを図り、Terraformを使ってIaCを導入しようと思いました。
- 下記の書籍で学習しましたが、要点がまとまっていて学習後すぐに実際のインフラ構築にも使えました。
4.ポートフォリオ作成の進め方
大まかに下記のような手順で進めました
また、要件定義などのドキュメントやタスクの管理はNotionを使って行っていました。
1. 解決したい課題を定義する
2. 課題を解決するためのアプリの機能を決める
3. 機能ごとにユーザーストーリーを書き出す
4. ユーザーストーリーごとにプロダクトバックログを作成する
5. ER図、ワイヤーフレームを作成する
6. スプリントごとにスプリントバックログを書き出す
7. 各スプリントを1w~2wで進めていく
1. 解決したい課題を定義する
まず最初に自分がアプリを開発することを通して解決したい課題を定義しました。
色々なサイトに書いてあると思いますが、自分の原体験をもとにアイデアを出すのが、課題の解像度も高くなり良いと思います。
私の場合は普段から取り組んでいる英語学習にフォーカスして考えました。
2. 課題を解決するためのアプリの機能を決める
定義した課題をどのような機能で解決するのかを決めていきます。
ログイン機能などの一般的な機能から、今回の単語帳アプリで言えばAI辞書機能や復習機能などの具体的な課題解決のアプローチとしての機能までを決めました。
3. 機能ごとにユーザーストーリーを書き出す
下記のサイトを参考に、機能ごとのユーザーストーリーを書き出しました。
4. ユーザーストーリーごとにプロダクトバックログを作成する
プロダクトバックログとはユーザーストーリーごとにAcceptance Criteria(その機能が完成したと判断できる基準)、Priority(優先度)、Story Point(実装難易度や労力などの相対的な評価値)、どのスプリントで取り組むかを決めた表のことを言います。
私の場合は下記のようにNotionでまとめていました。
5. ER図、ワイヤーフレームを作成する
このタイミングでER図、ワイヤーフレームを作成しました。
ER図はdraw.ioで、ワイヤーフレームはFigmaで作成しました。デザインカンプの作成はしませんでしたが、アプリの配色やイメージはCanvaやDribbbleで気に入ったものを参考にしました。
6. スプリントごとにスプリントバックログを書き出す
スプリントバックログは、各スプリントに割り振ったユーザーストーリーを実装するための、実装レベルでの詳細なTODOです。スプリントごとにNotionのページを作り、その中でKanban形式で管理していました。Viewの切り替えでガントチャート形式にもできるので、スケジュール管理もしやすかったです。
7. 各スプリントを1w~2wで進めていく
各スプリントを2週間以内を目処に実装・テストをしていく感じで進めました。本来はTDDで進めるべきなのでしょうが、まだテストコードに不慣れな部分もあり、テストと実装を行ったり来たりしながらになることが多かったです。おそらくもっと詳細設計を詰めてテスト項目がしっかり書けるレベルまでに落とし込んでおかないとTDDもしづらいのかなと感じました。
5.まとめ
今回、バックエンド、フロントエンド、インフラについて学習したことのアウトプットとして一つのアプリケーションを開発してみました。実際に開発してみることで、理解を深めたり、新たな技術を習得することにつながったので、取り組んで良かったと感じています。
また、いわゆるアジャイル開発をする手順に沿うことを意識して取り組みましたが、実際に何から始めたらいいか分からず、さまざまな記事やAIの回答を参考にしながら自分なりに進めてみました。
もしこれから初めて個人開発でアプリ作成をするという方がいらっしゃいましたら、この記事が少しでも参考になれば幸いです。