inflearn logo
강의

講義

知識共有
inflearn logo
Challenge
募集締め切り
Programming

/

Web Development

[フロント PROKIT] 現役メンターのコードレビューを受けながら個人プロジェクトを完成させる 1期

現職者によるコードレビューとメンタリングを受けながら、タイマーアプリを作ってみます。実務レベルのクライアントプロジェクトを最後まで成功裏に完成できるよう、資料提供(企画、デザイン、API)、コミュニティ活動が一緒に進められます。プロジェクト学習と質の高い現職者フィードバックで、楽しく成長してみましょう!

React
TypeScript
Next.js

11개 수업 학습

18회 미션 수행

라이브 9 회

추가 자료를 통해 학습을 이어나가요.

같은 기수와 교류하고 함께 성장해요.

지식공유자와 멘토링 혜택!

질문하고 즉시 답을 얻어요.

nybs님과 함께해요!

924

受講生

61

受講レビュー

1

回答

4.8

講座評価

6

講座

楽しみながら成長できるコンテンツを考え、制作しています。

情熱のある誰かに、解決すべき良質な問題（課題）を提示すれば、成長できると信じており、

どのようにすれば学習の助けになるような、実務に近い問題やミッションを提示できるかを主に考えています。

Not Yet, But Soon

今はまだのようですが、まもなく成し遂げていくすべての方々と共に歩みます。

nybs.contact@gmail.com

もっと見る

共同知識共有者

プロジェクトが必要な方 🙋‍♂️🙋🏼‍♀️

もしかして、今こんな悩みはありませんか? 🤔

フロントエンドの講義をある程度受けたけど、これから何をどう勉強すればいいのか分からない!

専攻生だけどフロントエンドをやったことがないのでプロジェクトだけやってみたい!

プロジェクトを一つだけやってみたいけど、ブートキャンプの教育は長すぎて負担だ!

ブートキャンプを修了したが、学習が不足していてプロジェクトをもっと進めたい

ジュニアとして現場で働いているが、先輩や相談できる人がいなくて息苦しい!


そんな方々のために、[現職者と一緒に行うフロントエンドプロジェクトチャレンジ]を用意しました。

ブートキャンプに参加しなくても、意味のあるプロジェクト学習と現職メンターのフィードバックを受けることができます。

プロジェクトを作りながら成長したい方なら誰でも大歓迎です!

作って、共有して、参加しながら楽しく成長しましょう 🚀


メンターと一緒に進めるフロントエンドプロジェクト 🏃🏻

プロジェクト紹介 🔨

今回のチャレンジでは決められたテーマのプロジェクトを進めます。

DevTimeというタイマーアプリケーションを最初から最後まで作ってみます。

フロントエンド機能の実装に集中できるよう、企画、デザイン、サーバーを事前に準備しました。

用意された要求事項と資料に従って機能を実装してください。

1. 로그인

ログイン

2. 회원가입

会員登録

3. 타이머

タイマー

4. 할 일 관리

タスク管理

5. 대시보드

ダッシュボード

6. 랭킹

ランキング

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

それぞれが学習してきた内容をもとに個人プロジェクトを進め、進行過程を一緒に共有しながら楽しく成長します。


チャレンジの進め方

チャレンジは全4週間にわたって行われます。

毎週1回のコードレビュー、2回のメンタリングセッションでプロジェクトの進行状況をチェックしてもらえます。

プロジェクトを一緒に進めながら、現職者はどのような観点でプロジェクトを設計し、進行し、問題状況を克服していくのか確認してみてください。

チャレンジ開始、OT

チャレンジに参加する参加者とメンターの方々と一緒に挨拶します。これから進めるプロジェクトのテーマと進行方式、コードレビューとメンタリングの進行フローについて紹介します。

プロジェクト機能実装(個人進行)

毎週割り当てられた推奨プロジェクト進行フローを参考にして、プロジェクトの主要機能をそれぞれ実装します。進行過程で詰まった部分は学習コミュニティを通じて質問し、一緒に考えることができます。

ライブメンタリング

週2回、現職フロントエンドエンジニアのメンターとのライブメンタリングが行われます。プロジェクトの進行状況についてチェックを受け、現場の観点からプロジェクト進行に関する様々な視点を共有してもらえます。

コードレビュー

週に一度、現役メンターから進行中のプロジェクトのコードレビューを受けることができます。コードレビューはGithubで行われ、PR後に現役メンターをレビュアーに指定するとコードレビューが進められます。

学習コミュニティ

現職メンターや一緒に学習する参加者の方々が互いに交流し、自由にネットワーキングできる学習コミュニティを運営しています。一人でやると孤独で大変ですが、一緒にやれば最後までやり遂げることができます

その他にも、プロジェクトを通じて成功的な学習ができるよう、様々なモチベーションイベントが企画されています。

