JavaScriptを使った便利ツール

# はじめに
自身のオリジナルアプリの作成により、JavaScriptを取り入れることで、「高機能なWebページ」を実装できることができました。
今回は、JavaScriptの「ライブラリ」と呼ばれる便利ツールのようなものを紹介したいと思います。
あくまで紹介のみですので、詳細や環境構築の説明は行いません。
実際の開発現場でよく使用するライブラリが中心であるため、今後開発を進める上での自身の備忘録としてここに記します。

私は初学者のため、間違いがございましたらお手数ですがご指摘いただけますと幸いです。

#jQuery （ジェークエリー）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939773/3bc64b27-db70-9837-8025-d7b3d324b17b.png)

https://jquery.com/

現在は下火傾向になるようですが、手軽に扱えることから今でも十分根強い人気があります。

## 特徴

### ① HTMLの取得 & 追加削除がしやすい
DOM操作（HTMLの取得や追加削除など）が容易で、コードを短く、かつ簡単に書くことができます。

### ② Ajax処理の記述が簡単にできる
文字通りです。
Ajax（エイジャックス）という非同期通信技術の一つを用いるのですが、JavaScriptだけでサーバー通信を行い、
Ajax処理を容易に実行できるように設計されています。

### ③ プラグインが豊富でさまざまな拡張が可能
プラグインすることにより、さまざまな処理や効果に対応できるようになります。
たくさんあるため、プラグインを導入すれば、自分が欲しい処理や効果を簡単に生み出すことができます。
無料で手に入るものもあるので、下記を参考にしてみてください。

**【参考】**

https://www.sejuku.net/blog/104046

### ④ ブラウザの影響を受けない
JavaScriptは各ブラウザに搭載されたプログラムによって実行されます。
ChromeやSafari、FireFoxなどで、それぞれ微妙に対応可能なメソッドが異なります。
jQueryはブラウザ毎の記述の差異を自動的に吸収してくれるため、ブラウザの違いを意識せずプログラミングできます。

# Node.js （ノード ・ ジェーエス）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939773/26077720-08ca-24d6-7fbf-3e19d40763b8.png)

https://nodejs.org/ja/

JavaScriptをサーバーサイドで動作させることができるプラットフォームです。
主に、リアルタイムで反応が必要なチャットアプリケーションの開発によく用いられています。

## 特徴

### ① 接続を大量に処理できる
イベント駆動型で、前の処理の完了を待たずに次の処理を開始します。
そのため、大量の同時接続が発生した場合でも処理を行うことが可能です。

### ② 小規模な計算が速い
JavaScript実行エンジンである**「GoogleV8JavaScriptEngine」**を採用しています。
そのため、非常に高速な動作が可能になり、小規模な計算であれば計算速度も速いです。

### ③ リアルタイムの処理が速い
シングルスレッドを採用しており、多くの接続があってもリアルタイムでレスポンスを返せるという特徴があります。
そのため、リアルタイムで動作するアプリケーションでの利用に適していると言えます。

### ④ Webサーバーが軽量
Node.jsは非常に軽量な設計になっているため、複数の人が利用していても動作が重たくなることがありません。
そのため、チャットなどのサーバーであればNode.jsを利用すれば簡単に構築可能です。

# TypeScript （タイプスクリプト）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939773/40d83a0f-6546-9e77-b0d7-c57342d87dec.png)

https://www.typescriptlang.org/

マイクロソフト社によって開発された、オープンソースのプログラミング言語になります。
Googleが開発するライブラリ（後述するAngular）にも導入されており、将来性がある言語の一つといえます。

## 特徴

### ① JavaScriptで型の定義ができる

```javascript
let color: string = "gray"

function log(message: string){
  console.log(message)
}
```
上記のような型を定義できる言語を静的型付け言語と言います。
ちなみに、Rubyや通常のavaScriptは動的型付け言語になります。
動的型付け言語は型を定義しなくて良いので、プログラムを記述するのは簡単ですが、エラーを起こす可能性もあります。
一方で、静的型付け言語は型を宣言して開発を行うので、事前に起こり得るエラーに対応できるというメリットがあります。

### ② JavaScriptとの互換性が高い
他のAltJS同様に、記述したコードをコンパイルするとJavaScriptのコードに変換され、ライブラリ群を含め100%の互換性を持っています。
TypeScriptで拡張された機能は、コンパイラを通すことでJavaScriptのコードに変換されます。
現行のJavaScriptで記述されたプログラムはすべて、TypeScriptのプログラムとして実行が可能です。

# React （リアクト）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939773/ff07fee6-6789-f26e-51a5-10fcb9990fdc.png)

https://ja.reactjs.org/

Facebookが開発をしたライブラリです。仮想DOMの概念によって、より早い高速なアプリケーション実装が実現できます。
また、AndroidやiOSのネイティブアプリケーション開発に、Reactを用いるフレームワークであるReact Nativeを使用することができます。
柔軟性も高いことから、最近大きく人気が増しています。

# Vue.js （ビュー・ジェーエス）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939773/4074a53c-2f50-8f32-7484-8ea7a03b948c.png)

https://jp.vuejs.org/index.html

近年JavaScriptのライブラリとして取り入れる現場が増えている人気のライブラリです。
Reactと同様に仮想DOMの概念があり、冗長な記述を減らして、HTMLやCSSを中心にしたWebアプリ開発が可能です。

# Angular （アンギュラー）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939773/917c79b3-c2f5-1eb4-937c-a1e4797c0291.png)

https://angular.io/

Google等が開発したライブラリです。
Angular自体もライブラリですが、さらにAngular内にも標準で多数のライブラリが用意されています。
したがって、外部の機能を使わずとも、公式の機能のみで十分な開発を行うことができます。
その機能の多さからAngularはフルスタックなライブラリと言われています。
また、Angularは推奨言語にJavaScriptではなく、TypeScriptを採用していることも特徴です。
過去にはAngularJSと呼ばれていましたが、大幅なアップデートを経てAngularと呼ばれるようになりました。

# おわりに
JavaScriptには、開発の目的に沿ってライブラリがいくつも存在することがわかりました。
そして、モダンな開発手法として、コンポーネント指向を取り入れているケースが多い傾向があることも理解しました。
特に仮想DOMの概念によって、より高速なアプリケーションが実現した背景があるからこそ、現在の形になっているのだと思いました。

# 参考

https://www.acrovision.jp/career/?p=2764

https://www.fenet.jp/infla/column/network/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89javascript%E3%80%8Cnode-js%E3%80%8D%E3%81%AE%E7%89%B9%E5%BE%B45%E3%81%A4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A7%A3%E8%AA%AC%EF%BC%81/

https://www.pasonatech.co.jp/workstyle/column/detail.html?p=2761#:~:text=%E3%81%A4%E3%81%A8%E3%81%84%E3%81%88%E3%81%BE%E3%81%99%E3%80%82-,TypeScript%E3%81%AE%E7%89%B9%E5%BE%B4,%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%8C%E4%BD%BF%E7%94%A8%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82