강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)

難易度 入門

受講期間 無制限

  • codecamp
  • nwd09074926
React
React
Next.js
Next.js
GraphQL
GraphQL
SEO
SEO
Node.js
Node.js
React
React
Next.js
Next.js
GraphQL
GraphQL
SEO
SEO
Node.js
Node.js

学習した受講者のレビュー

学習した受講者のレビュー

4.5

5.0

수달

1% 受講後に作成

こんにちは。 1年目のジュニアバックエンド開発者です。 会社のニーズと個人的な欲望でフロント分野も学習をしているところで、ついにこの講義に出会うことになりました。 確かにバックエンド分野とは違う流れが目立ち、最初は見慣れないように感じられましたが、JavaScriptという言語の原理と使い方までも一緒に教えてくれるので、ますます楽しさとスピードがつきますね。 原理だけを学習するのではなく、一緒に作っていきながら勉強するやり方のおかげで理解がうまくいかないときでも、あれこれ一人で触ってみて学習することができ、より良いようです。 良いカリキュラムのおかげで、この講義をすべて聞いたら、少なくともフロントエンドのロジックを理解できるバックエンド開発者というポジション。 良い講義ありがとうございます。

5.0

감자도리

2% 受講後に作成

豆のメンター様..... インフラに降臨していただきますね。信じて聞く豆腐のメンターの講義ㅠㅠㅠお元気ですか?あまりにも見たいです。メンター様のおかげでフロントエンド開発者として就職して1年目会社よく通ってますよㅠㅠ!インプランを見ながら川の突然上がってホダダック川の決済しました!フロントエンドは所蔵下 バックエンドは勉強してみたいです❤️ 最初の部分少しまた聞いたのですがメンター様の声と顔 あまりにも香水瓶誘発するもの…こんなにもお会いできてとても良いです!!!メンター様なのでもう一度熱攻してフルスタックにジャンプアップしてみましょう!近いうちに挨拶に行きます!尊敬するメンター様!😍

5.0

움냐

3% 受講後に作成

オフラインでコードキャンプフルスタックコース修了した修了生です! 文字で豆のメンター様の講義がインフラに上がってくるというそりを聞いて走ってきました。 開発者になった後、開発者の視線でこのカリキュラムを申し上げたら、プロジェクトのパフォーマンスを考慮するジュニアになりたいのなら完璧なカリキュラムのようです! ジュニアもよく接することができるreactで使用するmemoizationだけでなく、ブラウザのレンダリング原理に基づいたrepaint、reflowも学んでみると、確かにリファクタリングする際に考慮できる幅が広がりました! そして、メンテナンスにもう少し有利な方面でコードを編むことができるパターンを教えてくれ、ヒントをいただき個人的にうまく活用してみています! この講義をまた見ることになるなんてㅠワンドゥメントさん 覚えてあげるかもしれませんが、見たいですㅜㅜㅜ ノウォンドゥ!

受講後に得られること

  • 実務ポートフォリオ2つ

  • 最新のテクノロジー スタックを活用した 8 つのプロジェクトの実装

  • 開発サイクル全体を完全に理解する

  • 実務コミュニケーション能力の向上

  • +α バックエンドの基本CRUDまで習得

ノーベース非専攻者も
フロントエンド開発者としてキャリアジャンプ! ⭐

📢案内事項があります。
高濃縮フロントエンドコースのアップデート講義人
「完璧なフロントエンドコース」が新たにオープンしました。

👉🏻新しいフロントエンド講義:



2025年のための新しいフロントエンドブートキャンプ講義がより強力で、より細かい内容で新たにオープンしました!
なんと4つのパーツで構成された「完璧なフロントエンドコース」で、素早く実践的な学習内容に成長してみてください。

[スタートフリーキャンプ]、[CSS&Javascript Master]。 [Web Front-end Bootcamp]、[Hybrid App Bootcamp]
完全にサッチョからハイブリッドアプリのコースまで、150時間を超える高濃縮フロント講義を続けています:)

2025年より高いキャリアジャンプをしてみてください🚀
コードキャンプはあなたの成長を応援します。


💥 Attention!
この講義は、コーディングブートキャンプで実際に使用する講義で、ノーベースから非専攻者、そしてジュニア開発者まですべて受講可能なカリキュラムで構成されています。

「本物の」ブートキャンプで作られました
[高濃縮フロントエンドコース]

