TypeScriptを利用するならVisual StudioかVisual Studio Codeを使うのが良いみたい

www.buzzfeed.com

⇧  同感です、館長...。

 

というわけで、

『TypeScript ビギナー＆ステップアップ（開催：2018/01/27 (土) 12:30 ~ 17:30）』というセミナーを受けに、品川にある日本マイクロソフト（品川本社）に行ってきました。

1. JavaScriptを使った開発を始めるなら！TypeScriptをはじめよう ～ ステップアップ
2. TypeScript + Angular で Todo アプリを作ってみよう
3. Microsoft Bot Framework とTypeScript を使った BOT 開発
4. SharePoint Framework

の4つの話だったのですが、3番目のMicrosoft Bot Frameworkの話の中で、LUIS（Language Understanding Intelligent Service）っていうサービスの話が出てきて気になりました。

ちなみに、SharePointは、旧称ではMOSS（モス、Microsoft Office SharePoint Server）となっていたようです。

www.atmarkit.co.jp

⇧  上記サイト様によると、Microsoftの独自サービスみたいですね。 

　LUIS（Language Understanding Intelligent Services）はマイクロソフトがCognitive Servicesの一部として提供する自然言語解析サービス。LUISでは自然言語を理解するためのモデル（LUISアプリ）を開発者が構築し、それを基にLUIS自身が学習を積んでいくことで、ユーザーが「何をしたいのか」（インテント、意図）と関連する情報（エンティティ）を取り出せるようになる。

LUIS（自然言語解析サービス）：Dev Basics／Keyword - ＠IT

 

⇩  セミナーでは、こちらの本が出版されてるとの番宣もお聞きしました。 

TypeScript実践マスター

 

 そんなこんなで、今回はTypeScriptの話です。

 

 

TypeScriptって？

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。

TypeScriptは大規模なアプリケーションの開発のために設計されている。

ECMAScriptの提案にないがTypeScriptに独自に搭載された機能として、静的言語解析を可能にする静的型付け機能(使用するかどうかは選択可能)がある。

TypeScript - Wikipedia

 

Googleの社内の標準言語にも採用されたようです。 

www.sbbit.jp

 

今はECMAScript言語標準が充実してきている世の中

昔の話になりますが、JavaScriptは、言語の仕様というものがあって無いような状態であったため、皆さん好き勝手に実装されていたそうな。

そうなると、当然、後世の人々が保守とかせざる負えない状況になったときに、絶望が待っているわけです。 （コードの修正が不可能な状態や潜在的なバグの嵐）

じゃあ、JavaScriptを記述する際の仕様なんかを明確にしていきましょうって試みが始まり、ECMAScript という仕様が生まれました。

ECMAScript（エクマスクリプト）は、JavaScriptの標準であり、Ecma Internationalのもとで標準化手続きなどが行われている。

Ecma Internationalのほか、ISO/IEC JTC 1からもISO/IEC 16262として標準化されている。日本もJIS X 3060としてJIS化している。

ECMAScript仕様は、Ecma InternationalにてECMA-262という規格番号で標準化されている。改訂にあたっては版 (edition) が更新されている。

特定の版を指す場合は、edition名ではなく年号つきの仕様書名で呼ばれることが推奨されている。 

ECMAScript - Wikipedia

 

・ES2017を理解してみる | しびら

⇧  上記サイト様がまとめてくださっています。

ブラウザでJavaScriptが実行できるのは、ブラウザがJavaScriptの実行エンジンを搭載しているからなんですが、各ブラウザでそのエンジンが異なるためECMAScriptの対応も足並みがそろわずバラバラという...。

 

ブラウザのECMAScriptの仕様への対応状況については、

www.yoheim.net

⇧  上記サイト様が参考になりそうです。

 

ECMAScriptの互換性とトランスパイラやpolyfillライブラリ

当然のことながら、ECMAScriptのバージョンの違いによる互換性の問題があったりします。ES6使いたいけど、ES5までしか対応してないとかいうような状況ですね。

そんなときに、トランスパイラやpolyfillライブラリの出番です。

codezine.jp

⇧  上記サイト様が詳しいです。（ただ、若干、旧い内容にはなっています。）

 

トランスパイラとトランスコンパイラの違いが分からないですが、Wikipediaによると、

トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである。

従来一般に、コンパイラが「比較すると高水準な言語のソースコード」から「比較すると低水準な言語の目的コード」に変換する（「コンパイルする」）ものであったのに対し、トランスコンパイラは同じ程度の（抽象化の）水準のコードに変換する。

たとえば、PascalのコードをCのコードへと変換する。自動並列化コンパイラは、しばしば高水準言語の入力からOpenMPのような並列化メタデータやFortranのforall文のような言語構造を変換する。

