どうも、三町哲平です。

Ruby on RailsでWebアプリを開発中なのですが、どんなプログラミング言語やフレームワークを使っていてもJavaScriptが絡んできます。

正直な話、HTMLやCSSは分からない部分はその都度調べていけば、よっぽど手の込んだアプリケーションではない限りは素人でもそれなりのクオリティに仕上げれるという感覚があるのですが、JavaScriptが予想以上の難敵なんですよね。

しかも調べていくうちにどうも、フロントエンドだけではなくバックエンドでも使えるらしいじゃないですか...てことは、JavaScriptが最強なのでは...!?という疑問から色々とJavaScriptに調べてみましたので、少しばかりお付き合い下さい...。

では、どうぞ！

JavaScript

> 一番身近なのは、Webサイトを表示するブラウザ上で動くプログラム（クライアントサイド・スクリプト）です。無くてもWebサイトは見ることはできますが、文章や写真をそのまま読むだけで、いろいろな操作ができません。これだと、とても不便ですね。そこで、JavaScriptというプログラミング言語を動かすことで、ブラウザ上で画像を拡大表示して見やすくしたり、入力フォームを設置してメッセージを送付できます。

引用元：JavaScript初心者でもすぐわかる！DOMとは何か？

DOM

JavaScriptでhtmlの要素を操作するための仕組みのことだ。
JavaScriptを扱っていく上で、絶対に知らないといけない仕組みのひとつだろう。
このページではDOMの仕組みと使い方について初心者の方でもわかるように解説した。

引用元：JavaScript初心者でもすぐわかる！DOMとは何か？

Ajax

「Asynchronous JavaScript + XML」の略
Asynchronousとは、非同時性の、非同期の
つまり、「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。」

引用元：初心者目線でAjaxの説明 - Qiita

ライブラリ

jQuery

> JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。 jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。

引用元：今さら聞けない！jQueryとは【初心者向け】 | TechAcademyマガジン

React.js

> Reactとは一言で言うとUIを作るためのJavaScript用ライブラリです。Facebookが開発元でFacebook、Yahoo、ATOM、Airbnbなど、名だたる有名な企業で採用されています。

引用元：【Reactとは？】その特徴から将来性まで徹底解説！ | Geekly Media

Riot.js

> React.jsのようなJavascriptの軽量UIライブラリです。カスタムタグにHTML、JS、CSSなどを記述して、それらを組み合わせてページを作成する事が出来ます。

引用元：Riot.jsの使い方について - Qiita

JavaScriptフレームワーク

Bootstrap

> スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。

引用元：とほほのBootstrap 4入門 - はじめに - とほほのWWW入門

Vue.js

> クライアントサイドで使われるJavaScriptのフレームワークです。クライアントサイドとは、Webサーバーにアクセスして得られた結果をブラウザで表示する部分のことです。それに対し、サーバサイドの言語は、ブラウザに結果を渡すためにサーバ内の処理を行う部分のことです。サーバサイドはユーザーからは見えません。 Vue.jsはクライアントサイド、つまり画面に表示される要素をリッチに表現するためのフレームワークです。日本だと、LINEやnote、Rettyなど様々なサービスでVue.jsが使われています。

引用元：jQuery代わりになる？JavaScriptのフレームワーク！Vue.jsってどんなことができるの？

Angular

> Googleによって開発されているJavaScriptフレームワークです。非常に人気があり、WEBアプリケーションの開発では、Reactなどと並び、最も使われているJavaScriptフレームワークの一つです。

引用元：【初心者必見】Angularとは？いまさら聞けない基礎を学ぼう | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

Backbone.js

> JavaScriptの基本的な学習を一通り学んだあとで最初に触れるフレームワークとしては最適です。特殊な概念やアーキテクチャーなどを新しく勉強する必要はなく、基本的な構文やオブジェクトの知識があれば誰でも手軽に利用できます。ただし、日本語の情報が少なく公式サイトを見てもどこから学習すればいいのか困る人も少なくありません。

引用元：JavaScript初心者でも理解！Backbone.jsの基本チュートリアル | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

サーバーサイドライブラリ

Node.js

> サーバーサイドのJavaScript実行環境です。 Node.jsはJavaScriptを使用して処理しています。したがって、Node.jsを操作する上で使用する言語はJavaScriptです。ただし、フロントエンドのJavaScriptではなく、サーバーサイドのJavaScriptです。

引用元：リアルタイム通信で活用！「Node.js」とは【初心者向け】 | TechAcademyマガジン

Webpack

> Node.jsでサーバーサイドで動かすモジュールバンドラーツールになります。 Node.jsでモジュールという単語を聞くと、「npmやbowerとかと何が違うの？」みたいな印象を持たれる方もいるかもしれませんが、基本的にはそれらとはまた違った役割をもっています。 npmやbowerはJSライブラリのバージョン管理などの目的としてよく利用されますが、WebpackはJSファイルのコーディングの部分で開発者の手助けをしてくれるのです。