✅勉強も実務のように!実務に適用する方法を教えてくれる実務中心講義

非専攻者から専攻者まで皆が理解できるカスケードカリキュラム

[React, Next.js, Graphql]最新技術の言語学習とプロジェクトの実装

 就職率92%の認定された「本物」ブートキャンプのカリキュラムに進む

ノーベースも可能な完全基礎から開発者就職レベルまで成長


こんな方には
それ以上に最適です。

A to Z、
プロの講義をしたい。

開発..?何も知らないけど
就職レベルまで成長したいです。

実務で使用する技術と
本物のノウハウを学びたいです。


私たちはなぜ
ReactとNext.jsを使用する必要がありますか?

Next.jsはReactライブラリのフレームワークです。 Reactとは異なり、デフォルトでNext.jsはServer-Side Rendering(SSR)を行うため、検索エンジン最適化(SEO、Search Optimiziation)に最適です。また、プレレンダリングにより、あらかじめデータがレンダリングされたページをインポートできるようにしてくれるので、ユーザー体験の面でも有利です。

これに加えて、ページベースのルーティング、イメージの最適化、built-in-cssなどを提供することでプロジェクトのパフォーマンスを向上させ、開発者が開発しやすい環境を提供するので、効率的でパフォーマンスの高い開発ができます。


ちょっと初心者でも大丈夫です、
まずは基礎から押してみましょうか?

「コーディングの「鼻」者も知らない私…開発者として就職できるか?」そんな心配はすぐに入れておいてください。今回の講義では、初心者も現業開発者レベルに成長できるよう、しっかりした基礎講義から始めますから!

🧩基礎のステップstep01。

コーディングは何ですか?プログラムのインストールから基礎を築く

Web・アプリ開発の基礎の中で、基礎、HTML・CSS・Javascriptの基本的な文法と活用方法を学び、学んだ内容に基づいて会員登録とミニホームページを実装します。


🧩
 基礎を打つstep02。

60以上の最新のプロパティでCSS!

今日学んだ内容は今日復習しよう!講義の受講後、十分な練習を通じて完全に私のものに吸収するのに役立ちます。

🧩基礎のステップstep03。

JavascriptでWebページの機能をより豊かに。

一緒に使うツールとJavascriptが動作する原理、コードの書き方を中心に学習し、d-day counterとto-do listを実装し、学んだ内容を完全な私にする時間です。


隙間一つまで見逃さない

「線を越える」フロントエンドカリキュラム

#01. Reactの基礎

Reactの基礎から始めましょうか?まず、各種パッケージをインストールします。そしてJavascriptランタイム環境であるNode.jsを理解し、Reactでプロジェクトを作成します。

#02.データ通信

Rest-APIとGraphQLの違いを理解し、Apollo Clientを介してバックエンドとの通信方法を学びます。

#03.ルーティングと再レンダリング

ページ移動方式であるRouterとDynamic Routingの違いを理解して活用できます。

#04.フォルダ構造・props・コンポーネントの再利用性

Container/Presenter パターンを理解し、コンポーネントを再利用する方法で効率を高めます。

#05.タイプスクリプト

タイプスクリプトのさまざまなタイプを理解し、私のポートフォリオに適用します。

#06.フレームワーク/ライブラリとレイアウト
構造

Webページを飾る様々なライブラリ。それらの活用法を学び、使いやすさのためのページネーションと無限スクロールを実装します。

#07.コンポーネントとライフサイクル

クラスコンポーネントのライフサイクルと関数型コンポーネントのライフサイクルの違いを理解し、それを元に活用する方法を学習します。

#08.バックエンド構造とファイアベース

APIを直接作ってみて、バックエンドの基礎を理解できますよ。また、BAASサービスであるFirebaseを活用してみましょう。バックエンドを理解するフロントエンド開発者とは!あまり魅力的ではありませんか?

#09.画像のアップロード

「ホームページにきれいな画像を載せたい!」画像アップロードのプロセスを理解し、検証を通じて直接アップロードできます。

#10.検索

Webページに検索機能は欠かせません。検索プロセスを理解し、デバウンスを適用して自分のWebページを最大限に高めます。

#11.ログインと権限の分岐

JWTトークン方式のログインプロセスを理解します。また、ログインの有無で権限分岐を設定し、Recoilを活用してGlobalstateを管理できます。

#12.フォームライブラリ

