강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

[コードキャンプ] ブートキャンプで作った「完璧な」フロントエンドコース

数百名の開発者を輩出した「本物」のブートキャンプの完璧なフロントエンドカリキュラムです。この講座一つで、皆さんは現役ジュニア開発者レベルまで成長でき、フロントエンドの技術スタックの活用能力と知識を得られるでしょう。誰でも社会的、経済的、教育的背景に関わらずキャリアを積めるよう、[コードキャンプ]が準備しました:)

이론 실습 모두
코드캠프
코딩독학
React
Next.js
GraphQL
React Native
Hybrid App

こんなことが学べます

  • より高度な内容に備えるための親切な[CSS&Javascript]

  • 最新技術スタックを活用した[ウェブフロントエンド]

  • 実務能力向上のための[ハイブリッドアプリフロントエンド]

  • ミニポートフォリオ2個、実務ポートフォリオ2個

  • 全体の開発サイクルを完璧に理解

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

💥 Attention!

この講義は、コーディングブートキャンプで実際に使用されている講義で、「臨場感の一部を感じることができます」。
ノーベースから非専攻者そしてジュニア開発者まですべて受講可能なカリキュラムで構成されています。

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

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

オン・オフラインで2,000人を超える受講生が選んだ「高濃縮フロントエンドコース」
より強力にアップデートされ、「完璧なフロントエンドコース」で再び訪れてきました😀

🎯 'ワンプ' 講義の一つで基礎からウェブ、そしてハイブリッドアプリまで学べる完璧な講義を提供します。

スタートはフリーキャンプです

  • 累積4,000人以上が受講した最高のサッキチョ講義です。

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

  • Web構造とHTML、CSS、Javascriptの基本的な文法と活用を学びます。


    プロジェクト:会員登録、ミニホームページ


CSS&JSマスター🆕

  • 基礎を超えて実務に適用可能なCSSとJavascriptを学びます。

  • 60以上の最新のプロパティでCSSをマスターできます。

  • 実務的な機能実装を通じてJavascriptをマスターできます。


    プロジェクト:トレンディなダッシュボード日記帳

Webフロントエンドブートキャンプ🆕

  • コーディングブートキャンプ「コードキャンプ」の代表フロントエンド講義をそのまま提供

  • 2025年の最新のReact、Next、ライブラリを学びましょう。


  • 100時間以上の入念かつ体系的なカスケード実務カリキュラム


    プロジェクト:旅行者のためのコミュニティおよび商品購入「旅行プラットフォーム」

ハイブリッドアプリブートキャンプ🆕

  • ブートキャンプ初!ハイブリッドアプリコースを提供します。

  • React.NativeとExpoを活用してハイブリッドアプリを実装します。

  • 最高のポートフォリオを構築し、独自のハイブリッドアプリシューティングゲームをお楽しみください。


    プロジェクト: ハイブリッドアプリで完成する「旅行プラットフォーム」

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

A to Z
10時間レベルの概念講義以外
「本物の」専門的な講義が欲しいです。

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

え?禁止〜
本当に慎重に教えてください
自分だけの射手が必要です。

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

オンライン講義を聞いていますが..課題が足りないと思ったら少ないですか?
ブートキャンプで進行する学習資料と課題をそのまま提供しています。

講義、学習資料の復習、セクション別の課題にうまく従えば、膨大な成長が期待できますよ😁

入念な学習資料の提供(ノッション)

📑セクション別学習資料

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

授業に必要なデザインを提供(フィグマ)

📑デザインガイド

フロントエンドクラスに必須のデザインを提供しています。デザインをそのままフォローしてポートフォリオを作ることができ、追加の機能を加えることができればさらに大きな成長を成し遂げることができるでしょう。

セクション別に分かれた明確な課題

📑セクション別の明確な課題

自宅でブートキャンプを進行するようにセクション別に明確な課題を案内しています。課題に忠実に従い、私のポートフォリオに実用的なプロジェクトを追加してください。

基礎課題にはリファレンスコードも提供します。

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

「完全なフロントエンド」では、集中的に成長できるように各コースごとにプロジェクトを完成できるようにカリキュラムが構成されています。みんなが理解できるカスケードカリキュラムで実際のプロジェクトを作りながら講義を進んでみると、達成感だけでなく実力も上がるでしょう。

スタートはフリーキャンプです

HTML、CSS、基本Javascriptを練習するためのサイワールドを完成させてください。

CSS&JSマスター

私の感情を記録できるトレンディなダッシュボードの日記帳を完成させてください。

Webフロントエンドブートキャンプ