体系的によく管理された学習環境で楽しく成長してみましょう 🚀


メンター紹介 👩🏼‍🏫

現場実務経験を持つメンターがチャレンジに参加します。

プロジェクト構造設計、問題解決方法について実務観点のフィードバックとアドバイスを提供します。

mentor

最ナシル メンター

7年目のフロントエンドエンジニア

  • シックスショップ Frontend Engineer

  • パープルネスト Web Developer

  • コードイット スプリント フロントエンドメンター

  • バニラコーディングブートキャンプオフィスメンター

  • LinkedIn

独学では不要な試行錯誤を経験することになります。

成長のために必要な過程ですが、時にはより効率的な学習の方向性を示してくれる誰かが必要なこともあります。

今回のチャレンジには、参加者の皆さんの成長過程に寄り添ってくださる7年目のエンジニアの方がメンターとして参加します。

現場で様々な経験を積む前には分かりにくい、様々な観点や悩みを紹介してくださいます。

現役メンターの質の高いフィードバックと共にプロジェクト学習を成功させましょう 🔥

PROKIT資料集提供 📚

今回のチャレンジは[フロントエンドプロジェクトキット：タイマーアプリを作る]資料集を使用して進行されます。

4週間、フロントエンド機能の実装だけに集中して練習用プロジェクトに取り組めるよう、企画、デザイン、APIエンドポイントを提供します。

PRD(Product Requirements Document)

APIエンドポイント(Swagger UI)

Figmaデザイン案

プロジェクト用デザインシステム


チャレンジに参加された全ての方にDevtimeプロジェクト実装に必要な資料集すべてを無料で提供いたします。

* もしインフラーンクリップで先に資料集を別途購入された方は、nybs.contact@gmail.comまでお問い合わせください。コンテンツ購入費用分を割引した価格でお申し込みいただけるようご案内いたします。

チャレンジ参加時の注意事項

チャレンジ参加前に、以下の注意事項を必ず事前にご確認ください。

十分な事前学習ができた方がプロジェクト中心で実務的な能力を向上させていくSkill Upチャレンジです。

DOM操作とクライアントイベント処理、非同期処理(Promise、async/awaitなど)に対する理解、API通信(fetch API、axiosライブラリなどの活用)、トークンベース認証/認可など、プロジェクト進行のための必須知識は十分に事前学習した状態でチャレンジにご参加ください。

(必須)メンターが質の高いフィードバックを提供できるよう、プロジェクトはReact.jsまたはNext.jsのいずれかを選択して進めてください。

(推奨) TypeScriptの使用は推奨されますが、必須ではありません。

それ以外の技術スタックは、参加される方が自由に選択することができます。初期プロジェクト進行時の技術スタックに関する悩みも学習の一部であるため、プロセス開始後にメンターと一緒に相談して技術を選定することができます。

現職メンターのレビューとメンタリングは、実務の観点からプロジェクト設計と構造的な部分により重点を置いています。Line by lineレベルでの詳細なコードレビュー(文法、変数名、関数名など)は、一緒にチャレンジに参加される方々同士で互いに行うことを推奨しています。

PROKIT: Devtimeプロジェクトのテーマと要件に最適化されたコードレビューAIを学習中です。AIを活用して進行中のプロジェクトの詳細なコードレビューを受けてみてください。


その他、詳細なお問い合わせはnybs.contact@gmail.comまでお願いします！

12월

1일

챌린지 시작일

2025년 12월 1일 오후 03:00

챌린지 종료일

2025년 12월 29일 오후 02:59

챌린지 커리큘럼

全体

38件 ∙ (14時間 44分)

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

授業資料
ライブ

챌린지에서 배워요

  • フロントエンドフレームワークを使って一つの完成したWebサービスを作ることができます

  • 与えられた企画要求事項に従って実装し、一つの動作可能なサービスを作ることができます

  • 実務開発に似た様々な問題状況を経験し、解決していく過程を体験できます

  • プロジェクトを進める心構えと、効果的にプロジェクトを管理する方法を学びます

  • 同じレベルの他の学習者の方々と交流しながらモチベーションを高め、楽しく学習しましょう

こんな方に
おすすめです

学習対象は
誰でしょう？

  • 現職メンターの実務的な観点からのレビューとフィードバックを受けて成長したい方

  • フロントエンドを独学していて、そろそろプロジェクトをやってみようと思った方

  • プロジェクトをいざ始めようとしたら、何からどうすればいいのか分からず途方に暮れていた方

  • ブートキャンプを受講したが、追加のプロジェクト学習が必要だと感じている方

  • 良いプロジェクト経験でポートフォリオを強化したい方

  • 専攻生なのでブートキャンプを受講する時間はもったいないが、それなりのプロジェクト経験程度が必要な方

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

  • React.jsまたはNext.jsの使用可能者(いずれか一方のフレームワークの選択が必要です)

  • 状態管理ツール（Tanstack Query、Zustand、Reduxなど）を活用したグローバル状態管理

  • TypeScriptを活用した型指定および静的プログラミング（必須ではありませんが推奨します）

  • 認証・認可に関する概念及びトークンベース認証方式の実装

  • Git/Githubを活用したバージョン及びプロジェクト管理方法

  • その他、フロントエンドプロジェクトの業務遂行のための基礎知識