引用元：Webpackってどんなもの？ - Qiita

Webpacker

Railsのgemの1つです。
webpackは色々な設定ができる分、学習コストがやや高いのが難点ですがwebpackerはwebpackの中身を良く知らなくても、良い感じにwebpackを動かしてくれる優れものです。
webpackerはWebアプリケーションで一般的に良く使われるメジャーな設定を、標準で実装してくれるwebpackのラッパーです。

引用元：webpack学習の基本のき |

Vanilla JS

単にJavaScriptのことです。ネイティブのJavaScript。
Pure JSと言ったりもします。
Vanilla JSは、JavaScriptだけでいろいろできるのにフレームワークありきで考える風潮を皮肉ったジョークフレームワークです。

引用元：Vanilla JSはジョークフレームワーク。普通のJSのこと。 - Qiita

JavaScriptパッケージマネージャー

npm

> npmの正式名称は、Node Package Managerです。 npmの正式名称からも解るように、Node.jsのパッケージ（Package ）を管理する（Manager）ツールです。

引用元：便利なパッケージ管理ツール！npmとは【初心者向け】 | TechAcademyマガジン

Yarn

JavaScriptのパッケージマネージャ

2016年にFaceBookが公開した
npmと互換性がある = 同じpackage.jsonが使える

引用元：yarnとは - Qiita

Bower

Twitter社が作ったフロントエンド用のパッケージマネージャで、必要なライブラリを簡単にインストールすることができます。

引用元：Bower（フロントエンド用パッケージマネージャー）の導入方法と使い方 | 株式会社LIG

Alternative JavaScript

AltJS とは、JavaScript の代わりとなる言語の総称です。
その言語で書いたものを JavaScript に変換して使用します。
なぜ、そんな面倒くさいことをするのか、JavaScript がある定常以上の規模となると、下記の理由から実装・保守の効率が非常に悪くなります。

型の定義がないので、意図しない値が入ることがある。
null safety でないので、意図しない null や undefined が入ることがある。
オブジェクト指向言語だが、インターフェースやクラス定義がなく、プロパティ名を間違っていても実行時までエラーにならず、エラーになっても原因の解析に時間がかかることが多い。
型やインターフェース、クラス定義がないので、エディタによる入力補完があまり受けられない。

引用元：TypeScript の概要 - Qiita

TypeScript

> マイクロソフトが開発したオープンソース言語で、一言で言うと、「型定義できるJavaScript」。他の Alt JavaScript と比べて後発ながら人気が高く、Google の6番目の社内標準言語としても採用されました。 AltJS としては、Coffee Script が牽引してきましたが、最近では TypeScript に取って代わられた感じがあります。

引用元：TypeScript の概要 - Qiita

CoffeeScript

> →JavaScriptのコードを生成するためのコンパクトなrubyライクなスクリプト言語 →安全で、高性能なJavaScriptのコードを自動的に作成できる！ →Javascriptと比べて2分の1から3分の1の量で記述可 →自動でコンパイルする手段は幾つもあるので手間は増えない →jQueyとの組み合わせ可能

引用元：CoffeeScriptとはなんぞや？ - Qiita

Opal

> OpalはRubyのコードをJavaScriptに変換するコンパイラです。Opalを使うと、Rubyのプログラムをブラウザ上で動かすことができます。

引用元：Opalとは(2018年版) - Qiita

その他

gulp

> Node.jsをベースとしたタスクランナーの一つです。タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、作業の効率化に使われています。引用元：[【たった５分で完了】「gulp」の導入方法と使用例を紹介します。](https://digitalidentity.co.jp/blog/creative/gulp.html)

GRUNT

Node.js上で動作するオープンソースのタスクランナーです。主にWeb開発に関わるタスクを自動化するために使われています。それぞれのタスクはプラグインとして開発されており、「ファイルの圧縮/minify(ミニファイ)」「コンパイル」「画像圧縮」などを自動化できます。設定ファイルを記述することで、どのようなプロジェクトにも柔軟に対応可能です。
引用元：GruntでWeb開発を便利に！タスクランナーで手作業を自動化する | tracpath:Works

Popper.js

> マウスを載せた際などに表示されるポップオーバー。ユーザの好きなタイミングで（多くは困った時に）表示してくれるので便利なツールです。 Popper.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

引用元：Popper.js - 便利なポップオーバーライブラリ MOONGIFT

さいごに

JavaScriptの歴史を学ぼう

上記みたいなJavaScriptに関連した用語の概要を掴んだ上で、下記リンクのページで歴史を見てみるととても読みやすい記事なので、時間がある方はぜひ！

Ruby on Railsで開発したい方

Railsを使う上で、Yarn、jQuery、Bootstrapなどの利用方法の基礎的な部分が分かりやすく書かれています。オススメです。

【Rails入門】YarnでjQueryとBootstrapを使うには！？ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト