Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

初心者向けにTypeScriptを徹底解説②


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20220127145432p:plain

おはようございます。Shotaです。

皆さんは、TypeScriptを知っていますか?

TypeScriptは、今フロントエンド開発で注目されている新しい言語です。WEBアプリ開発フレームワークとしてTypeScriptを推奨しているものが増えてきたので、ご存じの方も少なくないでしょう。

今回の記事ではTypeScriptを知らない人に向けて、TypeScriptについて詳細に徹底解説します。

それでは早速、本題に入りましょう。


TypeScriptとは

f:id:ShotaNukumizu_1000:20220127145432p:plain

TypeScriptは2014年頃にMicrosoftによって開発されたプログラミング言語です。AltJS(Alternative Javascript)とも呼ばれ、JavaScriptの問題を解決するために開発されました。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換できます。そのため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリも使えるなど、互換性が高いです。

TypeScriptが開発された背景には、JavaScriptを使用した大規模アプリケーションを開発する際に、複雑なJavaScriptのコードを扱うので、コンポーネント群の開発を用意する独自のツールが必要になったことがあります。そのため、JavaScriptの欠点を補って、使いにくさを改善して大規模開発でエラーが発生しない言語として開発されました。

TypeScriptはGoogleが開発する人気のフレームワークにも導入されているので、JavaScriptに代わって需要と将来性が両方高い言語だと言えます。

JavaScriptとの違い

f:id:ShotaNukumizu_1000:20211114052320p:plain

プログラミング言語には、動的型付けと静的型付けの2種類があります。(詳細は以下の記事を参照ください)

▼おすすめの記事

shotanukumizu-1000.hatenablog.com

JavaScriptは動的型付け、TypeScriptは静的型付けの言語なので、この点が両者の最も大きな違いだと言っていいでしょう。

TypeScriptの主な特徴

TypeScriptの主な特徴は以下の通りです。


  • バグを早期発見しやすい
  • 効率的にコーディングできる
  • コードが読みやすい
  • 大規模開発に対応
  • JavaScriptではできないclassを作れる


これらの特徴は、JavaScriptで大規模なアプリを開発する上での欠点を補うためにあります。

将来、大規模開発に携わりたい場合はTypeScriptを勉強していると良いのかもしれません。

TypeScriptを使用している企業

f:id:ShotaNukumizu_1000:20211212082408p:plain

TypeScriptは、主に海外の著名な企業で活用されています。

これらの公式のWEBサイトで活用されています。

TypeScriptのメリット・デメリット

メリット

f:id:ShotaNukumizu_1000:20210921075852p:plain

コードが短く読みやすい

TypeScriptはオブジェクト指向言語なので、JavaScriptでは冗長になりがちなコードの記述を大幅に簡略化できるようになりました。

また、生成したクラス単位でfunctionを管理することで、大人数が開発に携わる場合でもコーディングを効率化しやすいです。

JavaScriptの上位互換

TypeScriptはJavaScriptと互換性があります。そのため、JavaScriptの開発環境や実行環境があれば、すぐにTypeScriptを導入できます。

また、JavaScriptファイルをTypeScriptから呼び出したり、JavaScriptに向けて開発されたライブラリやフレームワークをTypeScriptで使用できます。

エラーの防止

TypeScriptは省略できる静的型付けの言語なので、変数の型をコード内で宣言できます。型と値が異なる場合はコンパイルエラーになるので、プログラム全体のエラーを防止できます。

高速

TypeScriptは静的型付けの言語なのでコード内で型を宣言できるので、実行時に型を決める動的型付けのJavaScriptよりも高速です。

また、TypeScriptは定期的にリリースされ、その中で速度の改善やアップデートも行われています。

デメリット

f:id:ShotaNukumizu_1000:20210906130640p:plain

学習コストが高い

TypeScriptでプログラムを書く際、クラスの作り方やデータ型の定義方法など、新しい知識を習得する際のコストが高めです。JavaScriptの知識があっても習得に困る部分は多数あります。

日本語の情報が少ない

また、TypeScriptは比較的新しい言語なので、日本語の情報が少ないです。TypeScriptで質問が出てきた場合は、英語の情報を参照することがあります。

TypeScriptとJavaScriptの関係性

本章では、JavaScriptフレームワークとTypeScriptの関係性について紹介していきます。

Angular

f:id:ShotaNukumizu_1000:20210924083407p:plain

AngularはGoogleが開発しているJavaScriptフレームワークです。WEBアプリ開発で汎用性が高いです。

AngularはもともとJavaScriptフレームワーク(AngularJS)ですが、現在はTypeScriptでの開発が主流になっています。

React

f:id:ShotaNukumizu_1000:20210924083429p:plain

ReactはFacebookを中心としたコミュニティが開発している、UI(ユーザインターフェイス)構築に適したフレームワークです。SPA(Single Page Application)やモバイルアプリの開発に多用されています。

JavaScriptフレームワークですが、拡張機能を利用することでTypeScriptも使用できます。

Vue

f:id:ShotaNukumizu_1000:20210924072234p:plain

VueはGoogleでAngularJSを開発したEvan You氏がリリースしたプログレッシブフレームワークです。

シンプルで自由度が高く、軽量で動作が高速なのが特徴で、WEBUI開発において必要な部分だけを切り取って他のライブラリと自由に組み合わせられます。コアライブラリとサポートライブラリやパッケージが分かれているので、部分的に必要な場合はコンパクトに導入できるのがメリットです。

Vue3.0はTypeScriptで記述されているので、Reactと違って拡張機能を使用せずにTypeScriptでの開発ができます。

TypeScript入門

本章では、TypeScriptの環境構築を簡単に説明します。

インストール方法

まず最初に、Node.jsをインストールしてください。その際、パッケージ管理ツールのnpm(Node Package Manager)も同時にインストールされます。

次に、以下のコードを実行してnpmからTypeScriptをインストールします。

$ npm install -g typescript

正しくインストールされている場合は以下のコードで確認できます。実行時にVersionが確認できたら、インストールは完了です。

コンパイル方法

TypeScriptで「Hello TypeScript」を表示するための手順を次に示します。

まずはTypeScriptや設定ファイルを保存するためのディレクトリを作成し、移動します。

mkdir sample-project
cd sample-project

次に、コンパイルのための設定ファイルtsconfig.jsonを作成します。

tsc --init

最後に「Hello World」と表示するためのTypeScriptファイルを作成します。

// index.ts
let message: string = 'Hello World'

console.log(message)

次に、コンパイルを実行してTypeScriptからJavaScriptに変換してください。そうすれば、index.jsindex.tsと同じディレクトリに作成されます。

コマンドプロンプトで以下のコードを入力すると、先ほど作成されたindex.jsを実行できます。

$ node sample.js

▼出力結果

Hello World

開発にはVisual Studio Codeも使用をおすすめします。Microsoftテキストエディタで、TypeScriptもサポートしているからです。

まとめ:TypeScriptは将来性が高く、人気のプログラミング言語

今回の記事では、TypeScriptについて詳細に徹底解説しました。

TypeScriptはJavaScriptの完全上位互換で、相互にコードを呼び出したり、JavaScriptのライブラリやフレームワークを活用できます。

Googleの標準開発言語に指定され、年々WEBアプリケーション開発で人気が高まっているTypeScriptを学んでみてはどうでしょうか?

今回の記事はこれで終了です。

参考サイト

udemy.benesse.co.jp

www.sejuku.net

www.pasonatech.co.jp