本サイトからスピンオフした姉妹サイトです。TypeScript2014年4月3日1.0正式版がリリース。Studio上でも開発できる。Studioユーザー向けに、その利用手順や特徴を解説。→TypeScriptとはTypeScriptとは、マイクロソフトが中心となって開発を進めているスクリプト言語で、コンパイル結果がJavaScriptコードになる、いわゆる「AltJS」と呼ばれる種類の言語である。AltJSにはTypeScript以外にもメジャーなものとして、CoffeeScript、Dart、Haxe、JSXなどがあり、TypeScriptはその仲間ということになる。2014」で、バージョン1.0がリリースされた。「ついに1.0に到達した」といった感じだが、TypeScriptは1.0以前のバージョンから言語そのものは比較的安定していたこともあり、マイクロソフトやその他多くの開発者などさまざまなところですでに採用している例も多い。まさひろ(vvakame)氏のスライドが詳しいので、そちらを参考にしてほしい。言語仕様以外での特徴的な点としては以下のようなものがある。Studioを利用した開発者、つまりASP.NETなどMicrosoftプラットフォームでアプリケーション開発をしている開発者に対して手厚い環境であるのは当然として、Node.jsでのパッケージ提供やオープンソースであることからコミュニティベースでの広がりも大きいところである。Studioユーザーと比較して)Web開発者層に多く支持されているように見える。TextやVim、WebStormなどの(Web開発者に人気の)開発環境を使って、TypeScript開発をしている開発者が非常に多いのだ。StudioユーザーがTypeScriptを利用するための手順や特徴を解説していく。StudioのTypeScript拡張」をインストールする必要がある。2013でのインストール手順と利用方法を説明する。2012であってもインストール後の手順のほとんどは同様となるので適宜読み替えていただければと思う。Web」を用意していただきたい。本稿の説明でも、このExpressを利用している(※そのため、ほかのエディションを使っている場合は、メニュー構成などが一部異なっている場合があるので、適宜、環境に合わせて読み替えてほしい)。2をインストールする。インストーラーは、TypeScriptの公式サイトからMicrosoftダウンロードセンターへのリンクが用意されているので、そちらからアクセスしてダウンロードできる。2のインストールダウンロードしたらインストールを実行する。インストールオプションなどもないため、ウィザード(次の画面を参照)に従って進めるだけでインストールは完了する。ポリシーに同意します。]にチェックを入れないと[インストール]ボタンが表示されないので注意。StudioでTypeScriptコードを書いてみる。Studioのテンプレートからプロジェクトを作ってみよう。Studioの(メニューバーの)[ファイル]メニューから[新しいプロジェクト]を選択する(次の画面)。Studioの[ファイル]メニューから[新しいプロジェクト]を選択これにより[新しいプロジェクト]ダイアログが開くので(次の画面)、左ペインの[テンプレート]から「TypeScript」を選択する。アプリケーション」という項目が表示されるので選択して、最後に[OK]ボタンをクリックする。[新しいプロジェクト]ダイアログこれにより、プロジェクトテンプレートをベースにしたプロジェクトが作成され、自動的にサンプルコードの入ったTypeScriptのファイルが開かれる。エクスプローラー]を見ると、他にHTMLファイルとCSSファイルが追加されていることが分かる(次の画面)。Studio初期状態で生成されるサンプルコードは、現在の時刻をタイマーで更新しつつ表示するだけの簡単な内容である。HTMLアプリの実行それではひとまず実行してみよう。実行するには、普通のアプリケーション開発と同様にF5キーまたは[デバッグ]メニューから[デバッグ開始]を選択する。次の画面は実際に実行した例である。サンプルを実行してブラウザーで表示デバッグ実行を開始するとブラウザーが開かれ、現在の時刻が刻一刻と表示されるだけのシンプルなページが表示される。Studioの強力な機能を利用してみたい。Studioの強力な機能といえば、やはり「デバッガー」ではないだろうか。これから新しい言語を触ってみるという場合には、デバッガーで挙動を確認しながら触れられるかどうかは大きいポイントだと思われる。Studioでデバッグできる。Studioのデバッガーでデバッグしてみたいと思う。Explorer」を選択しておく必要がある。Explorer」に変更できる(次の画面)。デバッグ時のブラウザーを選択デバッガーの利用それではデバッガーを使ってみよう。実行に先立ってブレークポイントを設定する。今回はコンストラクターの先頭に設定してみた(次の画面)。ブレークポイントは、通常通りコードの横をクリックするか、F9キーを押すことで設定できる。ブレークポイントを設定ブレークポイントを設定したら再びデバッグ実行する。ブレークポイントでの実行停止デバッグ実行を開始するとブラウザーが表示され、その後、ブレークポイントで一時停止するはずだ(次の画面はその例)。停止した後はF10キーのステップオーバー、F11キーのステップインなどでステップ実行が行える。デバッグ実行中は[ローカル]変数のウィンドウや[呼び出し履歴]ウィンドウ(以下の画面)などのデバッグ機能を利用できるので、変数やスタックトレースについても確認しやすい。TypeScriptであれば、次の画面を見ると分かるように、型の名前なども表示される。[ローカル]ウィンドウで変数の値を表示[呼び出し履歴]ウィンドウでスタックトレースを表示もちろん変数名にマウスカーソルをホバーすることで、変数の値を確認・変更できるおなじみの機能も利用できる。StudioでのTypeScriptコードのデバッグ機能は、C#などでの場合と遜色のないレベルで使いなれたものを利用できる。「C#コードは書いたことがあるけれども、TypeScriptコードは初めて」という人であっても、TypeScriptの挙動を確認しつつ学びやすいのではないだろうか。Studioでデバッグできることの強みといえる。Studioでの機能を見る先にデバッグ方法を紹介してしまったが、次はコードを実際に書いてみたい。Studioの機能の紹介」を主題としているので、コードの一部を簡単に修正してみる程度にする。DOMの)window.onloadイベントでGreeterクラスのインスタンスを生成し、時間の表示処理を開始する処理がある。このapp.tsファイルをコンパイルした結果のapp.jsファイルを、index.htmlファイル内で読み込んで実行している。Greeterクラスの時間表示開始のstartメソッドは、以下のようなコードになっている。このコードでは<span>要素のinnerHTMLプロパティに時刻を文字列化したものをセットする、処理を500ms(ミリ秒)ごとに実行するタイマーを作成している。500);}Greeterクラスの時間表示開始のstartメソッド特に意味があるわけではないが、この値をセットする処理を別なメソッドに切り出す例で解説したい。IntelliSense(コード補完機能)まずタイマーの中で行っていた処理を、以下のコードをstopメソッドの下に追加する。メソッドの切り出しコードを追加したら、startメソッドのタイマーで呼び出されている部分を以下のように書き換える。StudioのIntelliSense(=コード補完機能)が発動するのを確認できる。次の画面を見ると分かるように、C#などと同様に「.(ドット)」を入力した段階でプロパティやメソッドなどのメンバーの一覧が表示され、選択されているメンバーのシグネチャも表示される。メンバーを選択することで確定できる。「.」でオブジェクトのメンバー一覧が表示される自作コードに対するメンバーシグネチャの表示方法についてソースコードにJSDoc形式(=JavaDocのような形式)でコメントを残しておくと、コード補完時に表示できるので実際にコードを書く際には積極的にコメントを残すようにしたい。IDEA」などでも扱え、JavaScript向けのドキュメンテーションツールなどもいくつかある。Studioを離れたときの親和性を考えるとお勧めしない。以下のスクリーンショットは、setDateメソッドに対してJSDoc形式でコメントを記述し、それがパラメーターヒントして実際に表示されている例だ。パラメーターヒントにJSDocのコメントが表示される上のようにコードを変更したらデバッグ実行をしてみよう。処理が変わっていないので、表示自体には特に変わり映えはない。Studioを使っている限り、開発者がコンパイルを意識せずともファイルを保存すれば自動でJavaScriptコードにコンパイルされる。コーディング時のエラー表示TypeScriptは静的型付けのコンパイル型言語であるため、異なる型の呼び出しなどコンパイル時に明らかなエラーをチェックできる。Studioではコードをコンパイルするよりも前に逐次エラーチェックを行っている。先ほど追加したsetDateメソッドはDate型を受け付けるシグネチャを持つが、そこに文字列を渡すようなコードを記述すると、保存やコンパイルを待たずして即座にエラーが報告される。以下のスクリーンショットはその例。コンパイル時エラーが各所に表示されるパラメーターの型が合わないことがツールチップや[エラー一覧]ウィンドウに表示されていることが分かる。Studio利用の良いところだ。インストールし、テンプレートからプロジェクトを作成するところから、デバッガー、コード編集での機能について紹介した。Studioを利用している方々であれば、「デバッグやコード編集での基本的な操作がほぼ共通していて、言語以外に新しいことがないぐらいだ」と思われたのではないだろうか。Studioでの開発については手厚くサポートされている。Studioをすでに利用している人にとってはなじみがあり、そうでない人にもオールインワンで提供され、TypeScriptに触れるのにお勧めしたい環境だ。次回はライブラリの利用や高度な機能などに触れていきたい。Studioを使って開発してみよう1.0正式版がリリース。Studio上でも開発できる。Studioユーザー向けに、その利用手順や特徴を解説。StudioとTypeScriptでJavaScriptライブラリを活用するTypeScriptでは大半のJavaScriptライブラリをすぐにそのまま活用できる。Studioで手軽に使う方法や、独自のJavaScriptライブラリを使えるようにする方法を説明する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。2023最適なビューへの切り替えを推奨します:スマートフォン用表示に。