CRUDに充実した旅行者掲示板「トリップトーク」と宿泊商品を購入できる「旅行プラットフォーム」を完成してみてください。

ハイブリッドアプリブートキャンプ

今、「旅行プラットフォーム」をハイブリッドアプリに仕上げてみてください。

フロントエンドのコア技術
なぜReact.jsとNext.jsを使用するのですか?


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

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

最後に今はハイブリッドアプリ時代!
ReactとNextに基づいて、React.NativeとExpoを活用して、より便利で効率的にハイブリッドアプリを開発し、AndroidとIOSにサービスを構築できます。

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

この講義では、プロジェクトを通じてReactとNext.jsだけでなく、Typescript、Graphqlなど様々な主要スタックを活用して学習を進めます。 1つの機能を実装する有機的に接続された言語の使い方を習得し、自然に様々な技術スタックを理解することになります。

本当の実務では、さまざまな言語と技術スタックを適切に使用し、最高の効率を出すことができるはずですから!


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

- 「next」「14.2.13」 、 - "react" : "^18" , - "react-dom" : "^18" , - "typescript""^5" - "@apollo/client" : "^3.11.8" , - "graphql" : "^16.9.0" , - "react-hook-form" : "^7.53.1" , - "zod" : "^3.23.8" , - "zustand" : "^5.0.0" , - "tailwindcss" : "^3.4.1" , 「Version」とその技術スタックの理解がなくても大丈夫です。講義で丁寧で親切に説明します:)

隙間一つまで見逃さない
「ラインを越える」フロントエンドブートキャンプカリキュラム

💡Reactの基礎から核心まで盛り込まれています。ウェブカリキュラムの主な内容を確認してください💡

#01. ReactとNext.js

確かにアップグレードされたReact18の基礎からコアまで学習できます。さまざまなパッケージをインストールし、Javascriptランタイム環境であるNode.jsを理解し、ReactとNextでプロジェクトを作成します。

#02. JSと非同期核心

ブラウザの練習で学ぶスコープ、クロージャ、ホイスティング、イベントループ、awaitとマイクロキュー関係とstateレンダリングを学びます。

#03.コンポーネント設計

タイプスクリプトとユーティリティ/ジェネリックタイプを活用した共同コンポーネント設計とnpm展開を活用してユーザー/管理者プロジェクトを共有できるように実装します。

#04.キャッシュ

フェッチポリシーによるサーバーデータキャッシュの実践とローカルデータキャッシュの効率化のためのShallow-Routingを学びます。

#05.ログインとセキュリティ

accessTokenとrefreshTokenの活用とlocalStorageトークンの消臭とXSS防御の実践、CORSとCSRFの理解に基づいたproxy APIを作ってみることができます。

#06.深化機能

お支払い、地図、郵便番号、エディタの練習です。また、実際の練習のためのバックエンドAPIを提供しています。

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

フロントエンドのための10のパフォーマンス最適化を学び、適用することができます。 (メモ、プリフェッチ、プリロード、ワンドインなど)

#08.フロントエンドサーバー

SSR/CSRとハイドレーションの理解に基づく
React 18 RCC/RSC リファクタリングを行い、プロジェクトに適用します。

#09.テスト

MSWを活用したAPIモッキングテストとplaywrightを活用したE2Eテストができます。

#10. Webデプロイ

ブラウザの動作原理とネットワーク、ドッカーに基づいてAWSにS3静的サイトをデプロイし、EC2ダイナミックサイトHTTPSをデプロイします。

今はハイブリッドアプリの時代! [Android / IOS]アプリカリキュラムの主な内容を確認してください

#01.モバイルCSS構造

さまざまなデバイスサイズ、共通ヘッダー、スクロールによるフッター対応、タブレット拡張のためのCSS構造設計を学ぶことができます。

#02. Web/アプリ通信

アプリとウェブの通信のためのAPI構造設計を学び、適用する方法を学びます。

#03.深化機能

アプリのお知らせ、位置情報、機械情報、カメラ、Androidのバックボタン、権限の変更について学び、練習できます。

#04.マイクロフロントエンド

さまざまなマイクロフロントエンドアプローチの理解に基づいて、Webビューのドメイン分離とWebビュー間のキャッシュ共有を学習して実践できます。

#05.アプリログイン

accessTokenとrefreshTokenの活用とルーティングを活用したasyncStorageトークンの消臭実習やSharedPreferenceとkeychainに安全に保存する内容を学んで実習できます。

#06.アプリのデプロイ

ハイブリッドアプリのデプロイプロセスの理解とテストのデプロイの実践を進めます。

