どうも、三町哲平です。
Ruby on RailsでWebアプリを開発中なのですが、どんなプログラミング言語やフレームワークを使っていてもJavaScriptが絡んできます。
正直な話、HTMLやCSSは分からない部分はその都度調べていけば、よっぽど手の込んだアプリケーションではない限りは素人でもそれなりのクオリティに仕上げれるという感覚があるのですが、JavaScriptが予想以上の難敵なんですよね。
しかも調べていくうちにどうも、フロントエンドだけではなくバックエンドでも使えるらしいじゃないですか...てことは、JavaScriptが最強なのでは...!?という疑問から色々とJavaScriptに調べてみましたので、少しばかりお付き合い下さい...。
では、どうぞ!
JavaScript

引用元:JavaScript初心者でもすぐわかる!DOMとは何か?
DOM
JavaScriptでhtmlの要素を操作するための仕組みのことだ。
JavaScriptを扱っていく上で、絶対に知らないといけない仕組みのひとつだろう。
このページではDOMの仕組みと使い方について初心者の方でもわかるように解説した。
引用元:JavaScript初心者でもすぐわかる!DOMとは何か?
Ajax
「Asynchronous JavaScript + XML」の略
Asynchronousとは、非同時性の、非同期の
つまり、「JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。」
ライブラリ
jQuery

引用元:今さら聞けない!jQueryとは【初心者向け】 | TechAcademyマガジン
React.js

引用元:【Reactとは?】その特徴から将来性まで徹底解説! | Geekly Media
Riot.js

JavaScriptフレームワーク
Bootstrap

引用元:とほほのBootstrap 4入門 - はじめに - とほほのWWW入門
Vue.js

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

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

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

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

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とは【初心者向け】 | 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

CoffeeScript

引用元:CoffeeScriptとはなんぞや? - Qiita
Opal

その他
gulp

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

引用元:Popper.js - 便利なポップオーバーライブラリ MOONGIFT
さいごに
JavaScriptの歴史を学ぼう
上記みたいなJavaScriptに関連した用語の概要を掴んだ上で、下記リンクのページで歴史を見てみるととても読みやすい記事なので、時間がある方はぜひ!
Ruby on Railsで開発したい方
Railsを使う上で、Yarn、jQuery、Bootstrapなどの利用方法の基礎的な部分が分かりやすく書かれています。オススメです。