procticeのロゴ

カップのイラスト
で学ぶ
ライトのイラスト

React学習サービス

Procticeはコードレビューや課題を通してReactを使ったモダンなフロントエンド開発を学べる
全く新しいプログラミング学習サービスです。

男性のイラスト
ドット背景

Procticeとは

about

ProcticeではReactエンジニアとしてスキルアップ するために必要なReact、TypeScriptなどのコースを提供しています。コースは「教材」「課題」で構成され、提出頂いた課題にはプロのエンジニアが綿密なコードレビューを行い、学習に役立てて頂きます。

Reactを学ぶ

reactのロゴ

TypeScriptを学ぶ

Next.jsのロゴ

Next.jsを学ぶ

Next.jsのロゴ

様々なライブラリ・ツールを学ぶ

その他ツールのロゴ

コンセプト

procticeのイメージ画像

ProcticeはProgramming(プログラミング)とPractice(実践)を組み合わせたサービス名です。Procticeでは技術を学ぼうとするユーザーにとって実践的な「教材」「課題」「コードレビュー」を提供することで現場で本当に使えるスキルを身につける手助けをしたいと考えています。
教材は運営が多くのプログラミング・Reactの初学者に対して提供してきたReact学習のノウハウを十分に盛り込んだ内容で、最低限の事前知識で学習を進められるよう作られています。また教材で学んだ知識を自分自身で使えるようにするための課題、そして課題の成果をプロのエンジニアがコードレビューすることで学習者の認識違いや実際の開発でのベストプラクティスとのズレなどをフィードバックしていきます。

実際の画面

スクリーンの画像
スクリーンのサムネイル画像0
スクリーンのサムネイル画像1
スクリーンのサムネイル画像2
スクリーンのサムネイル画像3

ユーザー様の声

voices

インタビューの様子

モダンなフロントエンドを身につけてフルスタックエンジニアに

丁寧なコードレビューと教材のおかげで何度も挫折してきたReactが3週間で身につきました

新井悠太さん

29

2022年6月27日に取材

ベンチのイラスト

運営者

organizer

モナドのプロフィール画像

モナド(Makoto Mori)

1992年生まれ
京都大学文学部中退、慶應義塾大学環境情報学部卒
起業・SaaS系スタートアップでのエンジニア・デザイナー職等を経て現在はフリーランス・Reactのメンターとして活動。React開発の楽しさを多くの人に伝え、エンジニアを目指す方、エンジニアとしてのスキルアップを目指す方にとってより良い学びの環境を作ることをライフワークとしている。MENTAにてReactスキルアップのためのメンタリングやコードレビューを受けられるプログラミング学習サービス「Proctice」の運営を行う。

オフィスのイラスト

料金

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

お問い合わせ

contact

「契約前に実際にサービスを見てみたい」「コードレビューの内容や教材・課題について詳しく知りたい」など何かございましたら下記フォームよりお気軽にご連絡ください。

お問い合わせ頂いた内容に関してお返事させて頂きます。