inflearn logo
知識共有
inflearn logo

AIと一緒に学ぶTypeScript — 基本文法からフルスタックアプリのデプロイまで

AIがコードを代わりに書いてくれる時代ですが、そのコードを読めなければ、修正することも信頼することもできません。この講座では、文法を暗記して手でタイピングする代わりに、Claude Code・Codex・GeminiのようなAIコーディングツールが生成したコードを読み、実行し、型で検証する方法を通してTypeScriptを身につけます。基礎文法からDOM操作、Expressバックエンド、ToDoリストアプリの完成とRenderへのデプロイまで、AIに正確に指示し、結果を検証する実践的な流れを一度に体験します。

1名 が受講中です。

難易度 初級

受講期間 無制限

AI
AI
JavaScript
JavaScript
TypeScript
TypeScript
Express
Express
Node.js
Node.js
AI
AI
JavaScript
JavaScript
TypeScript
TypeScript
Express
Express
Node.js
Node.js

受講後に得られること

  • AIが生成したTypeScriptコードを1行ずつ読み、型エラーや誤った動作を自ら見つけ出す能力

  • 型、関数、オブジェクト、配列、クラス、ジェネリック、高度な型まで、実務で使うTypeScript構文全般

  • ViteとDOM操作で作るブラウザ画面、Express・Zodで作るREST APIサーバー

  • コンテキストファイル(AGENTS.md)と段階的な計画(PLAN.md)でAIに正確に指示し、結果をレビューする作業方法

  • 画面とサーバーを備えたToDoリストのフルスタックアプリを完成させ、Renderにデプロイした成果物

AIが書いたコード、読めますか?

AIコーディングツールは数秒でコードを作ってくれます。しかし、そのコードを読めなければ、エラーが発生しても修正できず、正しく動作しているかどうかも判断できません。

この講義では、TypeScriptの文法を手でタイピングしながら暗記するのではなく、AIにコードを依頼し → 読み → 実行し → 質問して修正する方法で学びます。TypeScriptの型システムは、AIが生成したコードの誤りを実行前に見つけてくれる、最も確実な安全装置です。だからこそ、AIとともにコーディングする時代に、最初に学ぶべき言語なのです。

基礎文法から始めて、ブラウザ画面(DOM、Vite)、バックエンドAPI(Express、Zod)を経て、最後には自分で作ったフルスタックのToDoリストアプリをインターネットに公開します。最新のTypeScript 7に対応しており、Claude Code、Codex、Gemini Code Assistのどのツールでも学習を進められます。

講義を受講すると、このような成果物を作れるようになります

サンプル画像のタイトル (1)

サンプルについて簡単な説明を書いてみましょう。

サンプル画像のタイトル(2)

サンプルについて簡単な説明を書いてみましょう。

サンプル画像のタイトル(3)

例に関する簡単な説明を書いてみましょう。

例示画像のタイトル (4)

例について簡単な説明を書いてみましょう。

  • AIが作成したTypeScriptコードを一行ずつ読み、型エラーや誤った動作を自分で見つけられるようになります。


  • コンテキストファイル(AGENTS.md)と段階的な計画(PLAN.md)でAIに正確に指示し、結果を確認する作業方法を身につけます。

  • ブラウザ画面からサーバー、デプロイまで、Webアプリケーションが動作する全体の流れを理解します。

学習内容

セクション(1)TypeScript基礎:型・制御文・関数

変数とデータ型、ユニオン型、条件文と繰り返し文、スコープを学び、関数の型注釈、型エイリアス、型の絞り込みを身につけます。各セクションではAIコーディングツールで復習クイズに取り組み、実践応用問題(割引価格計算機)を解決します。

セクション(2)オブジェクト・配列・オブジェクト指向・高度な型

分割代入、オプショナルチェーン、配列メソッド(map、filter、reduce)、クラスとインターフェース、ジェネリック、MapとSetを学びます。続いて、keyof、マッピング型、ユーティリティ型(Partial、Pick、Record)、satisfiesまで、実務コードでよく目にする高度な型の読み方を身につけます。

