강의

N
챌린지

멘토링

N
클립

커뮤니티

AI Technology

/

etc. (AI)

[PROKIT] フロントエンドプロジェクトキット：タイマーアプリを作る

フロントエンドプロジェクトのミッションコンテンツです。DevTimeというタイマーアプリを直接実装しながらプロジェクト実習ができるよう、PRD企画書、Figmaデザイン、APIエンドポイントを提供します。実際のサービスと同等レベルのプロジェクトを実装しながら、これまで学習した知識を完璧に自分のものにしてみましょう 🚀

10名 が受講中です。

難易度 入門

受講期間 無制限

  • nybs
프로젝트
프로젝트
학습법
학습법
AI 활용법
AI 활용법
React
React
프로젝트
프로젝트
학습법
학습법
AI 활용법
AI 활용법
React
React

受講後に得られること

  • かなり高い完成度の実際のサービスプロジェクト実装経験の間接体験

  • 開発学習にプロジェクトが必ず必要な理由

  • AI時代が求めるフロントエンド開発者として成長するためのマインド

  • プロジェクトを成功的に始めるための心構えと方法論

  • 生成AIを活用してプロジェクトを成功的に遂行し、必要な知識を習得する方法

プロキット（PROKIT）をご紹介します 🔥

フロントエンドプロジェクトを初めてやろうとすると、どこから始めればいいのか途方に暮れます。

アイデアの準備、企画の整理、デザイン案、クライアントに対応するバックエンド開発まで、

複数の要素を考慮してプロジェクトを進めるのは簡単なことではありません。

そこでプロキット(PROKIT) 💻 を準備しました。

プロジェクト進行のためのビジネス背景、企画要求事項、Figmaデザイン案、APIエンドポイントまで提供いたしますので、

間接的にプロジェクトを経験しながらフロントエンド深化学習をしてみたい方、注目してください 👀


プロジェクト紹介 ⏰

用意したプロジェクトのテーマは[DevTime: 開発勉強時間記録用タイマーの実装]です。

仮想のビジネス目標を設定し、目標達成のためにDevTimeという製品を直接実装してみます。

提供する資料を活用してフロントエンド機能の実装に集中し、DevTimeアプリケーションを完成させてみましょう!

以下は進行するプロジェクトの主要機能例です。

1. 로그인

ログイン

2. 회원가입

会員登録

3. 타이머

タイマー

4. 할 일 관리

タスク管理

5. 대시보드

ダッシュボード

6. 랭킹

ランキング


この他にもプロフィール設定、マイページなどフロントエンド必須実装課題を反映した様々な機能が含まれています。

DevTimeアプリケーションを直接実装しながら、様々なクライアント実装スキルを深く学習してみましょう。


プロジェクト構成案内 🛠

フロントエンドプロジェクトの進行に必要な要素を準備して提供します。


企画要件定義書(PRD; Product Requirement Document)

DevTimeの主要機能に関する詳細な要求事項をまとめました。

提供した企画要求仕様書の内容を参考に、自分だけのタイマーアプリケーションを実装してみてください。

(* PRDドキュメントはGoogle Docs Viewerの権限でアクセスできるリンクを提供いたします。資料修正時には最新バージョンの内容が継続的に更新されます)。

提供されるPRD文書の例


Figmaデザイン案

フロントエンドで実装すべきUIデザイン案を提供します。

デザインシステムが適用されたFigmaデザインをもとに、視覚的に完成度の高いプロジェクトを作ってみましょう。

(* Figmaデザイン案はViewer権限で直接案を確認できるリンクを提供いたします。資料修正時に最新バージョンの内容が継続的にアップデートされます)。

Figmaデザインモックアップ

DevTimeデザインシステム


API文書(Swagger UI)

一つのWebアプリケーションが正常に動作するために必要な機能を事前に定義してサーバーを実装しました。

デプロイされているAPIエンドポイント情報でリクエスト-レスポンスを送りながら、完成した一つのプロダクトを作ってみてください。

(* APIドキュメントはWebページで確認できるよう、デプロイされたSwagger UIのリンクを提供いたします。資料修正時には最新バージョンの内容が継続的にアップデートされます)。

DevTime機能実装のためのAPI Docs

こんな方におすすめです 👍

プロキットは完璧ではなくても、かなり良いプロジェクトの成果物と問題解決の経験を作るのにお役立ちします。

