Angular2を使ってWebアプリを作ってみる#1(導入編)

はじめに

Angular2を使ってWebアプリを作る機会があったから、勉強かつ自分のまとめようとしてまとめる。
適当に調べたことをまとめてくから間違えてるかも。

前提条件

JSP + JavaScriptでのWebアプリは触れていたことがあった。
JavaScriptは軽くしか知らない。
Javaは少しわかるくらい。
TypeScriptもAngularも全く聞いたことが無いところからのスタート。

使うもの

• Angular2
• TypeScript

Angular2

Google製のjsFW。AngularJSの後継バージョン。
AngularJSが色々問題あったから出た後継らしい。
以下、公式サイトから引用。

1. 全てのプラットフォームで開発できる！
2. スピードとパフォーマンスに優れる！
3. 信じられないツーリング！
4. 多くの人に愛されてる！

バージョン2からJSが消えてるのは、推奨されてる言語がTypeScriptだからだそう。
2016年9月15日にリリースされた新しいFW。
これが割りと新しい本。
調べた中では新しめかつ評判のいいAngular2の本はこれしか見つからなかった。
最近(2018年末)ではAngularアプリケーションプログラミングとか公式の日本語ドキュメントとかあってとっつきやすくなっていると思う。

TypeScript

AltJSの1つ。
Microsoftが開発したオープンソースのスクリプト言語。
JavaScriptに型付けとクラスベースのオブジェクト指向を組み合わせたもの。
JavaScriptでも一応型付けとかは出来るけど、すごく面倒くさいらしい。
C#、Delphi、Turbo Pascalの開発者でもあるアンダース・ヘルスバーグが TypeScript の開発に関わってるとのこと。

// こんな感じで型付けられる
var hoge: String = null;

// 型なしにするとノーチェックでコンパイル通るから気をつけて
var huga: any;

// なにも指定しないとanyと同じになるよ
var x;

// アロー関数も使えるよ
var add = (x: number): number => x + 1;

// コンストラクタとかも作れるって
class A{
    myNum: number = 0;
    constructor(id: number){
        //このthisは付けないとエラーになる
        this.number = id;
}

// オーバーロードも出来るって
class A{
    f(x:string): string;
    f(x:number): number {
        if (typeof x === 'string') {
            return x + ' abc';
        } else {
            return x + 1;
        }
    }
}

// ただし、コンストラクタのオーバーロードは出来ないらしい。
class A{
    myNum: number = 0;
    constructor(id: number){
        //このthisは付けないとエラーになる
        this.number = id;
    }
    // こいつはエラーを吐かれる
    constructor(){
        this.number = 10;
    }
}

他にもジェネリクスとか継承とかJavaとかC#で出来ることは基本的にできそう。

終わりに

環境設定とかしようと思ったけど、思ったより書いたからまた次回にする。