フロントエンド開発プログラム

JavaScriptとReactを学び本格的なWebアプリ開発に入門しよう

プログラム概要

JavaScript(ES6)、Reactを利用したWebアプリ開発を学ぼう

皆さんが日々利用しているWebサイトは、目に見えている部分であるフロントエンドと、目に見えてない部分であるサーバーサイドとを組み合わせて作っています。このプログラムでは、実務の場で通用するフロントエンド開発技術を身に付けることを主眼においています。またJavaScriptだけでなく、現在現場で最も利用されているUIライブラリであるReactを学ぶことでよりエンジニアとして高いレベルに立つことが出来ます。

学習時間の目安

200時間

受講対象者

HTML/CSSを習得済みの方、プロのエンジニアを目指す方、エンジニアとして既に仕事をしておりReactを習得したい方

学習内容

JavaScript(ES6)
Babel
Webpack
React
Firebase
Webアプリ開発

CodeGritの特徴

ビデオ通話

毎週のマンツーマンでのビデオ通話を通じて、学習中の疑問を解決。

チャット

チャットを通じて、いつでもメンターに分からないことを質問出来ます。

学習プログラム

CodeGritのオリジナル教材を利用してプログラミングの知識を効率的に学習出来ます。

メンター

CodeGritでは現役プログラマーの方と一人一人面談してメンターを採用しています。

カリキュラム

JavaScript基礎コース

JavaScriptはサイトに動きをつけることのできるプログラミング言語です。このコースでは、プログラミング自体の概念や、JavaScriptの基礎を学びます。JavaScriptのバージョンはES6を利用します。

学べる内容
  • - プログラミング基礎
  • - JavaScript(ES6)の基礎
  • レッスン1. Git入門
    1. 1. バージョン管理とGit
    2. 2. Gitのインストールと初期設定
    3. 3. ローカルリポジトリの作成
    4. 4. Gitでの開発フローの基本
    5. 5. Sourcetreeを使ってみよう
  • レッスン2. GitHub入門
    1. 1. GitHubとは
    2. 2. GitHubへのユーザー登録
    3. 3. リモートリポジトリの作成
    4. 4. git pullコマンド
  • レッスン3. ForkとPull Request
    1. 1. ForkとPull Request
    2. 2. CodeGritでの課題提出とレビューの流れ

Git基礎コース

Gitはプログラムの変更をうまく管理するための管理ツールで、あらゆるプログラマが身に付けるべき基礎的なツールです。このコースではGitの基礎を学び自分で作成したプログラムの変更をGitHubというサイトへアップロードする方法や、課題をGitHubを通して提出する方法を学びます。

学べる内容
  • - Git基礎
  • - GitHub
  • レッスン1. 初めてのJavascript
    1. 1. プログラミングとは
    2. 2. Google Developer Toolsを使ってみよう
    3. 3. 様々な演算子
    4. 4. alert、promptとconfirm
    5. 5. チャレンジ
  • レッスン2. 変数とデータ型
    1. 1. データ型
    2. 2. プリミティブ型
    3. 3. オブジェクト型
    4. 4. チャレンジ
  • レッスン3. 演算子(Operator)
    1. 1. 様々な演算子
    2. 2. 代入演算子
    3. 3. チャレンジ
  • レッスン4. DOM
    1. 1. DOM
    2. 2. チャレンジ
  • レッスン5. イベント処理
    1. 1. イベント
    2. 2. チャレンジ
  • レッスン6. ステートメント(文)その1: if文、switch文
    1. 1. 制御文
    2. 2. if文
    3. 3. switch文
    4. 4. チャレンジ
  • レッスン7. ステートメント(文)その2: While文、for文
    1. 1. ループ: for文
    2. 2. ループ: for-in文、for-of文
    3. 3. ループ: while文
    4. 4. ループ: breakとcontinue
    5. 5. チャレンジ
  • レッスン8. スコープ
    1. 1. スコープ
    2. 2. letとconst
    3. 3. 関数スコープ
    4. 4. ホイスティング
    5. 5. チャレンジ
  • レッスン9. ファンクション(Function)
    1. 1. 関数の基礎
    2. 2. 関数コンストラクタ
    3. 3. アロー関数
    4. 4. コールバックとクロージャー
    5. 5. チャレンジ
  • レッスン10. オブジェクト(Object)と配列(Array)
    1. 1. 配列とは
    2. 2. 配列のメソッド
    3. 3. 配列とfor文
    4. 4. オブジェクト
    5. 5. オブジェクトの操作
    6. 6. チャレンジ
  • レッスン11. 簡単なJavaScriptアプリケーションを作ろう
    1. 1. チャレンジ

