ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

2年生は成績発表も終わり、卒業式を残すのみとなってきました。
１年生は、就職活動が本格化してくるこの頃です。
いかがお過ごしでしょうか。カワグチです。

緊急事態宣言解除後も、まだまだ出かけることは控えておきたいところです。
時間を持て余し気味でしたので、最近よく耳にする『TypeScript』について調べてみました。

TypeScriptとは

TypeScriptは、Micrsoftが開発したJavaScriptをベースにしたオープンソースのaltJS（※代替言語）です。
TypeScriptのソースコードはJavaScriptのソースコードにコンパイルされ、静的な型定義を追加することで、JavaScriptを拡張します。

TypeScriptの特徴としては、

• 変数のデータ型をあらかじめ決めておける（静的型付け）
• クラスやモジュールなど、ECMAScript6の機能を盛り込んでいる
• 従来のJavaScriptも使える

では、具体的にTypeScriptを書いてみましょう。
Visual Studio Codeを使った開発環境の構築をするよりも、手軽にtypescriptlang.orgのPlaygroundに入力して、エラーやコンパイル結果を検証することにします。
環境構築については、「VS Code TypeScript 環境構築」でGoogle先生に聞いたら、たくさん教えてくれます。※移り変わりの早い分野ですので、記事の公開日には注意しましょう。

変数の静的型付け

JavaScriptは動的型付けの言語です。
変数や関数のデータ型の宣言がいらず、プログラムが勝手に型を決定しますので、どんな型の値でも入れることができます。

2017年もあっという間に、3月半ばですね。
講師のカワグチです。

今では、Webサイトには欠かせないJavaScriptですが、国際的なプログラミング言語を提供できるようにEcma Internationalによって標準化されています。
ECMA は、以前は European Computer Manufacturers Association〈欧州電子計算機工業会〉の頭文字をとったものでしたが、1994年にEcma Internationalに名称を改めました。
この標準化されたJavaScriptのバージョンはECMAScriptと呼ばれ、現在、バージョンは、ES5（ECMAScript5）が一般的です。

参考：入門編 - JavaScript | MDN

2015年にES6が標準化され、徐々にWebブラウザで利用できるようになってきました。
また、このES6から、仕様書の表題に2015が追加されたことにより、ES6（ES2015）と併記されることが多くなりました。

さらに、昨年6月にはECMAScript2016が標準化され、現在ECMAScript2017が策定中です。
今後は毎年新しく仕様が策定されるようになるということでES7....8...ではなく、ES2016, ES2017, ...と表記されていくようです。

参考：ES6 or ES2015 ? 〜WEB+DB PRESS Vol.87 ES6特集に寄せて〜 - Cybozu Inside Out | サイボウズエンジニアのブログ

Internet Explorer11は、あまり対応していませんが、iOS SafariやGoogle ChromeをはじめMicrosoft Edgeなどの最新のWebブラウザでは対応しています。

参考：ECMAScript 6 compatibility table

最近では、出版されるJavaScriptの入門書でもES6（ES2015）を解説したものも多くなり、インターネット上の情報も特に注記もなく、新しい仕様で解説されていることも増えました。
授業でも、今後はES6（ES2015）を盛り込んでいって良い時期かもしれません。

ということで、ES6で新しく追加された仕様を少し調べてみました。

目次

• ES6（ES2015）とは
• let（局所変数）
• const（定数）
• 引数の記法
• テンプレートリテラル
• アロー関数