概要

JavaScript (以下 js) は大昔からある言語ではあるが、時代の変化に連れて言語そのものや周辺技術が大幅に進化した。しかし、 web や書籍の情報は古いものばかりで、大昔の書き方や開発環境構築をしてしまうことがよくある。

そこで、この記事では現代 (2018年11月時点) の js や、フロントエンド技術について基礎から学ぶ。

ECMAScriptについて

js は ECMAScript というものに準拠している。
今は恐らく ECMAScript2018 が最新だが、文法的には ECMAScript6 (ES6) に準拠してれば良さそう。
それ以前のバージョンは古い書き方になるが、新しいバージョンはブラウザが対応してない。

昔の書き方と今の書き方の大きな違いは下記の物だと感じる。

アロー関数
クラス構文
import/export
let/const

AltJSについて

生の js は VanillaJS と呼ばれ、現代では VanillaJS で js を記述することは少ない。
js を拡張した言語をまとめて AltJS と呼び、AltJS をトランスパイルすると js が出力される。
AltJS は例えば下記のようなものがある。(あまり詳しくないのでちょっと間違ってるかも)

AltJS	特徴
CoffeeScript	Rubyみたいに書ける (今は使わない)
TypeScript	jsを静的型付けにしたもの

Twitterでよく目にするelmも含まれるっぽい？
AltJSはTypeScriptを使っておけば良いらしい。(主観的)

パッケージ管理について

昔、JavaScript の仕様を汎用的に再定義しようとして生まれた CommonJS という仕様が生まれた。
CommonJS の仕様に則って生まれた js が Node.js である。(今は準拠していない)

この CommonJS 界隈で生まれたパッケージ管理ツールが npm という物。
npm の後継で yarn が現れたが、現代では npm で良い模様。
パッケージの依存関係は package.json に記述して管理することが可能。
npm install コマンドで package.json のパッケージをインストール出来る。

モジュールバンドラについて

管理されたパッケージはモジュールとして js で読み込むことが出来るが、ブラウザが理解出来ない。
そこで、Browserify というツールを利用すると、ブラウザに理解出来るように変化してくれる。
モジュールをブラウザが理解できるように結合してくれる Browserify をモジュールバンドラと呼ぶ。
現代では Browserify よりも Webpack が主流で使われている模様。

モジュール読み込みの際は CommonJS の require が使える。
しかし、現代では ES6 で定義された import を利用する模様。

タスクランナーについて

フロントエンド開発では、下記の技術を多用されるようになった。

名前	役割
テンプレートエンジン	Hamlとか、HTMLを書きやすくした物
CSSプリプロセッサ	sassとかlessとか、CSSを書きやすくした物
トランスパイラ	AltJSをVanillaJSに変換
フレームワーク	Vue.jsとかReact.js
アーキテクチャ	VuexやらReduxやら
モジュールバンドラ	WebpackとかParcelとかモジュールをまとめるツール
構文チェッカー	lintとか、記述ミス等を検証
フォーマッター	prettierとか

上記の技術をファイル変更と同時にリアルタイムで行う為に利用するのがタスクランナー。
タスクランナーは元々 Grunt や gulp が使われていたが、今では npm scripts と Webpack を利用する模様。

シングルページアプリケーションについて (SPA)

一つのHTMLだけで画面遷移が可能なwebアプリケーションのこと。
Webpack で最終的に吐き出される HTML/CSS/JS 等のファイルをS3等に設置。
API通信やページ遷移はレンダリング後にjsで非同期に行い、同期的な通信は一番最初のみにする。

SPAに使われるフレームワークには Vue.js や React.js 等がある。

コンポーネント指向について

コンポーネント指向とは、「GUIパーツをモジュール化したもの」である。
コンポーネントを構成する要素には、下記の4つがある。

情報構造 (HTML)
スタイル (CSS)
状態 (Flux等)
インタラクション・機能 (JS)

React.js や Vue.js はコンポーネント指向のライブラリでもある。
上記の構成要素である HTML/CSS/JS を3つセットで1つのコンポーネントにする。

サーバサイドレンダリングについて (SSR)

SPAはネイティブアプリのようなUXを表現出来るが、初回読み込みが遅いという問題がある。
これは初回レンダリングをクライアントサイドで行っているからである。

そこで、初回レンダリングをサーバサイドで行い、それ以降をクライアントサイドで行う手法が考えられ、これがサーバサイドレンダリングと呼ばれるようになった。サーバサイドレンダリングではフロントjsをサーバサイドで動かす必要がある為、レンダリング用のNode製サーバを別途用意しておく必要がある。

参考URL:

ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点

IsomorphicJavaScriptについて

SSR時にレンダリングサーバで動かすJSと、SPAで使うJSのコードを同じにして保守性あげようぜっていうのがIsomorphicJS。基本的にReactやらNuxt.jsやらがいい感じにやってくれそうではあるが、詳細は良くわからない。

参考URL:

Progressive Web Appsについて (PWA)

モバイル向けWebサイトをネイティブアプリのように使える仕組みのこと。
ブラウザAPIの Service Worker を利用することで、下記の機能が使えるようになる。

スマホにインストール
オフライン対応
プッシュ通知

また、下記のような特徴もある。

ページ読み込みの高速化
インストール不要
アプリ審査無しでアップデート可能
GPAが利用可能
ネイティブアプリのようなUI

参考URL:

いまさら聞けないPWAとAMP - Qiita

Accelerated Mobile Pagesについて (AMP)

モバイルページの高速化についての技術。
ページ読み込み速度の向上の他に、データ通信量を抑えることにも繋がる。
AMP対応を行うには AMPの仕様に沿って構築するだけで良い。

参考URL:

いまさら聞けないPWAとAMP - Qiita

Backend For Frontendsについて(BFF)

BFFはマイクロサービスを実現するアーキテクチャで、下記の役割を担う。

API aggregation
API translation
SSR
セッション管理
WebSocket
その他

参考URL:

Pattern: Backends For Frontends

その他技術

Fluxアーキテクチャ
Reduxアーキテクチャ
テストツール

ゼロから学ぶには

ES6の書き方を覚える
npmの使い方を覚える
package.jsonの書き方を覚える
Webpackの使い方を覚える
vue.jsとかのフレームワークを使ってみる

参考URL

まとめ

上記以外にも今はこんな技術がある！この技術は古い！等があればコメント下さい。
また、フロントエンド初心者ですので、情報が間違っている場合もご指摘頂ければと思います。