まずAngularについて軽めに・・・
AngularはGoogleとコミュニティによって開発が進められているjavascriptのフレームワークです。
ややこしいですが「AngularJS」と呼ばれていたフレームワークの後継になります。
Angularの特徴としては、
- コンポーネント指向
- TypeScriptベースで実装されている
- さまざまな技術が使われている（SystemJS、RxJS、Zone.js）
- フルスタックフレームワーク
- セマンティックバージョニング
などがあげられます。
Angularを学ぶときに注意すること
当然ですがAngularには他のフレームワーク同様にバージョンがあります。
ややこしいのはバージョンによって呼び方が違うので調べものをするときには注意が必要となります。
バージョンと名称は以下の表の通りです。
| version | 名称 |
|---|---|
| v1 | AngularJS |
| v2 | Angular2 |
| v4 | Angular |
Angularを始めるには・・・
Node.jsを使ってAngularをインストールするので、Node.jsがお使いのパソコンに入っていない場合はNode.jsをインストールしてください。
Angularをインストールするために必要なもの
- Node.js 4以上が必要
- Nodeのパッケージ管理システムnpm
【本題】TypeScriptって？
TypeScriptを勉強するのには公式サイトでコードを書くのが良いでしょう。
サイトTOPに行くと「Playground」というタブがあります。
そこで、TypeScriptを記述することができ、コンパイルと動作まで確認することができます。
TypeScriptを学ぶ上では非常に良い環境だと思いますので試してみてください。
「javascript」との違いは
- 変数の型がある
- コンパイルが必要
TypeScriptにはデータ型が7つ存在します。
- string型
- number型
- boolean型
- 配列型
- オブジェクト型
- タプル型
- enum型
ただTypeScriptは型を指定しないで変数に値を設定した場合勝手に型を推測してくれます。
anyを型として指定すると何でも代入できる型の変数として扱うことができます。
any型の変数が増えすぎるとデバックの際にもわかりにくくなるので使用は必要最低限にしておくのが無難です。
var hoge: any = 'Angular';
また「｜」で区切ることで複数型を指定することができます。
var hoge: string | number;
変数の話
TypeScriptには3つの変数宣言があります。
| 宣言方法 | 変数の特徴 |
|---|---|
| let | 宣言前に参照するとエラーになります（ブロックスコープ） |
| const | 再代入不可能な宣言方法 |
再代入しない変数に関しては基本的にはconstで宣言した方が良いかも知れません。
let box;
let box2;
const PI = Math.PI; //3.14.....
ちなみに変数を文字列中に埋め込みたい場合は変数を${}で囲むことで実現できます。
let hoge = 'Hello';
console.log(`この後に変数に代入した文字が表示されます${hoge}`);
関数について
TypeScriptで関数を記述する際は省略して記述することが可能です。
hoge(name?: string)のnameの後ろに「？」を記述することで引数を省略できることを示すことができます。
function hoge(name?: string): string {
return 'Hello, ' + name + '!';
}
document.write(hoge());
実行すると「Hello, undefined!」と出力されます。
これは、初期値が設定されていないからです。
初期値は下記のように記述すれば設定することができます。
hoge(name?: string = 'Taro')
とすると引数ががない場合は初期値として「Taro」と表示することができます。
引数にどんなものが入るかわからない複数の値が入るかもしれない場合には可変引数を使います。
hoge(...values: number[]) number { ......
引数の頭にドットを3つ並べると仮引数を配列として扱うことができ、複数の引数を処理できます。
アロー関数
使用することで関数を省略して記述できるケースがあります。
また、関数を一文で書ける時はさらに簡略して書ける場合があるので一例を紹介します。
let add = (x1: number, x2: number): number => {
return x1 + x2;
}
上記の関数は中括弧を簡略して書くことができます。
typescript
let add = (x1: number, x2: number): number => return x1 + x2;
また一文で書いた時は自動的にreturnするように判断されるのでreturnも省略可能です。
typescript:
let add = (x1: number, x2: number): number => x1 + x2;
引数が一つの時はさらに省略することができます。
let add = x1 => x1 + x2;
let add = () => 'Hello'; //引数がない場合の書き方
ただし、「引数に型を指定する場合」や「引数がない場合」には「（）」を省略して書くことができないので注意してください。
classについて
アクセス修飾修飾子によってアクセスを制限することができます。
アクセス修飾子は以下の３つがあります。
| アクセス修飾子 | 特徴 |
|---|---|
| public | 外部のどこからでもアクセスできる（デフォルトはpublic |
| protected | 自分のクラスとその派生クラスからアクセスできる |
| private | そのクラスからのみアクセスできる |
class Animal {
age: number = 10;
constructor(private isBark: boolean, private legs: number) { }
bark(): void {
if (this.isBark) {
alert('legs:' + this.legs);
}
}
}
//インスタンス化
let dog = new Animal(true, 4);
getterとsetter
privateなプロパティに対して値を取得したり、値を設定する機能があります。
それが「getter」と「setter」と呼ばれているものです。
class Animal {
private _age: number = 10;
get age(): number {
return this._age;
}
set age(value: number) {
if (value < 0) {
throw new Error('年齢は年齢は0以上でなければなりません');
}
this._age = value;
}
}
let dog = new Animal();
console.log(dog.age); //値の取得 dog.age = 10;
dog.age = 11; //値のセット
ageというメソッド名に対して頭に「get」「set」をつけることで、外部からclassにアクセスして値を取得、代入することができるようになります。
classの継承
extends Animalと記述することでAnimal classを継承することができ、「extends Animal」の中に記述された内容だけが差分として上書することができます。
class Animal {
age: number = 10;
constructor(private bark: boolean, private legs: number) { }
bark(): void {
if (this.isBark) {
alert('legs:' + this.legs);
}
}
}
class Dog extends Animal {
bark(): void {
if (this.isBark) {
alert('bow, wow!');
}
}
}
親classのcryメソッドを実行したい場合にはsuperで実行することができます。
if (this.isBark) {
super.cry();
alert('bow, wow!');
}
また、継承したclass内でconstructorを上書きをしたい場合はsuper();を実行し、初期化してください。
実行しないと他のメソッドに影響が出てしまうので注意しましょう。
便利なジェネリック
型の違うclassを複数用意しないといけない時その分だけclassを作ると管理が大変になってしまいます。
そこで使うのがジェネリック機能です。
class hogeString {
data: string;
}
class hogeNumber {
data: number;
}
//ジェネリックを使用
class hogehoge<T> {
data: T;
getHoge(): T {
return this.data;
}
}
new hogehoge<string>; //dataがstring型のhogehogeを生成
new hogehoge<number>; //dataがnumber型のhogehogeを生成
上記のようにclass名の後に「不等号＋任意の文字列」を記述することでdataの型がことなるclassを生成することができます。
//関数
function hoge<T>(keyword: T){
console.log(`Log: ${keyword}`);
}
hoge<string>('Hello');
hoge<number>(10000);
//複数指定
class hoge<T, U> {
name: T;
age: U;
}
let hogehoge = new hoge<string, number>();
と記述することで関数にもジェネリック機能を使用することができます。
さらに、「,（句読点）」で区切ることで型を複数指定することができます。
インターフェイスで共通化
classの共通化を行うのに便利な機能です。
interface Animal {
name: string;
legs: number;
isBark: boolean;
bark(): void;
}
class Dog implements Animal {
name: string = 'maru';
legs: number = 4;
isBark:boolean = true;
bark(): void {
if (this.isBark) {
console.log('bow!, wow!');
}
}
}
Dogというclassを作成する時にimplements Animalとすることでinterfaceを適用させることができます。
こうすることでDogというclassにnameプロパティが定義されていない時にエラーが発生します。
classの共通化ができるので、設計する際には重要な機能となってきます。
まとめ
いかかでしたでしょうか？
私自身「TypeScript」を学習するのは初めてのことでしたが、javascriptを触ったことがある人であればそれほどハードルを感じことはないような印象を受けました。
もちろん今回は基本的な部分のお話ではありますが、これをきっかけに「TypeScript」または「Angular」に学んでいいただければ幸いです。