C# エンジニアがフロントエンド開発するなら TypeScript がおすすめ - モダンウェブ開発

こんにちは！

テクニカルコンサルティングチームの古堅です。

元々はC#が大好きな私ですが、C#er からみた TypeScript とは？をテーマに今回記事を書いてみました。

モダンウェブ開発を予定している C# エンジニアの方に参考になれば嬉しいです。

記事の対象者

・C# 経験者

・フロントエンド開発にも興味があり、Angular, React, Vue.js で開発を予定している方

・JavaScript か TypeScript どちらを採用するか悩んでいる方

TypeScript とは

JavaScript に、静的な型定義ができるように構築されたオープンソースの言語です。

www.typescriptlang.org

TypeScript は、最終的に JavaScript にコンパイルされて動作するため、JavaScript が動作可能なブラウザ、OS などで実行することが出来ます。

また、TypeScript は フロントエンド開発で採用される Angular, React, Vue.js のフレームワークに対応しています。

この記事を見られる方の中に、C# の経験はあるが、TypeScript とはどのようなものか？参考になれば嬉しいです。

C# エンジニアがフロントエンド開発するなら TypeScript がおすすめ

C# と出来ることの共通点が多い

C# と同じく、マイクロソフトが開発したものなので、言語思考に幾つかの共通点があります。

• オブジェクト指向
• 静的な型定義、チェック
• インテリセンス機能による自動補完
• 型宣言による可読性の向上

上記の点から幾つか本記事で紹介します。

インテリセンスの有効化

C#er には、お馴染みのインテリセンス機能ですが、TypeScript でも静的な型定義により、正確なインテリセンスが機能します。

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

TypeScript はクラス、インターフェースを定義することができます。

ECMA Script 2015以降、JavaScript でもクラス構文を定義することが出来るようになりましたが、インターフェースの定義は、TypeScript にしか出来ませんね。

interface CarInterface {
    name:string;
    start() : void;
    stop() : void;
}

class MyCar implements CarInterface  {
    public name:string;
    public start() {
    }
    public stop() {
    }
}

ジェネリック

ジェネリックは、型を利用しつつ汎用的なメソッド、クラスを作る際に非常に便利な機能ですね。

TypeScript は、ジェネリック採用することができます。

function update<T>(param : T) : {
   return param;
}

文法比較 - C# vs TypeScript

TypeScript を始める方向けに、C# および TypeScript のメソッドやクラスなどのサンプルコードを記載しています。

メソッド

C＃

public string getName(int num)
{
    return "name";
}

TypeScript

public getName(num : number) : string {
  return "name";
}

インターフェース

C＃

interface CarInterface
{
    string Name { get; set; }
    void Start();
    void Stop();
}

TypeScript

interface CarInterface {
    name:string;
    start() : void;
    stop() : void;
}

クラス

C＃

public class MyCar : CarInterface
{
    public string Name { get; set; }

    public void Start()
    {
    }

    public void Stop()
    {
    }
}

TypeScript

class MyCar implements CarInterface  {
    public name:string;
    public start() {
    }
    public stop() {
    }
}

まとめ

C# エンジニア向けに、TypeScript でウェブ開発を検討される方に参考情報を執筆しました。

特に、TypeScript の静的な型定義は、開発メンバーが多いプロジェクトほどメリットは大きいので、是非ご検討ください。

Ignite UI for Angular トライアル版を利用するには

インフラジスティックスでは充実した UI コンポーネントライブラリーを収録し、データリッチでレスポンシブなWebアプリケーションをより迅速に構築することを可能にする Ignite UI を開発しており、Angular 対応の Ignite UI for Angular もリリースしています。

Ignite UI for Angular はトライアル版での試用が可能です。

製品に関する技術的な問い合わせは こちらのページ よりアカウントの作成を行ってください。登録より30日間、弊社のテクニカルサポートをご利用いただくことが出来ますのでお気軽にお問い合わせください。

また、製品をご購入をご検討のお客様は こちらのページ より

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各開発プラットフォームの技術トレーニング、コンサルテーションの提供、開発全般のご支援を行っています。

jp.infragistics.com

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せはこちらからお気軽にご相談ください。