0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

プロダクト開発するWebエンジニア向けの練習問題を作った(EverToDo)

Last updated at Posted at 2024-05-08

はじめに

「今週の金曜日にあるプロジェクトのキックオフ会議の準備をしなきゃ」

みたいな文章を入力すると、自動的にタスクリストが作られる・・・

そんなイカしたToDoアプリを、SaaSにして自社プロダクトとしてリリースしよう!
という話が立ち上がりました。
Webエンジニアであるあなたは、そんなプロダクトの立ち上げフェーズに召喚されて、最初のMVPを実装することになりました。。。


という想定で、Webアプリケーションを開発できるような練習問題を作りました。

簡単なWebアプリケーション(ToDoアプリ)を、要件定義から概要設計まで完了した状態にしています。
FigmaのUI/UXデザインを見ながら、ToDoアプリを実装してください!


このToDoアプリは、プロダクト開発に携わるエンジニアにとって有用な練習材料となるように工夫しています。

アプリケーションのテーマはありふれたToDoアプリなのですが、その要件は一般的なプロダクトの開発現場で求められる水準に設定しています。
実際の開発環境での作業を想定したトレーニングができる、というワケです。

トレーニングで実現する要件と機能は絞っているので、開発時間を抑えることができるようになっています。

コンセプト

ToDoアプリを爆速で作ってスコアを競おうぜ

  • 開発課題として、ToDoアプリを実装します
  • 要件や画面一覧・機能一覧と、FigmaのUI/UXデザインがあります
  • 実装にかかった時間を記録します
  • 実装が完了したら、セルフチェックで獲得点数を計算します
  • 獲得点数と時間から、最終スコアを計算します

どれくらい早く実装できるんでしょう?
どれくらい正確に要件を満たす実装ができるんでしょう?

この問題に取り組んだら、スコア化できるんじゃないか?!
何度でもやり直しOK条件で、チャレンジしてみてほしいです!

想定する対象者

Webアプリケーションの開発に携わるソフトウェアエンジニア

特に、プロダクトの開発をしているエンジニアにぴったりの問題にしました。

  • Web開発の初学者で、実践的な練習問題を探していた
  • ここのところマネジメントとドキュメント作りだったので、ソースコードを書きたい気分
  • Web系だったらひととおり実装できるようになったと思うんだけど、腕試ししてみたい
  • データベース設計や、画面設計にチャレンジしたいと思っていた
  • 新しいフレームワークを習得するために、アプリを作ってみたいと思っていた
  • 暇なので刺激のあるネタを探してる

コーディングだけでなく、開発に求められる広範囲のスキルが駆使できるように作ってます。
「それなりに実装できるようになった」と自負している人ほど、取り組んでほしいです!

目的は何?

私が代表を務めるタビアン株式会社では、スタートアップや事業会社の新規事業の0→1する場面に、エンジニアのチームで参画し、プロダクト開発に携わる仕事をしています。
エンジニアのチームの開発生産性と開発速度を向上できるようなトレーニングがほしいと思い、練習問題を作ることにしました。

実装する速度、要件を実現する精度、コーディングに着手する前に考える習慣が、開発に大切なのではと思っています。

得られることは?

  • どの要件・機能を実現するのか?ということを、実装速度を意識しながら開発することができる
  • リアルなプロダクト開発の要件に使いので、どうやって技術課題に向き合ったら良いのか考えることができる
  • 自分のエンジニアリングのスキルが、どこまでカバーしていて、欠けている要素があるのかを認識することができる

どんなアプリケーション?

画面が3つしかない、ほんとうにシンプルなWebアプリケーションです。

【ログイン画面/新規登録画面】

ログインするのも、新規登録するのも、Googleログインだけです。

P10-02_ Opening.png

【タスク一覧画面】

タスクの説明を入力すると、サブタスクを自動で作ってほしい、という要件です。
入力用のテキストフィールドがあるだけのシンプル画面です。

P20-04_ Task List (Full list).png

【タスク詳細画面】

ユニークなURLが発行されるので、詳細画面に直接アクセスすることを想定しています。

P30-02_ Task Details.png

クイックスタート

↓ ↓ ↓ 説明資料はこちら ↓ ↓ ↓

  1. 自分用に説明資料のコピーを作る
  2. 書いてある内容やFigmaファイルを読み込む
  3. よく考える
  4. 実装する
  5. スコアを計算する

次のステップ

獲得したスコアをぜひコメントで教えてほしいです!

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?