フロントエンド技術について調査した（途中）

最新のフロントエンド技術を学ぶ

訳あってフルスタック開発することになったので今まで特に注力していなかったフロントエンドとインフラの学習を始めることにした。

ここではまずフロントエンドについて調べてまとめる。

frontend roadmap

以下のロードマップを参考に、最新のフロントエンド技術についての用語を調べてみる。

github.com

タスクランナー

タスクランナーとは、フロント技術で必要なもの一つ一つをタスクにして、複数のタスクをまとめて実行するためのツール。

• npm scripts

GulpやGruntなどが先行していたように思えるが、パッケージ管理ツールのnpmで実行できるのが強みとして人気が出てきたのかもしれない。

モジュールバンドラ（webpack）

最近だとこちらのwebpackが人気が出ている。

こちらも仕組みは似ていて、フロント技術に必要なものをモジュールとして管理し、ローダーで実行する。

Percel

設定ファイルの管理の煩雑さや処理速度などのwebpackの弱点をカバーしている。

上記までのまとめ

以下の記事がよくまとまっている。

ferret-plus.com

JSフレームワーク

JSは動的なWebサイトを作るときに利用される技術のこと。

純粋なJSで書かれたWebサイトもあるが、より効率的に記述できるフレームワークを使うのが今っぽい。

有名なJSのフレームワークと言うと主に3つある。

それらのわかりやすい違いは以下の通り。

・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。
・ Reactは、JavaScriptの中にHTMLを書きます。
・ Vueは、HTMLにJavaScriptを書きます。

引用：

note.com

Angular

Google製。

３つの中で一番歴史が古いJSフレームワーク。

昔は1系と2系で全然違うやら云々言われていたが、それはAngularJSとこれの違いで、全くの別物らしい。

今はTypeScriptでの記述となっており、上記2つと差がなくなっている。

React

facebook製。

Reactは厳密にはフレームワークではなく、ライブラリ。

両者の違いは上述のReactとVueの説明の通り。

Reactは必要なものを都度追加のライブラリをインストールして利用する。

フレームワークのように最初から全部入りとなっておらず、マイクロサービスと相性がいい。

fluxパターンを採用している。

ハイブリットアプリ開発で使われるReact Nativeも人気。

Vue.js

AngularJSの開発者が開発。

リアクティブシステムが特徴。

MVVMアーキテクチャを採用している。