[完璧なフロントエンドコース]
受講後は私も開発者!

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

👨🏻‍🎓自分で成長できる頑丈な開発知識の構築(特に何をどのキーワードで検索できるように成長!)

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

🙋🏻‍♀️ 自分でもできるWeb Platformの開発

👨🏻‍💻一人でもできるハイブリッドアプリ開発(Android、IOS)

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

サムネイルバック

バックエンドブートキャンプコース

関連推薦講義:

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

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

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

・Mac OSは仕様に無関係です。 · Window OSを使用する場合は、git-bashのインストールが必要です。 -授業資料 > 環境設定を参考にしてください。 - Intel Core i5 9世代以上 / AMD RYZEN 5 2世代以上 - RAM 16GB以上推奨

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

もし
質問がありますか?

Q. 何の知識もなく受講してもいいですか?

はい。コーディングの「鼻」を知らなくても大丈夫です。より深く広く理解できるように、サッチョのコースである「スタートアップフリーキャンプ」とブートキャンプに行くための中間コースである「CSS&JSマスターコース」を一緒に提供しています。


Q. 基礎知識があればどこから受講すればいいですか?

基本的なHTML、CSS、Javascriptだけを理解している場合は、 「CSS&JSマスターコース」から始めることをお勧めします。もし国費教育、その他のオンライン教育などでCSSとJavascriptが頑丈であれば、すぐに「Webフロントエンドブートキャンプ」から始めてもいいです。


Q. Webフロントエンドブートキャンプ講義を効率的に受講する方法はありますか?

  1. セクション別講義を受講してください!平均的には1セクションあたり3~5個の焼酎剤に分かれています。体系的な授業だけに、日課表を作って定期的に学習することをお勧めします!

  2. 学習課題がある場合は、課題を進めてください!学習課題はあるセクションとないセクションに分かれています。ポートフォリオの課題を行う前に学習課題をしてみたら役に立つでしょう!

  3. 必須課題(ポートフォリオ課題)を進めてください!セクションの内容に基づいて提供されるセクション固有の重要な課題は、ポートフォリオ制作のために必ずしなければなりません!ただし、参考にできるリファレンスコードは中盤までのみ提供されていますよ!それ以来、すべてのコードを自分で組むことができなければ、本物のポートフォリオを使用できることに注意してください。



Q. カスケードカリキュラムとは何ですか?

完璧なフロントエンドのカリキュラムは、尾に尾を噛む連続した講義構成を持っています!
たとえば、[Section 26-02リフレッシュトークン]を受講するには、[Section 23-07]で作成したコードをコピーしてレッスンを続けています。つまり、[Section 23-07]を受講してコードを書かなければならないし、また復習もして、そのコードが何なのか知っておくべきでしょう。

特定のセクションをスキップして気になるセクションを受講したくても心配しないでください!講師の授業コードを別途ダウンロードできるように提供されています!しかし、授業で直接書いたコードではなくダウンロードされたコードだったら、そのコードを理解できなければよく従うことができるという点はぜひ、必ず心に留めてください!


Q. 受講中に気になる点がありました。

コミュニティに質問を残してください。早いうちに素敵な答えをつかみましょう😁

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

こんな方に
おすすめです

学習対象は
誰でしょう?

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

  • 国費支援の講座や他の講座に物足りなさを感じている方

  • 十分な課題で体系的なコーディングの勉強をしたいすべての人

  • 面倒見の良い先輩が求めているジュニア開発者

  • トレンドに合ったポートフォリオを構築したい就活生

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

  • コーディングに対する情熱と意志💪🏻

こんにちは
です。

13,497

受講生

385

受講レビュー

200

回答

4.8

講座評価

12

講座

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

カリキュラム

全体

444件 ∙ (162時間 6分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

10件

5.0

10件の受講レビュー

  • 김주원님의 프로필 이미지
    김주원

    受講レビュー 4

    平均評価 5.0

    5

    30% 受講後に作成

    • mh님의 프로필 이미지
      mh

      受講レビュー 1

      平均評価 5.0

      5

      30% 受講後に作成

      • skykwj0422님의 프로필 이미지
        skykwj0422

        受講レビュー 1

        平均評価 5.0

        5

        30% 受講後に作成

        • 강우주님의 프로필 이미지
          강우주

          受講レビュー 3

          平均評価 5.0

          5

          30% 受講後に作成

          • 김도영님의 프로필 이미지
            김도영

            受講レビュー 1

            平均評価 5.0

            5

            31% 受講後に作成

            ¥46,403

            codecampの他の講座

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

            似ている講座

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