React-Hook-Formとyupを活用して既存のコードをリファクタリングして、より効率的にサービスを改善できます。

#13.カスタムフック

構造分解割り当てとタイプスクリプトのジェネリックタイプを活用してカスタムフックを作成できます。

#14.カカオの地図とウェブエディタ

SSRとCSRを知っていますか?この違いを理解し、カカオマップとウェブエディタの使い方を学びます。

#15.お支払いとイベントループ

E-commerce platformの中核!お支払いプロセスを理解して実装してみてください。また、JavaScriptの駆動原理についてより正確に理解していきます。

#16. refresh Token

refresh Tokenを使って、実務でも利用できるログインプロセスを学習します。

#17.パフォーマンスの最適化

useMemoとuseCallback、イメージ一時URLを活用して、既存のコードをまるで実務のようにリファクタリングできます。

*個別のクラス用APIを提供します。

#18.テストコードと配布

jestとcypressを活用してテストコードを作成しましょう。これにより、ユニットテストと統合テストを進めて私のコードをテストする時間です。


私の手で埋めたコードで
ポートフォリオを完成させてください。

☝🏻アップバウトフリーボード

ブログ、コミュニティなど、ウェブのどこからでも抜けない掲示板を直接実装できます。コーディングを理論だけ知っているということは不可能です!プロジェクトの練習を通じて、ページネーション、無限スクロールなど、いくつかの機能で独自のコードを埋めていきます。しかも私の個性に合ったUIで飾ることができるので興味だけでなく実力も上がりますよね?

✌🏻掲示板で作るイコマースプラットフォーム

「もし..にんじんはありますか?会員登録、ログイン、決済、コミュニティなど多くの機能を含んでいるE-commerceウェブサイトを私の手で実装できます。まだ幕を閉じるが、この講義を受講したら素敵なポートフォリオが作られているんです。

🎯この講義で得られるポートフォリオです。
· 01. フリーボード
- UI・リストアップ・ページネーション・投稿の修正や削除など、Webの最も重要な機能を実装し、これをもとに一つのポートフォリオを完成します。
· 02. 中古マーケット- 最初のポートフォリオで製作した掲示板を中古マーケットに高度化するポートフォリオです。ログイン・権限分岐・決済・画像処理などの機能を実装します。

さらに、川の一つとして
イーマン大のスタックを一度にゲット!

複数の言語を一度に理解するのは難しいことです。この講義では、プロジェクトを通じてJavascript、Typescript、React、Next.js、Graphqlなど様々なスタックを直接活用し、独自のWebページを完成します。一つの機能を実現するために有機的に連結された言語の使い方を習得し、自然に理解することになるでしょう。

本当の実務では様々な言語を適切に使用し、最高の効率を出すことができるはずですから!

* version : 受講時に使用するバージョンです。 (必要に応じて参考にしてください!)

 - next 12.1.0
- react": 17.0.2
- react-dom": 17.0.2
- typescript": ^4.8.4
- @types/node": 17.0.2
- @types/react": 17.0.2
- @apollo/client": ^3.6.9
- @emotion/styled": ^11.10.0
- @material-ui/core": 4.12.4
- antd": ^4.22.8
- eslint": ^8.0.1
- prettier": 2.7.1

「Version」とその技術スタックの理解がなくても大丈夫です。講義で丁寧で親切に説明します:)

より高いキャリアジャンプのために
ブートキャンプの授業資料を提供します。


📑セクション別学習資料

講義を受講しながら内容の理解を助ける資料です。実際のブートキャンプの受講生も使う資料だけにうまく活用すれば、逃した部分があっても大きな助けになるでしょう。

📑セクション別の課題資料

今日学んだ内容は今日復習しよう!講義の受講後、十分な練習を通じて完全に私のものに吸収するのに役立ちます。


📑 セクション別ポートフォリオ

各セクションで学んだ機能を活用してポートフォリオを作成する際に参考にできる資料です。このレッスンで私のポートフォリオに2つのプロジェクトを追加してください!



この講義の受講生
自分で作ったサービスをご紹介します。

🎨 Artipul
美大生の作品を簡単に購入できるサービスです。メインページだけでなく決済オープンAPIでポイント充電、決済を可能にし、Socket.ioを使ってリアルタイム入札機能まで実装しました。

