TypeScriptの特徴とは?JavaScriptとの違いを交えて解説

Xのアイコン

TypeScriptの文字とPCのイラスト

JavaScriptを拡張して開発されたTypeScriptは、Googleの標準開発言語に承認されてから世界的に注目を集めています。
JavaScriptではバグの発生しやすい大きな問題を抱えていましたが、その問題を解消するために開発されたのがTypeScriptです。JavaScriptとの互換性が高いのも特徴の1つです。JavaScript経験者であればすぐに身に付けられるでしょう。
そこで今回はTypeScriptの概要とJavaScriptとの違い、メリット・デメリット、TypeScriptで開発を行う環境構築手順などを紹介します。ぜひ参考にしてください。

 

目次

 

システム開発会社選びはプロにお任せ完全無料で全国5000社以上からご提案

即戦力のシステム開発会社を探すなら「発注ナビ」

・ベストマッチな発注先が見つかる
・たった1日のスピード紹介
・ITに詳しいコンシェルジュがサポート
・ご相談~ご紹介まで完全無料

 

TypeScriptの特徴とは

TypeScriptは、JavaScriptを拡張して開発された新しいプログラミング言語です。2012年10月にMicrosoftが公開しました。TypeScriptで書いたコードをコンパイルするとJavaScriptのコードへと変換されるため、JavaScriptの開発環境や実行環境があればすぐに使えます。

JavaScriptとの互換性の高さと、大規模の開発でもエラーを防ぐよう設計されている点が特徴です。Googleの標準開発言語に承認されてからは世界的に注目を集めており、日本国内でも将来性がある言語の1つといえます。

ここからはJavaScriptとの違いや、フレームワークの関係について詳しく解説していきます。

 

●JavaScriptとの違い

TypeScriptは、JavaScriptと同じ構文ならびにライブラリが使用できるため、違いがわかりづらいですが、大きな違いは型付けにあります。

JavaScriptは実行時にデータ型を決める動的型付けです。動的型付けには、実行時にデータ型が自動で決まるため実行するまでエラーの存在に気付きにくく、バグが起こりやすいという問題点がありました。

この問題を解決するため、TypeScriptではあらかじめ変数の型を定義する静的型付けを採用しました。

例えば、従来のJavaScriptであればnullやundefinedで「Uncaught TypeError: Cannot read property *** of undefined」のエラーが出力されますが、TypeScriptはコンパイラオプションで変数をチェックできるため、未然にエラーを発見できます。

エラーを防止できるTypeScriptはグループで開発する際に有利なため、規模の大きなWeb開発で利用されるケースが増えています。これからTypeScriptかJavaScriptのどちらを勉強すべきか悩んだ際には、TypeScriptを選ぶのがおすすめです。

ただし、JavaScriptのフレームワークと関連性が高いため、JavaScriptを完全に無視できるわけではありません。以下で詳しく解説します。

 

●TypeScriptとJavaScriptのフレームワークの関係について

JavaScriptのフレームワークは、TypeScriptでも引き続き利用可能です。フレームワークは開発作業を効率化させることができるため積極的に利用しましょう。ここではJavaScriptで代表的な3つのフレームワークを紹介します。

 

・AngularJS

AngularJSは、Googleをはじめとする複数の企業や個人のコミュニティによって開発されたJavaScriptフレームワークです。また、AngularJSはTypeScriptを標準で採用しています。

ページ数の少ないWebアプリケーションや管理画面系のアプリケーションの作成に向いていており、開発するうえで必要な機能がすべて揃っているのが特徴です。学習するのが難しいフレームワークですが、機能単位で実装が簡単であることから初心者でも扱いやすいといえるでしょう。

 

・React

Reactは、Meta(旧Facebook)を中心としたコミュニティによって開発されたJavaScriptのフレームワークです。拡張機能を利用する必要がありますが、TypeScriptを使用できます。

MVC(Model-View-Controller)のViewに特化しており、UIコンポーネントを簡単に作成できることが特徴です。ユーザーインターフェース構築に適しています。コンポーネント(部品)を作成し、それを組み合わせてユーザーインターフェース構築ができます。部品化するため、再利用しやすい特徴があります。

 

・Vue.js

GoogleでAngularJSの開発に携わったEvan You氏が開発した、JavaScriptフレームワークです。Vue3.0は拡張機能を使用せずにTypeScriptを利用できます。

MVVM(Model-View-ViewModel)を採用しており、ファイルサイズが非常に軽量で動作も速く、自由度が高いのが特徴です。シンプルで学習しやすいため、学び始めやすいフレームワークといえます。

 

TypeScriptでシステム開発するメリット

JavaScriptでシステムを開発してきた方にとって、TypeScriptを導入するメリットがなければそのまま慣れ親しんだJavaScriptを使いたいものです。そんな方のために、ここではTypeScriptでシステム開発するメリットについて詳しく紹介します。

 

●JavaScriptより短く読みやすいコードが書ける可能性がある

TypeScriptは、オブジェクト指向型言語として開発されています。かつてJavaScriptでは使えなかったクラスの生成が可能なため、JavaScriptよりもシンプルにソースコードを記述できます。

コードが冗長で読みづらいと、バグの原因になることがあります。シンプルなコードは書きやすく、バグの回避につながるため大きなメリットといえるでしょう。なお現在ではJavaScriptもクラスが使えるようになっています。

 

●JavaScriptとの互換性がある

TypeScriptは、JavaScriptのフレームワークやライブラリを使用できるため、JavaScriptの開発環境や実行環境があれば構築せずにそのまま使えます。JavaScriptで作られたファイルを呼び出して使うことも可能です。

また、コンパイルで、TypeScriptファイルからJavaScriptファイルに変換されます。

 

●エラーを防止できる

TypeScriptは、変数のデータ型をコード内で宣言できる静的型付けの言語です。型と値が異なるとコンパイルエラーが発生するため、バグを防止できます。

JavaScriptではプログラムを稼働させるまでエラーに気づきにくい問題がありましたが、TypeScriptではコンパイル時にエラーに気づける仕組みとなっています。

 

●JavaScriptの知識があれば覚えやすい

通常、新しい言語の学習には数ヶ月程度を要しますが、JavaScriptを扱ったことがある方であれば簡単に使い始められます。

 

TypeScript開発を行う環境構築の流れ

TypeScriptのコードはJavaScriptにコンパイルしてから実行するため、TypeScriptコンパイラが必要です。ここではNode.jsを利用してTypeScriptコンパイラをインストールする手順を紹介した後に、開発環境の構築と簡単なプログラムの実行をするところまで紹介します。

 

●PC環境を整える

Node.jsをインストールします。公式サイト(https://nodejs.org/ja/)からインストーラーをダウンロードしましょう。

 

●npmコマンドを使ってインストールする

TypeScriptコンパイラをインストールします。コマンドプロンプトやターミナルなどを開き、以下2つを実行してください。OSや環境によって「sudo」コマンドを先頭につける必要があるため注意しましょう。

 

$ npm install -g ts-node
$ npm install -g typescript

 

次にインストールが完了したか確認するため、以下のコマンドを実行してください。

 

$ tsc –v

 

「Version x.x.x」と表示されれば、TypeScriptのコンパイラのインストールは完了です。

 

●TypeScriptで「Hello, World!」を表示してみる

では、簡単なプログラムで動きを確認してみましょう。下記のソースコードを書いて、helloworld.tsというファイル名で保存します。

 

const message:string = ‘Hello, World!’;
console.log(message);

 

作成したhelloworld.tsファイルを、JavaScriptファイルにコンパイルします。コマンドプロンプトやターミナルなどを開き、次のコマンドを実行しましょう。

 

$ tsc helloworld.ts

 

helloworld.jsというJavaScriptファイルができたら、コンパイル完了です。続いて動作確認もコマンドでしてみましょう。

 

$ node helloworld.js

 

コマンドプロンプトもしくはターミナルで「Hello, World!」と表示されたら成功です。これがTypeScriptのソースをJavaScriptにコンパイルする手順です。

 

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

次にTypeScriptで開発を行うためにすることが開発環境の構築です。最初にフォルダを作りましょう。ここではフォルダ名を「test_type」で作ります。

コマンドプロンプトやターミナルなどで以下を実行してフォルダを作成します。

 

$ mkdir test_type
$ cd test_type
$ npm init –y

 

●ツール類のインストールを行う

次に開発で必要なWebpackなどのツールをインストールしていきます。コマンドプロンプトやターミナルなどで以下を実行しましょう。

 

$ npm install typescript ts-loader webpack webpack-cli webpack-dev-server –save-dev

 

●設定ファイルを準備する

設定するファイルは3つあります。最初にpackage.jsonを開いてください。「npm build」「npm start」コマンドが使えるようにするために、以下を書き込んでいきます。

書き込む前のpackage.jsonの中身は以下のとおりです。

 

{
  “name”: “test_type”,
  “version”: “1.0.0”,
  “description”: “”,
  “main”: “index.js”,
  “scripts”: {
    “test”: “echo \”Error: no test specified\” && exit 1″
  },
  “keywords”: [],
  “author”: “”,
  “license”: “ISC”,
  “devDependencies”: {
    “ts-loader”: “^4.0.0”,
    “typescript”: “^2.7.2”,
    “webpack”: “^4.0.1”,
    “webpack-cli”: “^2.0.10”,
    “webpack-dev-server”: “^3.1.0”
  }
}

 

「scripts」が以下のコードになるよう書き足します。

 

  “scripts”: {
   “test”: “echo \”Error: no test specified\” && exit 1″, // ,を忘れずに追記します
   “build”: “webpack –mode=development”,
   “start”: “webpack serve –mode=development”
  },

 

次に、webpackの設定を行います。webpack.config.jsの中身を以下のとおりに記述してください。

 

const path = require(‘path’);
 
module.exports = {
   entry: {bundle: ‘./src/app.ts’},
   output: {
       path: path.join(__dirname,’main’),
       filename: ‘[name].js’
   },
   resolve: {extensions: [‘.ts’,’.js’]},
   devServer: {
        static: {directory: path.join(__dirname, “main”)}
   },
   module: {
       rules: [{test:/\.ts$/,loader:’ts-loader’}]
   }
}

 

最後はTypeScriptコンパイラ用の設定ファイルです。まだファイルはないため、コマンドで生成しましょう。

 

tsc –init

 

tsconfig.jsonが生成されます。生成したファイルを編集する必要はありませんが、以下のソースがコメントアウトしていないかだけ確認しましょう。

 

{
  “compilerOptions”: {
     “target”: “es5”,
     “module”: “commonjs”,
     “strict”: true,
     “esModuleInterop”: true
  }
}

 

以上で設定ファイルの準備は完了です。

 

●準備完了後TypeScriptプログラムを作成する

設定が終わったため、簡単なプログラムを作成してみましょう。まずはメインとなる2つのフォルダを「test_type」フォルダ直下に作っていきます。ここでは「main」と「src」を作ります。

次に「main」フォルダ直下にindex.htmlファイルを作成します。ソースは以下の内容を記述しましょう。

 

<!DOCTYPE html>
<html lang=’ja’>
   <head>
       <meta charset=”utf-8″>
       <title>ブラウザで表示する例</title>
   </head>
   <body>
       <div id=”output”></div>
       <script src=”bundle.js”></script>
   </body>
</html>

 

次に「src」フォルダ直下にapp.tsファイルを作成して、以下のコードを書いてみます。

 

import {Item} from ‘./item’;
var elem = document.getElementById(‘output’);
var myCat = new Item(‘ミケ’,8);
myCat.say(elem);

 

次は「src」フォルダ直下にitem.tsファイルを作成し、以下のコードを書いてみます。

 

export class Item {
   constructor(private name:string, private age:number){}
 
   public say(elem : HTMLElement | null) : void {
       if(elem){
         elem.innerHTML = ‘家で飼っている猫の名前は’ + this.name + ‘ です。年齢は’ + this.age + ‘才になりました。
‘;
       }
   }
}

 

これでTypeScriptプログラムの作成は完了です。コマンドプロンプトやターミナルなどで以下のコマンドを実行してみましょう。

 

npm start

 

ブラウザでhttp://localhost:8080/にアクセスしてみてください。簡単なテキストが表示されれば成功です。

 

TypeScriptにもデメリットがある

JavaScriptよりも使い勝手が良いTypeScriptですが、もちろんデメリットもあります。比較的新しいプログラム言語によくあるデメリットです。ここでは2つ紹介します。

 

●利用者人口がまだ少ない

JavaScriptよりも便利なTypeScriptですが、まだまだ開発人口が多くありません。これからTypeScriptを利用する方は増えていくことが予想されますが、JavaScriptを上回るのはまだまだ先のことでしょう。

 

●学習に時間がかかる

TypeScriptは日本語で読める情報が多くありません。JavaScriptと似ていますが、TypeScriptだと動かないコードもあったり、設定ファイルが複雑なためエラーが大量に出力されてしまい頭を抱えてしまったりするケースもあります。

利用者人口が少ないため、わからないことや困ったことがあった際に調べても解決策が出てこない可能性があります。

 

効率的に学習するポイント

TypeScriptを効率的に学習する方法として、参考書や本による学習、スクールや勉強会の参加、オンライン学習などが挙げられます。ただし、比較的最近登場したプログラム言語のためプログラミングスクールで取り扱っていないこともあります。

まずは初心者向けの本や、公式サイトのチュートリアルを利用してみましょう。記述などの基礎学習ができます。応用が載っている参考書で学習が完了したら、実践で経験を積むことが大切です。

サンプルを組んでみたり、既存のコードを移行してみたりなど、実際にプログラムを組むのがなによりの上達方法です。

 

TypeScriptの将来性

日本では現在JavaScriptを利用している開発者が多く、TypeScriptを利用している開発者人口は少ない状況です。一方で、TypeScriptを開発したMicrosoft社以外にも利用する企業が増えてきているのも事実です。GoogleやBMWなどでもTypeScriptが利用されています。

2017年にGoogle社内で6番目の標準開発言語として選ばれた経緯もあって、日本でも徐々に導入事例が増えてきているため、将来性は期待できるでしょう。

 

まとめ

TypeScriptは新しいプログラミング言語のため、困ったことがあった際に調べても解決策が出てこなかったり、学習が進まなかったりする可能性があります。一方で、JavaScriptの問題点だったバグの発生のしやすさを解消できるというメリットもあります。

JavaScriptの開発環境や動作環境があれば簡単に導入できること、フレームワークやライブラリなども引き続き使えることなども魅力です。将来性が期待できるプログラム言語のため、TypeScriptを使った開発に挑戦してみることをおすすめします。

 

システム開発の最適な発注先をスムーズに見つける方法

システム開発会社選びでお困りではありませんか?
日本最大級のシステム開発会社ポータルサイト「発注ナビ」は、実績豊富なエキスパートが貴社に寄り添った最適な開発会社選びを徹底的にサポートいたします。
ご紹介実績:19,000件(2024年3月現在)

外注先探しはビジネスの今後を左右する重要な任務です。しかし、

「なにを基準に探せば良いのか分からない…。」
「自社にあった外注先ってどこだろう…?」
「費用感が不安…。」

などなど、疑問や悩みが尽きない事が多いです。
発注ナビは、貴社の悩みに寄り添い、最適な外注探し選びのベストパートナーです。
本記事に掲載するシステム会社以外にも、最適な開発会社がご紹介可能です!
ご相談からご紹介までは完全無料。
まずはお気軽に、ご相談ください。 詳しくはこちら

 

 

システム開発会社選びはプロにお任せ完全無料で全国5000社以上からご提案

即戦力のシステム開発会社を探すなら「発注ナビ」

・ベストマッチな発注先が見つかる
・たった1日のスピード紹介
・ITに詳しいコンシェルジュがサポート
・ご相談~ご紹介まで完全無料

 

■TypeScriptに関連した記事

JavaScriptを使ったシステム開発でおすすめの開発会社

JavaScriptを使ったシステム開発でおすすめの開発会社11社【最新版】

Webアプリケーション開発でおすすめのシステム開発会社

Webアプリケーション開発でおすすめのシステム開発会社10社【最新版】

即戦力のシステム開発会社を探すなら「発注ナビ」

希望ぴったりの外注先がラクして見つかる
soudan_banner

人気記事

関連記事

関連特集

offer_banner
即戦力のシステム開発会社を探すなら発注ナビロゴ
発注ナビは、システム開発に特化した
発注先選定支援サービスです。
紹介実績
19000
対応社数
5000
対応
テクノロジー
319
紹介達成数
92%
システム開発の発注先探しで
こんなお悩みありませんか?
checkbox
なかなかいい外注業者
見つからない。
checkbox
ITの知識がなくて
発注内容をまとめられない。
checkbox
忙しくて外注業者を探す
時間がない
悩んでいる人物
発注ナビの主な特徴
IT案件に特化
IT案件に特化
日本最大級5000社以上のシステム開発・WEB制作会社が登録。IT専門だから細かい要望が伝わり、理想的なパートナーが見つかる。
ITへの不安を徹底サポート
ITへの不安を徹底サポート
専門コンシェルジュがしっかりヒアリングするので、IT知識に不安があっても、まだ要件が固まっていなくても大丈夫。
完全無料・最短翌日紹介
完全無料・最短翌日紹介
コンシェルジュに発注内容を話すだけで最短翌日に開発会社をご紹介。しかも完全無料・成約手数料も無し。
さらに
東証プライム上場
「アイティメディア株式会社」
グループが運営
ご相談内容は一般公開しないため、クローズド案件でも安心。
ご紹介企業は第三者調査機関にて信用情報・事業継続性を確認済です。

発注先探しの
ご相談フォーム

発注ナビは貴社の発注先探しを
徹底的にサポートします。
お気軽にご相談下さい。
必須
必須
必須
■必要な機能・課題■ご予算■スケジュールなど
■企画書やRFPの添付が可能です(10MBまで)

会員登録には、
発注ナビ 利用規約  及び 個人情報の取扱い 
「当社からのメール受信」への同意が必要です。