概要
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:
IsomorphicJavaScriptについて
SSR時にレンダリングサーバで動かすJSと、SPAで使うJSのコードを同じにして保守性あげようぜっていうのがIsomorphicJS。基本的にReactやらNuxt.jsやらがいい感じにやってくれそうではあるが、詳細は良くわからない。
参考URL:
Progressive Web Appsについて (PWA)
モバイル向けWebサイトをネイティブアプリのように使える仕組みのこと。
ブラウザAPIの Service Worker を利用することで、下記の機能が使えるようになる。
- スマホにインストール
- オフライン対応
- プッシュ通知
また、下記のような特徴もある。
- ページ読み込みの高速化
- インストール不要
- アプリ審査無しでアップデート可能
- GPAが利用可能
- ネイティブアプリのようなUI
参考URL:
Accelerated Mobile Pagesについて (AMP)
モバイルページの高速化についての技術。
ページ読み込み速度の向上の他に、データ通信量を抑えることにも繋がる。
AMP対応を行うには AMPの仕様 に沿って構築するだけで良い。
参考URL:
Backend For Frontendsについて(BFF)
BFFはマイクロサービスを実現するアーキテクチャで、下記の役割を担う。
- API aggregation
- API translation
- SSR
- セッション管理
- WebSocket
- その他
参考URL:
その他技術
- Fluxアーキテクチャ
- Reduxアーキテクチャ
- テストツール
ゼロから学ぶには
- ES6の書き方を覚える
- npmの使い方を覚える
- package.jsonの書き方を覚える
- Webpackの使い方を覚える
- vue.jsとかのフレームワークを使ってみる
参考URL
- npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
- 【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう
- 2018年の最先端フロントエンドエンジニアになろう - Qiita
- 最近のフロントエンドのコンポーネント設計に立ち向かう - Qiita
まとめ
上記以外にも今はこんな技術がある！この技術は古い！等があればコメント下さい。
また、フロントエンド初心者ですので、情報が間違っている場合もご指摘頂ければと思います。