「使いながら覚えるTypeScript」をリリースしました

皆さん、こんにちは。気付いたら2月になっていました。たまに暖かい日が戻ってきたかと思ったら、寒波が訪れたり寒い日が続きますね。

さて、今回は新講座リリースのお知らせです。

昨年末から「React」関連の講座を立て続けにリリースしましたが、講座内では「TypeScript」のことをあまり意識せず、その便利さだけを体験してもらえるように…と考えた内容でまとめました。とはいっても、今の時代は何か作ろうにも TypeScript がベースになっていたりすることも多く、実際の現場でも多用されているのではないかと思います。

TypeScirpt に関する書籍は既に沢山リリースされていますし、TypeScript について解説したサイトなども多くあります。私も書籍は過去に何冊か買った記憶がありますが、型の話から始まることも多く（もちろんそれを知る必要はありますが）、実際にTypeScirptを使うメリットみたいなものを理解する前に読むのをやめたりもしてきた過去があります。

そこで今回は「これからTypeScrptを覚えるんだ！」という方、「jQueryまでは何とかなったけど…」「書籍買ってはみたけど何だかわからなかった」とかそういう方を対象とし、とりあえず TypeScript を動かす環境を作って、実際に簡単な「買い物リストアプリ」を作りながら TypeScript のお作法を覚えてもらう講座を作ってみました。

買い物リストアプリのデモはこちら

 

TypeScript は JavaScript のスーパーセットですから JavaScript の知識が必要になるのは事実ですが、今回はとりあえず言われた通りに書いていけば何とかなるように JavaScript そのものの機能も含めて解説するように心掛けております。また、書籍などでありがちな略語による記述（event を e と書いたり）なども極力避けて、初学者が「これはなぜ e なの？」みたいなことにならないよう配慮しました。

講座の全体構成としては以下のようになっています。

---

01. まずは動かす（変数・推論・DOM）

  1. 講座概要 & 作例完成イメージ（6:22）
  2. TypeScriptの環境構築 〜Vite & Tailwind v4（13:25）
  3. 変数と推論の力（12:36）
  4. HTMLの作成と要素の取得（6:32）
  5. 型アサーション 〜Type Assertion（4:21）

02. 動きを作る（関数・Void・引数）

  1. クリックイベントを検知 〜Event Listener（4:08）
  2. 関数を作ろう：引数の型（4:30）
  3. 何も返さない関数 〜Void（2:10）
  4. nullの可能性と戦う 〜Optional Chain（3:50）

03. データを管理する（オブジェクト・配列）

  1. データ構造を考える 〜Object（2:38）
  2. 型の設計図を作る 〜Type Alias（6:34）
  3. 「無いかもしれない」を表現 〜Optional Property（2:28）
  4. データの塊を扱う 〜Array（4:36）

04. リストを操作する（Union・Switch）

  1. 画面への描画 〜Map & テンプレートリテラル（18:24）
  2. 完了チェック機能 〜Find Logic（10:07）
  3. フィルター機能の準備 〜Union Type（14:55）
  4. 条件分岐のベストプラクティス 〜Switch（5:40）
  5. 削除機能の実装 〜Filter Method（4:13）

05. 永続化とセキュリティ（Security）

  1. LocalStorageへの保存（9:21）
  2. データを安全に受け取る 〜Unknown & Type Guard（4:48）
  3. その入力、危険です 〜XSS & Sanitization（6:31）
  4. 完了の紙吹雪 〜@types & Confetti（8:05）

06. どこでも使えるアプリへ（ビルド・デプロイ）

  1. ビルドって何？ 〜Build & Preview（5:21）
  2. ドラッグ＆ドロップで公開 〜Netlify Drop（2:24）
  3. まとめと最終ファイル（1:54）

---

ということで、今回は比較的短めの3時間弱の講座にして、週末2日もあれば余裕で完走できるようにしております。 TypeScript についての詳しい内容やより深い機能については、書籍やサイトの記事できちんと勉強していただく前提で、「まずは使って慣れてみる」という内容に全振りしています。

内容的に一部簡略化してお伝えしている部分もありますが、ただ書くだけはなくこういうところに注意する必要があるよ、といったセキュリティ面も一応はおさえてあります。

いきなり書籍に飛びついて挫折してしまった方、これから書籍を購入して TypeScript の勉強を始めようとされている方、既に手元にある書籍などはその後で読み込んでもらうと、内容がすんなり入ってくると思います。

まずはご自身で使える「買い物リストアプリ」を作るところから始めてみませんか？

→ 使いながら覚えるTypeScript
→ 講座の無料プレビュー