JavaScript応用コース

このコースでは、Babel、Webpackのようなモダンなツールを利用した開発手法、テストの書き方を学びます。最終的にはHTML/CSS/JavaScriptでポモドーロタイマーアプリを作成します。

学べる内容
  • - Babel
  • - Webpack
  • - Promise
  • - Jestを利用したテスト及びテスト駆動開発(TDD)
  • - 開発のベストプラクティス
  • - Webアプリケーション作成
  • レッスン1. Javascriptエコシステム(NPM、Webpack、Babel)
    1. 1. JavaScriptの生態系(エコシステム)
    2. 2. Node.js、NPMのインストール
    3. 3. Yarnのインストール
    4. 4. webpack入門
    5. 5. NPMスクリプト
    6. 6. チャレンジ
  • レッスン2. 非同期処理(Promise、Async、Await)
    1. 1. 非同期処理とは
    2. 2. コールバック関数
    3. 3. Promise
    4. 4. Async/Await
    5. 5. チャレンジ
  • レッスン3. データ通信(Ajax, Fetch API)
    1. 1. HTTP通信の基本
    2. 2. AjaxとJSON
    3. 3. Fetch API
    4. 4. チャレンジ
  • レッスン4. オブジェクト指向JavaScript入門
    1. 1. クラスとインスタンス
    2. 2. インスタンスメソッド
    3. 3. クラスメソッド
    4. 4. クラスの継承とPrototype
    5. 5. チャレンジ
  • レッスン5. CookieとWeb Storage
    1. 1. Cookie
    2. 2. Web Storage
    3. 3. ブラウザの対応状況
    4. 4. チャレンジ
  • レッスン6. フォーム
    1. 1. フォーム提出の流れを知ろう
    2. 2. フォームの実装1
    3. 3. 正規表現
    4. 4. バリデーションの完成
    5. 5. フォームデータの送信
    6. 6. チャレンジ
  • レッスン7. Advanced ES6
    1. 1. 分割代入
    2. 2. spreadオペレーター
    3. 3. Map、Set、シンボル
    4. 4. チャレンジ
  • レッスン8. エラーハンドリング入門
    1. 1. strictモード
    2. 2. throw文
    3. 3. try...catch文
    4. 4. チャレンジ
  • レッスン9. Jestによるテストとテスト駆動開発
    1. 1. Jestの設定
    2. 2. 初めてのテスト
    3. 3. jestの基本的なシンタックス
    4. 4. テスト駆動開発
    5. 5. 何をテストするのか
    6. 6. チャレンジ
  • レッスン10. JSベストプラクティス
    1. 1. 読みやすいコードを書こう
    2. 2. ESLint
    3. 3. コメントやREADMEの書き方
    4. 4. 一貫性を保つ
    5. 5. エンジニア向けサービス
    6. 6. チャレンジ
  • レッスン11. ポモドーロタイマーアプリを作ろう
    1. 1. ポモドーロタイマーの仕様
    2. 2. Appクラスの作成
    3. 3. タイマーの初期化
    4. 4. startTimerの実装
    5. 5. updateTimerの実装
    6. 6. stopTimerの実装
    7. 7. 作業回数の表示
    8. 8. 過去7日分のデータを表示
    9. 9. 不必要なデータの削除
    10. 10. チャレンジ

Reactコース

このコースでは、Facebookによって作成された世界で現在最も需要のあるUIライブラリであるReactを本格的に学びます。またFirebaseという最新のツールを利用してデータベースを活用したより本格的なアプリ作成ができるようになります。

