JavaScript講座JavaScript講座

野中文雄 のTypeScript入門講座

講座レベル2

TypeScriptはMicrosoft社が開発したオープンソースで無料のプログラミング言語です。JavaScriptに、静的型づけとクラスベースのオブジェクト指向を加えたスーパーセットといえます。普通にJavaScriptで書いたのでは探しにくいエラーを見つけたり、面倒でわかりにくくなる記述が簡単に書けたりします。コンパイルすることによりJavaScriptのコードが書き出されます。

野中文雄

このコースではJavaScriptの基礎を学んだ方に、TypeScriptやエディタとして使うVisual Studio Codeのインストールと設定から始め、簡単なクラスの定義と継承やインタフェース、TypeScriptのさまざまな構文まで、作例のコードを書きながら、順を追って解説します。クラスの基本についても補いますので、TypeScriptを学びながら、オブジェクト指向プログラミングの基礎も身につけることができます。

TypeScriptは、とくに規模の大きな開発に力を発揮します。今注目のAngular 2で、シングルページwebアプリケーション(SPA)をつくるときの必須の技術でもあります。ECMAScript 2015(ES6)を意識した仕様は、覚えておいて損のない知識といえるでしょう。

altJS(JavaScript代替)の人気度の動向(Googleトレンド)
altJS(JavaScript代替)の人気度の動向(Googleトレンド)

修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

  • TypeScriptを使う環境がつくれる
  • TypeScriptの基本的な構文でコードが書ける
  • 簡単なクラスと継承が定められる
  • データ型やインタフェースが使える
  • データにアクセスできる範囲を考えて制限できる

カリキュラム概要

  1. Visual Studio CodeでTypeScriptのコードを書く
    • Visual Studio Codeをインストールする
    • tsconfig.jsonでTypeScriptの設定を行う
    • TypeScriptからビルドするタスクをJSONファイルで定める
    • TypeScriptで書いたコードをビルドする
    • Visual Studio Codeでコードを試す
    Visual Studio Codeのダウンロードページ
  2. publicとprivateおよびstatic
    • クラスのプロパティやメソッドをprivateで定める
    • 静的なメソッドとプロパティ
  3. クラスを継承して使う
    • サブクラスを定める
    • サブクラスにインスタンスメソッドを加える
    • サブクラスに静的メソッドを加える
  4. オブジェクト型リテラルとインタフェースを使う
    • 静的メソッドを分ける
    • 型定義をつくる
    • インタフェースを定める
    • protected宣言によるアクセス制限
  5. get/setアクセサを使う
    • getアクセサを使う
    • setアクセサを使う
  6. メソッド引数のデフォルト値と省略および定数を定める
    • メソッドの引数にデフォルト値を与える
    • メソッドの引数が省かれたときの処理を定める
    • 定数を定める
  7. ブロックスコープに変数を宣言する ー let
    • for文でカウンタ変数を参照する例
    • 入れ子のfor文で同じカウンタ変数を使う例
    • 宣言constとlet
  8. 型の互換性
    • インタフェースと型づけ
    • プロパティとその型で互換性を調べる
    • 型推論
  9. アロー関数式
    • アロー関数式を使う
    • アロー関数式とthis参照
野中文雄

*カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。


使用アプリケーション
Visual Studio Code + TypeScript 2.0
講師
野中文雄
定員
6名
対象
HTMLとCSSの基礎知識があり、変数や関数を用いた基本的なJavaScriptコードが書ける方