合同会社ilando
メニュー
プログラミング・開発

TypeScriptとReactによるフロントエンド開発講座

型を使って保守しやすい受注画面を作る

  • 40時間
  • 中級
  • 対象職務：フロントエンド開発の担当者
  • オンライン（ライブ配信） ・ 対面（ご指定の会場） ・ オンラインと対面の併用

フロントエンド開発の担当者が、受注一覧・検索・編集画面を作ります。データ形式の指定、外部との通信、入力検査、画面テストを組み合わせて変更に対応できる構成を学びます。

この講座で身につくこと

  • TypeScriptで値の種類を表す型を定義し、受注データの不整合を検出できます。
  • 画面構築用のReactで一覧・検索・編集機能を部品に分けて作成できます。
  • データ取得中・通信失敗・対象なしの表示を実装できます。
  • 外部から受け取る値を実行時に検査し、不正な入力を扱えます。
  • 画面操作の自動テストを作成し、変更後の動作を確認できます。

こんな方に

  • JavaScriptで画面を実装し、TypeScriptへ移行する担当者
  • Reactを使う受注・在庫管理画面の保守担当者
  • 外部とのデータ連携を含む画面開発を担当する社員

カリキュラム（全40時間）

  1. 第1回 TypeScriptで受注データを定義する5時間
    • 型という値の種類を指定する仕組みで入力ミスを検出
    • 受注・商品・状態の型と関数を定義
    • 未設定の値と複数の状態を扱う条件分岐
    • Viteという開発用ツールでReactとTypeScriptの環境を作成
  2. 第2回 Reactで受注一覧を組み立てる5時間
    • Reactという画面構築用ライブラリで部品を作成
    • JSXという画面の記述方法と部品への値渡し
    • 受注行・金額・状態表示を部品化
    • 自社の業務データ（個人情報を除く）または配布する模擬データで一覧表示
  3. 第3回 検索条件と画面状態を管理する5時間
    • useStateによる入力値・選択状態の保持
    • 商品名と受注状態での絞り込み
    • 表示内容を元データから計算する設計
    • 状態更新時に元の配列を直接変更しない実装
  4. 第4回 編集画面と入力検査を作る5時間
    • 数量・納期を変更するフォームの作成
    • 入力の必須条件と業務上の範囲を検査
    • React Routerによる一覧と詳細画面の切替
    • 保存前の確認と編集取消の実装
  5. 第5回 外部データを取得する5時間
    • APIというシステム間の窓口からfetchでデータを取得
    • 配布する模擬APIの起動と通信確認
    • useEffectによる取得処理と不要な通信の中止
    • 読込中・通信失敗・空の一覧を分けて表示
  6. 第6回 保存処理とデータ不備に対応する5時間
    • 編集内容を模擬APIへ送信し結果を反映
    • TypeScriptの型とは別に受信データを実行時に検査
    • 連続クリックによる重複送信を防ぐ画面制御
    • 保存失敗時の入力保持と再試行の実装
  7. 第7回 画面の自動テストを作る5時間
    • Vitestというテスト実行ツールの設定
    • React Testing Libraryで利用者の操作を再現
    • 検索・入力不備・保存成功のテスト
    • 通信失敗と空データの表示を検証
  8. 第8回 変更課題と引継ぎを行う5時間
    • 受注状態の追加に伴う型・画面・テストの修正
    • キーボード操作と入力欄のラベルの確認
    • 配布用ファイルの生成とローカルでの動作確認
    • 構成図・実行手順・本番接続時の確認事項の整理

受講後に手元に残るもの

  • 受注管理画面のTypeScript・Reactプロジェクト
  • 模擬APIと受注データ
  • 画面操作の自動テスト一式
  • 構成図と開発・確認手順書

受講の前提と環境

前提：HTML・CSSの編集と、JavaScriptの関数・配列・非同期処理の基礎が前提です。非同期処理は通信完了を待ちながら画面操作を続ける仕組みです。既存コードを読んで小さな修正ができる方を対象にします。

環境：WindowsまたはMac、Node.js、npm、Visual Studio Code、ブラウザを使います。React・TypeScript・Viteと教材のテストツールは無料です。模擬APIをPC内で動かすため、有料の外部APIや公開サーバーは不要です。

企業ごとの調整

自社の業務データ（個人情報を除く）または配布する模擬データで受注項目を定義します。既存の画面部品や接続仕様を題材にでき、40時間の範囲で通信とテストの配分を調整します。社内システムとの実接続は、演習用環境の利用条件を確認して決めます。

助成金を使う場合

フロントエンド開発職が担う、受注画面の実装・外部データとの連携・変更後の検証に直結する訓練です。助成の可否は計画届の内容に基づき、管轄の都道府県労働局が判断します。

計画届に添付するカリキュラム資料（時間数、回ごとの内容、実施形態）をご用意します。助成金の申請書類の作成・提出の代行は、社会保険労務士の業務のため行いません。事業展開等リスキリング支援コースは令和8年8月3日に改正されています（経過措置あり）。制度の内容は助成金ガイドと、厚生労働省「人材開発支援助成金」でご確認ください。

この講座についてのよくある質問

TypeScriptを使えば受信データの検査は不要ですか。

不要にはなりません。型の検査と、通信で届いた値の実行時検査は別です。数量や受注状態が想定と異なる応答を用意し、画面での扱いを実装します。

社内のAPIが未完成でも演習できますか。

配布する模擬APIで演習できます。正常な応答だけでなく、通信失敗や対象データがない場合も再現します。認証基盤の開発はこの講座には含めません。

既存の受注画面を改修する研修として助成金用の資料を作れますか。

担当する画面改修とテストに対応したカリキュラム資料を提供します。申請書類の作成・提出の代行は社会保険労務士の業務で、ilandoでは行いません。申請は事業主が行うか、社会保険労務士に依頼してください。

関連する講座

30時間

Webアプリ開発入門講座（HTML・CSS・JavaScript）

Web制作・社内システム開発の担当者が、備品申請の入力画面と一覧画面を作ります。見た目の調整、入力内容の検査、ブラウザ上での動作確認まで実践します。

12時間

Git・GitHubによるチーム開発とコードレビュー講座

開発チームのメンバーが、変更履歴の管理から修正提案、相互レビュー、変更の統合までを実践します。同じ箇所を変更した際の競合解消と、誤った変更の取消も扱います。

24時間

UI/UXデザイン基礎講座（Figma・ユーザー調査・プロトタイプ）

Web・アプリの企画・デザイン担当者が、利用者の課題を調べて画面を設計します。Figma（画面設計ツール）で操作できる試作を作り、テスト結果に基づいて改善します。

講座一覧へプログラミング・開発の講座

この講座について相談する

対象の職務、人数、希望の時期をお知らせください。この講座のカリキュラム資料と実施の進め方をご案内します。

この講座を相談するcontact@ilando.jp