コース2
JavaScript × TypeScript 同時学習
毎章「まずJSで書いて動かす → 同じファイルをTypeScriptにする」の順で進みます。JSがどう壊れるかを自分の画面で見てから型を入れるので、型が何から守ってくれているのかが手触りで分かります。作るのは天気と為替が本物のAPIで動く、公開URL付きのダッシュボードです。
コース1を終えた人向けHTMLとCSSを書いたことがある人向けです。ターミナルとNode.jsを使います。
公開
読み込み中…
第6章で、あなたのサイトの公開URLが手に入ります。完走しなくても、そこまでで成果は残ります。
コース1が「環境の壁」を越える旅だとすれば、コース2は「型の壁」を越える旅です。
各章は A: JSで書く → B: TSにする → C: あなたの番 の3拍子で進みます。新しい機能はまず .js ファイルに素のJavaScriptで書いて画面で動かし、そのあと同じファイルを .ts にリネームして赤い波線を1つずつ潰します。同じロジックを2回書くことはありません。
赤い波線は失敗ではありません。出発前に気づけた忘れ物です。 このコースは、その忘れ物に気づける目を作るためにあります。
章の一覧
- 未完了第0章準備ターミナルとViteで、開発サーバが動く土台をつくります。約75分
- 未完了第1章TSとの出会いリネームするだけでTypeScriptになります。型はまず「推論されている」ことを確かめます。約85分
- 未完了第2章オブジェクトと型ひとまとまりのデータをオブジェクトで表し、その形を type で宣言します。約85分
- 未完了第3章関数とDOMの型入力欄の値は必ず文字列。その頻出事故を型で受け止めます。約85分
- 未完了第4章ユニオンとナローイング「失敗するかもしれない値」を number | null で表し、確認を書かされる価値を知ります。約70分
- 未完了第5章非同期とfetch本物の為替APIからレートを取ってきます。await忘れが赤線になる体験つき。約105分
- 未完了第6章公開①ビルドして dist フォルダを公開します。型がビルドで消えることも目で確かめます。約40分
- 未完了第7章unknownと型ガード外から来るデータは信じない。unknownで受けて、型ガードで確かめてから使います。約85分
- 未完了第8章判別可能ユニオン通信の3状態を型で設計して、あり得ない状態を書けなくします。約85分
- 未完了第9章ジェネリクス天気を足し、fetchを1本に共通化します。ずっと使ってきた山括弧を自分で作ります。約105分
- 未完了第10章ユーティリティ型とtsconfigRecord/Pick/Partialで重複を消し、tsconfigを1行ずつ読んで卒業します。約85分
詰まったときはお助けページへ。章ごとのファイル一式をダウンロードして、途中から再開できます。