セクション(3)ブラウザとサーバー:DOM・Vite・Express

Viteの開発サーバーでDOMを操作し、イベント、クライアントサイドレンダリング、ESモジュールを学びます。続いてExpress 5でREST APIを作成し、Zodでリクエストを検証しながら、ミドルウェアとルーターでサーバーコードを整理します。

セクション(4)実践プロジェクトとデプロイ

async/awaitとfetchで画面とサーバーを接続します。要件と設計をもとにAIから計画を受け取り、検討したうえで、ToDoリストアプリを5つのステップで実装します。最後にRenderの無料プランにデプロイし、完成したアプリをインターネット上に公開します。

受講前の注意事項

実習環境

  • オペレーティングシステム:Windows、macOS、Linuxのいずれも使用可能(講義画面はWindows)

  • 使用ツール:

    • Node.js 22.18以上(LTS推奨)

    • Visual Studio Code

    • AIコーディングツール1つ:Claude Code、Codex、Gemini Code Assistの中から選択。各ツールの料金プランは公式ページでご確認ください。

    • デプロイ演習:GitHubアカウント、Renderの無料アカウント(クレジットカード不要)

  • PCスペック:VS Codeとブラウザがスムーズに動作する一般的なPCで十分です。

学習資料

  • 講義スライド(PDF)

  • 実習コードのGitHubリポジトリ2つ:セクション1~9用(Infran_TypeScript)、セクション10~11用(Infran_TypeScript_Express)

  • セクション別復習クイズ:AIコーディングツールのチャット画面で"セクション2のクイズを出して"と入力して実行

  • 実践応用問題7問とToDoリストプロジェクトの要件(REQUIREMENTS.md)、画面レイアウト図

前提知識および注意事項

  • HTMLとCSSの基礎知識が必要です。JavaScriptとTypeScriptの経験はなくても構いません。

  • AIが生成するコードは、実行するたびに少しずつ異なる場合があります。講義画面のコードは例であり、名前・ルール・完了条件で確認する方法も併せて案内します。

  • 質問は講義の質問掲示板に投稿してください。(回答の頻度とアップデートポリシーは講師の基準に合わせて記入してください)

  • 講義動画と資料の無断配布・再販売を禁止します。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • AIコーディングツールでコードは作ったものの、何を意味しているのかわからず、修正も信頼もできない初心者

  • JavaScriptは使ったことがあるものの、型エラーを見ると行き詰まってしまい、TypeScriptに移行できない開発者

  • 文法講義を受けても、画面とサーバーを備えたアプリを最後まで完成させたことがない方

  • HTML・CSSはわかるものの、バックエンドとデプロイに不安を感じ、フルスタックの経験を積めずにいるフロントエンド志望者

  • AIが書いたコードをレビューできず、そのままチームに提出するのが不安なジュニア開発者

前提知識、
必要でしょうか?

  • HTMLとCSSの基礎知識が必要です。画面構造とスタイルを読み取れる程度で十分です。

  • 授業ではAIコーディングツールを使用します。Claude Code、Codex、Gemini Code Assistのいずれかを用意してください。

こんにちは
YoungJea Ohです。

キャリア認証

5,789

受講生

502

受講レビュー

162

回答

4.8

講座評価

23

講座

30年以上のIT現場での経験を活かし、人工知能・Python分野を教えるAI専門講師です。ディープラーニング、NLP、LLMファインチューニング、LangChain/LangGraphベースのAIエージェント、AI駆動開発(AIDD)など、実務中心のカリキュラムを開発・講義しています。現代建設電算室、サムスンSDS、韓国シティ銀行で培った30年以上の開発・運用経験を、臨場感あふれる講義で伝えています。現在はKOSA、KOSTA、KITRIなどで人工知能コースを担当しています。

ホームページアドレス: https://ironmanciti.github.io/

もっと見る

カリキュラム

全体

134件 ∙ (13時間 32分)

講座資料:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

YoungJea Ohの他の講座

知識共有者の他の講座はこちら

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール

¥5,716

17%

¥6,967