現在、以下のような状況の方は購入を積極的にご検討ください！

  • フロントエンド分野で就職準備中の就活生


  • オンライン講義で個別学習した内容を活用してプロジェクトをやってみたい学習者

  • ブートキャンプを受講しながら、より深化したプロジェクト経験を作ってみたい人

  • 良質な資料で完成度の高いポートフォリオを作りたい人


  • 自分だけの初プロジェクトを成功的に進めてみたいフロントエンド学習者


特に、プロジェクト進行のための資料集である以上、最低限以下の内容については基礎学習ができている方のみ購入をご検討いただくようお願いいたします。

  • HTML、CSS、JavaScript言語に関する基礎知識及び活用

  • DOM操作およびクライアントイベント処理

  • 非同期処理(Promise、async/awaitなど)に対する理解

  • API通信(fetch API、axiosライブラリなどの活用)

  • 1つ以上のクライアントライブラリ/フレームワークの学習経験(React、Next、Vueなど)


  • Git/Githubを活用したバージョン管理経験


さらに、プロジェクトを進めるためには、以下の内容について学習が必要です。必須の事前学習を終えた方でも、プロジェクトを進めながら追加学習が必要になる可能性がある内容ですので、ご参考ください!

  • グローバル状態管理に対する理解及び状態管理ライブラリの活用

  • JWTトークンベースの認証/認可ロジックの実装

  • Presigned URLを活用したクライアントイメージアップロード処理

  • プロジェクト環境構築とビルド、バンドリングに対する理解

  • ブラウザストレージ(ローカルストレージ、クッキーなど)に対する理解と活用

  • ページルーティングロジック処理

購入前の注意事項 ⚠️

プロキットは学習を目的として準備されたプロジェクト資料集です。

実際のサービスを前提としていないため、以下の事項は必ず事前にご参考ください。

  • プロキットはプロジェクトをサポートするための資料であり、実際のプロジェクト遂行過程に関する講義や教育は提供されません。

  • 事前の予備知識が必須であり、プロジェクト進行時に詰まった部分についてはAI、Google、学習コミュニティ(オープンカカオトークルーム開設予定)を活用して直接問題を解決されることをお勧めします。


  • PRD文書、Figmaデザイン案、API Docsなどは、継続的なアップデート事項の反映のため、Viewerリンクで権限を共有いたします。資料のセキュリティと無断共有に特にご注意いただきますようお願いいたします。

  • 提供されるすべての資料の商業的な再利用は禁止されています。

  • DevTimeのサーバーは不特定多数の人が共有する練習用サーバーです。個人情報や悪口/誹謗/性的表現/政治/宗教など敏感な内容が含まれたデータをPOSTしないよう注意してください。

  • DevTimeのデータベースは毎日午前3時に初期化されます。初期化時にクライアントのリクエストに対する応答として返される最小限の練習用Mockデータのみがシード(Seed)として設定されますので、累積管理が必要なデータは別途保存して管理してください。

  • その他、詳細な資料活用に関するガイドは販売されているPDF資料に詳しく記載されています。プロジェクト進行前に必ずご確認いただきますようお願いいたします。


プロキットに関するその他ご不明な点がある方は、nybs.contact@gmail.comまでお問い合わせください。

プロジェクトを始めてみましょう 🏃🏻🏃‍♀️

プロキットを活用して、クオリティの高いプロジェクト成果物を成功的に作ってみてください！

プロジェクトの世界へようこそ、改めて歓迎します 🐵

こんな方に
おすすめです

学習対象は
誰でしょう？

  • 独学でWeb開発を勉強している方

  • Webフロントエンド就職準備生

  • 自分だけの初めてのプロジェクトを始めてみようとする方

  • AI時代に必要な開発者として成長する方法について悩んでいる方

前提知識、
必要でしょうか？

  • Reactなどのツール活用について基礎学習ができている方

  • 一人で基礎プロジェクトを遂行してみる準備ができている方

こんにちは
です。

811

受講生

24

受講レビュー

1

回答

5.0

講座評価

6

講座

재밌게 성장할 수 있는 콘텐츠를 고민하고 제작합니다.

열정이 있는 누군가에게 해결해야 하는 좋은 문제(과제)를 제시한다면 성장할 수 있다고 믿고 있고,

