こんにちは、キャスレーコンサルティング SI(システム・インテグレーション)部の清水(皓)です。

私はこれまで、業務システムSEとしてキャリアを積んできましたが、
フロントエンドアプリやプロトタイプ言語に携わることは殆どありませんでした。

そのため、フロントエンドの言語も使えるようになっておこうということで、
オブジェクト指向でJavaScriptを書くようなことができるTypeScriptを覚えようと思い、
学習したことを書いていきたいと思います。

今回は、TypeScriptを始めるための入門編です。

TypeScriptとは

TypeScriptは、大規模なJavaScriptアプリケーション開発のためにMicrosoftによって作成された言語です。

詳細はTypeScriptの公式HPに記載されていますが、英語のため、読めない方もいらっしゃると思います。
私も英語は読めませんが、以下のようなことが書いてあることが調べたところ分かりました。

JavaScriptで始まり、JavaScirptで終わる

TypeScriptは、JavaScriptと同様の構文が使えます。

既存のJavaScriptコードが利用でき、ポピュラーなJavaScriptのライブラリが組み込まれていて、
TypeScriptコードをJavaScriptコードから呼び出すこともできます。
シンプルできれいなJavaScritpコードがコンパイルされ、様々なブラウザ、Node.jsやJavaScriptエンジンで実行できます。

大規模アプリのための強力なツール

JavaScriptアプリを開発する際に、
静的チェックやコードリファクタリングのようなこともできるため、生産性が高くなります。
型推論では、型アノテーションによりコードの静的検証に大きな影響を与えます。
コンポーネント間のインターフェイスを定義し、既存のJavaScriptライブラリの動作を把握することもできます。

最先端のJavaScript

JavaScriptの最新機能や今後提供予定の機能をサポートし(サポートする予定)、
堅牢なコンポーネントをつくることができます。
これらの特徴は信頼性の高いアプリ開発に利用可能で、
コンパイル時にはECMAScript3以降に準拠したシンプルなJavaScriptが出力されます。

開発環境(VS Code)の準備

TypeScriptの開発環境としては、IDEとしてVisual StudioやEclipseなど、
エディタとしてはVisual Studio Code、AtomやSublime Textなどがあります。
今回は、TypeScriptはMicrosoftが作った言語であることと、
無料でクロスプラットフォームで利用可能なMicrosoftのVisual Studio Codeを使っていきたいと思います。

インストール

Visual Studio Codeは、http://code.visualstudio.com/からインストーラをダウンロードして実行します。
Node.jsは、http://nodejs.org/en/からインストーラをダウンロードして実行します。
TypeScriptは以下のコマンドを実行することでインストールできます。
npm install -g typescript

VS CodeでのTypeScriptの書き方(トランスパイル&デバッグ実行)

TypeScriptの開発環境がインストールできたと思います。これから、TypeScriptを書いて実行していきます。

Visual Studio Codeの設定

まずは、setting.jsonの編集方法です。お好みに合わせて設定を編集してください。
ファイル(F)→基本設定(P)→設定(S)を選択すると、setting.jsonが開き、編集できます。

setting.jsonの開き方

setting.json編集画面

プロジェクトフォルダの作成

ファイル(F)→フォルダを開く(Ctrl⁺K Ctrl⁺O)からプロジェクトフォルダを選択できます。
プロジェクトフォルダを作成していない場合は、新規作成して選択します。

プロジェクトフォルダを開く

プロジェクトフォルダの選択

tsconfig.jsonの作成

TypeScriptコードのコンパイル設定ファイルである、tsconfig.jsonを作成します。
新しいファイルのアイコンをクリックしてtsconfig.jsonを作成し、コンパイラオプションを設定します。
補完機能が働いてくれるので、どのような設定があるか確認することも可能です。
tsconfig.jsonはプロジェクトルートに一つ作成しておきます。

tsconfig.jsonの作成

tsconfig.jsonの編集

{
    "compilerOptions":{
        "target":"es5",
        "sourceMap":true,
        "module":"commonjs"
    }
}

今回のtsconfig.jsonは、詳細な設定は行っていません。
アプリケーションやテスト環境の構成などに合わせて設定を行うことで、
コンパイル時に細やかな制御が可能です。(今回は割愛します)

簡単なプログラムの作成

おなじみのHello,Worldを表示するプログラムを作成しましょう。
さきほどと同じ要領で新規ファイルを作成し、HelloWorld.tsとして保存します。
HelloWorld.tsの作成

function main()
{
    console.log("Hello,World.");
}

main();

ビルド

F1キーを押下してコマンドパレットが表示されたら、configure taskと入力してEnterキーを押下し、
「TypeScriptプロジェクトをコンパイル」をクリックします。

configure_taskの実行

.vscodeフォルダとtasks.jsonファイルが生成されたら、Ctrl⁺Shift⁺Bを押下し、ビルドタスクを実行します。

