株式会社インプレスR&Dより発行された「最新JavaScript開発~ES2017対応モダンプログラミング」の立ち読みコーナー第4回です。型の恩恵をうけるC/C++、C#、Java、Scalaのような静的型言語は、ある程度の大規模な開発に向いているとされています。型情報によってコンパイル前に安全性を担保できるからです。ECMAScriptは動的型言語ですが、TypeScriptもしくはFlowを導入することで、JavaScriptの世界でも型の恩恵を受けることが可能です。型定義を拡張して静的な型チェックを行うための仕組みです。プロジェクトの一部分にだけ導入することもできるためにTypeScriptよりはカジュアルに使うことができましたが、最近はTypeScriptも同じようにゆるく導入が出来るようになりました。筆者個人の意見としては、どっちを使っても似たようなものかなと思います。FlowはFacebook社のプロダクトなのでReactとの相性が多少良かったり、AngularではTypeScriptが公式に使われていたりします。好みで選んでも大体問題ないとは思いますが、どちらを採用するにせよ、固有のネタはあまり深追いすべきではありません。FlowもTypeScriptもわりと似たことが出来ますので、そういうほぼ同じような部分だけ使っていれば、将来的につぶしが効きやすいです。FlowはFacebookが開発した、ECMAScriptに型定義を拡張して静的な型チェックを行うための仕組みです。プロジェクトの一部分にだけ導入することもできるためにTypeScriptよりはカジュアルに使うことができます。Flowと同じくFacebookの開発しているReactとの相性が良いことも利点です。Flowではflowコマンドで静的解析をします。構文が拡張されているためそのままではECMAScriptとしては正しく走りませんが、Babelとbabel-plugin-transform-flow-strip-typesというプラグインで拡張構文を削除できます。インストールは少し面倒ですが、第2章でwaterslideを導入してあればflowを簡単にセットアップできます。Flowを使う場合、特に便利なのがVSCodeです。Supportプラグインを導入していればIDE上で解析してくれます。@flowのようにコメントを書いて、そのファイルが静的解析の対象であるということを明示します。ように型名を書きます。この形式はTypeScriptでも同じです。将来的にECMAScriptに型定義が導入される場合でもこの点は同じになることが期待できます。testを実行するとエラーが出ます。文字列であると宣言している変数に数字である1を代入しようとした為です。次にpiyoは引数と返り値が文字列として定義されているのですが、関数呼び出し時に数字を指定してるためにエラーになります。このように定義と食い違うアクセスをしようとするとエラーが出るのです。指定できる型についてひととおり見ていきましょう。stringのプリミティブ型があります。falsenullもプリミティブ型です。void型はundefinedを指します。voidを直接書かず、多くはnullやundefinedを許容する型宣言をします。これにはふたつのケースがあります。ひとつめは省略可能な仮引数を作る場合に、hoge?:stringというような宣言をするケースです。これはstringかundefinedのどちらかを指定できます。ひとつはhoge:?stringのような宣言です。undefinedに加えてnullも許容します2。mixed任意の型を表す逃げ道もあります。anyとmixedです。違いはmixed型を他の型の変数に代入することができないというものです。詳しくいうとany型は全部の型のスーパータイプかつサブタイプですがmix型は全部の型のスーパータイプです。OKオブジェクトオブジェクトを宣言することもできます。n:number}はargはsというメンバーがstringでnというメンバーがnumberなオブジェクトであるという型です。JavaScriptでは連想配列・Map代わりにオブジェクトを使うことも多いのですが、これもarg:{[string]:number}のように宣言することができます。任意のオブジェクトにマッチするObjectという型もありますが多用しない方がいいでしょう。NG合成型(ユニオン・インターセクション)ユニオン型は複数の型のうちどれか?という型です。numberであればhogeはstringかnumberのどちらかの型ということになります。ユニオンと逆の働きはインターセクションです。これは指定した型のうち全部を満たすものという型です。piyo:number}と同じです。型を合成するものです。配列には二種類の記述方法があります。Array<string>とstring[]です。同じ物でどちらにもこの宣言をした配列にはstring以外を入れることができなくなります。特殊な配列の使い方としてタプルがあり、複数の型が混在した固定長の配列です。boolean]のように定義をします。NGリテラルリテラルを指定することもできます。hoge:'string'であれば、hogeにはstringという文字列しか入れることができません。NGクラス最後はクラスです。クラス名をそのまま型として指定すると、そのクラスから生成されたインスタンスを納めることができます。hoge:HogeにはHogeクラスかそのサブタイプのみを格納することができます。それではクラス自体を変数に入れたい場合はどうでしょうか?これはClass<Hoge>のような形で定義することができます。型を定義する型は変数に付与するだけではありません。独自の型を定義できます。typeキーワードを使った型の宣言です。JavaScriptでは歴史的な経緯もあって、プリミティブを組み合わせたオブジェクトを使うプロダクトが多いです。いう本来は型情報をもっていなかった物に型を付与できるという強みがあります。NG次はinterfaceキーワードを使ってインターフェースを宣言します。インターフェースは、こういう名前と入出力を持ったメソッドを持っていますよ、ということを示します。NGhogeはインターフェースであるHogableとして定義されています。HogeクラスはHogableの条件を満たすので、hogeにインスタンスを格納できます。Hogableはhoge()メソッドを定義してるためhoge.hoge('hoge')は大丈夫なのですが、fuga()メソッドは定義されていないのでエラーになるのです。これはあくまでFlowでの判定なので、実際にはhogeはfuga()メソッドを持っているためにこのコードではエラーが出ずに正常に実行されます。ジェネリクスジェネリクスはコンテナやアルゴリズムなどで使われるもので、特定の型に依存しない抽象的なものです。リスト4.12ではバブルソートを実装していますが、ジェネリクスが無ければ型に依存しないように宣言をすることができませんでした。型をexport/importする型情報を宣言してもそのままでは別のファイルからはアクセスができません。exportとimportが必要になります。リスト4.13ではstr型とnum型がexportされていて、同じディレクトリにあるbool.jsからbool型を読み込んでいます。'./bool'それでは、npmで読み込む外部のライブラリについてはどうすればいいのでしょうか。Flow-Typedというソフトを使うことでプロジェクトで依存しているパッケージについて、型情報があれば取得し、なければ作ってくれます。installを叩くだけです。この宣言よりも前にECMAScriptのコードがあってはいけません。このコメントが無いファイルの型宣言は他のファイルから参照される場合でも処理されません。これらは割と陥りやすいのでご注意ください。他の言語でいうところのNullableですね。本書は新世代のJavascriptであるES2017のチュートリアルガイドです。Node.jsなどに見られるようにWebサービス開発に於ける共通言語となっているJavascriptの中でも標準的な仕様であるECMAScript2017によるプログラミング手法を基礎から学習することができます。2」で頒布された書籍を底本とし、加筆・修正を行ったものです。高校生のときにパソ通にハマリ、その後紆余曲折を経てテキストエディタやMSXエミュレータその他を開発。技術者として勤務した後、現在はフリーランスエンジニア。技術同人誌や技術ブログやマッハ新書などを書いている。新しい技術に目が無い。著書に『最新JavaScript開発~ES2017対応モダンプログラミング』(インプレスR&D)など。株式会社インプレスR&Dより発行された「最新JavaScript開発~ES2017対応モダンプログラミング」の立ち読みコーナー第5回です。株式会社インプレスR&Dより発行された「最新JavaScript開発~ES2017対応モダンプログラミング」の立ち読みコーナー第4回です。株式会社インプレスR&Dより発行された「最新JavaScript開発~ES2017対応モダンプログラミング」の立ち読みコーナー第3回です。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。