学べる内容
  • - Reactの基礎
  • - Firebase
  • - Reactを利用したモダンなWebアプリ開発
  • レッスン1. 初めてのReact
    1. 1. Reactを使うメリット
    2. 2. create-react-appでHello World
    3. 3. チャレンジ
  • レッスン2. JSXとReactコンポーネント
    1. 1. React要素のネストとJSX
    2. 2. Reactコンポーネントの書き方
    3. 3. チャレンジ
  • レッスン3. PropsとState
    1. 1. Propsの解説
    2. 2. defaultPropsとタイプチェック
    3. 3. Stateの初期値とsetStateファンクション
    4. 4. コンテナーとプレゼンテーションコンポーネント
    5. 5. チャレンジ
  • レッスン4. コンポーネントライフサイクル
    1. 1. コンポーネントライフサイクルイベントの種類
    2. 2. 各イベントの解説
    3. 3. Error Boundary
    4. 4. チャレンジ
  • レッスン5. スタイリングとUIコンポーネント
    1. 1. Reactとスタイリング
    2. 2. CSSモジュール
    3. 3. CSS in JS
    4. 4. emotion.js
    5. 5. チャレンジ
  • レッスン6. 繰り返しや条件付きのコンポーネント呼び出し
    1. 1. 繰り返しの扱い
    2. 2. 条件分岐
    3. 3. チャレンジ
  • レッスン7. イベント処理
    1. 1. イベントハンドリングの基礎
    2. 2. Accordionを作ろう
    3. 3. チャレンジ
  • レッスン8. Higher Order ComponentとRender Props
    1. 1. Higher Order Component
    2. 2. Render Props
    3. 3. チャレンジ
  • レッスン9. フォーム
    1. 1. Controlled Componentとフォーム
    2. 2. Refs
    3. 3. Uncontrolled Component
    4. 4. Formik
    5. 5. Formikを利用してみよう
    6. 6. チャレンジ
  • レッスン10. Firebaseを利用したアプリケーション作成
    1. 1. クイズアプリの概要
    2. 2. Firebaseの基礎を学ぼう
    3. 3. Cloud Datastoreにデータを保存しよう
    4. 4. Cloud Datastoreとクエリ
    5. 5. アプリの実装準備
    6. 6. メイン以外の部分を実装しよう
    7. 7. Cloud Datastoreの利用準備をしよう
    8. 8. クイズ開始前までを実装しよう
    9. 9. クイズ開始後のコンポーネントの基礎を作ろう
    10. 10. 設問の表示を実装しよう
    11. 11. 設問間の移動とプログレスバーを作ろう
    12. 12. アプリを完成させよう
    13. 13. チャレンジ
  • レッスン11. Firebaseへのアプリケーションの公開
    1. 1. アプリ公開の準備をしよう
    2. 2. Firebaseにアプリを公開しよう
    3. 3. チャレンジ
  • レッスン12. 自力でアプリを作成しよう
    1. 1. チャレンジ

学習の進め方

複数のコンセプトで構成されたレッスンで知識を効率的に学ぶ。

CodeGritの各レッスンは、複数の小さなコンセプト(小レッスン)で構成されています。各コンセプトでは重要な知識がまとめられているので、すきま時間でも順を追って必要な知識を効率的に身につけられます。

レッスンに取り組む
レッスンに取り組む

レッスンごとのチャレンジ課題で、実践を通して知識を定着させる。

知識を知っていることと使えることとの間にはギャップがあります。CodeGritでは、各レッスンごとにチャレンジを用意しており、実践を通して知識を知っている状態から使える状態に橋渡しします。

メンターとの週1回のビデオ通話と、チャットアプリでの質問で疑問を素早く解決。

プログラミングを学習していけば、壁に当たることもあります。こうしたときに、自分一人の力で壁を乗り越えていくのは大変ですし、壁を超えられず挫折してしまうこともあります。CodeGritでは、メンターとの週1回のビデオ通話、そしてチャットでの質問をプラントして提供しています。メンターは現役のエンジニアですので、ただ動くプログラムではなく、実務で通用するプログラムの書き方も学べます。

レッスンに取り組む

ご利用料金

CodeGritが、高品質なのにプログラミングスクールよりも安いワケ

