この講座で学べること

1. なぜフロントエンドを学ぶのか

Webアプリケーションを利用者に届けるには、ブラウザで動く画面が欠かせません。管理ツールの画面、API動作確認のためのダッシュボード、AIエージェントとの対話UI、社内向けの業務アプリケーションなど、フロントエンドは利用者と直接接する部分として日常的に求められます。

一方で、フロントエンドはHTML/CSS/JavaScriptからTypeScript、React/Next.js、ログイン機能、サーバ状態の取り扱いまで、押さえるべき技術要素の幅が広く、独学だと「Reactは扱ったがCookieの扱いが分からない」「Next.jsのApp Routerが理解できない」といった穴が残りがちです。

この講座では、フロントエンド開発の全体像を段階的に扱います。HTML/CSSからスタートし、JavaScript→TypeScriptと言語を進化させたあと、Reactの基本を押さえてから Next.js（App Router） で SPA（Single Page Application）を構築します。最終的に、Cookieを使ったログイン機能付きの画面までを実装できる状態を目指します。

1.1 こんな方におすすめ

フロントエンド開発の技術要素を体系的に押さえたい方
HTML/CSS/JavaScriptから React/Next.js までを段階的に学びたい方
Next.jsのApp RouterでSPAを作れるようになりたい方

1.2 学べること・身につくこと

この講座を修了すると、以下のスキルが身につきます。

スキル	内容
HTML/CSSの基本	セマンティックなマークアップとFlexbox/Gridでのレイアウトができる
JavaScriptの基本文法	変数・関数・配列・オブジェクト・制御構文・モジュールを扱える
JavaScriptの応用構文	DOM操作・非同期処理・fetchを組み合わせ、フレームワークを使わないJavaScriptだけで動くWebページを作れる
問い合わせフォームの実装	入力バリデーション・HTTPステータスに応じたエラー処理・送信中UIを備えたフォームを実装できる
TypeScript	型注釈・interface・ジェネリクスを使い、型安全なフロントエンドコードを書ける
Reactの基本	JSX・コンポーネント・props・useStateの基本を押さえ、Reactで画面を作れる
Next.js（App Router）	ファイルベースルーティングとServer/Client Componentの使い分けができる
スタイリング	CSS ModulesとTailwind CSSの両方の考え方を理解し、使い分けができる
データ取得	fetch APIとTanStack Queryでバックエンドとの通信を実装できる
ログイン機能の実装	Cookieを使ったログインフローと、ロールに応じたUI出し分けを実装できる

📝 本講座の位置付けについて
DevOps CampはインフラエンジニアがDevOpsのスキルを一通り身につけることを目的としたサービスです。本講座も、後続のインフラ・DevOps系ハンズオンで「実際のアプリケーション」を扱うための土台となる、導入用の位置付けの講座になっています。フロントエンドを網羅的に極めるものではないため、本格的にフロントエンド開発を網羅的に身につけたい方には少し物足りない内容に感じられるかもしれません。

📝 本講座の位置付けについて

DevOps CampはインフラエンジニアがDevOpsのスキルを一通り身につけることを目的としたサービスです。本講座も、後続のインフラ・DevOps系ハンズオンで「実際のアプリケーション」を扱うための土台となる、導入用の位置付けの講座になっています。フロントエンドを網羅的に極めるものではないため、本格的にフロントエンド開発を網羅的に身につけたい方には少し物足りない内容に感じられるかもしれません。

2. 章一覧

3. 学習の流れ

3.1 事前に学んだほうが良い講座

本講座を始める前に、以下を学んでおくと理解がスムーズです。

講座名	事前に学ぶ理由
Webアプリケーションの基本	本講座は HTTP・REST API の基礎知識を前提としており、クライアント側の実装に踏み込むため

3.2 この講座を学んだら

本講座の後は、以下を実施するのがおすすめです。

講座名	おすすめの理由
AI基盤と連携したチャットUIを作ろう	本講座で構築したSPAを土台に、Bedrockのストリーミング応答をリアルタイム表示するAIチャットUIに取り組めるため