【Typescript初心者向け】JavaScriptフレームワークとの関係について

【Typescript初心者向け】JavaScriptフレームワークとの関係について

TypeScriptでの開発が可能なJavaScriptのメジャーフレームワークの種類と特徴について、詳しく解説していきます。

TypeScriptはJavaScriptに向けて開発されているフレームワークをそのまま、あるいは拡張機能を利用することで、アプリケーションの開発に使用することが可能です。

その理由は、TypeScriptとJavaScriptの関係にあります。TypeScriptはJavaScriptの代替言語であるAltJS (Alternative JavaScript)の一つで、JavaScriptを拡張したスーパーセット(上位互換)の関係にあるプログラミング言語です。静的型付け言語であり、クラスベースオブジェクト指向を持ちながら、JavaScriptとは完全な互換性を持っています。

今回は、このTypeScriptでの開発が可能なJavaScriptのメジャーフレームワークの種類と特徴について、詳しく解説していきます。

TypeScriptはJavaScriptのフレームワークを利用できる

フレームワークとは、アプリケーション開発において、土台として機能するソフトウェアのことを指します。フレームワークには様々な機能があらかじめ組み込まれているため、アプリケーションを開発する際に自分で1からコードを記述する必要がありません。

アプリケーション開発の現場では、導入するフレームワークを決め、足りない機能は独自にコードを記述して追加していき、開発を進めていきます。

TypeScriptはJavaScriptに対するスーパーセット(上位互換)の関係にあり、トランスコンパイルすることでコードをJavaScriptに変換できるだけでなく、相互にコード内で呼び出したり、ライブラリの共有が可能です。そのため、オープンソースで公開されている既存のJavaScriptフレームワークをそのまま利用して、アプリケーション開発を進めることができます。

また、JavaScriptに向けて開発されているフレームワークには、TypeScriptで記述されているケースや、JavaScript用のフレームワークだったものが、現在はTypeScriptを推奨言語としているケースもあります。

一例として、Vue.jsはバージョン3.0からはTypeScriptで開発されています。また、Googleが開発しているJavaScriptフレームワーク「Angular」は、バージョン2.0以降はTypeScriptが推奨言語になっています。

Angular - Googleが開発したフレームワーク

Angular - Googleが開発したフレームワーク

Googleを中心とする個人や企業のコミュニティによって開発したフレームワークで、「アンギュラー」と読みます。Webアプリケーション開発では高い人気があり、高頻度で使用されるフレームワークのひとつです。バージョン2.0以降は開発に使用する推奨言語がTypeScriptになったため、名称からJSがはずされました。

開発速度が早いフレームワークで、年に2回の大規模アップグレードで機能の追加と向上が行われています。2021年2月末現在の最新バージョンは、11.2.3です。

Angularはサーバとの連携機能を始めとする豊富な機能を持ち、企業向けの大規模なアプリケーション開発に適しています。特にシングルページアプリケーションの開発に強く、ページ数の少ないWebアプリケーション開発に向いています。

一つのフレームワーク内ですべての機能が完結している「フルスタックフレームワーク」であり、他のライブラリなどから機能追加を行わなくても、単独で大概のアプリケーションの開発が可能です。

Angularの特徴

HTMLを拡張して機能を豊富に盛り込んだAngularの特徴のひとつに、「双方向データバインディング」が挙げられます。

ブラウザ上で動作するWebアプリケーションでは、ユーザーが見ている画面(View)上で操作した内容を、データ(Model)に反映したり、処理の結果データ(Model)が変更された場合、内容を画面(View)に反映しています。

これを実行するには、通常は「操作している画面からHTML要素を取得」して、「HTML要素をデータとして内容を処理」し、「処理したデータを再び画面のHTMLに反映」という一連の作業についてプログラムを記述し、処理を都度行う必要があります。

しかし、Angularに搭載されている双方向データバインディングを利用すると、HTMLの要素がデータの処理を行うプログラム部分と連動して、自動的に処理が実行されるため、画面からHTML要素を取得して処理し、反映するまでの作業についてプログラムを作る必要がありません。そのためより短いコードで同様の機能が実装でき、開発にかかるコストも圧縮できます。

AngularはTypeScriptが推奨言語となったため、今後Angularを導入したWebアプリケーション開発の現場では、TypeScriptが開発言語として使用されていく可能性が高いでしょう。

Angularのサンプル

ボタンを押すとメッセージを表示するプログラムをAngluarで書く場合、次のようになります。

// .html部分
<button (click)="clickButton()">クリックしてください</button>
<div>{{res}}</div>

// .ts部分
export class AppComponent {
    res = "";
    public clickButton(): void {
        this.res = "クリックしました";
    }
}

React - Facebookが開発したフレームワーク

React - Facebookが開発したフレームワーク

Facebookを中心とするコミュニティによって開発されているフレームワークで、「リアクト」と読みます。Angularと並んでWebアプリケーション開発で多用され、世界的に導入率が高く、非常に人気のあるフレームワークです。

改良が早く高品質で安定性が高いため、信頼性が高いフレームワークとしてInstagramやYahoo!、Netflix、Slackなどで採用されています。多くのWebアプリケーションで採用されていることから、最も身近なフレームワークの一つといえるでしょう。

ReactはJavaScriptでの開発が推奨されていますが、拡張機能を利用することで、JavaScriptと互換性の高いTypeScriptも使用が可能です。

Reactの特徴

Reactの特徴として挙げられるのは、以下の3つの点です。

