概要

「TypeScriptの案件を来週からやるらしいけど、書いたことないんだよなあ。そもそもTypeScriptって何？」といった方向けに、心構えとかどんな教材を使ったかとかを紹介します。

留意点

詳細なTypeScriptの話は出てきません。
ソースコードもあまり出てきません。
TypeScriptにすごく詳しくなりたい方はここで引き返して、別の有意義な記事を読みましょう。

対象としている読者

急にTypeScriptの開発案件が回ってきたけど、TypeScriptを書いたことがない方
急にTypeScriptの開発案件が回ってきたけど、TypeScriptをそもそも知らない方
急にTypeScriptの開発案件が回ってきたけど、どう勉強すべきかわからない方

この記事を書いた人間について(2019/6 現在)

「そもそも対象読者みたいな奴いるの？」と思う方もいるかもしれません。
何を隠そう、数ヶ月前の私でした。

とある事情でTypeScriptの改修案件が回ってきましたが、
アサイン当時はわけがわからなかった状態でした。

そうはいっても仕事なので進めなければいけないので、
何とかもがきながら少しずつ勉強し改修を進め、
今では苦手意識も何とか払拭できてきました。
(まだまだレベルが低いですけど)

対象のような方はかなりレアかもしれませんが、
もし似たような境遇になられたとき、
少しでもこの記事がお役に立てればと思います。

ちなみに私のプログラミング言語のスキルセットはだいたい以下の通りです。

PHP：業務でそれなりに使っているレベル(最新のバージョンは知らない)
Java:入門書を一通り写経したレベル(最近は全く書いてない)
JavaScript:一通り基礎はやったレベル(まだまだ勉強中)
TypeScript:入門者向けサイトをやりながら、何とか小規模案件をやっているレベル
その他：Kotlin, Go(触った事あるレベル)

本題

どんな風に乗り越えたり考えたりすると良さそうかというのを、
自分の実体験もしくは「当時こうすればよかったなあ」的な観点から書かせていただきます。

1. まずは落ち着く

大事です。焦ってもどうしようもありません。
現状を把握して1つずつ問題を解決していくしかありません。
(アサインされた当時、焦りまくりだったのはここだけの秘密・・・)

2. TypeScriptとは何かを知ろうとする

孫子の言葉に「敵を知り己を知れば百戦危うからず」とあります。
まだまだ未知なるTypeScriptを知るところからスタートしましょう。
調べたり詳しい人に聞いたりしてみてください。

ちなみに私のTypeScriptのイメージはこんな感じです。

AltJSの名の通り、JavaScriptの代替orスーパーセット(上位互換)となる言語
JavaScript + 静的型付け言語(私の場合Java)
これからブームがきそう

このように捉えるようになってからは、必要以上にビビることはなくなりましたし、
逆に業務で携われてラッキーくらいに思えるようになりました。

3. 自身のスキルセットを改めて把握する

先ほどの孫子の言葉の「己を知る」に相当する部分です。
自身が今まで経験してきた言語を今一度振り返ってみましょう。

弱み/強みをある程度把握しておけば、
どこでつまづくか/どこは飛ばしても良さそうかの目星をつけることができ、
最初から律儀にやるより効率的に学習できるかと思います。

私の場合、とりあえずTypeScriptのチュートリアルに飛びついてみたのですが、
JavaScript、特にES6以降の文法でつまづきました。
当時アロー関数やPromiseをほとんど理解していなかったこともあり、苦戦しました。
逆に型やクラスの概念は、PHPやJavaで慣れていたこともあって、そこまで苦労しませんでした。

4. やっぱり実践一番！実際に触ってみる

今までグダグダ心構えっぽい事を書いてみましたが、
とはいっても触ってみないとよくわからない部分もあると思うので、
チュートリアルをやってみるのが一番手っ取り早いかもです。

ちなみに私がやってみたのは以下の2つです。

公式チュートリアル
- やはり公式ページが一番です。ついでに英語への苦手意識も払拭できると最高ですね
Revised Revised 型の国のTypeScript
- 知人に教えてもらいました。細かい文法とか理解できて参考になりました。

私はどちらかというとネットより本で勉強したいタイプなのですが、
2019年当時は本も少なかったため、ネット中心に勉強を進めました。
「これ読んどけ」みたいな本があったら逆に教えていただけると嬉しいです。

5. TypeScriptは味方になり得る事を理解する

先ほどから散々孫子の言葉を引用していますが、
当たり前ながらTypeScriptは敵ではありません。
もしかしたらとても力強い味方になってくれるかもしれません。

私がTypeScriptを学んだ際に感動した、ある小さな事例を紹介します。
Revised Revised 型の国のTypeScriptで、クラスの継承を学んだときのことです。

TypeScriptの記述と、それをコンパイルしたJavaScript記述は以下の通りでした。
※TypeScriptのソースコードは Revised Revised 型の国のTypeScript の「リスト2.5: もちろん継承もあるよ」から引用させていただいています。

class.ts

class Base {
  greeting(name: string) {
    return `Hi! ${name}`;
  }
}
class Inherit extends Base {
  greeting(name: string) {
    return `${super.greeting(name)}. How are you?`;
  }
}
let obj = new Inherit();
console.log(obj.greeting("TypeScript"));

export { }

class.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
exports.__esModule = true;
var Base = /** @class */ (function () {
    function Base() {
    }
    Base.prototype.greeting = function (name) {
        return "Hi! " + name;
    };
    return Base;
}());
var Inherit = /** @class */ (function (_super) {
    __extends(Inherit, _super);
    function Inherit() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Inherit.prototype.greeting = function (name) {
        return _super.prototype.greeting.call(this, name) + ". How are you?";
    };
    return Inherit;
}(Base));
var obj = new Inherit();
console.log(obj.greeting("TypeScript"));

コード量の差は一目瞭然ですね。
ES6以前ではクラスの概念がなかったJavaScriptならではなのでしょうが、
これをJavaScriptに直接記述することを考えると、正直私は気が滅入ります。

このようにTypeScriptはJavaScriptに比べて、
記述の簡略化やバグの低減を手助けしてくれる存在になり得ます。

6. TypeScriptの案件に関われることにポジティブになる

先ほどと重複する部分がありますが、
TypeScriptはとても強力な味方になってくれる可能性をも言語です。
実際、2019年現在でもっとも注目されている言語の1つでしょう。
その言語を使った案件に関われることで、
さらなるスキルアップができるかもしれません。

実際私自身もその案件を携わるようになってから、
TypeScriptでどんな風に改修/保守していくかを知ることができ、
色々スキルや経験値がたまって、今では携われて本当によかったと思っています。

ぜひ今の状態をポジティブに考え、
TypeScriptハックをenjoyしていただければと思います。

参考にした書籍、リンク

TypeScript公式ページ
 Revised Revised 型の国のTypeScript
TypeScriptの型入門
 『改訂新版JavaScript本格入門』 P278

拝啓 TypeScriptの開発案件が急に回ってきたあなたへ

概要

留意点