
で学ぶ

React学習サービス
Procticeはコードレビューや課題を通してReactを使ったモダンなフロントエンド開発を学べる
全く新しいプログラミング学習サービスです。
Procticeとは
about
ProcticeではReactエンジニアとしてスキルアップ するために必要なReact、TypeScriptなどのコースを提供しています。コースは「教材」「課題」で構成され、提出頂いた課題にはプロのエンジニアが綿密なコードレビューを行い、学習に役立てて頂きます。
Reactを学ぶ
TypeScriptを学ぶ
Next.jsを学ぶ
ライブラリ・ツールを学ぶ
コンセプト
ProcticeはProgramming(プログラミング)とPractice(実践)を組み合わせたサービス名です。Procticeでは技術を学ぼうとするユーザーにとって実践的な「教材」「課題」「コードレビュー」を提供することで現場で本当に使えるスキルを身につける手助けをしたいと考えています。
教材は運営が多くのプログラミング・Reactの初学者に対して提供してきたReact学習のノウハウを十分に盛り込んだ内容で、最低限の事前知識で学習を進められるよう作られています。また教材で学んだ知識を自分自身で使えるようにするための課題、そして課題の成果をプロのエンジニアがコードレビューすることで学習者の認識違いや実際の開発でのベストプラクティスとのズレなどをフィードバックしていきます。
実際の画面
ユーザー様の声
voices
モダンなフロントエンドを身につけてフルスタックエンジニアに
丁寧なコードレビューと教材のおかげで何度も挫折してきたReactが3週間で身につきました
新井悠太さん
29歳
2022年6月27日に取材
料金
price
- 月額
- ¥ 19,800
- 契約日より1ヶ月の間Procticeのサービスをご利用頂けます(自動更新は行われません)
カリキュラム
curriculum
Reactエンジニアになるために必要な開発スキルを身につけることができる教材をご用意しています。2022年6月時点で教材は40章、課題は17個用意しています。分量としては2週間~1ヶ月で終わる内容となっています。教材・課題は今後随時追加していく予定ですが現在追加されている教材・課題は以下の通りです。
React入門
タイトル | 種別 | 収録コース |
---|---|---|
Reactとは | 教材 | React入門 |
Reactを試してみよう | 教材 | React入門 |
React開発に必要な知識 | 教材 | React入門 |
関数コンポーネントとJSX | 教材 | React入門 |
Create React Appでプロジェクトを立ち上げる | 教材 | React入門 |
関数コンポーネントで自己紹介サイトを作ってみよう | 課題 | React入門 |
コンポーネントへの値の埋め込み | 教材 | React入門 |
条件付きレンダリング | 教材 | React入門 |
配列の描画 | 教材 | React入門 |
イベントハンドリング | 教材 | React入門 |
イベントハンドリングを使ってクイズアプリを作ろう | 課題 | React入門 |
useStateを使った状態管理 | 教材 | React入門 |
useStateを使って要素の表示非表示を制御しよう | 課題 | React入門 |
コンポーネントの分割 | 教材 | React入門 |
propsとchildren | 教材 | React入門 |
コンポーネント分割を使って複数のデータを効率的に描画しよう | 課題 | React入門 |
CSSを使ったスタイリング | 教材 | React入門 |
シンプルなお小遣い帳アプリの作り方 | 教材 | React入門 |
Todoアプリを作ろう | 課題 | React入門 |
React発展
タイトル | 種別 | 収録コース |
---|---|---|
useEffectを使った状態の監視 | 教材 | React発展 |
useEffectを使って任意のタイミングで文字を出力しよう | 課題 | React発展 |
カスタムフック | 教材 | React発展 |
useContextを使った値の受け渡し | 教材 | React発展 |
useReducerを使った状態管理 | 教材 | React発展 |
useReducerを使ってTodoアプリを作ろう | 課題 | React発展 |
useMemoを使ったパフォーマンス改善 | 教材 | React発展 |
Reactと非同期処理 | 教材 | React発展 |
axiosを使って住所検索アプリを作ろう | 課題 | React発展 |
TypeScript
タイトル | 種別 | 収録コース |
---|---|---|
TypeScriptとは | 教材 | TypeScript |
TypeScriptを使ってみよう | 教材 | TypeScript |
型と型アノテーション | 教材 | TypeScript |
関数に型を設定しよう | 教材 | TypeScript |
TypeScriptの型(基本編) | 教材 | TypeScript |
TypeScriptで関数を作ろう | 課題 | TypeScript |
TypeScriptの型(発展編) | 教材 | TypeScript |
型に名前をつけて再利用しよう | 教材 | TypeScript |
複雑な型を定義してみよう | 課題 | TypeScript |
ユーティリティータイプ(Utility types) | 教材 | TypeScript |
TypeScriptの便利なテクニック | 教材 | TypeScript |
ReactとTypeScript | 教材 | TypeScript |
HTML
タイトル | 種別 | 収録コース |
---|---|---|
HTMLとは | 教材 | HTML |
HTMLを使ってみよう | 教材 | HTML |
SPAとHTML | 教材 | HTML |
ブロック要素とインライン要素 | 教材 | HTML |
文章を表示するためのタグ | 教材 | HTML |
HTMLを使って文章を表示しよう | 課題 | HTML |
よく使うインライン要素のタグ | 教材 | HTML |
画像を使って外部ページへのリンクを作ろう | 課題 | HTML |
リストに関するタグの使い方 | 教材 | HTML |
箇条書きや順序のあるリストを作ろう | 課題 | HTML |
テーブルの使い方 | 教材 | HTML |
開発の進捗を管理する画面をtableタグを使って表現しよう | 課題 | HTML |
フォームに関するタグ | 教材 | HTML |
お問い合わせフォームのHTML部分を作成してみよう | 課題 | HTML |
React Hook Form
タイトル | 種別 | 収録コース |
---|---|---|
React Hook Formとは | 教材 | React Hook Form |
React Hook Formを使ってお問い合わせフォームを作ろう | 課題 | React Hook Form |
バリデーションの入ったユーザー登録フォームを作ろう | 課題 | React Hook Form |
よくある質問
faq
現在ご覧頂いているWebサイトから「会員登録に進む」ボタンを押して会員登録を行って頂きます。その後決済画面に移動し決済が完了するとProcticeの利用を開始することができるようになります。
はい、教材・課題に関することでしたら回数に制限なくご質問頂けます。サイト上のチャットボタンからお問い合わせください。
いいえ、現在Procticeでは契約の自動更新を行っておらず、1ヶ月のみで解約となります。利用の継続を希望される場合は1ヶ月の契約終了後再度決済を行ってください。なお利用データ等は契約が終了しても保持されます。
いいえ、教材はテキスト形式で提供されています。書籍を読むようなイメージで学習に取り組んで頂きます。
TypeScriptを用いたReact開発の基礎を身につけて頂くことができます。型を用いた安全なコーディングやAPI・非同期処理を使った簡単なアプリケーションの作成などができるようになります。
React以外のフロントエンド技術に関しては現状コースを提供できておりません。今後のリリースをお待ちください。
はい、問題ございません。HTMLに関してはコースを用意しております。JavaScriptに関してはProgateなどJavaScriptの基礎を学ぶことができる教材と並行してProcticeに取り組んで頂く事をお勧めします。
Procticeに転職サポート機能はございませんが、無料メンタリングにて転職のご相談も受け付けております。お気軽にお申し込みください。
無料メンタリングにて画面をご共有しながら使い方やカリキュラムなどを説明させて頂きます。お気軽にお申し込みください。
お問い合わせ
contact
「契約前に実際にサービスを見てみたい」「コードレビューの内容や教材・課題について詳しく知りたい」など何かございましたら下記フォームよりお気軽にご連絡ください。