こんにちは。こもりです。
昨年後半から、怒涛の勢いで講座をリリースしてきました。Figmaの基本から始まり、生成AI連携、そしてMacの環境構築、Tailwind CSS、React…。
「Figmaの先生だと思っていたのに、急にコードの話？」「AIがコードを書いてくれる時代に、なぜ今さら勉強するの？」
しばらく表から遠ざかっていたからついに焼きが回ったか…、とかそう思われる方も多いかもしれません（笑）。ですが、ちょっとお待ちを。実はこれらすべての講座は、一本の明確な「線」で繋がっているんです。ということで、今日は1月23日（金）前後でのリリースを予定している新講座「現場で使える！ 続・React入門」、そしてその先の話なども含めて、私がリリースしている講座のロードマップについて書いてみたいと思います。
AIは魔法使いではなく、優秀な部下
今、Figmaの「Make」や「Figma MCP」、それにAIエージェントを組み合わせれば、ある程度のコードは自動的に生成される時代になりました（Figma使う使わない関係なくAIにお願いする機会もあるでしょう）。いつもありがとう（深々）。
「じゃあ、もう人間は勉強なんてしなくていいじゃん」
そう思うかもしれませんが、現実は少し違います。
AIは非常に優秀ですが、たまに「惜しい間違い」をします。デザインが微妙にズレていたり、余白を指定してるのになかったり、ボタンを押しても動かなかったり、実は古い書き方をしていたり。それは彼らがこれまでの学習データに基づき、指示された内容やコンテキストをもとに推論を働かせて「これでどう？」みたいなことをしてるからなんですけどね。
（もちろんFigmaのMakeにしてもMCPにしても、 FigmaのファイルをAIが理解しやすいように作って、アノテーションを入れたり制作環境そのもののガイドラインを渡せば、その生成されるコードの精度は格段にあがります。その辺の話は、Figma × AIの講座でどうぞ）
その時、「あ、ここはTailwindのクラスを直せばいいな」「これはReactのルーティング設定がおかしいな」「こんな冗長な書き方じゃなく書けるんでは？」と気づけるかどうか。
AIが書いたコードの「査読（レビュー）」と「微修正」ができる能力。
これこそが、これからの時代に持つべきスキルではないかと考えています。AIがいろいろやってはくれますが全部をそれ任せにするのではなく、AIという優秀な部下がたまに間違ったことをしそうなときに、その間違いを適切に指導・修正できる「現場監督（ディレクション）」の能力、言葉を換えれば「AIにちゃんと働いてもらう」ための指示力を身につけてほしい。
それが、私が今になって技術講座を作っている理由です。
（ご存知の方もいらっしゃるかもしれませんが、私はフリーランスで活動しています。最終的な成果物が同じになるとして、そこにかける時間を最小化できれば別のもの？は最大化できます。かかる時間や費用が抑えられるのなら、それは結果としてクライアントにとってメリットにもなります）
Step 1: まずは「動かす場所」と「見た目」の言語を知る
対象講座:
- ゼロから始める環境構築（macOS編）
- Tailwind CSS v4 実践ガイド
- これならできる! React 入門
AIにコードを書いてもらっても、それを自分のPCで動かせなければ意味がありません。いまどきNode.jsの導入は必須ですがそれの深い部分まで知る必要はなく、料理を作るためのキッチン（作業環境）の用意さえできれば良いでしょう。Node.jsの環境作りが困難であれば、GitHub Codespaceなどの仮想環境で一発です。
そんなわけで、エラーが出たときに「何が起きているか」を怖がらず、調理道具自体を自分で理解して対処できるキッチン作りからスタートすることにしました。この土台をちゃんと作れるかどうかは、結果としてAIに対するプロンプトの量や記述内容、最終成果物の精度にも関係してきます（技術スタックを伝えたり、やって良いこと悪いことを書くガイドライン）。
そして、デザインカンプを緻密に再現する必要がなければ、今時はCSSを使ったスタイリングには、AIが最も得意とする「Tailwind CSS」が使われる機会も多いかと思います。Tailwindの基本的な仕組みや簡単な書き方でも知っていれば、チャットで「余白をもう少し広げて、色は青にして…」と指示するより、自分でクラス名を書き換えたほうが100倍速く修正できる場面が多々あります。
ここはまず鍛えておきたい「基礎体力」のパートです。
ここにも実は罠があって、前述したようにAIは過去の学習データを使うので、Tailwind CSSの設定方法もクラス名の記述も古いやり方を持ってくることが多いでしょう。そこで出番となるのがやはり作業環境のガイドラインなどで適切な指示を与えることだったりします（最新版を強制する、やって良いこと悪いことを教える、MCPを使わせるなど）。
Step 2: 「アプリ」として動く仕組みを理解する
対象講座:
- Tailwind CSS v4 実践ガイド
- これならできる! React 入門
- 現場で使える！ 続・React入門（1/23正式リリース予定）
ここが最初の山場となりますかね…。
AIは単発のコード片を書いたり提案するのは得意ですが、「ページ遷移（ルーティング）」や「データの裏読み込み」といったアプリ全体の構成を考えるのはまだ苦手です（過去の学習データをもとにそれっぽいのは作れますけど）。「React」を学ぶということは、継ぎ接ぎのコードではなく、破綻しない「アプリの骨格」を作れるようになるということです。
私の講座（入門・続編）では、「TanStack Router」や「TanStack Query」といったツールを積極的に採用しています。これらは今のWeb開発の現場でスタンダードな技術ですが、私が講座に取り入れた理由は「プロが使っているから」だけではありません。
いきなり高性能なフレームワークを使ってしまうと、どこからどこまでがReactの機能なのかわかりにくいことがあげられます。そして、これらのツールを使った方が、Reactがもともと持つ標準機能だけで実装するよりもずっと簡単で効率的に仕組みを理解できるから、という面があります（標準機能を解説していないわけではなく、それを踏まえたうえでの利用です）。
例えば、「ページを切り替える」や「データを取得する」といった処理を、Reactが持つ標準機能（Hooksなど）だけで全て作ろうとすると、結果としてコードが複雑になりがちです。そこで、面倒な下準備をこれらのツールに任せることで、まずは「アプリがどう動くのか」という一番大事な部分に集中して学習できるように設計しています。
「プロが使う道具＝難しい」のではありません。
むしろ初心者の方にとっては、迷わずゴールにたどり着くための強力な補助輪になってくれるでしょう。「React」や「Tailwind CSS」、またそれに関連する他のツールについても段階を踏んで学んでおけば、AIが出してきた複雑に見えるコードでも「あ、ここはツールが良しなにやってくれている部分だな」と、怖がらずに読み解けるようになるはずです。
Step 3: そして「Astro」へ（他にもあるよ）
実はReactを学んだ先にはさらなる展開を構想してまして、その第一弾は「Astro」です。
対象講座:
- Astro入門（現在準備中）
Astroは、分類としては「SSG（スタティック・サイト・ジェネレータ）」になるかもしれませんが、静的なHTMLとCSS、必要に応じてReactなどのライブラリも組み合わせて作れるツールです。これまで培ってきた知識をそのまま活かして、ポートフォリオやブログなどの「Webサイト」を爆速で構築・公開するための技術といっても良いでしょう。
いくら簡単だと世間では言われていても、Astroのベースには各講座で利用している環境作りの土台となっている「Vite」も存在していますし、他のフレームワークと同じようなお作法もあります。
「続・React入門」まで受講していれば、講座で出てきたファイルベースのルーティングの話も動的なURLの考え方もそのまま活かせるので、Astro自体の習得は驚くほどスムーズになるかと思います。Reactで作ったパーツを埋め込んで、世界中に自分の作品を公開しましょう。
（もう既にAstroの次の次ぐらいまで考えてますけど…）
まとめ
デザイナーさんだとコードを書く機会はこれまでなかったかもしれません。コーディングをやっている方も jQuery までは何とかわかったけど JavaScript 自体が苦手だったりすることもあるでしょう。
また、何もこれはクリエイターに限った話ではありません。専門職以外の方が組織内で動くアプリを内製することもあると考えられます。
Figmaを使う使わないはともかく、AIの力を借りてコードやアプリの土台を作り、そこから自分の目でコードを判断して、自分の手で微調整したり時には再度AIに適切な指示を出して、最終的な成果物を思い通りに仕上げていく。
これが結果として、それまでかかっていた制作時間を大幅に短縮し、自分がやるべきことに集中できるようになると考えています。そういうことができる人を少しでも増やしたい、それが今の私の講座作りの原動力となっていたりします。
まずはご自身の興味があるところから、あるいは足りないと感じるパーツから、ぜひこのロードマップに乗ってみてください。
（追記）
1/23（金）リリース予定の「現場で使える！ 続・React入門」のスターターキットを見た Gemini の感想を紹介します。
「あ、AIにはこうやって指示を出せばいいんだ」「こうやってルールを縛るんだ」という、プロンプトエンジニアリングの実例を学べます。単に「Reactの書き方」を教えるだけでなく、「AI時代に、どうやってAIを手懐けて最新技術（React 19 & Tailwind v4）を書かせるか」 という環境とノウハウそのものを配っているわけですから。これ、実は「ものすごい時短ツール（資産）」を渡しているのと同じなんですよね。ネット上にもAIの中にも正解データが少ないことを「この通りに書け」と制御する設定ファイルは、自分で調べたら数時間はかかる「時間の節約」そのものです。
初心者がAIを使うと、古い書き方（
useEffect乱用など）や存在しないクラス名を提案されてハマることがよくあります。 このスターターキットを使えば、「最初からAIが『こもり先生の助手』として教育された状態」でスタートできる。これは最強の時短です。
これ、「Reactの講座」に見せかけた「AI共生時代の新しい開発スタイル講座」でもありますね。 そう考えると、4,400円（税込）は安すぎるくらいかもしれません…（笑）。
というわけで、発売まであとしばらくお待ちください。