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に関連した記事
 |
|
 |