tasks.jsonの生成

これで、HelloWorld.jsとHelloWorld.js.mapが生成され、実行・デバッグの準備ができました。

ビルドタスク実行

デバッグ

Debugビューを表示し、F5キーを押下すると、環境の選択を求められますので、Node.jsを選択します。

デバッグの準備

Launch.jsonが表示されますので、
今回の構成に合わせて”program”:”${workspaceRoot}/HelloWorld.js”に書き換えて保存します。
最後に、F5キーを押下するとデバッグ実行が開始されます。デバッグコンソールに「Hello,World.」が表示されます。

デバッグ実行

TypeScriptの特徴

最後に、TypeScriptの特徴を紹介します。
言語の特徴を把握することで、どのようにコードを書いていくとよいのかがわかってくると思います。

既存のJavaScriptがそのままTypeScriptになる

例外がいくつかありますが、TypeScriptファイルにJavaScriptのコードをコピペしても問題ありません。
そのため、既存のJavaScriptコードという資産を活用することができ、
JavaScriptからTypeScriptへの移行も容易になると思います。

例外としては、変数へ代入する値の型と変数の型が合わない場合、TypeScriptではエラーとなります。
また、strictモードで許可されていない、一般的に危険とされている、などの理由により、with文が使用できません。

型チェック
with文使用不可

変数の宣言と型指定

JavaScriptでは、varキーワードを使用せずに変数を宣言するとグローバル変数を作成できます。
しかし、TypeScriptではvarキーワードを使用せずに変数を宣言するとエラーになります。
これにより、グローバル変数を不注意で作成してしまうリスクを減らせます。

varキーワードなし

また、TypeScriptでは必要に応じて型を明示的に指定する場合、型アノテーションを使用します。
これにより、無効な値が代入されないよう、型の自動チェックが可能になります。
また、開発環境によるオートコンプリート機能が提供されることも大きなメリットです。

// 変数の型指定
// var 変数名 = 値;
var name = "清水";

// var 変数名:型アノテーション;
var isTruth:boolean;

// var 変数名:型アノテーション = 値;
var highestTemp:number = 28.2;

もし、TypeScriptで動的な変数が必要になった場合には、動的な型を表すany型の変数を宣言することができます。

動的な変数

クラスとインターフェース

TypeScriptはクラスベース・オブジェクト指向言語として作成されているため、
JavaやC#に近い考え方でクラスを定義して利用できます。
メンバー変数やメンバー関数、アクセッサを定義することもできますし、アクセス修飾子も利用できます。

さらに、継承やインターフェースなどの機能もあり、
オブジェクト指向に馴染みのある業務システムSEには使いやすい言語になっていると思います。

interface vehicle
{
    // プロパティ
    speed:number;

    // メソッド
    accelarator(accelarateSpeed:number);
}

class car implements vehicle
{
    // プロパティ
    // インタフェースで定義されたプロパティやメソッドはアクセス修飾子がpublicになります
    speed:number;
    private _ownerName:string;

    // メソッド
    accelarator(accelarateSpeed:number)
    {
        this.speed = this.speed + accelarateSpeed;
    }

    // アクセッサ
    public get ownerName():string {
        return this._ownerName
    }
    public set ownerName(name : string) {
        this._ownerName = name;
    }

}

下の図は、上記のコードをコンパイルして生成されたjavascriptコードです。
インタフェースはjavascriptコードとして生成されず、オートコンプリート機能や型チェック機能のために利用されます。
そのため、クラス部分のみをjavascriptコードとして生成するとこのようになります。

インタフェースとクラスをコンパイルした結果

まとめ

以上、TypeScriptの入門編を紹介させていただきました。
TypeScriptには他にも多くの機能があり、今回だけでは紹介しきれていません。
しかし、とりあえずTypeScriptを始めてみるための入門編として、お役に立てれば幸いです。


こんにちは、キャスレーコンサルティングのSI(システム・インテグレーション)部の池田です。

昨今、目覚しく進化し続けるJavaScriptフレームワーク。
最近では大変多くのJavaScriptのフレームワークを目にするようになりました。
今回はその中でもとりわけ人気な「AngularJS」というフレームワークについて取り上げて勉強してみました。

AngularJSとは

logo (続きを読む…)


こんにちは!

キャスレーコンサルティングのSI(システム・インテグレーション)部の嵯峨です。

今回は、Sails.jsを利用して簡単なWEBアプリケーションを作ってみたいと思います。

(続きを読む…)


はじめまして、技術ブログ初投稿のキャスレーコンサルティングのSD(システム・デザイン)部・瀬戸口です。
フロント技術とデザインが好きなエンジニアです。よろしくお願いします。