CodeGritでは、一般的なプログラミングスクールと異なり、学習者とメンターを直接つなげています。そのため手数料がスクールに比べて大幅に低く、メンターはより多くの報酬を受け取ることが出来ます。多くのスクールでは月5-7万円程度がかかりますが、CodeGritなら月1.5万円程度から学習を開始できます。

* 料金はメンターが自分で設定するため一律ではありません。

CodeGrit料金イメージ

一般的なプログラミングスクールとの比較

CodeGrit(週1回面談)CodeGrit(週2回面談)A社B社
料金(12週間、または3ヶ月)
48,000円~(税込)96,000円~(税込)239,000円(税抜)177,600円(税抜)
面談
週1回30分週2回30分週2回30分定期的なものはなし
メンターの選択
選べる選べる選べない選べない
メンター
現役エンジニア現役エンジニア現役エンジニア実務未経験の卒業生中心
学習場所
オンラインオンラインオンライン教室、オンライン
質問サポート
固定メンター、無制限固定メンター、無制限無制限無制限

よくある質問と答え

初期費用や教材費などは必要ですか?

初期費用、教材費ともにかかりません。メンターと契約いただくことで教材を自由にご利用いただくことが出来ます。

支払いはどのように行えばよいですか?

CodeGritでは全ての支払いを世界最大級のカード決済代行会社であるStripe社を通じてクレジットまたはデビットカード決済で行います。カード情報はStripe社側で厳重に保管されますのでセキュリティ面についてはご安心ください。

メンター契約や支払い頻度について教えて下さい。契約期間やキャンセル料などはありますか?

CodeGritではメンターとの契約はメンター、生徒間で直接行われます。契約前に面談日程などについてメンターとチャットで相談し、合意すれば契約を行います。利用料金は毎週1回月曜日にその週の利用分が引き落としされます。契約期間やキャンセル費用はないのでメンター契約はいつでも解約することが出来、解約処理を行ったその週の日曜日までメンター契約が継続されます。

契約時には必ずCodeGritの教材を使う必要がありますか?

CodeGritではメンターの負担を抑えることも一つの目的に教材を提供しております。しかし、契約自体はメンターと直接行いますのでメンターと合意があれば、CodeGrit以外のサービスや教材についてのメンターをお願いすることも可能です。必要であれば直接メンターにお問い合わせください。

他の学習サービスを通じて既にある程度知識があるレッスンについては飛ばして進められますか?

既にレッスンについて知識がある場合、メンターと相談の上飛ばして頂いて問題ありません。

ビデオ面談はどのようにして行いますか?また一回あたりの時間はどれくらいですか?

面談時間は1回あたり30分となっています。現在、Appear.inという無料の通話サービスを利用して面談を行っています。毎週の面談時間を契約時に設定しますので、その時間にAppear.in上のメンターのルームに入り面談を行います。

ビデオ面談に出席出来なかった場合はどうなりますか?

ビデオ面談に出席出来ない場合、前日までにメンターにその旨をお伝え下さい。当日のキャンセルの場合は面談実施扱いとなりますのでご注意ください。

チャットサポートについて教えて下さい。

チャットでのサポートは、多くのIT企業が開発の際に用いているSlackというアプリを利用して行います。サポートの時間はメンターによってばらつきがありますのでメンターに直接ご確認ください。終日のサポートを希望する場合はフリーランスのエンジニアを選択されることをおすすめします。

全くの初心者なのですが大丈夫でしょうか?

フロントエンドプログラムは、Web制作入門プログラムを修了した方または既にHTML/CSSの基礎を習得済みの方を対象としています。初心者の方はまずはWeb制作入門プログラムから学習を始めましょう。

プログラミングは独学でもできると思いますが、メンターを利用する価値はありますか?

CodeGritの創業者自身も独学でプログラミングをマスターしましたが、モチベーションの維持の難しさや学習速度の遅さに不満があり、このサービスを立ち上げました。独学でなかなか勉強が続かない方や、より効率的に学びたい場合はメンターと学ぶことをおすすめします。

今すぐ学習をはじめよう!

CodeGritは現在教材を無料で公開しています。会員登録は1分で完了します。登録をしてプログラミングを始めてみましょう!