・UIの機能追加がしやすく作りやすい

・コンポーネント指向を採用している

・開発の途中から採用が可能

ReactはUIの作成と追加に特化しているため、アプリケーションのユーザーが使いやすくストレスを感じないUIが作りやすくなっています。また、UI周りの設計が強化されており、効率よく処理を行ってスムーズに操作ができるよう、高速で動作します。

このUIに特化しているという点は、コンポーネント指向にも影響しています。コンポーネント指向とは、プログラミングの設計概念のひとつで、ソフトウェアを機能ごとに部品(=コンポーネント)として分割して、必要に応じて組み合わせ、再利用する考え方です。

コンポーネント指向によって、Reactは複雑な構造のUIでも、管理や追加が簡単におこなえ、自由な画面設計が可能になります。

また、多くのフレームワークは開発の最初から導入することが前提になっていますが、Reactは既存のアプリケーションに対し、開発途中で採用できるように設計されています。そのため、すでにあるコードを書き換える必要がなく、機能を追加する部分だけReactを使用して記述します。

Reactのサンプル

ボタンを押すとメッセージを表示するプログラムをReactで書く場合、次のようになります。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { res : '' };
  }
  clickButton = e => {
    this.setState({ res : "クリックしました" });
  }
  render() {
    return (
      <div>
        <button onClick={this.clickButton}>クリックしてください</button>
        <div>{this.state.res}</div>
      </div>
    )
  }
}

Vue.js - 新しくシンプルなフレームワーク

Vue.js - 新しくシンプルなフレームワーク

Angularの開発に携わったEvan You氏が開発しているフレームワークで、「ビュージェーエス」と読みます。AngularやReactよりも後発のフレームワークですが、シンプルで自由度が高く、軽量で動作が早いため、シェア率が伸びています。

フレームワークとして独自の規格やルールが少なく、簡潔なコードが特徴で、部分的にアプリケーションに採用できるアーキテクチャ(プログレッシブフレームワーク)を採用しています。そのため、既存アプリケーションの一部だけにVue.jsを導入することも可能で、必要な部分だけを使用して自由度の高いWebアプリケーションの構築ができます。

Vue.JSの特徴

他のライブラリとの組み合わせに対しても自由度が高いため、必要な機能は他のライブラリを導入することで補えます。結果として、必要なものだけで構築できるため、プログラム全体をコンパクトにまとめられ、動作も軽くなります。

また、MVVM(Model-View-ViewModel)を採用しているので、Model(データ)、View(画面)、ViewModel(処理)を分けて開発できます。これにより、プログラム全体が見やすく、保守性が高まります。

Directive(ディレクティブ)機能を利用することで、HTML要素の表示・非表示が可能になり、アプリケーション上の表現やUI設計の幅が広がります。

この他、Vue.jsは公式ガイドをはじめとした日本語での情報が豊富なため、学習しやすいフレームワークでもあります。

JavaScript向けのフレームワークとして開発されましたが、3.0からはTypeScriptで開発されています。そのため、引き続きJavaScriptで開発できるほか、拡張機能などを使用せずにTypeScriptでも開発に利用できます。

Vue.jsのサンプル

ボタンを押すとメッセージを表示するプログラムをVue.jsで書く場合、次のようになります。

// .html部分
<div>
  <button @click="buttonClick">クリックしてください</button>
  <div>{{ result }}</div>
</div>

// .ts部分
{
  data() {
    return { result: '' }
  },
  methods: {
    buttonClick() {
      this.result = "クリックしました";
    }
  }
}

TypeScriptの初期セットアップのテンプレート

TypeScriptの初期セットアップのテンプレート

TypeScript公式では、Ember、Ruby on Railsなど、 TypeScriptでの開発をサポートするテンプレートの提供をしているプロジェクトを紹介しています。この記事で紹介したフレームワーク以外にも、機能や用途に特化したさまざまなフレームワークやライブラリがあり、開発の目的によって選択されることもあります。

TypeScriptに対応しているフレームワークやライブラリは、独自の規格やルールを持っています。そのため、同じTypeScriptといっても違うフレームワークのモジュールを利用するといったことは難しい場合があります。フレームワークごとにどのような特徴があり、どのような機能実装に適しているのか、実際に触れて確認した上で、制作したいアプリケーションに適したものを選択するのがおすすめです。

Typescriptは既存のJavaScriptフレームワークで開発可能!

Typescriptは既存のJavaScriptフレームワークで開発可能!

TypeScriptはJavaScriptの上位互換にあり、高い互換性があるため、現在公開中のJavaScriptフレームワークをそのまま利用してアプリケーションの開発が可能です。フレームワークによって得意な分野や特徴が異なるため、開発するアプリケーションに合わせて、適したフレームワークを選ぶことが大切です。

JavaScriptが開発・実行できる環境では、TypeScriptも開発・動作が可能なため、JavaScriptとTypeScriptを併用した開発も簡単に環境が用意できます。

TypeScriptはJavaScriptではエラーを防ぎにくくコードが冗長化しやすい大規模Webアプリケーション開発の現場で採用が進んでおり、今後、JavaScriptが必要な開発の多くがTypeScriptに置換されると考えられます。

TypeScriptを習得し、フレームワークの使い方を身に付けることで、フロントエンドエンジニアとしての価値が高まるでしょう。

登録拠点登録拠点

パソナ

パソナテックは全国9拠点にて、転職相談・お仕事紹介・各種イベント・セミナーを実施しています。

ページトップ