トランスコンパイラを主たる実装として開発されている言語の例としてはClosure Compiler, Coccinelle, CoffeeScript, Dart, Haxe, TypeScript, Emscriptenがある。

トランスコンパイラ - Wikipedia

となっているので、トランスパイラ = トランスコンパイラ = ソース・トゥ・ソースコンパイラ という認識で良いんですかね？

qiita.com

⇧  上記サイト様でも、用語の問題について分かりにくいって仰ってますね。同感です、館長。 

まぁ、ブラウザ間でECMAScriptの仕様の対応が統一されていないので、いまのところトランスパイラすること（互換性の問題の解決 => ES5の記述しか対応してないブラウザで、ES6の記述を動作するようにするなど。）が必要になってくるようです。 

トランスパイラとしては、Babelなんかが有名ですね。

 

TypeScriptを使うメリットは？

TypeScriptを使うメリットとしては、いろいろあると思われますが、

• 静的型付けの機能
  • 型安全を実現
• トランスパイラの搭載
  • tsc コマンドで実現

の2つが大きいかと。（詳しい情報は他のサイト様を参考ください。）

 

静的型付け機能

JavaScriptはいまのところ、型安全とは言えない状態です。

つまり、変数にどんなデータ型でも入れられてしまうため意図しないコーディングをしても エラーが起きないという（涙）。2つの例で見てみると、

var itemPrice01 = 12000;
var itemPrice02 = 24000;
var total = itemPrice01 + itemPrice02;
console.log("お支払い金額は" + total + "円です。");

var itemPrice01 = 12000;
var itemPrice02 = "24000";
var total = itemPrice01 + itemPrice02;
console.log("お支払い金額は" + total + "円です。");

残念ながらエラーは起きないので、2つ目の結果は、請求額がとんでもないことになってしまいます。（1つ目の例も結構な金額ですが...。）

これが仮に、10000行とかのステップ数の中でエラーが起こっている該当箇所を見つけろって言われたらどうでしょう？その労力たるや...溜息しか出ないですね（泣）。

 

コーディングしてる時に教えてよ～、って思ったそこのあなた！素晴らしい！

TypeScriptを使うと、静的型付け機能というものが利用できるので、Javaなどのようにコーディングしている時にデータ型などが間違っているとエラーを出してくれるようになります。

つまり、動的型付けであるJavaScriptを、静的型付け言語として扱えるようにしてくれるようです。

www.gixo.jp

⇧  静的型付けと動的型付けに関しては、上記サイト様がまとめてくださっています。 

静的型付け言語	Java、C、C#、VB.netなど
動的型付け言語	JavaScript、PHP、Python、Rubyなど

 

PHPについては、PHP7で厳密な型チェックモードなどが利用できるようですね。

qiita.com

 

トランスパイラの搭載

TypeScriptはそのままではブラウザが解釈できないためJavaScriptに変換する必要があります。（『.ts』ファイルを『.js』ファイルに変換）

tsc（Type Script Compiler）コマンドによって実現されます。

 

TypeScriptの導入に必要なもの

TypeScriptをnpmコマンドでインストールするためにNode.jsが必要です。 （他にも方法はありますが、npmコマンドでインストールするのが無難なようです。）

• Node.js
• npmコマンド（Node.jsをインストールすればインストールされます。）
• typingsコマンド

最低限、上記の3つが用意されていれば、OKのようです。（typingsコマンドにつきましては、TypeScript 2.0 以降で非推奨になっているとか...淘汰されていく感じですかね？）

 

qiita.com

 

Windowsの場合、Node.jsはNodistでインストールするのが良さげです。

jsstudy.hatenablog.com

2021年7月3日（土）追記：↓ ここから

どうやら、

zenn.dev

⇧ Nodistは更新が止まってるみたいなので、利用するのは芳しくないみたいですね。

Microsoftさんの説明では、

docs.microsoft.com

代替のバージョンマネージャー

windows-nvm は、現在最も一般的なノード バージョン マネージャーですが、検討すべき代替マネージャーがいくつかあります。

• nvs (Node Version Switcher) は、クロスプラットフォームの nvm の代わりであり、VS Code との統合が可能です。

• Volta は LinkedIn チームからの新しいバージョン マネージャーであり、速度の向上とクロスプラットフォーム サポートを特長として挙げています。

https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows#alternative-version-managers

(windows-nvm ではなく) Volta をバージョン マネージャーとしてインストールするには、「Getting Started guide」 (入門ガイド) の「Windows Installation」 (Windows へのインストール) セクションを参照し、セットアップ手順に従って Windows インストーラーをダウンロードして実行します。

 重要

