*Node.jsとは、JavaScriptの実行環境の一つです。*

本来、JavaScriptはフロントエンド言語です。Webページ上の要素にアクセスし、ユーザの操作をトリガーとしたHTML要素の動きを実現できます。「このボタンをホバーしたら、クリックしやすいようにボタンが大きくなる」等の動きがこれに当たります。

**更にNode.js環境を用意することで、JavaScriptにバックエンドの処理も行わせることができます。**例えば、サーバに配置されたファイルの読み書きやDBとのアクセスがJavaScriptで出来るようになります。

【参考】：[公式-Node.jsとは](https://nodejs.org/ja/about/)

*「JavaScriptは書いたことあるけど、Node.jsで何が出来るのか分からない」*

*「チーム開発でNode.jsを使うことになったけど、何からやればいいか分からない」*

*「Node.jsを自走して学習していきたいが、どうやればいいか分からない」*

Node.jsで実現出来ることをお話した後に、実際にNode.jsを使うための手順、自走して学習していく方法を解説します。

Node.jsとは？JavaScriptとの違いや使い所を解説

ここでは、Node.jsを使うと我々エンジニアは何を実現出来るのかについて解説します。

*・単体でWebアプリケーションを作ることができる*

**Node.jsはWEBサーバとしての役割も担います。**つまり、nginxのような通常WEBサーバとして用いられるソフトウェアを使うことなく、Node.jsだけでサーバを起動しHTTP通信を行うことができます。

また、Node.jsを用いることでブラウザ上でのHTML操作だけでなく、DBとのデータ連携が可能になることをすでに述べました。このことから、Node.js環境でWEBアプリケーションを作成することができます。

*・モバイルアプリケーションが作れる*

**Node.jsを導入することで、スマホアプリ開発用フレームワークであるReact Nativeを動作させることができます。**React Nativeの開発言語はJavaScriptであるため、動作させるにはJavaScriptの実行環境であるNode.jsが必要です。

React Native入門！将来性やアプリ開発環境について解説

*・新仕様のJavaScriptを古いブラウザでも動作させられる*

JavaScriptはアップデートが年々行われている言語であり、そのためバージョンによってはコードの記述方法が一部異なる場合があります。特に、JavaScriptのバージョン「ES2015」以降はオブジェクト指向での記述が可能になったりと、大幅な仕様変更がありました。

バージョンアップによって、古いブラウザ（Internet Explorer11など）がその仕様に適応できない場合があります。

これを防ぎ、バージョンアップしたJavaScriptと古いブラウザの互換性を保証するためにJavaScriptコードの変換を行う必要があります。**これを実現するツールのうち代表的なものに「Babel」があり、その動作環境としてNode.jsがよく選択されています。**

*・最新のフロントエンド技術を導入できる*

**フロントエンドの技術として、TypeScriptやReact、Vue.jsといった言葉を聞いたことはあるでしょうか。これらを導入する際の実行環境としてNode.jsはよく選択されています。**

選択されている理由として、上記で挙げた技術では、ブラウザ上でのDOM操作だけではなく、ソースコードのコンパイルやファイルインストールといったサーバサイド処理が必要になってくることが挙げられます。そのため、JavaScriptをサーバサイドでも扱えるNode.jsが実行環境として適しているのです。

TypeScriptはJavaScriptの上位互換？違いは開発規模や機能面にアリ

MacOS環境でのNode.jsインストール方法をこちらで解説します。以下ではHomebrewを用いてインストールを進めていきます。

**nodenvとは、Node.jsのパッケージ管理ツールです。**複数プロジェクトで異なるバージョンのNode.jsを利用したい場合に重宝します。

ターミナルを開いて、下記3つのコマンドを順番に実行して下さい。

curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash

*それぞれ、「nodenvをインストールする」「パスを通す」「nodenvがインストールできているか確認する」を意味するコマンドです。*

3つめのコマンドに対して下記の表示があれば、正しくnodenvがインストールできています。

下記の2コマンドを順に実行します。{バージョン番号}には、インストールしたいNode.jsのバージョンを記載します。

インストールしたnodeのバージョンが2つめのコマンドで表示されれば、無事にNode.jsがインストールできています。

さらにnodenvでは、ディレクトリごとに使うNode.jsのバージョンを指定できます。プロジェクトで利用したいディレクトリ配下に移動して、下記の2コマンドを実行してください。

インストールしたいバージョンが表示されれば、インストール完了です。

## ローカルでWebアプリを立ち上げるまで

ここまでで、ローカルPCにNode.jsをインストールすることができました。では、実際に簡単なWEBアプリを作成してみましょう。

Node.jsはJavaScriptの実行環境を指し、JavaScriptでサーバサイド処理を行うことが可能です。ReactやVue.jsなど、最新のフロント技術の導入時にはよく選択される環境なので、将来性は高いです。この機会に是非習得することをお勧めします。

Node.jsはJavaScriptの実行環境であり、サーバサイド処理を行うことが可能です。

Node.js環境では、WEBアプリ開発はもちろん、スマホアプリ開発が可能になります。

Node.jsを学習し続けるには、公式サイトを初め、ProgateやUdemyといった学習サイトが有効です。

Node.js入門！メリットやインストール方法・学習方法を解説

JavaScriptとはプログラミング言語の1つです。ここでは*JavaScriptの特徴やJavaScriptとJavaの違い・JavaScriptの将来性について紹介*していきます。

JavaScriptはWebサイトやアプリ・バックエンドなどのブラウザ上だけではなくサーバーやデスクトップ・スマートフォンまで、**さまざまな場面で活用されているプログラミング言語の一種**です。その始まりは20年以上前まで遡ります。

JavaScriptは1995年に「Live Script」から「JavaScript」に名称が変更されてから、マイクロソフト社をはじめとしてブラウザ上で使用され始めました。

 JavaScriptはブラウザ上のWebサイトに対して「動き」を加える言語として開発されました。たとえばボタン機能をクリックすることでポップアップウィンドウが開いたり、サムネイルである画像をマウスオーバーをおこなうと、画像が大きく表示されたりするのはJavaScriptを用いて作られています。

また2010年以降にはサーバサイド側の実行環境の整備がおこなわれています。そのため*現在ではJavaScriptをWebサイトに動きを加えるためだけではなく、バックエンドのシステムやアプリ開発などでも使用することが可能*となっています。

**JavaScript最大の特徴は「ブラウザで動き加えることができる唯一のプログラミング言語」であること**です。

 ブラウザで動きを加えることができるということはユーザーのアクションに応じて内部処理が行えるということになります。この機能はWebサービスを運用していく上で欠かせないと言っても過言ではありません。

 つまりJavaScriptには*Webサービスにとって最も重要な機能を備えている*という特徴があるのです。JavaScriptの特徴についてさらに詳しく知りたい場合には下記記事にも目を通してみてください。

JavaScriptでできることとは？代表的なものから特徴まで詳しく紹介！

**JavaScriptとJavaはプログラミング言語という点では同じですが、異なる言語です。**

もともとJavaScriptはLiveScriptという名で開発が始められました。ですが当時人気があり、有名であったJavaの勢いに乗っかりたいということでLiveScriptからJavaScriptへと変更したと言われています。そのため*JavaScriptを略す場合はJavaではなくJSを用いる*ことをおすすめします。

JavaScriptとJavaの違いは？質問されたときの説明方法

JavaScriptは現時点でも需要のあるプログラミング言語ですが、今後もその需要は高まっていくと言えます。その理由としてJavaScriptが大多数のWebサイトで使用されているプログラミング言語であること、*JavaScriptの代わりとなるプログラミング言語が登場していない*ことがあげられます。

 需要の高まりはJavaScriptの将来性に直結します。JavaScriptはさまざまな場面で活用される**高い将来性をもったプログラミング言語であると言える**のです。

ここまでJavaScriptとはどういうものかについて解説してきました。ここからは*JavaScriptを使ってできることについて紹介*しています。

JavaScriptを使用してできることは大きく分けて4つあります。Webサイトに動きを加える・ブラウザ上のユーザーの操作に対して処理を行う・非同期通信・アプリケーションの開発、それぞれについて詳しく解説していきます。

これまでにも触れましたが、**JavaScriptを使用することでWebサイトに動きを加えることが可能**となります。視覚表現や文章構造などを記述するための言語であるマークアップ言語の「HTML」や「CSS」のみでもWebサイトは十分に作成することができます。

 しかしJavaScriptを用いることで*アニメーションなどをWebサイトに追加することもでき、ユーザビリティにも配慮したより魅力的なWebサイトの作成が実現*できます。

### ブラウザ上のユーザーの操作に対して処理を行う

JavaScriptは**ブラウザ上でのユーザーの操作に対して、さまざまな処理を行うことができます。**検知することができるユーザーの操作として「マウスの移動」「Webページの遷移」「クリックやダブルクリック」「画面のスクロール」などが挙げられます。JavaScriptを使用することで*ウィンドウをスクロールした際、徐々に画像が浮かび上がってくるサイトを作ることも可能となる*のです。

非同期通信とはネットワークなどで接続されているコンピュータの間で、送信者のデータを送信するタイミングと受信者のデータを受信するタイミングを合わせずに通信をおこなう通信方式のことを指します。

**JavaScriptを使用することでこの非同期通信を実現でき、Webサイトを更新せずとも表示している内容を更新することが可能**となります。ユーザーはWebサイトを読み込む時間に敏感で、Webサイトが表示・更新されるまでの速度が遅いとストレスを感じたり、別のサイトへ移動したりしてしまいます。

 そこでJavaScriptの出番です。JavaScriptを利用して*非同期通信をおこなうことで、Webサイトの表示に関するユーザーのストレスを減らすことができます。*ストレスなく閲覧可能なWebサイトにすることができれば、閲覧数の増加やサイト自体の評価の向上を狙うこともできます。

2010年以降JavaScriptはWebサイト上に動きを加えるだけではなく、**サーバサイドの開発にも使用することができる**ようになりました。

 また*AndroidやIOSで使用するアプリケーションの開発も可能*です。JavaScriptを使ったアプリケーションの開発環境として「React Native」「Appcelerator」「Monaca」「Titanium」などがあげられます。

上記の他JavaScriptは*ゲームの開発にも使用することができるプログラミング言語*です。

## Javascriptのメリットとデメリット

ここまでJavaScriptとはどういうものかやJavaScriptを使用してできることについて解説してきました。ここからは*JavaScriptを使用する上で知っておきたいメリットとデメリットについて紹介*していきます。

まずは*JavaScriptのメリットについて紹介*しましょう。JavaScriptのメリットとして大きく「環境構築が必要ない」・「フロントエンド開発とバックエンド開発どちらとも可能」・「フレームワークが豊富」の3つがあげられます。

プログラミング言語を利用するには環境構築を必要とする場合がほとんどでしょう。ですがJavaScriptに関しては、環境構築が不要です。つまり*JavaScriptはブラウザさえあれば実行することができる*のです。

環境構築が不要な理由として、ブラウザにJavaScriptの実行環境が搭載されていることがあげられます。JavaScriptは「Internet Explorer」「Microsoft Edge」「Google Chrome」「Firefox」「Safari」など、ほとんどのブラウザで実行可能です。

**2.フロントエンド開発とバックエンド開発どちらとも可能**

JavaScriptはもともとフロントエンド開発の言語として利用されてきました。しかし「Node.js」の登場によりサーバー側の開発も可能となったのです。

*JavaScriptというプログラミング言語ひとつで、フロントエンドからバックエンドまで開発をおこなうことができます。*

フレームワークとはアプリケーションを開発する際に、土台として機能させるソフトウェアのことを指します。つまりさまざまなプログラミング言語に用意されているアプリケーションの雛形ともいえるでしょう。

フレームワークを利用することで時間を短縮し、効率よく開発を進めることができます。JavaScriptは多くの開発で利用されてきたため、*さまざまな用途に応じたフレームワークを有しています。*

次いで*JavaScriptのデメリットについて紹介*しましょう。JavaScriptのデメリットとして「ブラウザによって動作が変わる可能性がある」・「処理速度が他の言語と比較して遅い」の2つがあげられます。

**1.ブラウザによって動作が変わる可能性がある**

JavaScriptはブラウザ上で動作するプログラミング言語であるため「Internet Exploler」「Microsoft Edge」「Google Chrome」など、*使用しているブラウザによって動作や挙動が変化する可能性があります。*

ブラウザ上の動作にはJavaScriptのバージョンやブラウザの種類・バージョンが関係してきます。異なるブラウザ上で同様の動作になるようにするためには、ブラウザの種類やバージョンなどに配慮してプログラミングのコーディング作業をおこなわなければなりません。

それぞれのブラウザで同じように動かすには、コーディング作業の他にテストも実施する必要があります。その分工数や時間を有してしまうこともJavaScript使用時のデメリットになるでしょう。

**2.処理速度が他の言語と比較して遅い**

JavaScriptを使用して行われたプログラミングの実行には「解析」「解釈」「変換」というプロセスが必要になります。そのため*処理スピードが他のプログラミング言語と比べ遅い*傾向にあります。

処理速度が遅いことに対する工夫として、機能を必要最小限にすることやコードの量を少なくすることあげられます。またJavaScriptを読み込むタイミングを変更するのも、ひとつの方法です。

## 他にはない特徴をもったJavaScript

JavaScriptとはどういうものかやJavaScriptを使用してできること・JavaScriptのメリットやデメリットについて解説してきました。

JavaScriptは*Webサイトに動きを加えられるという他にはない特徴をもったプログラミング言語*です。ですがWebサイトだけでなくアプリケーションの開発などさまざまな場面で使用されています。そのため**JavaScriptの需要は今後も高まっていく**でしょう。

また*JavaScriptを習得することで可能な業務や就ける仕事が増え、エンジニアとしてのキャリアアップが期待できます。*JavaScriptというプログラミング言語に興味がある場合は、実際に学んでみると良いでしょう。

JavaScriptの入門！その概要や文法の基礎について解説！

JavaScriptは、Webサイトに動きを加えるプログラミング言語であり、フロントエンドとバックエンド両方に対応しているため、幅広い場面で使用されています。当記事では、JavaScriptの特徴やメリット・デメリットなどを解説します。

JavaScriptはWebサイトに動きを加えることができるプログラミング言語である

JavaScriptは環境構築不要でフロントエンド開発からバックエンド開発まで行える

JavaScriptはブラウザによって動作や挙動が異なる可能性がある

JavaScriptとは？その特徴やメリット・デメリットを解説！

## HTML、JavaScript、Javaのおさらい

*Web開発で挙げられる言語に、HTML・JavaScript・Javaがあります*が、これらの間にはどのような関係性があるのかご存知でしょうか。HTMLとJavaScriptに関しては、馴染みのある方もいらっしゃると思いますが、Javaはどうでしょうか。

この記事では、**HTMLをベースにJavaScriptやJavaをどのように連携させていくかを説明していきます**。関係性を見ていく前に、まずは上記3つの言語について基礎をおさらいしていきましょう。

HTMLとは、Webページを作成するために開発された言語です。*通常のプログラミング言語と異なり、文章構造や視覚表現を記述することのできるマークアップ言語*です。世の中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことが可能となっています。2014年にリリースされたHTML5が今でも最新バージョンとなっており、動画や音声の埋め込みが容易になりました。

HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼ぶことによって動的なコンテンツを実装することも可能です。**HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものということができます**。

HTMLとは？今さら人に聞けないその概略や役割を解説！

JavaScriptは、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。主にWebサイト上に動きを付ける目的で利用されています。*記述内容が似ているもののJavaとは別物の言語であり、用途や目的も大きく異なります*。

JavaScriptの特長はブラウザ上で動作させることが可能な点であり、ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせた動作などを手軽に行うことができます。最近では、大規模なWeb開発はVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。

JavaScriptとは？人気のJavaScriptを5分で学ぶ

Javaは、Java仮想マシン（JVM）と呼ばれる実行環境で動作するプログラミング言語です。オペレーティングシステムやハードウェアに依存しないことから、高い汎用性を持っており、*Web開発だけでなくシステム開発やアプリケーション開発にも利用されます*。幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高くなっています。

Web開発でJavaを採用することで、HTMLでは実現できなかった複雑なWebアプリケーションを設計することが可能です。例えば、業務システム・オンラインストレージなどのWebサービス・ショッピングサイトの開発にも利用されています。

Javaとは？人気プログラミング言語Javaの将来性やメリットについて解説

上記でそれぞれの言語の役割と関係性を説明してきました。ここからは、*Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明していきます*。まずはJavaScriptを動かす方法を紹介します。方法としては2通りしかありません。

HTML上でJavaScriptを呼び出す最も一般的な方法は、**外部ファイルから呼び出す方法**です。具体的な記述方法は下記の通りです。

この記述により、test.jsという名前のJavaScriptプログラムを呼び出して実行することができます。

```<script type="text/javascript" src="test.js"></script>```

type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5では、記述無しは自動的にJavaScriptとして認識してくれることから不要となっています。

もう1つの方法として、**HTMLに直接JavaScriptを記述する方法**があります。これはインラインスクリプトと呼ばれ、あまり使用されてはいませんが、外部ファイルでJavaScriptを定義しなくともプログラムを動かすことが可能です。下記のような記述となります。

``` <script>  　
～JavaScriptのコードを記述～
</script>```

外部ファイルから呼び出すときと同様に、HTML5ではtype="text/javascript"は省略することができます。

次にHTML上でJavaを動かす方法を紹介していきます。多くの動的WebページはJavaScriptのみの使用で十分ではありますが、*高負荷でもパフォーマンスを発揮できる処理を実装したい時に活用できるでしょう*。

*サーブレットとは、Javaによって記述されたWebコンテンツを生成するためのプログラムです*。例えば、サーブレットによって記述に応じたHTMLを生成し、動的なWebページをブラウザ上に表示することができます。このサーブレットはTomcatなどのWebコンテナ上で実行することができます。Tomcatとはオープンソースソフトウェアであり、Webアプリケーションサーバーの1つです。

**HTMLでこのサーブレットを呼び出すことはJavaを呼び出すことと同義です**。HTML上で呼び出す方法としては、シンプルにhrefを使うことが挙げられます。

例えば、サーブレットのリンク先を/servlet/test/としてtest.javaがサーブレットの本体とすれば、

```<a href="/Servlet/test">サーブレットリンク先</a>```

という記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。

別の方法としては\<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、

```<form acrion="/Servlet/test" method="get">～フォーム内容～</form>```

となり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行うWebアプリケーションを作ることができます。

HTML上でJavaを呼ぶもう1つの方法として、*HTML内にJavaを埋め込むJSP*があります。この場合は、呼び出すというよりも前述したインラインスクリプトに近い形になります。JSPの記述例としては下記となっています。

```<%@ page contentType="text/html;charset=（文字コード名）" %>
<% out.print("テスト"); %>
現在時刻は<%= nowTime %>です```

1つ目の<%@ではHTMLでJSPを利用するための決まり事であり、ページの種別や使用する文字コードを決めています。

2つ目の<%がJavaの記述であるかどうかを決めている箇所であり、この中にコードを記述していく形になります。

3つ目の<%=ではHTMLの表示文字列の中にJavaによって得られた文字列を表示することが可能です。文字列を出力するメソッドを入力する手間が省けているため、簡潔な表現が可能です。ちなみに、上記例ではJavaの日付時刻データを管理するクラスにあるクラス変数を呼び出しています。

このように**JSPではHTML内においてもJavaの記述を最小限にすることができますので、簡潔なコードを記述することができます**。

## Webアプリケーション開発で活躍するJava

サーブレットやJSPがあるように、JavaはWebアプリケーション開発の分野で非常に活躍しています。そのため、近年、より進化した開発ツールが登場しています。

*JSF（JavaServer Faces）は、Java EEという企業向けのJava開発プラットフォームで提供されているフレームワークの1つです*。ユーザーインターフェースの作成に特化したコンポーネントベースのフレームワークとなっています。JSFでは、**JSPで欠点でもあるHTMLとJavaの混在によるコードの見辛さを改善する形となっており、デザインと処理を分けて実装したいというユーザーのための存在**と言えます。

JSFではJSPでのHTMLはXHTMLとなり、Javaで記述していた処理はJavaBeansで置き換えられることとなります。

Spring Bootは、Javaを使ったWebアプリケーション開発のためのフレームワークです。もともとSpring Frameworkというフレームワークがあり、機能の使い分けが困難であるという欠点を克服するために作られたものがSpring Bootとなっています。*XML設定を不要化、アノテーションによるコード削減、ひな形の生成機能などWebアプリケーションの開発を手軽に行えるような工夫がなされています*。

ここにThymeleafと呼ばれるHTMLに対応したテンプレートエンジンを組み合わせれば、**JSPで行っていたJavaの埋め込みを行わなくとも処理を記述することができ、HTMLエディタの互換性を保つことが可能です**。

## それぞれの役割を理解して使いこなそう

Web開発において、HTMLだけではできないことを行うためにJavaScriptやJavaと連携は必要不可欠です。Webサイトに関して言えば、たいていはJavaScriptのみで対応はできるでしょう。

しかし、*より高度なWebアプリケーションとの連携を考えるとJavaも必要になってきます*。本記事に書いたように連携の方法は様々です。目的に合った方法をとっていくとよいでしょう。

Web開発において最も普及しているHTMLは、それ自体では動的なページを作ることができません。そこで登場するのが、JavaScriptやJavaです。本記事ではHTML上でこの2つの言語を使いこなす方法を紹介していきます。

HTML上でJavaScriptを呼び出す方法としては、外部ファイルから呼び出す方法とHTML上に直書きする方法がある

HTML上でJavaを呼び出す方法としては、サーブレット格納先のリンクを用意したり、JSPでHTMLに直接記述したりする方法がある

JavaのWeb開発ツールは日々進化しており、最近ではJSFやThymeleafなどが使われている

HTMLからJavaを動かせる？JavaScriptを動かす方法も解説

**Microsoft社は2021年11月17日（米国時間）に、オープンソース・プログラミング言語「TypeScript」の最新版、「TypeScript 4.5」**を公開しました。

TypeScript 4.5では「Awaited」型の導入を初めとして、数多くの新しい機能追加、改善などがあり、プログラミングの生産性向上、パフォーマンス向上などのメリットがあります。

TypeScriptは「JavaScript」をベースとするオープンソース・プログラミング言語で、JavaScriptとは互換性を持ち、大規模開発にも適しています。

*TypeScriptはJavaScriptのスーパーセット（上位互換）*の位置づけにありますが、知名度ではまだJavaScriptに後れを取っています。

では、両者は何が違うのか、TypeScriptはどんなメリットを持っているのか、TypeScriptはJavaScriptに置き換わるのかなど、「TypeScriptの超入門編」として解説をしていきます。

*【参考】：[Announcing TypeScript 4.5](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/)*

**「TypeScript」は大規模開発向けに開発された「JavaScript」のスーパーセットです。**

JavaScriptは1995年に誕生しましたが、もともと大規模開発には向いておらず、Webアプリケーション開発が活発になるにつれて、その弱点が顕在化し始めました。

何度もその対応を迫られましたが、ベンダー同士のコンセンサスには至らず、ここで「JavaScript」の進化が止まってしまったのです。

一方で、JavaScriptのコミュニティでは、その解決策が模索され続け、*Microsoft社から2012年に「TypeScript」が発表されました*。

TypeScriptはJavaScriptのスーパーセットとして、「モジュール性」や「型」などの特徴を備えて登場し、特に大規模開発で活用されるようになりました。Google社ではTypeScriptを6番目の社内標準言語として採用するなど、大規模開発で活用されています。

TypeScriptとは？JavaScriptとの違いも解説！

TypeScriptのTypeとは「型」のことです。言ってみれば**TypeScriptは「型」が付いた「JavaScript」**です。

プログラミングでは型があることのメリットが大きいため、AltJS（代替JavaScript言語）の代表格としてTypeScriptの人気が高まっています。

TypeScriptで書かれたコードはJavaScriptにコンパイルされて動作するため、*JavaScriptが実行できるOSやブラウザであれば、TypeScriptは問題なく利用可能です*。続いて、TypeScriptの特徴を列挙してみましょう。

**TypeScriptはJavaScriptに型（Type）が追加されたスーパーセット（上位互換）**であるため、JavaScriptでも静的型付けを使いたい場合に代替することが可能です。

*▪実行時のエラーが起きにくい*

TypeScriptはタイプセーフです。 型があることでコンパイル時にエラーが分かり、実行時のエラーを回避できます。

*▪型推論により型を自動決定*

TypeScriptには型推論があるため、すべてに型指定をする必要がなく、*プログラマのコーディング作業を軽減できます*。

オープンソースであることから、元の実装を確認することができ、TypeScript側に問題と思われる箇所があるようであれば、自らプルリクエストを出したり、issueを立てることが出来ます。
また、TypeScriptはMicrosoft社が開発したオープンソース言語であるため、品質に対する信頼性は高いと思われます。

### 「TypeScript」と「JavaScript」の違い

TypeScriptはJavaScriptの進化系のプログラミング言語です。その進化した部分が両者の違いです。では、TypeScriptは何が進化したのかを見ていきましょう。

JavaScriptは実行時にデータ型が自動で決められます。これを動的型付けと言い、コーディングが手軽に行える反面、実行をしてみないとエラーが見つからないという弱点があります。

一方、TypeScriptは*静的型付けを採用*しており、変数のデータ型をあらかじめ決めておけるため、コンパイル時にエラーを判別でき、コードが読みやすいことから大規模開発に向いています。

*▪TypeScriptはJavaScriptの構文が使える*

TypeScriptはJavaScriptの上位互換であるため、JavaScriptの構文が使え、JavaScriptのライブラリやフレームワークも利用可能です。

## 「TypeScript」のメリットとデメリット

TypeScriptの特徴を挙げましたが、この特徴によって導き出されるメリット・デメリット、それぞれを確認しておきましょう。

最初にTypeScriptのメリットを見ていきましょう。

TypeScriptで型定義をすることで、定義された関数がどういった型のデータを必要としていて、どういった型のデータを返すのかが一目瞭然となります。クラスが作成できるため、JavaScriptと比べてコードの記述を大幅に簡略化できます。この結果、**コードは短く読みやすくなり、既存のコードを読み込む時間が減りコーディングの負荷や無駄を軽減できます**。

*▪「JavaScript」との互換性が高い*

TypeScriptはJavaScriptとの互換性が高いため、JavaScriptのライブラリやフレームワークを活用できる他、JavaScriptエンジニアを短期間でTypeScriptエンジニアとして戦力化できるのも強みです。

TypeScriptは静的型付け言語のため、あらかじめ変数の型を宣言できることから、コンパイル時点でエラーを排除できます。そのためJavaScriptのような実行時エラーが起きにくいのです。

*▪Visual Studio が強力にサポート*

「Visual Studio」や「Visual Studio Code」などのエディタは、TypeScriptの入力支援機能をサポートしており、開発効率が格段に向上します。

TypeScriptはJavaScriptの進化系でもあり、JavaScriptと比較してデメリットは少ないです。しかし、強いてあげるならば以下が数少ないデメリットと言えます。

*▪「JavaScript」エンジニアも学習が必要*

JavaScriptが扱えるエンジニアでも、**TypeScriptでの書き方自体を覚えるのはもちろんのこと、データ型の定義の仕方などのJavaScriptにはない機能を新たに覚える必要**があります。その学習ハードルは決して高くはありませんが、TypeScriptの学習が必要な点はデメリットと言えるでしょう。

## 「JavaScript」ではなく「TypeScript」をすすめる理由

Webアプリケーションのフロントエンド開発では、HTMLとCSSに加えて、JavaScriptを習得しておけば、フロントエンジニアとして不足はないはずです。中には、折角JavaScriptを学んだのに、さらにTypeScriptを覚えるのは面倒だと考えるエンジニアがいるかもしれません。それでも皆さんにTypeScriptをおすすめするのは、**TypeScriptが大規模開発に適した言語であること、需要が急増し、将来性が高いため**です。

**TypeScriptとJavaScriptを求人数で比較**してみましょう。

*     言語               求人数*　　　　　
*「TypeScript」    373件*
*「JavaScript」    1,715件*　

上記の通りまだまだJavaScriptの求人数には劣るものの、JavaScriptは最低限のスキルとして求められている中、TypeScriptでの開発を指定したフロントエンドエンジニア求人は徐々に増えています。

*【参考】：[マイナビAGENT（TypeScriptエンジニア ）](https://mynavi-agent.jp/jobsearch/job1_01/kw_TypeScript/result.php)*
*【参考】：[マイナビAGENT（JavaScriptエンジニア）](https://mynavi-agent.jp/jobsearch/job1_01/kw_JavaScript/result.php)*

TypeScriptはMicrosoftが開発した言語ですが、次第に評価が高まり、Microsoft社以外にもGoogleやBMW、VMWare社のWebページはTypeScriptで構築されるなど、フロントエンドの標準言語になりつつあります。

実際に、TypeScriptを利用したエンジニアの92%が満足しているという調査結果もあり、エンジニアの間でも既に高い評価を得ています。今回のMicrosoft社による**「TypeScript 4.5」のリリースによって、その人気や需要はさらに高まるでしょう**。

これを機にJavaScriptエンジニアの皆さん、フロントエンドエンジニアを目指す皆さんはぜひ「TypeScript」を習得してみてください。

*【参考】：[ビルドツール - State of JS 2020](https://2020.stateofjs.com/ja-JP/technologies/build-tools/)*

TypeScriptのおすすめ本をレベル別に紹介！学習方法も解説

TypeScript入門編として利用する際に覚えておくポイント

米Microsoftがリリースした「TypeScript 4.5」は今後、フロントエンドの標準プログラム言語として定着していくでしょう。フロントエンド・エンジニアを目指す皆さんはこの機にTypeScriptに関心を持ち、ぜひその習得に努めてみてください。

「TypeScript4.5」では「Awaited」型導入を初めとして、数多くの新しい機能追加、改善が見られる

「TypeScript」は「JavaScript」のスーパーセット（上位互換）であり、大規模開発に向いている

「TypeScript」の需要や人気は急速に高まっており、この習得はフロントエンジニアにとっても大きな強みとなる

TypeScript 4.5はJavaScriptに置き換わる？

*React Nativeとは、クロスプラットフォームのアプリケーション開発用フレームワーク*の1つです。ここではReact Nativeの概要や将来性について紹介します。

JavaScriptの記事（1ページ目）