AIでコードを書くときに必ず知っておきたいフロントエンドの概念 ②

この講義では、Threadsのフィード、Amazonのカート、NetflixのストリーミングUI、Google Docsの共同編集、Micro Frontend、Agentic UI、Observabilityといった実際のサービス事例を通じて、フロントエンドのシステム設計の考え方を身につけます。

最新のNext.js v15 App Routerを学びながら、Notionベースの実用的な開発者ブログを一緒に構築する講座です。さらに、Cursor AIの活用方法など、さまざまな知見も得られます。

Cursor AIを活用し、質問だけでショッピングサイトのメインページとナビゲーションメニューを実装するプロセスです。AIバイブコーディング方式により、デザイン要素を直接コーディングすることなく、ショッピングサイトのフロントエンドを完成させることができます。

実務で最も多く使われているReactフレームワーク、簡単で速く楽しく学んでみましょう！ToDoアプリを作りながらReactの動作原理、コンポーネント設計、リファクタリング方法を学びます。

探索 → 計画 → 実装 → コミット。検証済みのAI開発ワークフローをClaude Codeでマスターしましょう。 MCP、サブエージェント、プロンプトエンジニアリングまで、23のミッションで学び、3つの実践プロジェクトを完成させます。

Reactを始める際に必ず知っておくべきNext.jsフレームワーク。初心者目線のわかりやすい説明から、実務者も満足する奥深い動作原理の理解まで。Next.jsを一気に解決します。

Cursor AIを活用し、質問だけでショッピングモールのメインページとナビゲーションメニューを実装するプロセスです。AIバイブコーディング方式でデザイン要素を開発に反映する実習を扱います。

AI時代のWeb開発者には、コーディングだけでなく、AIを活用してアイデアを実際の成果物へと完成させる能力が重要です。StitchとFigma Makeを活用したUI制作からReactの実装、デプロイまでを経験し、実務やポートフォリオに活かせるAI Web開発スキルを身につけましょう。

AIを活用してウェブを開発する際に欠かせないCS知識を教える講座です。 サーバー、データベース、デプロイの原理を知らなければ、バイブコーディング（Vibe Coding）はある瞬間に必ず行き詰まります。 インタラクティブな教材で必須概念を素早く学び、誰もがバイブコーディングでもウェブを完成させられるようになります。

様々な通信技法について学び、その違いを理解することで、最も適切な通信方法を選択し実装する能力を身につけることができます。

やらせる方法ではなく、終わらせる方法。 AIにやらせたことはあるけれど、自分のプロジェクトでは何から始めればいいのか途方に暮れている方のための講座です。まず意図を定め、実装と検証はAIに任せ、人は成果物を使ってみて判断するという順序を学びます。feedmeのクローンを使って一度、そして自分のアイデアで一人でもう一度、デプロイまで完成させながら、自分なりの作業方法を身につけます。

私はいつも「一体なぜフロントエンドテストをしなければならないのか?」という疑問を持っていました。そして疑問を持ちながらテストを機械的に作成していました。 しかし皆さんは「なぜテストを作成するのか」そして「状況に応じてどのように作成すべきか」を理解できるようになります。

SpringAI + Reactで作る自分だけの感情日記サービス Neo + Essentialと一緒に作る4番目のプロジェクトの時間です！

AIを使うだけでなく、もう一歩進んで、自分のWebアプリに直接AI機能を実装してみましょう。Next.jsとSupabaseを基盤に、AIによるレシピ生成から画像生成、データ保存までを実装し、生成AIを実際のWebサービスに連携する実践的な開発経験を積んでみてください。

「なぜAIがこんなコードを書いたのか？」、「なぜさっき言ったことを覚えていないのか？」 Claude CodeのようなAIツールを使っていると直面するもどかしさ。その原因は、ツールがどのように動作しているかを知らないことにあります。この講義は、そのブラックボックスを透明に解き明かします。 全25講を通じて、LLMにファイルを見る「目（Read）」、コードを直す「手（Edit）」、命令を実行する「足（Bash）」を直接持たせ、実際の現場で使われるツールと同じように動作する自分だけのCoding Agentをゼロから実装します。単にライブラリの使い方を学ぶのではありません。AIがどのようにプロジェクト構造を把握し、なぜ長い会話で記憶を失うのか、それを技術的にどう解決するのか（Sliding Window、Summary）を、直接コードで実装しながら体得します。 この過程を通じて、皆さんはAIツールの単なる「ユーザー」から、作動原理を見抜き、ツールを自分好みに改造・評価できる「AI供給者」の視座を手に入れることになるでしょう。

Web開発者が（特にReact開発者であれば）本当に手軽にアプリをリリースできる時代になりました。Expoを使えば、さらに素早くAndroidとiOS両方のアプリをリリースできます。Expoを通じて、アプリまでスピーディーにリリースできる開発者になりましょう。

単純なシステムプロンプトを超えて、ペルソナ設計とStructured Outputsを活用し、ユーザーを記憶し関係性が変化するAIキャラクターチャットボットを実装します。提供されるスタータープロジェクトを基にOpenAI APIを安全に呼び出し、JSON SchemaとZodで感情・信頼度・記憶を検証可能な形で処理し、AIコーディングエージェントを制約条件の中で活用する方法を30分の実習で完成させます。

フロントエンド開発者なのにログイン機能を実装できず、悔しい思いをしたことはありませんか？DBを利用してデータを保存・取得する機能を実装したいけれど、クエリを勉強するのは負担に感じていませんでしたか？Firebaseなら簡単に実現できます！ReactとFirebaseの力を借りて、ユーザー認証、データ保存、ホスティングなど、Web開発に不可欠な機能を一緒に実装してみましょう！（本講義は22年8月に収録されたもので、Firebaseのメジャーアップデートを反映した内容となっています。）

Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

🔥 講義の受講から決済、デプロイまで、受講生が経験する全過程をそのまま実装してみる実践フルスタック講義です。講義の探索、詳細ページ、受講申し込み、動画視聴、受講レビューと質問、カートおよび実際の決済、続きから再生、Docker + AWSデプロイまでをすべて自ら作り、実際のサービスに近いユーザーフローと構造設計を学び、高度なフルスタック経験を完成させます。