ZHAO JIAYI
Week 1 :User StoryからFeaturesを考える
2026年03月23日
ZHAO JIAYI
2026年03月23日
はじめまして、フロントエンドエンジニアへの転職を目指して学習しているZHAO JIAYI(チョウ カキツ)と申します。 React / Next.js / TypeScript を中心に独学でスキルを磨きながら、AIを組み込んだWebアプリケーションの開発に取り組んでいます。 「作りながら学ぶ」スタイルで、現在ポートフォリオとして以下の2つのプロダクトを自走で開発しています。 🚀 AI Portfolio Manager — Next.js × Supabase × AI によるリアルタイム投資管理アプリ https://ai-portfolio-manager-stocks-crypto.vercel.app/ 💪 TS GYM — TypeScript学習プラットフォーム 技術記事もQiitaで発信しており、学んだことをアウトプットしながら日々成長中です。 https://qiita.com/ZHAOJIAYI
見出しはありません
要約を生成中...
具体的な機能の話に入る前に、私がどのような手順で開発を進めているのかを簡単に説明します。
開発作業(コードを書く)を入る前に、以下の4ステップがあります。本文では第1ステップと第2ステップを作成します。
ちなみに、この分かりやすいフローチャート図は、Udemyで世界的に有名なフロントエンド講師である Jonas Schmedtmann 先生のコースで紹介されているものです。
私がフロントエンドの勉強を始めたばかりの頃、彼の教えるこの「コードを書く前に設計する」というアプローチにものすごく影響を受けました。今でも私の開発の大きな土台になっています!
Udemyコース名:「The Complete JavaScript Course 2025: From Zero to Expert!」
User Storiesとは、開発者の視点ではなく、「ユーザーの視点」でアプリの要件を言語化する手法であり、基本的には以下のフォーマットに当てはめて文章を作ります。
As a [type of user], I want [an action] so that [a benefit]
(誰)として、(何)をしたい。なぜなら(どんなメリット・理由)だからだ。
この「誰が・何を・なぜ」を明確にすることで、「開発者が作りたいだけの無駄な機能」を作ってしまうのを防ぎ、ユーザーの課題を解決するコア機能だけに集中することができます。
US 1: 検索のストレスをゼロにする
内容 | |
|---|---|
[誰]: | 大学院を目指す留学生 |
[何]: | 大学名や研究科などの条件を指定して、対象となる学校を検索・絞り込みたい |
[なぜ]: | いろんな大学のサイトをあちこち探し回って時間を無駄にしたくないし、自分の志望校のスケジュールだけを一番早く知りたいから |
US 2: スケジュールの直感的な把握
内容 | |
|---|---|
[誰]: | 受験計画を立てている受験生 |
[何]: | 検索結果の画面で、出願・筆記・面接などの日程を視覚的にわかりやすく確認したい |
[なぜ]: | 文字だらけのPDFを読み解く負担を減らし、複数の学校間で試験日程が被っていないか一目で確認したいから |
US 3: 出願の全体像をサクッと把握する
内容 | |
|---|---|
[誰]: | どの学校に出願するか検討している留学生 |
[何]: | リストの「詳細」ボタンから、出願資格や語学スコアなどの情報を簡単なポップアップで確認したい |
[なぜ]: | 毎回何十ページもあるPDFをダウンロードして読むのは面倒だし、まずは「今の自分のスコアで出願できるのか」だけをパパッと知りたいから |
Featuresとは、「ユーザーが〇〇したいと言っている」というUser Storiesを元に、「アプリに〇〇という機能を実装する」という人間の言葉からソフトウェアの機能へと翻訳していく作業です。
Story 1 | 検索のストレスをゼロにする |
|---|---|
Feature | ユーザーがキーボードで文字を打ち込む手間を省くため、「大学名」と「研究科」をポチポチ選ぶだけのドロップダウン(Select)メニューを作成 |
Feature | 条件を選んだ瞬間に、裏側で持っているデータ(JSON)と照らし合わせて、該当する学校だけをリストに表示するフィルタリング機能を実装 |
Story 2 | スケジュールの直感的な把握 |
|---|---|
Feature | 検索結果を「カード(Card)UI」として画面に表示 |
Feature | カードの中に、出願期間、筆記試験、面接試験というマークを色付けて日付を並べ |
Story 3 | 出願の全体像をサクッと把握する |
|---|---|
Feature | 詳細」ボタンを配置し、そこに「出願資格」や「必要な語学スコア」などの要約データだけを表示 |
Feature | 要約データの最後に、必ず「公式サイトの最新募集要項ページ」へ直接飛べるリンク(URL)を設置 |
要約
コメント
まだコメントはありません。