エンジニアと、
同じ言葉で話すための
TypeScriptの基本。
「型が合わない」「TypeScriptで作っています」。
その言葉が、わかるようになる。
身近な経費申請を題材に、仕組みとコードの読み方を、
図解と短い例でひとつずつ学びます。
予備知識はいりません。コードは、書くより「読む」ことから。
stringnumberbooleantype Expense = {
applicant: string;
amount: number;
hasReceipt: boolean;
};全体像から、仕事での会話まで
クイズを含む学習時間の目安
理解をたしかめる確認クイズ
専門用語を、身近な言葉で
HOW TO LEARN
「聞いたことがある」から、
「なるほど、そういうことか」へ。
読む、図でつかむ、クイズでたしかめる。
4つのステップで、知識がつながります。
正体を知る
TypeScriptは何をするもの？
JavaScriptとの関係と型の役割。
コードを読む
値、条件、処理のまとまり。
申請書を手がかりに読み解く。
仕組みをつかむ
データがないとき、エラーのとき。
型でできることと、その限界。
仕事につなげる
開発担当やAIに、具体的に頼む。
最後のテストで理解を振り返る。
FOR YOU
こんな場面に、
心当たりはありませんか？
企画・営業・経理・マネジメント。
エンジニアと一緒に働く人のための教材です。
- 「型エラーです」と言われても、何が起きたかわからない
- 画面のコードを見せてもらっても、どこを読めばいい？
- AIに作ってもらったツールを、どう確認すればいい？
- 型の役割と、エラーの意味を説明できる
- 短いコードから、入力・処理・結果を読み取れる
- 期待する動きと確認条件を、具体的に伝えられる
CURRICULUM
必要なことを、
8つの章に絞りました。
順番に読めば、約110分。
気になる章から読み始めても大丈夫です。
読了した章は、このブラウザに記録されます。
TypeScriptって、何だろう？
JavaScriptとの関係と、仕事で使われる理由。「型がある」と何がうれしい？
「型」はデータの約束
文字・数値・真偽値。経費申請の入力欄から、型の役割をつかみます。
短いコードを、日本語で読む
const、if、配列、関数。申請データが処理される流れを一緒に読みます。
データの形を、ひとつにまとめる
オブジェクト、type、interface。申請書1枚の「項目とルール」を読み解きます。
「ないかもしれない」を扱う
ユニオン型、null、undefined。「申請中だけ」「データがないとき」を考えます。
コードが動くまでと、エラーの読み方
型チェック、ビルド、実行時。エラーをひとまとめにせず、起きた場所をつかみます。
エンジニア・AIと会話する
API、非同期、React、ジェネリクス。開発の会話を読み解き、依頼を具体的に。
まとめと、最後の確認テスト
学んだことを1枚に整理。10問のテストで、仕事の会話に使えるか確かめます。
このブラウザの読了記録とクイズの回答をリセットします。
ABOUT THIS GUIDE
書けなくても、
わかることは増やせる。
この教材は、TypeScriptを初めて知る非エンジニアの方に向けた入門です。環境構築や複雑な文法の暗記はせず、図解と短いコードを読んで、開発の会話を理解することを目指します。
全章で登場する「ハルマチ商事」と経費申請のデータは架空の設定です。目安110分には読解・短い体験・クイズを含みます。所要時間には個人差があります。
説明はTypeScript公式Handbook ↗を参考に、入門向けに整理しています。Microsoftの公式教材ではありません。
学習記録について
読了した章とクイズの回答を、この端末のブラウザのlocalStorageに保存します。ログインやサーバーへの送信は行いません。別の端末とは同期されず、ブラウザのデータ消去で記録も削除されます。保存できない設定でも学習は続けられます。