Volta をインストールする前に、Windows コンピューターで確実に [開発者モード] を有効にする必要があります。

Volta を使用して複数のバージョンの Node.js を Windows にインストールする方法の詳細については、Volta Docs を参照してください。

https://docs.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows#alternative-version-managers

⇧ Node.jsのバージョン管理には、

• windows-nvm
• nvs
• Volta

のいずれかを使うのが良いんじゃないかってことみたいですね、フロントエンド界隈は相も変わらず時の流れが早いですな... 

2021年7月3日（土）追記：↑ ここまで

 

TypeScriptを利用する環境としては

セミナーでおすすめされたのが、 

• テキストエディターを使うなら、
  • Visual Studio Code
• 統合開発環境を使うなら、
  • Visual Studio 2017または、Visual Studio 2015

ということでした。（Microsoftとしては、そういう解答になりますな）

まぁ、残念ながら他のテキストエディターや統合開発環境へのTypeScriptの対応状況が不完全で芳しくないというのもありますが 。

Windows、Mac、Linuxで動くということもあり、Visual Studio Codeがいまのところイチオシみたいです。

 

Visual Studio Codeをインストール

ということで、 TypeScriptを利用する環境に必要なものを順にインストールしていきたいと思います。まずは、Visual Studio Codeをインストール。

https://code.visualstudio.com/ にアクセスします。

code.visualstudio.com

「Download for Windows」を選択します。使用してるOSがWindowsでない場合は、「Download」とかで大丈夫かと。

ダウンロードされたexeファイル（「VScodeSetup-x64-x.x.x.exe」）をダブルクリック。

「次へ（N）>」をクリック。 

「同意する（A）」にチェックを入れ、「次へ（N）>」をクリック。

インストール先を指定。自分はデフォルトの指定で「次へ（N）＞」をクリックしました。

 ここもデフォルトの指定で「次へ（N）＞」をクリックしました。

ここもデフォルトの指定で「次へ（N）>」をクリックしました。

「インストール（I）」をクリック。

インストールが開始されます。

「完了（F）」をクリック。

Visual Studio Codeがインストールされました。

 

Nodistのインストール

2021年7月3日（土）追記の部分に書いたのですが、どうも、「Nodist」を利用するのは芳しくないので、「Nodist」はインストールせず、

docs.microsoft.com

⇧ Microsoftさんが説明しているように、Node.jsのバージョン管理には、

• windows-nvm
• nvs
• Volta

のいずれかを使うようにしたほうが良いです。

なので、以降の「Nodist」インストール部分の記事は無視してください。

 

自分は以前にインストールしてしまっているので、

jsstudy.hatenablog.com

⇧  上記サイト様を参考にインストールしてみてください。

OS X（Mac）の場合は、

qiita.comshiyoh.hatenablog.com

⇧  上記サイト様が参考になると思われます。

 

 

インストールができたら、バージョンの確認をしてみて、

nodist -v

バージョンが表示されていればOKです。 

 

Node.jsのインストール

こちらも割愛させていただきますが、Nodistのインストールのところで紹介させていただいた参考サイト様の手順で行けるかと。 

バージョンが表示されればインストールできてます。

node -v

npm -v

若干、Node.jsのバージョンが旧い気がするので、

qiita.com

⇧  こちらのサイト様を参考に、Node.jsの最新版をインストールしようとして、

nodist selfupdate

あれ？できないよ～。

qiita.com

⇧  上記サイト様を参考に、nodist依存ファイルのアップデートを試してみる。

nodist update

 あれ？できないよ～。

仕方がないので、バージョンを指定してNode.jsをインストール。（自分の場合は、「nodist stable」コマンドが実行できなかったです。）

推奨版のバージョンは、

https://nodejs.org/ja/ で確認できます。（「nodist dist」コマンドでもインストール可能なNode.jsのバージョン一覧が確認できます。）

nodist 8.9.4

インストールされると、自動で最新版のNode.jsに切り替わっているようです。インストールされているNode.jsの一覧を確認。

nodist

⇧  npmは最新になっていない... 

qiita.com

⇧  上記サイト様を参考に、いま選択されているNode.jsのバージョンに合うnpmをインストール。

nodist npm match

 

TypeScriptのインストール

ようやく、TypeScriptのインストールです。 

npm install -g typescript

typingsもインストール。

npm install -g typings

⇧  非推奨ってなってますね...。

それぞれバージョンが確認されたので、インストールされたかと。

 

tapings については、 

qiita.com

⇧  上記サイト様が参考になりそうです。

 

qiita.com

⇧  上記サイト様によると、TypeScriptのバージョンが2.0以降の場合は、tsd、typingsともに機能しないそうです（涙）

 

TypeScript利用の準備

適当な場所にプロジェクト用のフォルダを作成します。

mkdir C:\Users\Toshinobu\Desktop\typeScriptTest

ディレクトリの移動。 

cd C:\Users\Toshinobu\Desktop\typeScriptTest

TypeScriptの設定ファイルを作成。 

tsc --init

依存ライブラリの管理用ファイルを作成。 （作っておいてなんですが、TypeScript 2.0以降は、typingsが機能しないようなので不要のようです。）

typings init

コマンドが実行されると、ファイルが作成されます。

 

TypeScriptでHello Worldの表示を試してみる

ちょっと時間の関係上、いろいろできそうにないので、とりあえずは、"Hello World"のの文字列を表示してみたいと思います。

適当な場所に、『.ts』ファイルを作成します。今回は、設定ファイルと同じフォルダ内に作成しました。

せっかくなんで、Visual Studio Codeのほうで、「ファイル（F）」>「フォルダーを開く（F）...」を選択。

さきほど作成したフォルダを選択。

（自分の場合ですと、「C:¥Users¥Toshinobu¥Desktop¥typeScriptTest」になります。）

下記のアイコンをクリックし、「新しいファイル」を作成します。

今回は、「hello.ts」というファイルを作成。ファイルに記述し保存。 

let msg = "Hello World";
console.log(msg);

続いて、tsファイルからjsファイルを作成します。

「タスク（T）」>「タスクの実行（B）...」を選択。

「tsc ビルド - tsconfig.json」を選択。

「hello.js」ファイルが作成されました。

 

実際にjsファイルを実行してみます。「デバッグ」以外で動かす方法が分からず、とりあえず、「デバッグ」で起動。

 のアイコンをクリックします。

 ボタンをクリックします。

「デバッグ コンソール」に「Hello World」と表示されました。

 

う～ん、ちょっと調べきれなかったですが、時間のあるときに調べていきたいですね。

今回はこのへんで。 

 

2018年2月4日（日）追記：

セミナーで登壇してくださった方々のスライドを共有していただいたので、掲載させていただきます。

 

TypeScriptで開発を始めるについてなど紹介してくれています 

JavaScriptを使った開発を始めるなら！TypeScriptをはじめよう ～ ステップアップ from 慎一 古賀

www.slideshare.net

⇧  『TypeScript実践マスター』の著者の方です。じゃんけんで勝てば、書籍がもらえたのですが残念ながら負けてしまったのでもらえずです。書籍の内容も気になりますね。

 

 

TypeScriptとAngularの組み合わせでTODOアプリの作り方を紹介してくれています

slides.com

⇧  TypeScriptとAngular（おそらくAngular 4じゃないかと）を組み合わせたTODOアプリの作り方を紹介してくれてます。Angularの概念とかも説明してくれています。

 

tech.quartetcom.co.jp

⇧  AngularとTypeScriptについては、上記サイト様も参考になりそうです。

 

 

Microsoft Bot ServiceとTypeScriptを使った開発について紹介してくれてます

Microsoft Bot Service とTypeScript を使ったBOT 開発 from Osamu Monoe

www.slideshare.net

⇧  個人的にセミナーで一番面白かった内容です。BOTって何？というところから、必ずしもBOT = AI が常に成り立つわけでない（BOT ≠ AI）っていう点も目からウロコでした。

この講演で『ELIZA（イライザ）』っていう存在も初めて知りました。

ELIZA（イライザ）は初期の素朴な自然言語処理プログラムの1つである。対話型（インタラクティブ）であるが、音声による会話をするシステムではない。

スクリプト (script) へのユーザーの応答を処理する形で動作し、スクリプトとしてはDOCTORという来談者中心療法のセラピストのシミュレーションが最もよく知られている。人間の思考や感情についてほとんど何の情報も持っていないが、DOCTORは驚くほど人間っぽい対話をすることがあった。

MITのジョセフ・ワイゼンバウムが1964年から1966年にかけてELIZAを書き上げた。いわゆる人工無脳（chatterbotもしくはchatbotと呼ばれる会話ボットあるいはおしゃべりボットなどのコンピュータプログラムで、「人工知能」ないし「人工頭脳」から派生した語句）の起源となったソフトウェアである。

ELIZA - Wikipedia

 

 

SharedPoint Frameworkについて紹介してくれてます 

speakerdeck.com

⇧   SharePointという存在も初めて知りましたが、それのフレームワークということのようです。まだ、かなり新しいサービスみたいで、これからどんどん開発が進んでいくようです。