こんにちは、高校生ぶりにマッシュショートにしたけどロングヘアが恋しくなり早く伸びて欲しいなと思っている、みもざです。
さて、本題に入りたいと思います。
フロントエンド言語であるJavaScript、実は様々な仲間がいるのは知っていますか？
そこで今回は、
を説明します。
フロントエンドエンジニアを目指している方や、これからJavaScriptを中心に学ぶ方は、この記事を参考にしてくださいね。
目次
フロントエンド言語とは？
フロントエンド言語とは、ユーザーが目にする部分、「見た目」をコーディングするための言語です。
フロントエンド言語には、「HTML」「CSS」「JavaScript」があります。
HTMLでは全体の基本構造を作成し、CSSでは装飾を行い、JavaScriptでは動きを付けます。
今回の記事では、JavaScriptの仲間についてを主に説明していきます。
JavaScriptの仲間は主に２つに分けられる！？
JavaScriptの仲間は、主にJavaScriptのライブラリとJavaScriptのフレームワークの２つに分けられています。
JavaScriptのライブラリ
JavaScriptのライブラリとは、幅広いところで使うことができる複数のプログラムを、何回も使うことができる形でひとまとまりにしたものです。
シンプルに言えば、クラスや関数をまとめた便利な部品がライブラリには用意されていて、その部品を組み合せることによってプログラムを動かすことができるというわけです。
どんな種類のJavaScriptのライブラリがあるかは、後で紹介していきます。
JavaScriptのフレームワーク
JavaScriptのフレームワークのフレームワークは、「枠組み」という意味を持っていて、JavaScriptのフレームワークとは、アプリケーションの枠組みや土台部分のことです。
例えば、服を作成するとき、生地を断裁するために型紙を使うかと思います。ブラウスを作るならブラウス用の型紙、ワンピースを作るならワンピース用の型紙と、作成物が同じまたは似たものであれば何回も同じ型紙を使い回せますよね。
つまり、服を作成するときに使う型紙が、JavaScriptのフレームワークに当たります。なので、JavaScriptのフレームワークを使えば、設計を使い回すことができ効率的にプログラミングができるようになります。
どんな種類のJavaScriptのフレームワークがあるかは、後で紹介していきます。
注目されている！JavaScriptのライブラリとフレームワークの種類
jQuery
jQueryとは、とても有名なJavaScriptのライブラリです。
jQueryの特徴
ブラウザの種類に影響されにくい
普通のJavaScriptでは、ブラウザによって仕様が異なるので、ブラウザごとに考えないといけないのですが、jQueryはブラウザごとによって自動的に調整してくれます。
豊富なプラグインがある
jQueryには、豊富なプラグインがあり、そのプラグインを使って様々な機能を簡単に実装できてしまいます。
簡単に記述できる
JavaScriptではたくさん記述をしますが、jQueryの場合は、数行ほどで記述できます。
jQueryで出来ること
jQueryでは、スライドショーやマウスオーバーで色を変えたり、ハンバーガーメニューなどを実装する事ができます。
また、ユーザー登録などに使う入力フォームで重複チェックや、きちんとしたメールアドレスの形かどうかなどもチェックできる機能を実装する事ができます。
React
Reactとは、Facebookが開発し、UI（ユーザーインターフェース＝ユーザーが使いやすいようにする）の部分に特化したJavaScriptのライブラリです。
Reactの特徴
サクサク動く
Reactには仮想DOMがあり、仮想DOMがあることによって更新するときに必要な部分しか更新されないので高速に動作してくれます。
Componentを使って簡単に実装できる
Componentとは部品という意味で、JavaScriptファイル、関数やクラスを定義し、一度Componentを作ってしまえば使い回しができ簡単に実装ができてしまいます。
Reactで出来ること
Reactでは、特徴を活用してWEBアプリ開発や、React Nativeを使ってモバイルアプリの開発、最近流行っているVR開発まで出来ます。
Node.js
Node.jsとは、サーバー通信専用のJavaScriptのライブラリです。
Node.jsの特徴
メモリの消費量が少ない
イベントループ（＝何か起こったら、順番に処理をしていくのを繰り返すこと）を取り入れているため、CPUを抑える事ができメモリ消費量も少なくなります。
たくさんのデータ処理をする事が出来る
ノンブロッキングI/Oを取り入れているため、処理が終わるのを待たずに次の処理を実行できるのでたくさんのデータの処理が可能になります。
Node.jsで出来ること
Node.jsでは、WEBサーバーの構築はもちろん、リアルタイム通信が出来るため簡単なチャットアプリや、ゲームアプリなどを作る事が出来ます。
AngularJS
AngularJSとは、WEBアプリケーションでよく使われているJavaScriptのフレームワークです。
AngularJSの特徴
HTMLテンプレート機能がある
AngularJSはテンプレートにHTMLを取り入れているので、HTML要素を使えます。
双方向データバインディング機能がある
双方向データバインディングとは、自動的に同期してくれることで、Google MAPにも使われています。
AngularJSで出来ること
AngularJSは、業務システムやデータベース管理システムを開発するのに適しており、WEBページはもちろん決済システムなどのアプリを作成することが出来ます。
Vue.js
Vue.jsとは、AngularJSと比べるとシンプルで自由度が高くとても扱いやすいJavaScriptのフレームワークです。
Vue.jsの特徴
組み合わせ自由
先述したように、Vue.jsは自由度が高いので他のフレームワークとも組み合わせることができます。
学習コストが低い
フレームワークの規模が小さいので、覚えることが少なく他のフレームワークと比較すると学習しやすいです。
Vue.jsで出来ること
Vue.jsでは、チャットアプリをはじめ、検索機能やソート機能、メールアプリなどを作ることが出来ます。
まとめ
いかがでしたか？今回は、
紹介させていただきました。
通常のJavaScriptだけでなく、様々な種類のJavaScriptやそれぞれの特徴や出来ることが少しは知れたかと思います。
ぜひ、自分の得意なJavaScriptの種類を見つけて開発を楽しんでくださいね。
この記事がJavaScriptのライブラリやフレームワークについて知りたい方や、JavaScript全体を知りたい方に参考になれば幸いです。
