女性向けエンジニアスクール
TypeScriptコース
JavaScriptに型を加え、間違いを実行前に見つける。
型を付けて関数を書くところから、データと状態の型設計、 既存JavaScriptのstrict移行まで進みます。
型を書くところから、既存コードの移行まで
TypeScript入門、型設計、移行プロジェクトを順に修了します。 最後は道場で、見本なしに型を設計してtscを通します。
STEP 1｜型を付けて、関数を書く
TypeScript入門
型を付けて関数を書く
型注釈、型推論、基本型、配列とオブジェクト、関数の引数と戻り値を扱います。 JavaScriptコードへ安全に型を付けられるようになります。
STEP 2｜データと状態を、壊れにくい型にする
TypeScript型設計
オブジェクト・状態・ジェネリクス
interface、union、型ガード、ジェネリクスを使います。 APIや画面の状態を、不正な形が成立しないように設計します。
STEP 3｜既存JavaScriptを、段階的にTypeScriptへ移す
JavaScriptからTSへ移行
既存コードをstrictに移行する
tsconfigとstrict設定から始め、データ層、関数、DOMを順に移行します。 動いているプロジェクトを止めずに型を導入する流れを身につけます。
採点するのは、コンパイラそのもの
型が通らないコードは、実行される前に不合格になります。 まず tsc を黙らせてから、中身を合わせにいってください。
チャレンジしてみよう!
TypeScript道場
開発室「この型、通せますか?」
基本型の注釈から、any の撲滅、型ガード、ジェネリクスまで。 最後は型のないモジュールを、strict で通る形に組み直します。
発展｜Reactと共有するコース
TypeScriptでReactとAPI
React側の正規コースを共有
props、state、イベント、APIレスポンスをTypeScriptで安全に扱います。 URL、進捗、権限、レビュー、修了状態はReact側と同じ1コースです。
スライドで復習する
手を動かす前に、図解でざっと思い出せます
TypeScript入門：型を付けて関数を書く
TypeScriptで開発できるプログラム
Webアプリケーション、フロントエンド、サーバーサイドまで、型が付いた安全なコードを書けます。
1 / 5
TypeScript入門：型を付けて関数を書く
動くのに、間違っているコード
length を lenght と打ち間違えても、JavaScript はエラーにしません。存在しないプロパティを読んで undefined を返し、そのまま実行が進みます。
気付くのは、実行して画面を見たときだけです。
lenght と書いても止まりません。実行できてしまうのが厄介なところです。
const works = ["プロフィールサイト", "自己紹介カード"];
console.log("公開作品は" + works.lenght + "件です");
// 公開作品はundefined件です2 / 5
TypeScript入門：型を付けて関数を書く
同じ間違いを TypeScript で書く
言語を切り替えて、同じ lenght がどちらで止まるかを確かめます。
- TypeScript ではコード枠が赤くなる
- 実行する前に、エディタの中でエラーが出る
3 / 5
考えてみよう外しても進めます
TypeScript で works.lenght と書くと、いつエラーに気付きますか。
選ぶと、この枚の中で答えと理由を確かめられます。
4 / 5
TypeScript入門：型を付けて関数を書く
型は約束をコンピュータに見張らせるしくみ
works は文字列の配列だ、workCount は数値だ、と先に宣言しておくと、その約束を破ったところでエラーが出ます。人間のレビューでは見落とす打ち間違いを、機械が毎回同じ精度で拾います。
次のレッスンから、この約束の書き方を学びます。
5 / 5
型は何を守るのか
5枚TypeScript入門：型を付けて関数を書く
TypeScriptで開発できるプログラム
Webアプリケーション、フロントエンド、サーバーサイドまで、JavaScript が動く場所ならどこでも使えます。
1 / 4
TypeScript入門：型を付けて関数を書く
型の記法だけを足したもの
TypeScript は JavaScript を置き換える別の言語ではありません。今まで書いてきた const も配列も関数も、書き方を覚え直さずそのまま使えます。
ブラウザや Node.js が実行できるのは JavaScript だけ、という制約は残ります。
これは JavaScript としても TypeScript としても、そのまま正しく動きます。
const works = ["プロフィールサイト", "自己紹介カード"];
const count = works.length;
console.log(count);2 / 4
TypeScript入門：型を付けて関数を書く
tsc が2つのことをする
書いたコードと、tsc が出力したコードを切り替えて見比べます。
- 型注釈は検査されたあとに消える
- 実行時には1バイトも残らない
3 / 4
拡張子を変えた1枚から、TypeScript は始まる
ファイルの拡張子を .js から .ts に変えたら、そこはもう TypeScript の世界です。中身を書き換えなくても、その瞬間から tsc が型の目で見はじめます。既存プロジェクトへの導入もファイル1枚ずつ .ts にしていけるので、一気に書き換える必要はありません。
4 / 4
TypeScriptとJavaScript
4枚名前の後ろにコロンと型名
型注釈は、変数名の後ろに型を書き添えるだけです。string が文字列、number が数値、boolean が true と false を表します。
プロフィールサイト
3件・公開中
型チェック 通過
: string文字列: number数値: boolean真偽値約束を破ると、その行でエラーになります。
1 / 3
TypeScript入門：型を付けて関数を書く
引数に型が無いと、間違いが素通りする
型注釈のあり/なしを切り替えて、間違った呼び出しがどうなるか確かめます。
- 型が無いと "3" が数のふりをして通ってしまう
- 型があると、呼び出す側の間違いがそこで止まる
2 / 3
考えてみよう外しても進めます
関数の引数に型注釈を書かないと、このコースの設定ではどうなりますか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3
はじめての型注釈
3枚この知識が出る資格
ここで学ぶ内容は、次の試験でも問われます
人気のコース
いま多くの方が取り組んでいるコースです
エンジニアキャリアの歩き方
フロントエンド、バックエンド、フルスタック、インフラ、AI/ML などエンジニアの主要キャリアパスと、各分野で求められるスキルセットや年収レンジを学べる無料コースです。これからエンジニア転職を考えている方や、自分の方向性を整理したい現役エンジニアを対象としています。約 5 時間 (1 日 30 分 × 10 日) で 30 レッスンを修了でき、修了後は自分に合った進路を見極めて学習計画を立てられるようになります。
30レッスン
プログラミング学習のはじめ方
プログラミング学習の進め方、言語の選び方、環境構築、つまずきやすいポイントの乗り越え方を、最短ルートで整理した無料の導入コースです。これから学習を始めたい完全初学者や、独学が続かず行き詰まっている方を対象としています。約 1 時間 (1 日 30 分 × 2 日) で 5 レッスンを修了でき、修了後は迷わず自分に合った学習ロードマップを描いて走り出せるようになります。
5レッスン
はじめての生成AI
ChatGPT、Claude、Gemini など主要な生成 AI の仕組みと使い分け、ハルシネーション対策、業務活用シナリオを手を動かして学べる無料コースです。AI 初学者や、業務効率化を進めたいビジネスパーソンを対象に、技術背景がなくても進められる構成です。約 19 時間 (1 日 30 分 × 38 日) で 76 レッスンを修了でき、修了後は AI を使った業務自動化や情報整理を自分で設計できるようになります。
76レッスン
AIへの指示の出し方：プロンプト入門
Chain of Thought、Few-shot、ロール指示、構造化出力、制約条件の設計など、生成 AI から狙った成果を引き出すプロンプト技法を体系的に学べるコースです。ChatGPT や Claude を業務で活用したいビジネスパーソンや AI エンジニアを対象としています。約 7 時間 (1 日 30 分 × 14 日) で 26 レッスンを修了でき、修了後は要件定義から評価まで再現性のあるプロンプトを自分で組めるようになります。
26レッスン