今日、自分で書く
答えを見るだけでなく、まず自分の手で書きます。
動かして、間違えて、直します。
PROBLEM
初学者が本当に欲しいのは、
ただの問題集ではない。
01
自分が伸びている実感がない
教材は終えた。コードも写した。
でも、本当に実力がついたのか分からない。
雰囲気だけで前に進んでいる不安が残る。
02
課題が実務とつながらない
穴埋めや模写だけでは、仕事の怖さに届かない。
要件、バグ、セキュリティ、保守、レビュー。
実務で問われる力まで鍛えたい。
03
フィードバックが浅い
正解か不正解かだけでは、次に何を直せばいいか分からない。
褒めるだけのAIでも足りない。
シニアに見られるように、危ない点まで指摘されたい。
入門教材
写経・穴埋め・動画
実力が測れない
ここで成長が止まる
本物の実力
実装・検証・レビュー・自走
Code Gymは、この「実力が伸びているか分からない」状態を抜けるために作っています。
HOW TO START
やることは、
3つだけです。
最初から学習計画を立てたり、何千問から選んだりする必要はありません。
1
学びたいコースを選ぶ
WebサイトならMarkup、動く画面ならJavaScript、アプリならFullstack。
迷ったら質問できます。
2
「今日の1問」を解く
目安は1日20〜30分。
分からなくても、まず自分の手で書いて提出します。
3
アドバイスを見て直す
どこが違うか、なぜ危ないか、次に何を直すかが返ります。
直した分だけ力になります。
最初の30問は基礎から順番に出ます。
次に何をやるかで迷わせません。
OUR NEXT GOAL
「今日できた」で終わらず、
あとでも、初めてでも、できるへ。
問題に1回正解しただけでは、本当に身についたか分かりません。
Code
Gymは、忘れたころと初めて見る課題でもできるかを確かめる学習ツールへ育てています。
忘れたころに、もう一度
7日後・30日後に、ヒントなしでも書けるか確かめます。
できなければ、必要なところへ戻ります。
初めての課題に使う
練習で見ていない要件やバグに挑戦します。
覚えた答えではなく、仕事で使える力を確かめます。
まず目指すこと
世界初の「伸びた」を測る仕組み
30日後の自力、初めての課題、仕事に近いPRまで測り、良い結果も悪い結果も公開します。
比較できてから
No.1かを確かめる
独学や他の教材と比べ、本当に早く力がついたかを確認してから判断します。
最初の一歩は、5人から。
まず、問題にかかった時間とヒントを使った回数を記録し、5人に実際に使ってもらうところから始めます。
「世界初」も「No.1」も、まだ達成したとは言いません。数字と結果がそろってから伝えます。
COURSES
作りたいものに合わせて選べる、
6つのコース。
全部を一度に学ぶ必要はありません。
まずは、今の目標に近いコースを1つ選べば大丈夫です。
500問
Markup Gym
HTML / CSS / a11y / Modern CSS / Web Components
スマホでも見やすいLPやWebサイトを、自分で組み立てられるようになる
996問
JavaScript Interaction Gym
JS全域 / DOM / TypeScript / Web API / Security
タブ、モーダル、検索、フォームなど、動く画面を作れるようになる
1,758問
Creative Motion Gym
GSAP / Canvas / WebGL / GLSL / Three.js
スクロール演出や3D表現を使った、目を引くWebサイトを作れるようになる
1,262問
Fullstack Product Gym
React 19 / Next.js / Prisma / SQL / Auth / Deploy
ログインやデータ保存のあるWebアプリを、公開まで進められるようになる
1,272問
Backend Gym
PHP全域 / Laravel / SQL高度 / Docker / 運用
PHPとLaravelで、問い合わせ管理やAPIを作れるようになる
1,655問
CS Literacy Gym
アルゴリズム / 数学 / CS基礎 / システム設計
コードの考え方を理解し、面接やレビューで理由を説明できるようになる
収録数と検証状況（2026年8月6日）
収録課題は合計7,443問です。この数には、共通テンプレートから条件を変えて展開した反復バリエーションを含みます。模範解答の入出力・SQL結果・DOM構造などをCIで挙動検証済みなのは3,102問（41.7%）、学習者向け判定で挙動検証を行う課題は3,190問（42.9%）です。その他は構文・コンパイル検査またはパターン検査・AIレビューが中心です。
迷ったら、Web制作を学びたい人はMarkup、Webエンジニアを目指す人はJavaScriptから始めるのがおすすめです。
WHICH COURSE?
どれを選べばいいか、すぐ分かります。
今の目標に一番近いものから始めてください。
あとから別のコースへ移ったり、組み合わせたりできます。
Web制作Markup
LPや企業サイトを作りたい。
動く画面JavaScript
ボタンや検索が動くUIを作りたい。
演出Creative Motion
アニメーションや3Dを学びたい。
WebアプリFullstack
Reactでサービスを作りたい。
サーバー側Backend
PHPやLaravelを仕事にしたい。
基礎・面接CS Literacy
考える力と説明する力を伸ばしたい。
間違えても、置いていかれません。
提出すると、正しく動くかを自動で確認します。
さらに、書き方や安全性についても、理由つきのアドバイスが届きます。
答えだけを見るのではなく、自分のコードを直してから次へ進めます。
各Gymの中身を、隠さず全部見せます。
Markup Gym500問中身を見る
Web制作・フロントエンド志望の最初の一歩。
課題 / エディタ / ライブプレビュー /
AI添削の4ペイン画面で、HTML/CSSの実務マークアップを回します。
Lv1 HTML基礎Lv3 レスポンシブLv5 フォームLv6 アクセシビリティLv8 パフォーマンス改善Lv10 LP/EC/管理画面の卒業制作
| Lv3 | スマホで崩れないコーポレートLP | コーディング案件の下請けデビュー |
|---|---|---|
| Lv7 | デザインカンプのpixel忠実再現 + Web Components部品化 | 制作会社ジュニアの入口 |
| Lv10 | EC / メディア / 管理画面をSEO・多言語・CMS運用込みで制作 | 自作サイト数本と実案件制約で補強 |
JavaScript Interaction Gym996問中身を見る
動くUIを白紙から書けるようになりたい人。
JS / TypeScript / DOM /
GSAPで、実務UIの制作・修正・レビューを反復。
作ったUIはその場で動かして確認でき、間違った場所もすぐ分かります。
Lv1 JSコアLv2 DOM/イベントLv4 状態設計Lv5 TypeScriptLv6 Security/A11yLv9 本番デバッグLv10 卒業制作
| Lv3 | ライブラリなしでタブ・モーダル・検索/絞り込み付き一覧を自作 | jQuery案件の代替を提案できる |
|---|---|---|
| Lv7 | スクロール連動演出付きLP(IntersectionObserver + GSAP) | 制作会社フロントの入口 |
| Lv10 | オートコンプリート / 仮想スクロールテーブル / 通知センターを設計から自作 | UIライブラリを作る側 |
Creative Motion Gym1,758問中身を見る
Awwwards系の表現を仕事にしたい人。
動きの基礎から始め、GSAP / Canvas / WebGL /
Three.jsを使った作品づくりへ進みます。
GSAP Motion 100問Canvas 2D 100問GLSL Shader 80問Raymarching 50問GPGPU粒子 50問目コピー訓練 60問公開作品制作 50問
| Lv5 | SVGマスク×スクロール遷移(Codrops級)のスクロールストーリーLP | 演出LPの実装補助に入れる |
|---|---|---|
| Lv8 | shaderの画像歪み・hoverエフェクト、WebGLとDOMの同期ギャラリー | WebGL作品ポートフォリオの素材 |
| Lv10 | GPGPU粒子 + マウス流体 + シーン遷移のWebGL体験サイト | Award投稿を目指す作品制作の土台 |
Fullstack Product Gym1,262問 / 23トラック中身を見る
モダンTSスタックでプロダクトを縦一本で作りたい人。
ReactからDeployまでを反復。
SQL課題は実際にクエリが実行され、行・カラム・EXPLAINまで検証されます。
React Core / React 19Next.js App RouterServer Actions / PrismaAuth / 2FA / OAuthSQL Advanced決済 / Security HeadersDeploy / CI
| Lv7 | 認証付きSaaS風管理画面(ロール別表示・CRUD・DB設計込み) | ポートフォリオの題材にできる |
|---|---|---|
| Lv8 | Stripe風決済フロー(webhook・冪等性・失敗再送設計) | 決済機能の考え方が身につく |
| Lv10 | 自分のSaaSを設計→実装→テスト→本番運用(rollback・監視付き)まで一人で完結 | 公開検証と外部レビューが揃って証明 |
Backend Gym1,272問 / 22トラック中身を見る
バックエンド志望。
現実の求人でボリュームが大きいPHP/Laravelを中心に、サーバーサイドと運用を専門に反復。
フロントの知識なしでLv1から始められる専用進路です。
PHP言語全域Laravel / EloquentDB設計 / SQL AdvancedREST API設計Queue / JobsDocker / CI障害対応 / 監視
| Lv5 | 問い合わせ→DB保存→管理画面のLaravelアプリ(XSS/CSRF対策込み) | バックエンド制作の入口 |
|---|---|---|
| Lv8 | 公開REST API(認証・冪等性キー・rate limit・テスト付き) | API設計のレビュー材料 |
| Lv10 | 本番障害の指揮(検知→切り分け→緩和→postmortem)と再発防止の仕組み化 | 障害対応の型練習。実務証明は別途必要 |
CS Literacy Gym1,655問中身を見る
全進路共通の土台トレーニング。
技術面接(アルゴリズム・システム設計)対策と、言語乗り換えを速くするCS基礎。
アルゴリズム課題は、提出したコードが正しく答えを出せるか、その場で自動採点されます。
時間圧をかけるスプリントタイマー付き。
配列/文字列〜DP/Graph応用計算量分析OS / DB内部構造ネットワーク / 分散システム言語の設計比較システム設計(面接形式) 90問
| Lv5 | LeetCode Easyを安定して、Mediumの半分を自力で解ける | Web系自社開発のコーディング面接 |
|---|---|---|
| Lv8 | 「URL短縮を設計して」に要件→概算→API→DB→障害の順で答えられる | システム設計面接(ミッド〜シニア) |
| Lv9-10 | 未知の言語のコードを読んでバグを指摘できる | 言語不問採用・システム設計面接の土台 |
CURRICULUM
知識を覚えるだけで終わらない。
作れる → 直せる → 任せられるへ。
Code Gymでは、技術名を順番に暗記するのではありません。
小さな部品を作る練習から始め、機能をつなぎ、最後は公開後の改善まで進みます。
PHASE 01Lv1–3
まずは、見本なしで
小さな機能を作る
写経から抜け出し、「何を書けば動くか」を自分で考える段階です。
何を学ぶ？
画面とコードの基礎
- HTML/CSSの構造とレイアウト
- JavaScriptの条件分岐・関数・DOM操作
- PHP・SQL・アルゴリズムの基本
どう進める？
1問ずつ、動くまで直す
- 短い要件を読む
- 自分で書く
- 自動採点
- 修正して再提出
身につく実力
部品を正しく作れる
レスポンシブなページ、フォーム、タブ、検索、データ処理などを見本なしで実装できる。
PHASE 02Lv4–6
次に、要件から
壊れにくい機能を作る
正常に動くだけでなく、入力ミス・通信失敗・スマホ・支援技術まで考えます。
何を学ぶ？
実務で事故を防ぐ設計
- TypeScript・非同期・状態管理
- アクセシビリティ・セキュリティ
- DB設計・API・認証・テスト
どう進める？
失敗条件まで検証する
- 要件を分解
- 実装
- 失敗ケースを試す
- AIレビューで改善
身につく実力
機能を設計してつなげられる
フォームからDB保存、検索UI、認証付き画面、API連携などを安全性込みで組み立てられる。
PHASE 03Lv7–10
最後に、公開して
改善まで自走する
答えが1つではない課題で、選んだ設計の理由とトレードオフを説明します。
何を学ぶ？
プロダクトと運用の判断
- React / Next.js / Laravelの設計
- 性能・監視・障害対応・CI/CD
- システム設計・技術選定・改善
どう進める？
成果物として完成させる
- 企画・設計
- 実装・テスト
- 公開
- 計測して改善
身につく実力
判断し、説明し、直せる
Webサービスや体験サイトを公開し、バグや利用状況を見ながら自分で改善を続けられる。
LEARNING CYCLE
毎週、この流れを繰り返します。
分からないまま次へ進まず、「できなかった」を「説明して直せる」に変えます。
- 01今日の1問今のレベルに合う課題
- 02実装・実行自分のコードで試す
- 03レビュー理由と改善点を知る
- 04再挑戦正しく動くまで直す
- 05応用・制作複数の力を作品へ
SPECIALTY MAP
進みたい道に合わせて、専門分野を深めます。
Web制作、フロントエンド、クリエイティブ、アプリ開発、バックエンド、技術面接。必要な分野を選び、上の3段階で実力へ変えます。
マークアップ / CSS
- セマンティックHTML
- Flexbox / Grid / subgrid
- コンテナクエリ / レスポンシブ
- アクセシビリティ(a11y)
- Modern CSS(:has / @layer)
- Web Components
- SVG / 画像最適化
- SEO / OGP / 構造化データ
- Core Web Vitals改善
JavaScript / TypeScript
- JSコア / クロージャ / prototype
- DOM / イベント設計
- 非同期 / AbortController / 競合対策
- TypeScript高度型
- 状態設計(loading / error / stale)
- レガシーコードのリファクタ
- メモリリーク / 本番デバッグ
- フロントのセキュリティ
React / Next.js
- React 19 / 状態 / フォーム
- Next.js App Router
- Server / Client境界
- Prisma / DB設計
- 認証 / セッション
- React Three Fiber
- デプロイ / ロールバック
バックエンド / 運用
- PHP言語全域
- Laravel
- SQL高度(実行して判定)
- Docker
- 障害対応 / 運用判断
- セキュアな出荷
クリエイティブ表現
- GSAP / アニメーション設計
- Canvas
- WebGL / GLSL(shaderコンパイル検証)
- Three.js
- GPGPU
- Awwwards系の目コピー
CS / 技術面接
- アルゴリズム全域
- データ構造
- 数学 / CS基礎
- 分散システム
- システム設計
- 技術面接の言語化訓練
最初からすべて覚える必要はありません。
まず1つの進路を選び、Lv1から「作ったもの」と「直した記録」を積み上げます。
DIFFERENCE
動画でも、AI任せでもなく、
本物の実力を測る。
| 動画教材 | 競プロサイト | AIチャット学習 | Code Gym | |
|---|---|---|---|---|
| 実務に近い課題 | △ 視聴が中心 | ○ 書くが偏る | △ AIが書いてしまう | ◎ UI・DB・認証・運用・CSまで横断 |
| 間違いへの気づきやすさ | × | ○ 入出力中心 | × | ◎ コードを動かして、その場で自動採点 |
| 自走力の訓練 | × | × | △ 会話は残るが練習設計は弱い | ◎ 実装意図・改善ログ・再挑戦を残す |
| 弱点の潰し方 | × | △ 手動 | × | ◎ 忘れそうな問題と苦手分野を自動で復習 |
| 扱う範囲 | △ 単発講座 | × アルゴのみ | △ 体系がない | ◎ HTML/CSSからReact・Laravel・運用まで |
| 学んだ記録 | × 視聴履歴のみ | △ レート | × | ◎ 提出・アドバイス・やり直した記録を残す |
| 信用できる理由 | × | △ テストケースのみ | × 会話ログ依存 | ◎ 強い範囲と弱い範囲を分けて公開 |
「勉強しました」だけでは弱い。
問題を解いて終わりではなく、間違いを直し、自分の言葉で説明できるところまで練習します。
BEFORE → AFTER
やり切ったあなたは、
見せる材料が増えている。
写経ならできる
小さなLPやUIを白紙から作れる
模写しか見せられない
店舗サイト、採用LP、演出サイトなどのサンプルを増やせる
案件文を見ても怖い
フォーム、検索、管理画面などの部品を作った経験で読める
見た目だけで止まる
DB・認証・デプロイまである個人開発に進める
作ったものを説明できない
実装意図、失敗、改善点を自分の言葉で話せる
※ 現在テスター募集中。成果データは収集し次第、このページで公開します。
CAREER PATH
目指すのは、
本物の実力がつく階段です。
世の中の学習サービスは、初学者向けのものばかりです。
そこで終わると、何が本当にできるようになったのか分かりません。
Code
Gymでは、実装、検証、レビュー、再挑戦、自走の順で実力を積み上げます。
STAGE 1
入門卒業(いまのあなた)
Progate・ドットインストール修了。写経はできる。
STAGE 2
正しく動かせる
小さなUIや関数を、自分で書いて正しく動かす。
Markup / JS Interaction Gym
STAGE 3
つなげて作る
UI、DB、認証、API、デプロイをつなげて考える。
Fullstack / Backend Gym
STAGE 4
自走して直す
要件、バグ、改善、レビュー対応まで含めて説明できる。
アドバイスを生かす練習 + CS Gymよくある学習の終わり方
- 動画を見た
- 写経した
- 正解を見ながら完成させた
→ できた気は残るが、実力の根拠が弱い。
Code Gymで残る学習の記録
- 正しく動くまで直した提出
- AIコーチからの具体的なアドバイス
- 実装意図メモと改善ログ
→ 何を考え、どこを直し、どう伸びたかを説明しやすくする。
本物の実力を、どこで生かすか。
転職
提出・レビュー・改善ログをもとに、何ができるかを説明する。
面接で「学習しました」以上の話ができる。
副業・案件獲得
実務に近いUI、フォーム、DB、認証、運用の型を練習する。
できた気ではなく、壊れにくい実装へ近づける。
個人開発
アイデアを画面、DB、認証、公開URLまで持っていく。
AIに丸投げせず、判断して直せる状態を目指す。
SYSTEM
提出したら、
次に何を直せばいいか分かる。
1
まず、自分で書く
答えを眺めるのではなく、小さくても自分の手で書きます。
分からないところが、今の伸びしろです。
2
その場で動かして確かめる
ボタンは動くか、計算結果は合っているか、データは正しく取れるか。
提出したコードを自動で確かめ、間違った場所を知らせます。
3
理由を知って、もう一度直す
「不正解」だけでは終わりません。
読みやすさや安全性も含め、なぜ直すのかをAIコーチが伝えます。
忘れにくい復習
忘れそうな頃に、解いた問題がもう一度出る。
苦手を自動で整理
間違えた内容をまとめ、苦手なところを集中して練習。
順番にレベルアップ
基礎を終えたら次へ進むので、難しい問題に急に飛びません。
NON-SCORING
実装意図メモ
毎回3行で「なぜ選んだか」「何を捨てたか」「次に直すなら何か」を残す。
点数化しないから正直に書けます。
DEEP PASS
3分説明
Deep条件は、書くだけでなく声に出して説明する。
相手がいなければ録音でよく、会議室で伝える練習になります。
REVIEW
過去の自分レビュー
復習前に、前回の自分へ「良い点1つ、指摘3つまで、今回直すこと1つ」を書く。
PRレビューの目を安全に鍛えます。
正直に言います。扱わないものもあります。
モバイルネイティブ開発、機械学習の実装、大規模インフラ構築は対象外です。
Code GymはWeb開発の現場力に全振りしています。
できないことを隠すツールを、あなたは信用できますか？
FOR WHOM
教材は見た。
でも、本当に伸びた気がしない。
その段階のあなたのための練習場。
向いている人
- 入門教材(Progate・ドットインストール等)を終えた人
- 本物の実力が伸びる課題で鍛えたい人
- 間違った理由と直し方を教えてほしい人
- 毎日1問でも手を動かし続けられる人
- 実装理由、危ない点、改善点を自分の言葉で説明できるようになりたい人
向いていない人
- プログラミングに一度も触れたことがない人
- 動画を見るだけで満足したい人
- 楽して稼げる方法を探している人
- コードを書かずに済ませたい人
PRICE
本物の実力を鍛える毎日を、
続けられる価格で。
プログラミングスクール
50〜80万円
技術書で同範囲を揃える
10万円以上
Code Gym
月額 4,980円(税込)
※ 価格比較は学習環境の費用感の目安です。現在テスター募集中で、転移成果データは収集し次第このページで公開します。
Code Gym メンバーシップ
月額¥4,980(税込)
- 6つのコースの問題をすべて利用可能
- 基礎ドリルからWebサイト・アプリ制作まで
- 生成問題の無限出題
- その場での自動採点＋AIコーチのアドバイス
- 忘れにくい復習・苦手整理・レベル進行を自動管理
- 提出・完走記録の保存
- いつでも解約可・違約金なし
1日あたり約166円。
毎日1問、本物の実力を鍛える習慣のための価格です。
申し込み時点では課金されません。承認後に契約内容を確認できます。
FAQ
よくある質問
どのレベルから始めればいいですか？
入門教材を終えた直後なら、Markup GymのLv1からで大丈夫です。
最初の30問は固定のLv1-2課題が順番に出るので、迷う要素はありません。
PHP/Laravel志望ならBackend Gym単独でLv1から始められます。
1日どれくらいの時間が必要ですか？
「今日の1問」を毎日押すだけなら、1日20〜30分から始められます。
本気で駆け上がりたい人は1日1〜2時間を推奨します。
大事なのは量より継続です。
完全な初心者でも大丈夫ですか？
正直に言うと、向いていません。
まずProgateやドットインストールで入門を済ませてから来てください。
そのほうがあなたのお金と時間が無駄になりません。
AIレビューの判定は甘くないですか？
むしろ逆です。
答えとして通してよいかを、自動チェックとレビューで見ています。
何も直していない提出や、言葉だけそれっぽい提出が通らないようにしています。
「動くが危ないコード」は落とされます。
解約はいつでもできますか？
はい、いつでも解約できます。
違約金や最低利用期間はありません。
合わないと思ったら、その月でやめてください。
転職・案件獲得のサポートはありますか？
Code
Gym自体は学習プロダクトです。学習ロードマップや進路に迷った場合は、申込内容を確認してご案内します。
完走記録と提出履歴は、ポートフォリオや卒業制作の補助資料として使えます。
できた気で終わらせない。
書いて、検証して、直す。
本物の実力を、今日の1問から。
実務に直結する課題。
オリジナルの成果物を作る自走力。
間違った理由と、次に直すことが分かるアドバイス。
Code Gymは、その3つで本物の実力を鍛えます。
月額4,980円(税込)・いつでも解約可
P.S.
教材を終えたあと、何をすればいいか分からず止まってしまう人を減らしたい。
今日やる問題が分かり、間違った理由が分かり、昨日より少し作れる。
Code Gymは、その小さな前進を毎日続けるための場所です。