어떻게 하면 학습에 더 도움이 되는 실무와 같은 문제와 미션을 제시할 수 있을지 주로 고민합니다.

 

Not Yet, But Soon

아직은 아닌 것 같지만, 곧 이루어 갈 모든 분들과 함께합니다.

 

nybs.contact@gmail.com

カリキュラム

全体

6件 ∙ (2時間 20分)

講座資料（こうぎしりょう）:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください！

￥3,558

nybsの他の講座

知識共有者の他の講座を見てみましょう！

2025年生成AI トレンド総まとめCourse Thumbnail

2025年生成AI トレンド総まとめ

nybs

2025年の一年間で話題となった生成AI、LLM、エージェントの問題を一気にまとめてご紹介します！主要AI開発3社(OpenAI、Google、Anthropic)の発表内容を中心に、25年に目覚ましく発展したAIのトレンドを見ていきましょう。

Beginner

Beginner

AI, Generative AI, claude

2025年生成AI トレンド総まとめCourse Thumbnail

2025年生成AI トレンド総まとめ

nybs

似ている講座

同じ分野の他の講座を見てみましょう！

Slack クローン コーディング [React を使用したリアルタイム チャット]Course Thumbnail

Slack クローン コーディング [React を使用したリアルタイム チャット]

zerocho

Slack サービスを参考に、本格的な React Web 開発を始めましょう。会員登録、ログイン、ルームの作成、リアルタイム チャットまで!

Intermediate

Intermediate

Clone Coding, React, TypeScript

Slack クローン コーディング [React を使用したリアルタイム チャット]Course Thumbnail

Slack クローン コーディング [React を使用したリアルタイム チャット]

zerocho

[React/VanillaJS] UI要素を直接作成する Part 1Course Thumbnail

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンにして、Web APIを活用したさまざまな視点と方法を体験し、フロントエンド開発のスキルを一層引き上げてみてください。

Basic

Basic

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 1Course Thumbnail

[React/VanillaJS] UI要素を直接作成する Part 1

jaenam

[React/VanillaJS] UI要素を直接作成する Part 2Course Thumbnail

[React/VanillaJS] UI要素を直接作成する Part 2

jaenam

代表的なUI要素をReactバージョンと純粋なJavaScriptバージョンにして、Web APIを活用したさまざまな視点と方法を体験し、フロントエンド開発のスキルを一層引き上げてみてください。

Basic

Basic

React, vanilla-js, ui

[React/VanillaJS] UI要素を直接作成する Part 2Course Thumbnail

[React/VanillaJS] UI要素を直接作成する Part 2

jaenam

フロントエンドマスタークラスCourse Thumbnail

フロントエンドマスタークラス

hoonyhan

Web開発の経験が最低1年以上ある学生および実務者のための上級フロントエンド講座です。最も適した対象者は、現場で2〜3年以上の経験を積み、スキルの停滞期を迎えている方、または大企業で考慮すべき製品構造について学びたい方のために作られました。

Intermediate

Intermediate

JavaScript, React, Functional Programming

フロントエンドマスタークラスCourse Thumbnail

フロントエンドマスタークラス

hoonyhan

正しく学ぶReact：ミッションで完成するレンダリングの本質と宣言型UI [Part 1 – 基礎編]Course Thumbnail

正しく学ぶReact：ミッションで完成するレンダリングの本質と宣言型UI [Part 1 – 基礎編]

nhcodingstudio

単純に聞いて終わる講義ではありません。この講義は「Reactを理解する瞬間」ではなく 「Reactを直接扱えるようになる瞬間」を目標にしています。 毎セクションごとに講義と共にミッションを遂行し、練習問題を直接解きながら、 JSX、Virtual DOM、State、useEffectのような核心概念を手で実装しながら身につける過程です。 完走を終えた時、あなたは単純にReact文法を知る入門者ではなく、 コンポーネント設計からレンダリングフローまで自ら説明し活用できる開発者になっているでしょう。 「聞くだけの授業ではなく、完成していく学習。」 Reactの本質を理解し、宣言型UIの世界を直接体験してください。

Basic

Basic

HTML/CSS, JavaScript, React

正しく学ぶReact：ミッションで完成するレンダリングの本質と宣言型UI [Part 1 – 基礎編]Course Thumbnail