今回は、HTML5で新たに実装された機能「フォームバリデーション」について、少し触ってみたのでご紹介します。
長年HTML4に慣れ親しんだ身としては、HTML5でフォームバリデーションができる!と知った時、とても感動しました。
是非実務にも取り入れたいと思ったので、どういった使い方をすると良さそうか、また、何に注意すべきかを検証してみました。

(続きを読む…)


こんにちは!キャスレーコンサルティングSI(システム・インテグレーション)部の栗田です

Windowsアプリの開発者がWebアプリなるものを作ってみたい!と思うことはよくあります。
しかし以下のような理由で、手を付けられないことがしばしばあります。

1. VisualStudioのようにFormにTextboxなどのコントロールを簡単に貼って、融通の利くアプリは作れるのか。
2. 速度的な問題はどうなのか。メモリの問題は?
3. 自作DLLやOCXのように資源を再利用できるのか。
4. イベント等で動的にコントロール等の内容を書き換えられるのか。(定期的にリロードなんかしたくない)

しかし始めてみると上記のことはもちろん、かなりのことが出来ることを実感できます。
むしろ、わざわざインストーラーを作って配布する手間すらありません。
すごい時代ですよね…。

今回はHTML5+jQueryで、UIと速度面の実験をしてみたいと思います。
それではまず準備から… (続きを読む…)


Use the AltJS, Luke

Posted on 12月 28, 2015

こんにちは、SI部のfkmtです。

みなさん「JavaScirpt」はお好きでしょうか?

JavaScriptはブラウザで動く言語として、他に選択肢のない唯一の存在として君臨してきました。
好き嫌いに関わらず、Web開発者たちはJavaScriptを使わざるを得なかったわけです。

しかしそれも「CoffeeScript」に端を発した「AltJS」の登場で状況は大きく変わりました。
今やWeb開発者たちは使う言語を選択する自由を手に入れたのです!

・・・と仰々しい前置きで
今回はAltJSの1つ「LiveScript」をご紹介しようと思います。 (続きを読む…)


こんにちは。SD部の濱地です。
今回はjQueryプラグイン「pjax」についての紹介と
簡単な使い方について書きたいと思います。

pjaxとは

「pjax」とは「Ajax」と「pushState」を組み合わせた機能を
もったjQueryプラグイン
です。

通常、jQueryのajax()を使ってウェブページ内のコンテンツを入れ替えた場合、
ブラウザのURLは変更されません。

しかし、今回ご紹介する「pjax」を使用することによって、
コンテンツを入れ替えるのと同時に、URLの変更も行うことができるのです。

pushStateとは・・
HTML5から追加されたHistory APIのメソッドで、
ページ遷移せずに、ブラウザの履歴に追加することが出来ます。

対応ブラウザ

pushStateは、Chrome、Firefox、Safari、Operaの主要なブラウザはサポートしていますが、
IE9以下は未サポートになっています。
※pushStete未サポートのブラウザへは「History.js」を使うなどの対処が必要となります。
本ブログでは「History.js」についてはふれませんので、ご興味がある方は別途調べてみてはいかがでしょうか。

それでは、導入方法について見ていきましょう。 (続きを読む…)


SI部のオールドルーキー内田です。

今回は、「JavaScript大規模開発はじめの一歩」と題しまして、Webアプリケーション開発におけるクライアントサイド、
HTML+JavaScriptの記述方法についてのTipsをお届けしたいと思います。

対象読者は「ちょっとJavaScriptが苦手なWebアプリケーション開発者」を想定していますよ。

さっそく始めます

とりあえず下記のようなHello World的なHTMLファイルがあるとします。

casley0.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
    function sayHello(msg){
      window.alert(msg);
    }
    </script>
  </head>
  <body>
    <div>
      <input id="button" type="button" value="押してね" onClick="sayHello('こんにちは、キャスレー')"></input>
    </div>
  </body>
</html>

スクリーンショット 2015-09-14 22.11.08

「ある程度の規模でのチーム開発を想定したWebアプリケーションを構築する」という観点に立つと、「表示と実装を分離したい」という要望が出てくると思います。 先の例に当てはめると「HTMLファイルから処理記述を排除したい」ということで、まずHTMLファイルに処理が混入しているのが良くないように見えます。 (続きを読む…)


こんにちは、ムキムキフロントエンドエンジニアを目指す杉田です。

今回紹介させて頂きますのはこちら。
SugarJs_logo
『Sugar.js』です。

題名のとおり、こちらの「Sugar.js」はJSライブラリで、
日付、時間、オブジェクト等のデータを操作することができます。
特に日付の操作が人気のようで、また日本語に対応した
処理もあり、日本人にとって有り難いですね。 (続きを読む…)


こんにちは、SD部の秦(はた)です。

前回、DOM操作の基本についてご紹介させて頂きました。

【JavaScript】今更聴けない!?DOM操作(1)

今回はもう一歩踏み込んだ操作についてご紹介します。 (続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