📙 Flog
旅行スケジュール・家計簿・旅行ログで構成される旅行ガイドブックサービスです。 drag&drop機能で旅行スケジュールを組むとリアルタイムでDBに保存され、使いやすさが高まりました。さらに、他のユーザーとスケジュールを共有できるように実装しました!


[高濃縮フロントエンドコース]
受講後は私も開発者!


🙆🏻‍♀️実務にすぐに活用できるポートフォリオ2個

👨🏻‍🎓自分で成長できる頑丈な開発知識を構築

💁🏻‍♀️実務でスムーズなコミュニケーションを行うジュニア開発者

👨🏻‍💻他の部署とのコラボレーション能力に優れたフロントエンド開発者

🙋🏻‍♀️ 自分でもできるE-commerce Platformの開発

より高いキャリアジャンプのために
「高濃縮バックエンドコース」も用意しました。

👉🏻関連おすすめ講義:


練習用APIを使用してフロントエンドの最新の技術スタックと開発サイクルを理解したら、Node.jsとNestを中心にバックエンドまでより深く学びましょう。必要なAPIを自分で作成し、データを扱う方法、検索、支払い、配布など、バックエンドのすべてをお知らせします。バックエンドコースまで完走し、フルスタック開発者でより高くキャリアジャンプしてください🚀


待って!
受講前にご確認ください。

💡コンピュータの仕様を確認してください。

・Mac OSは仕様に無関係です。

· Window OSを使用する場合は、git-bashのインストールが必要です。
- 授業資料 > 環境設定を参考にしてください。

- Intel Core i5 9世代以上 / AMD RYZEN 5 2世代以上
- RAM 16GB以上推奨

💡日課表を作って定期的に着実に学習することをお勧めします。
💡学習資料を受け取るためにコラボレーションツール「Notion」アカウントを作成してください。
💡受講に必要な学習資料はノッション(リンク)で提供されます。
※学習資料の著作権はコードキャンプにあります。不正盗用・配布・複製を禁止します。

もし
質問がありますか?

Q. 何の知識もなく受講してもいいですか?
はい。コーディングの「鼻」者も知らなくても大丈夫です。より深く広く理解できるように、HTML・CSS・Javascriptのサッキ秒プロセスが含まれています。

Q. 別の教材がありますか?
ノッションでお届けする「講義資料」を活用してください!本資料は実際のブートキャンプで使用するままの資料です。無断盗用・配布・複製を禁止します。

Q. 基礎講義(スタートはプリキャンプ、CSS、Javascript)の授業資料リストが混乱します。

Q. 受講中に気になる点がありました。
コミュニティに質問を残してください。コードキャンプチームはすぐに素早くクールな答えを捧げます:)


チームコードキャンプ
紹介します。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • 専門的なカリキュラムで正しく成長したいすべての人

  • 国費または他の講義に不足を感じた方

  • 最新の技術スタックを使用して開発サイクルを完了したいジュニア開発者

  • トレンドに合ったポートフォリオで就職したい就職希望者

  • 体系的にコーディングを勉強したい大学生

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

  • コーディングへの情熱と意志💪🏻

こんにちは
です。

15,655

受講生

468

受講レビュー

230

回答

4.8

講座評価

15

講座

"Try anything, Try everything!"

コードキャンプは有能なエンジニアを養成し、開発の未来を変えるという目標を掲げています。社会的、経済的、教育的な背景に関わらず、誰にでもキャリア転換の機会を提供するために、インフラン(Inflearn)に登場しました。コードキャンプと一緒にキャリアアップに挑戦しましょう!

カリキュラム

全体