正しく学ぶReact：ミッションで完成するレンダリングの本質と宣言型UI [Part 1 – 基礎編]

nhcodingstudio

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）Course Thumbnail

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

Basic

Basic

React, Electron, GUI

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）Course Thumbnail

# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）

dakgangjung123

React Native with Expo: ゼロチョから正しく学ぶCourse Thumbnail

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

Web開発者が(特にReact開発者であれば)本当に簡単にアプリをリリースできる時代になりました。Expoと一緒なら、より一層速くAndroidとiOSアプリの両方をリリースできます。Expoを通じて迅速にアプリまでリリースできる開発者になりましょう。

Basic

Basic

React, React Native, Hybrid App

React Native with Expo: ゼロチョから正しく学ぶCourse Thumbnail

React Native with Expo: ゼロチョから正しく学ぶ

zerocho

1時間でChat GPTクローンをCursorで作成（ワンデークラス）Course Thumbnail

1時間でChat GPTクローンをCursorで作成（ワンデークラス）

dodocoding

Next.js + Cursor IDE でチャットプログラムを1時間で実装できる能力が身につきます。

Beginner

Beginner

nextjs, ChatGPT, React

1時間でChat GPTクローンをCursorで作成（ワンデークラス）Course Thumbnail

1時間でChat GPTクローンをCursorで作成（ワンデークラス）

dodocoding

[リニューアル] ReactでNodeBird SNSを作成するCourse Thumbnail

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。 最後に、検索エンジンの最適化後にAWSにデプロイします。

Intermediate

Intermediate

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成するCourse Thumbnail

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

ThreeJSとSpringAIで作る3D地球儀記事サービスCourse Thumbnail

ThreeJSとSpringAIで作る3D地球儀記事サービス

Neo

ThreeJSとSpringAIで作る3D地球儀アーティクルサービス | Neo + Essential 自分だけのチャットボットとThreeJSを通じて3D地球儀アーティクルサービスを作ってみましょう！

Basic

Basic

React, Kotlin, Spring Boot

ThreeJSとSpringAIで作る3D地球儀記事サービスCourse Thumbnail

ThreeJSとSpringAIで作る3D地球儀記事サービス

Neo

Web開発者の年収を上げるハイブリッドアプリ with ExpoフレームワークCourse Thumbnail

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

Basic

Basic

React, Next.js, expo

Web開発者の年収を上げるハイブリッドアプリ with ExpoフレームワークCourse Thumbnail

Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

codecamp

iOS/Androidアプリ開発のための本番 React Native - BasicCourse Thumbnail

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

Basic

Basic

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - BasicCourse Thumbnail

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

SpringAI + Reactで作る自分だけの感情日記サービスCourse Thumbnail

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

SpringAI + Reactで作る私だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です!

Basic

Basic

React, Kotlin, Spring Boot

SpringAI + Reactで作る自分だけの感情日記サービスCourse Thumbnail

SpringAI + Reactで作る自分だけの感情日記サービス

Neo

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶCourse Thumbnail

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

IT s Dev

完全なエンドツーエンド開発者ジャーニー — FastAPI、React、そしてVibe Coding技術を使用して、超高速API、モダンフロントエンドインターフェース、実際のプロジェクト、認証システム、ダッシュボード、そして完全なデプロイメントを構築する。

Beginner

Beginner

React, React Native, react.js

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶCourse Thumbnail

完全なフルスタックPython開発者ロードマップ：FastAPI、React、データベース設計API アーキテクチャを学ぶ

IT s Dev

コードで学ぶReact 19 with スプリングブートAPIサーバーCourse Thumbnail

コードで学ぶReact 19 with スプリングブートAPIサーバー

zk202308a5410

Spring Boot（Spring Boot ver3.4.x）で作成されるAPIサーバーと React 19（with TypeScript） 連携プロジェクトを完成させる！ バックエンドポートフォリオにフロントエンドを適用！ 実務者を対象に作成された講義（初級者向け講義ではありません。）

Intermediate

Intermediate

React, TypeScript, Spring Boot

コードで学ぶReact 19 with スプリングブートAPIサーバーCourse Thumbnail

コードで学ぶReact 19 with スプリングブートAPIサーバー

zk202308a5410

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)Course Thumbnail

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

Intermediate

Intermediate

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)Course Thumbnail

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp