まずは、現場で必要となる開発環境やWeb制作の基礎知識を身につけるところからスタートします。単にコードを書くのではなく、「実際の開発現場でどう作業が進むのか」を意識しながら、モダンなWeb開発に必要な基礎力を徹底的に固めていきます。

学習目標

Web開発に必要なローカル環境構築・GitHub運用・HTML/CSS・JavaScriptの基礎を習得し、自力でWebページを制作できる状態を目指します。

学習内容

• ローカル開発
• 環境構築
• GitHub
• Linuxコマンドライン
• HTML / CSS
• JavaScript

学習手順

まずはVisual Studio Codeやブラウザなどの開発環境を整え、GitHubを用いたソースコード管理の基本を学習します。その後、Linuxコマンドを通じてエンジニアに必須となるCUI操作に慣れながら、HTML/CSSによるWebページ制作、JavaScriptによる動的な画面制御までを段階的に習得していきます。

実際に「プロフィールページ」「ニュースサイト」「傘予報ページ」などを制作しながら、現場で必要となるマークアップ・レイアウト設計・DOM操作・イベント処理・非同期通信といった基礎スキルを実践形式で身につけます。

基礎学習で身につけた知識を活用し、React・TypeScriptを用いたモダンなフロントエンド開発へ進みます。
コンポーネント設計や型安全な開発を学びながら、実務に近い開発スタイルを習得していきます。

学習目標

ReactとTypeScriptを活用し、保守性・再利用性の高いフロントエンドアプリケーションを開発できる力を身につけます。

学習内容

• React
• React Hooks
• TypeScript
• コンポーネント設計
• 状態管理
• 型安全な開発

学習手順

Reactでは、JSX・コンポーネント・props・Hooksなどの基本概念を学習し、プロフィールカードやカウンターアプリ、電卓アプリなどを制作します。

さらに、TypeScriptを導入することで、型注釈・インターフェース・ジェネリクス・ユーティリティ型などを活用した、実務レベルの開発手法を習得します。

また、生成AIを活用したエラー解決やテストケース作成など、現代の開発現場で求められるAI活用スキルについても学習します。

フロントエンドだけでは完結しない、本格的なWebアプリ開発へステップアップします。
データベース設計やAPI開発を通じて、フロントエンドとバックエンドを連携させるフルスタック開発の基礎を学びます。

学習目標

Node.jsとデータベースを活用し、データ管理・API開発・認証機能を備えたWebアプリを構築できるようになります。

学習内容

• SQL / データベース設計
• Node.js
• Express
• REST API
• 認証機能
• Herokuデプロイ

学習手順

まずはSQLを用いてデータベース操作を学び、データの追加・更新・削除・検索・テーブル結合など、実務で必要となるデータ操作技術を習得します。その後、Node.jsとExpressを使用してAPIサーバーを構築し、Reactと連携するバックエンド開発を実践します。

ToDo管理APIやユーザー認証APIの開発を通じて、データベース接続・非同期処理・セキュリティ・環境変数管理など、実践的なバックエンド開発スキルを学びます。

さらに、Herokuを使用してアプリをインターネット上へ公開し、実際の運用を意識したデプロイ手法まで習得します。

最後は、これまで学んだ技術を総動員し、React・Node.js・データベースを連携させた本格的なWebアプリケーション開発に挑戦します。

学習目標

実務レベルのWebアプリを自力で設計・開発・公開できる総合的な開発力を習得します。

学習内容

• React × Node.js連携開発
• CRUD機能実装
• 認証・認可
• データベース連携
• デプロイ
• リファクタリング

学習手順

卒業制作として、ReactとNode.jsを活用した「ToDoアプリ」をゼロから構築します。

単なる画面制作ではなく、要件整理・テーブル設計・API設計などの上流工程からスタートし、ToDoの追加・編集・削除・チェック機能といったCRUD機能を実装します。

さらに、ユーザー認証・認可機能を追加し、ユーザーごとのデータ管理にも対応。コードのリファクタリングやデザイン調整も行いながら、実務を意識した開発フローを経験します。

完成したアプリはHerokuへデプロイし、ポートフォリオとして公開。「自分で作り切った経験」を通じて、現場で通用する開発力を身につけます。

まずは、モダンなフロントエンド開発で必須となるReactとTypeScriptの基礎を集中的に学びます。画面を部品ごとに設計するコンポーネント指向や、型を活用した安全な開発手法を身につけ、実務に近いフロントエンド開発の土台を作ります。

学習目標

ReactとTypeScriptの基本概念を理解し、再利用性・保守性の高いフロントエンドアプリを開発できる力を身につけます。

学習内容

• React
• React Hooks
• TypeScript
• コンポーネント設計
• 状態管理

学習手順

Reactの概要やJSX、コンポーネント、props、イベント処理、Hooksなどを学び、プロフィールカード・カウンターアプリ・電卓アプリの開発に取り組みます。

その後、TypeScriptの型注釈・型推論・ユニオン型・インターフェース・ジェネリクス・ユーティリティ型などを学習。型安全な関数や投稿アプリの型設計を通して、実務で求められる堅牢なコード設計力を身につけます。

次に、Node.jsを用いたバックエンド開発を学びます。WebサーバーやAPIの仕組みを理解し、フロントエンドとデータベースをつなぐためのサーバーサイド開発スキルを習得します。

学習目標

Node.jsとExpressを活用し、データベースと連携したAPIや認証機能を開発できる状態を目指します。

学習内容

• Node.js
• Express
• API開発
• データベース接続
• 環境変数管理
• セキュリティ

学習手順

Node.jsの環境構築から始め、モジュール・非同期処理・httpモジュール・Expressを使ったWebサーバー構築を学びます。

さらに、外部データ取得やデータベース接続、ToDoリスト管理API、ユーザー認証APIの開発を通して、実践的なバックエンド開発の流れを理解します。環境変数やセキュリティ、テストについても学び、実務で必要となる基礎力を固めます。

ReactとNode.jsを組み合わせ、フロントエンドとバックエンドが連携する本格的なWebアプリ開発に挑戦します。開発したアプリをインターネット上に公開することで、制作から公開までの一連の流れを経験します。

学習目標

React・Node.js・データベースを連携させたWebアプリを開発し、Herokuを使って公開できる力を身につけます。

学習内容

• Herokuデプロイ
• React×Node.js開発
• ToDoアプリ開発
• CRUD機能
• 認証・認可
• リファクタリング
• デザイン調整

学習手順

まずはHerokuを使ったWebアプリ公開の仕組みを学び、デプロイ環境を整えます。

その後、ReactとNode.jsでToDoアプリを開発。要件整理・テーブル設計・プロジェクト作成から始め、ToDoの追加・編集・チェック・削除といったCRUD機能を実装します。

さらに、認証・認可機能を追加し、ユーザーごとにデータを管理できるアプリへ発展させます。最後にデザイン調整やリファクタリングを行い、Herokuへ公開します。

このコースのメイン制作として、Next.jsを使ったECサイト開発に取り組みます。商品管理、検索、カート、決済、レビューなど、実際のサービスに近い機能を実装しながら、フルスタック開発の実践力を高めます。

学習目標

Next.jsを活用し、認証・商品管理・カート・決済機能を備えたECサイトを開発できる力を身につけます。

学習内容

• Next.js
• Tailwind CSS
• API開発
• データベース連携
• 認証機能
• 商品管理
• カート機能
• 決済機能
• レビュー機能
• Herokuデプロイ

学習手順

Next.jsの概要やプロジェクト構成、ルーティングを学び、APIとフロントエンドページの作成から開発を始めます。

その後、Tailwind CSSでデザインを整えながら、商品一覧・商品詳細・検索・並べ替え・ページネーションなどを実装します。会員登録、ログイン、管理者向けの商品登録・編集・削除機能も開発します。

さらに、お問い合わせ・カート・決済・マイページ・レビュー・お気に入り機能を追加し、実際のECサイトに近いアプリとして完成度を高めます。最後にHerokuへデプロイし、公開まで行います。

このECサイト開発を通して、フロントエンド・バックエンド・データベース・認証・決済・デプロイまで、Webサービス開発に必要な一連のスキルを総合的に習得します。

ECサイト開発を完了した後は、学習したスキルを活かして、自分自身のアイデアをもとにしたオリジナルアプリ開発にチャレンジします。ここでは、単にコードを書く力だけでなく、サービスを考え、設計し、公開するまでの流れを経験します。

学習目標

企画・要件定義・設計・開発・テスト・リリースまでを一気通貫で行い、ポートフォリオとして活用できるオリジナルアプリを完成させます。

学習内容

• Webアプリ企画
• リーンキャンバス
• 要件定義
• ユーザーストーリー
• ワイヤーフレーム
• テーブル設計
• ER図作成
• テストケース作成
• リリース
• 保守・運用

学習手順

まずはWebアプリの企画方法を学び、リーンキャンバスを使ってアイデアを整理します。その後、ユーザーストーリーやユースケースを作成し、機能要件・非機能要件を明確にします。

設計フェーズでは、ワイヤーフレームやテーブル設計、ER図の作成を通して、開発前に必要な準備を行います。

開発後は、テストケースの作成、リリース、保守・運用までを学習。最終的に、自分の企画したオリジナルアプリを完成させ、実務レベルのポートフォリオとして公開できる状態を目指します。

まずは、現在のフロントエンド開発で主流となっているReactとTypeScriptの基礎を学びます。コンポーネント指向や状態管理、型安全な開発手法を理解し、実践的なフロントエンド開発の土台を築いていきます。

学習目標

ReactとTypeScriptの基礎を習得し、モダンなフロントエンドアプリを自力で構築できる力を身につけます。

学習内容

• React
• React Hooks
• JSX
• TypeScript
• コンポーネント開発

学習手順

Reactの概要から始まり、JSX・コンポーネント・props・イベント処理・Hooksなどを体系的に学習します。

プロフィールカードやカウンターアプリ、電卓アプリなどを実際に開発しながら、状態管理や画面制御の基礎を実践形式で習得します。

さらに、TypeScriptを導入することで、型注釈・ユニオン型・インターフェース・ジェネリクス・ユーティリティ型などを学び、保守性の高いコード設計を身につけます。生成AIを活用したエラー解決やテストケース作成など、実務を見据えたAI活用スキルも学習します。

フロントエンドだけでは完結しない、本格的なWebアプリ開発へステップアップします。データベース設計やAPI開発を学び、サーバーサイドを含めたフルスタック開発の基礎を身につけます。

学習目標

SQL・Node.js・Expressを活用し、データベースと連携するAPIを開発できる状態を目指します。

学習内容

• SQL
• データベース設計
• Node.js
• Express
• REST API
• ユーザー認証
• セキュリティ

学習手順

まずはSQLを用いて、データベースやテーブルの作成、データ検索、更新、削除、テーブル結合などを学習します。

その後、Node.jsとExpressを使用してWebサーバーやAPIを構築。ToDoリスト管理APIや認証APIの開発を通して、バックエンドとデータベースの連携方法を実践的に学びます。

さらに、環境変数管理・セキュリティ・テストについても学習し、実務で必要となるバックエンド開発の基礎を固めます。

ここからは、ReactとNode.jsを組み合わせた本格的なWebアプリ開発に挑戦します。フロントエンド・バックエンド・データベースを連携させながら、実際に動くアプリケーションを完成させます。

学習目標

認証機能やCRUD機能を備えたWebアプリを開発し、インターネット上へ公開できるスキルを身につけます。

学習内容

• Herokuデプロイ
• React × Node.js連携
• CRUD機能
• 認証・認可
• データベース連携
• リファクタリング

学習手順

まずはHerokuを使ったWebアプリ公開の仕組みを理解し、デプロイ環境を構築します。

その後、ReactとNode.jsを連携させたToDoアプリを開発。ToDoの追加・編集・削除・チェック機能などのCRUD機能を実装し、ユーザー認証・認可機能も追加していきます。

また、ユーザーごとのデータ管理やコードのリファクタリング、デザイン調整まで行い、実務レベルのアプリ開発フローを経験します。

完成したアプリはHerokuへデプロイし、実際にインターネット上へ公開します。

続いて、現在のモダンフロントエンド開発で主流となっているNext.jsを使い、本格的なECサイト開発を行います。
商品管理・検索・認証・決済など、実際のWebサービスに近い機能を開発しながら、実践力を大きく高めていきます。

学習目標

Next.jsを活用し、フル機能を備えたECサイトを開発・公開できる力を身につけます。

学習内容

• Next.js
• Tailwind CSS
• API開発
• データベース連携
• 商品管理
• カート機能
• 決済機能
• レビュー機能
• 認証機能

学習手順

Next.jsの概要やルーティング、プロジェクト構成を学び、APIとフロントエンドページを構築します。

その後、商品一覧・検索・並び替え・ページネーション・商品詳細ページなどを実装し、ECサイトとしての基本機能を構築。

さらに、会員登録・ログイン・管理者ページ・商品登録/編集/削除・カート・決済・レビュー・お気に入り機能など、実践的な機能を追加していきます。

最後にTailwind CSSでデザインを整え、Herokuへデプロイすることで、本格的なECサイトとして公開します。

最後は、自身で企画したオリジナルWebアプリの開発に挑戦します。企画・要件定義・設計・開発・テスト・公開までを一貫して経験することで、実務に近い総合的な開発力を身につけます。

学習目標

自ら企画したオリジナルアプリを完成させ、ポートフォリオとして公開できるレベルを目指します。

学習内容

• Webアプリ企画
• リーンキャンバス
• 要件定義
• ワイヤーフレーム
• ER図設計
• テストケース作成
• リリース
• 保守・運用

学習手順

まずはリーンキャンバスを活用し、アプリの企画立案を行います。ユーザーストーリーやユースケースを作成し、機能要件・非機能要件を整理しながら、サービスの方向性を明確化します。

その後、ワイヤーフレーム作成やER図設計を行い、実装前の設計工程を学習。開発後はテストケース作成、リリース、保守・運用についても学びます。

最終的には、自分自身で企画・設計・開発したオリジナルWebアプリを完成させ、ポートフォリオとして公開できる状態を目指します。