341件 ∙ (128時間 6分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

82件

4.5

82件の受講レビュー

  • ottt님의 프로필 이미지
    ottt

    受講レビュー 1

    平均評価 5.0

    5

    1% 受講後に作成

    こんにちは。 1年目のジュニアバックエンド開発者です。 会社のニーズと個人的な欲望でフロント分野も学習をしているところで、ついにこの講義に出会うことになりました。 確かにバックエンド分野とは違う流れが目立ち、最初は見慣れないように感じられましたが、JavaScriptという言語の原理と使い方までも一緒に教えてくれるので、ますます楽しさとスピードがつきますね。 原理だけを学習するのではなく、一緒に作っていきながら勉強するやり方のおかげで理解がうまくいかないときでも、あれこれ一人で触ってみて学習することができ、より良いようです。 良いカリキュラムのおかげで、この講義をすべて聞いたら、少なくともフロントエンドのロジックを理解できるバックエンド開発者というポジション。 良い講義ありがとうございます。

    • nej10449048님의 프로필 이미지
      nej10449048

      受講レビュー 5

      平均評価 5.0

      5

      2% 受講後に作成

      豆のメンター様..... インフラに降臨していただきますね。信じて聞く豆腐のメンターの講義ㅠㅠㅠお元気ですか?あまりにも見たいです。メンター様のおかげでフロントエンド開発者として就職して1年目会社よく通ってますよㅠㅠ!インプランを見ながら川の突然上がってホダダック川の決済しました!フロントエンドは所蔵下 バックエンドは勉強してみたいです❤️ 最初の部分少しまた聞いたのですがメンター様の声と顔 あまりにも香水瓶誘発するもの…こんなにもお会いできてとても良いです!!!メンター様なのでもう一度熱攻してフルスタックにジャンプアップしてみましょう!近いうちに挨拶に行きます!尊敬するメンター様!😍

      • jaake973633님의 프로필 이미지
        jaake973633

        受講レビュー 2

        平均評価 5.0

        5

        3% 受講後に作成

        オフラインでコードキャンプフルスタックコース修了した修了生です! 文字で豆のメンター様の講義がインフラに上がってくるというそりを聞いて走ってきました。 開発者になった後、開発者の視線でこのカリキュラムを申し上げたら、プロジェクトのパフォーマンスを考慮するジュニアになりたいのなら完璧なカリキュラムのようです! ジュニアもよく接することができるreactで使用するmemoizationだけでなく、ブラウザのレンダリング原理に基づいたrepaint、reflowも学んでみると、確かにリファクタリングする際に考慮できる幅が広がりました! そして、メンテナンスにもう少し有利な方面でコードを編むことができるパターンを教えてくれ、ヒントをいただき個人的にうまく活用してみています! この講義をまた見ることになるなんてㅠワンドゥメントさん 覚えてあげるかもしれませんが、見たいですㅜㅜㅜ ノウォンドゥ!

        • whitedog3190861님의 프로필 이미지
          whitedog3190861

          受講レビュー 5

          平均評価 5.0

          5

          1% 受講後に作成

          Webフロントエンド開発者になる準備をしている学生です。 インプランコードキャンプHTML、CSS、JavaScriptまで聞いてフロントエンドコースまであり一緒に購入しました! 先ほどリアクト講義を聞いていますが、とても面白いですよ~~~!!!!!!! まだ難しい部分はないのに、後ろに行くほどどんどん難しくなるかと少し心配になるけど!頑張って聞くエジョンです!一度ノッション素材がとても好きですㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ わかりにくい部分は無限の繰り返しで振り返ればいいでしょう..?????ㅎ ありがとう!!!!!!ファイティング ぜひ受講完了してポートフォリオ完成させてみます ファイティング

          • ejuhee님의 프로필 이미지
            ejuhee

            受講レビュー 3

            平均評価 5.0

            5

            32% 受講後に作成

            ノウォンドゥメンター様にオフライン講義を聞いた学生です! 一人で聞く惜しいクオリティの講義なので、周りの友達にも既におすすめをたくさんしていましたが、 こんなにインフラでお会いできてとても嬉しいですㅠㅠ 見たかったですㅠㅠ 以前に他の講師様の授業も聞いてみましたが、実習なしで理論中心の授業がほとんどで、いざ直接コーディングをしようとしたら幕を閉じました。 一方、ノウォンドゥメンターは実務で使われる技術中心と理解しやすく教えてくれ、 原理を把握した後、自分で直接実装までしてみるように授業が行われ、実務でもすぐに適用できる程度のレベルを作っていただきました。 授業で扱っていない技術に直面しても、学んだ原理を適用して把握できるようになりました。 また、授業中途中にしてくださるアドバイスを通じて開発者として持たなければならないマインドも学ぶことができました。 メンター様が開発を心から楽しんで愛されている気持ちが感じられ、私も一緒に開発勉強が楽しくなった部分もあります。 ノウォンドゥメンターは本当に私の賜物です、、💕 一日が違って変わるフロント業界らしく🥲 私がまだ学んでいない新技術と内容が多く見せて受講しようと思います! 他のクラスも開かれたらすぐにまた来るよ

            ¥48,361

            codecampの他の講座

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

            似ている講座

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