受講レビュー

全体

9件

4.9

9件の受講レビュー

  • mung5079님의 프로필 이미지
    mung5079

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    82% 受講後に作成

    1. 有益なメンタリング + コードレビュー 週2回のメンタリング + 週1回のコードレビューが行われましたが、本当に有益でした。私は実務で別途フィードバックを受ける機会がない状況だったのですが、チャレンジを通じて「何ができていて何ができていなかったのか」が分かり、より満足できました。そしてメンタリングで質問すると丁寧に答えてくださるのですが、この過程で普段気になっていたことをたくさん解消できました。 2. FEだけに集中できるプロジェクト PRD、Figma、APIが全て完成しているため、フロントエンドだけに集中できます。フロントエンドだけでも実装中に考えるべきことが多いため、ポートフォリオに使うのにも良いです。 一ヶ月以内に完成させるには量が多いため、チャレンジ後も時間を使う必要がありそうです。チャレンジ中は自分がフィードバックを受けたい部分を中心に実装、リファクタリングすることをお勧めします!

    • traumereiii님의 프로필 이미지
      traumereiii

      受講レビュー 3

      ∙

      平均評価 5.0

      5

      64% 受講後に作成

      チャレンジを通じて実践感覚を身につけたい方におすすめします。実務で作業するのと同じように企画書やAPI文書、Figmaデザインなどが提供され、実務の雰囲気でプロジェクトを進めることができました。 現職のメンターが直接受講生のコードを一つ一つ確認し、難しそうな点や役立ちそうな点をまとめて伝えてくださり、とても助かりました。

      • mnpine12님의 프로필 이미지
        mnpine12

        受講レビュー 1

        ∙

        平均評価 5.0

        5

        82% 受講後に作成

        事前に準備されたバックエンド資料と詳細なFigmaスタイル資料により、フロントエンドプロジェクトにより集中することができました。メンターの方が実際に使用されているパッケージや様々なコツも伝授してくださり、それぞれのコードを確認しては受講生に不足している部分を補完する方法でレビューを進めてくださいました。直接ライブでコードを修正しながら見せてくださったりもして、大変助けになりました。

        • sduddla님의 프로필 이미지
          sduddla

          受講レビュー 19

          ∙

          平均評価 5.0

          5

          100% 受講後に作成

          メンタリングとコードレビューが本当にとても役立ちました。 学んだ内容をすぐにプロジェクトに適用することができ、メンターの丁寧なコードレビューのおかげで見落としていた部分を改善することができました。とても良かったです。 おすすめおすすめ!

          • gkwlaks님의 프로필 이미지
            gkwlaks

            受講レビュー 1

            ∙

            平均評価 5.0

            5

            82% 受講後に作成

            メンターが毎回何か一つでも多く教えようとしてくださり、コードレビューも丁寧に見てくださってとても良かったです。現場の話もしてくださり、本当にライブのすべての時間が一時間も無駄ではありませんでした! メンターと一緒にする他のチャレンジもあればやると思います

            よくある質問

            취소 및 환불 규정
            챌린지는 지식공유자가 설정한 수업 최소 정원이 충족되지 않을 경우, 폐강 안내가 고지되며 결제 내역이 자동취소됩니다.

            nybsの他の講座

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

            2026年生成AIトレンドまとめ講義サムネイル

            2026年生成AIトレンドまとめ

            nybs

            ￥2,228

            入門 / AI, claude, Vibe Coding

            4.6

            (25)

            100+

            2025年の一年間、話題となった生成AI、LLM、エージェントのイシューを一度にまとめてお届けします！主要AI開発3社（OpenAI、Google、Anthropic）の発表内容を中心に、25年に驚くべき発展を遂げたAIのトレンドを振り返ってみましょう。

            入門

            入門

            AI, claude, Vibe Coding

            2026年生成AIトレンドまとめ講義サムネイル

            2026年生成AIトレンドまとめ

            nybs

            ￥2,228

            入門 / AI, claude, Vibe Coding

            4.6

            (25)

            100+
            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り講義サムネイル

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り

            nybs

            ￥3,713

            入門 / React

            ミッション
            ミッション

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

            入門

            入門

            React

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り講義サムネイル

            [PROKIT] バイブコーディング/フロントエンド練習用問題集：タイマーアプリ作り

            nybs

            ￥3,713

            入門 / React

            ミッション
            ミッション

            ￥42,885