MENU

ここ数年前から2015までのモダンフロントエンドを総まとめしてみた

MMM Corporation
mmmuser

HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。

常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。

しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。

そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。

(ここではフロントエンドというのを、ざっくりとHTML/CSS/JavascriptをつかったWeb技術のことをいうことにします)。

Contents
  1. 目次
  2. Javascriptフレームワーク
    1. React.js
    2. Angular.js
    3. Angular.js 2.0
    4. Backbone.js
    5. Vue.js
    6. Mithril.js
    7. Aurelia.js
    8. Knockout.js
    9. Ember.js
    10. Riot.js
    11. Ractive.js
    12. まとめ
  3. ES6
  4. タスクランナー
    1. Grunt / Gulp
    2. Yeoman
  5. モジュール管理
  6. パッケージ管理
  7. ハイブリッドアプリ
  8. SPA
    1. 概要
    2. SEO
    3. HTML6
  9. サーバーサイドJavascript
    1. Node.js
    2. Express.js
    3. io.js
  10. CSS
    1. CSS3
    2. 設計パターン
  11. アートスクリプティング
  12. まとめ
  13. 参考

目次

  • Javascriptフレームワーク
    • React.js
    • Angular.js
    • Angular.js 2.0
    • Backbone.js
    • Vue.js
    • Mithril.js
    • Aurelia.js
    • Knockout.js
    • Ember.js
    • Riot.js
    • Ractive.js
    • まとめ
  • ES6
  • タスクランナー
    • Grunt / Gulp
    • Yeoman
  • モジュール管理
  • パッケージ管理
  • ハイブリッドアプリ
  • SPA
    • 概要
    • SEO
    • HTML6
  • サーバーサイドJavascript
    • Node.js
    • Express.js
    • io.js
  • CSS
    • CSS3
    • 設計パターン
  • アートスクリプティング
  • まとめ

Javascriptフレームワーク

まずは、みんな大好きJavascriptフレームワークについて軽くまとめます。

React.js

Angular.js

Angular.js 2.0

Backbone.js

Vue.js

  • MVVM
  • 作成したUIコンポーネントを組合せてページを構成することを前提にしている
  • 似ているといわれるが、AngularJSと設計思想は全く異なるもの
  • 理解しやすいフレームワークとして有名
  • Vue.js on Railsパーフェクトガイド - Qiita

Mithril.js

Aurelia.js

Knockout.js

Ember.js

Riot.js

Ractive.js

まとめ

ざっと書いただけでこれなので、多すぎます。特にこだわりのない方は、上から5つくらいを覚えておけば普通にアプリケーションをつくる上では困ることはないと思いますので、残りは、参考程度にしてください。

ES6

次に、次世代のフレームワークに続々採用されている、ES6を紹介します。

ES6とはECMAScript 6のことで、Javascriptの標準言語ECMAScriptの次期標準仕様となります。

class機能などが導入され、これまでのJavascriptとは大きく変わります（Angular.js 2.0の開発チームも採用したTypescriptは、ES6の構文を積極的に取り入れています）。JavaScriptフレームワークなんて、何個か覚えておけばいいと書きましたが、ES6の流れを汲み取っているかは注意してみておいたほうがいいと思います。

現状ES6を実行しても動かないので、BabelやTraceurをつかってコンパイルする必要がありますが、今後、遠くない未来にES6標準がくるので今のうちに取り入れたいですね。

タスクランナー

Grunt / Gulp

タスクランナーは、フロントエンドの様々な面倒事を自動化できるツールです。これなしのフロントエンドはもはや考えられない気がします。

GulpとGruntが2代勢力ですが、できることは大差はありません。違いは調べればたくさん出てくるのでみてみてください。どちらを使うかは好みの問題だと思います。

Gruntだと、記述が長くなってみにくい、同期処理（タスクが1個1個順番に実行される）なので処理が遅い（非同期にするプラグインもありますが）、それに対してGulpは、1個1個のタスクをコンパクトに書くことができ、また、タスクを同時実行できるという特徴があるので、個人的にはGulpの方が好きです。

ファイルもGruntだとマッチョな感じになりますが、Gulpは可愛い印象です。

Yeoman

タスクランナーではないのですが、セットで語られることも少なくないのでYeomanを紹介します。簡単にいうとフロントエンドの「scaffold」をやってくれるツールです。

人気のものだとAngular.jsのgenerator-angular-fullstackやWepアプリをつくるgenerator-gulp-webapp、React.jsのgenerator-react-webpackなどもあります

Gulp、Gruntのタスク、サーバー起動から本番用ビルドなど、基本的なものであればデフォルトで用意してくれるジェネレータが多く、非常に助かります。

モジュール管理

概要は以下をみればわかると思います。

BrowserifyとWebpackに関しては、タスクランナーと同じく、できることに大差はありません。Webpackが後発ですが、最近の新しいプロジェクトとかだとWebpackの採用事例も増えてきています。

また、Browserifyが単一のJSファイルを出力するのに対して、Webpackは複数のJSを出力するのが容易、かつ、BrowserifyはGulpなどと組み合わせて使うのが一般的ですが、Webpackはそれがなくてもけっこうフルスタックでビルドができます。

無理してWebpackにする必要はありませんが、新規でアプリを作る際は試してみるといいかもしれません。

パッケージ管理

概要は以下の記事が詳しいです。

パッケージ管理は、npm・Bowerで行います。簡単にいうと、npmが主にNode.jsの世界であるのに対して、Bowrはブラウザの世界で動くライブラリを管理します。

最近は、「CommonJSスタイルでモジュール管理=>ビルド」の流れでJavaScript開発をするのがデフォとなってきているので、npm&Webpack(Browserify)でソースを管理し、require('パッケージ名')して読み込む、というパターンに落ち着く気がします。

Angular.js 2.0やReact.jsなど、ES6の流れをくんでいるスクリプトは、Node.jsの世界で完結させることができるので、今後Bowerは使いドコロが減ってゆきそうです。

ハイブリッドアプリ

ハイブリッドアプリか、ネイティブアプリか？という話は宗教チックになるのでここではしません。

いつの間にか多すぎるほどできていて、気になるものはたくさんありますが、安心できそうなのは、Ionic、React Native、Meteorあたりでした。

弊社ではReact Nativeでのアプリ開発がスタートしていて、さわり始めたばかりでいうのもアレなのですが、React.jsがさらに勢いをました場合、Webからモバイルまで同じ言語で動くものをつくれるというのはすごいのではないかな、と思います。実際にReact.jsでの開発と並行しても、頭のスイッチコストがかなり低いです。

以下適当にリストアップします。

SPA

概要

Single Page Applicationの略で、JavaScriptフレームワークのおかげで、開発コストが大きく下がったアプリケーションアーキテクチャのひとつです。

SEO

Angular.jsでは、SEOが問題になったりしましたが、React.jsのServer Side Renderingでそれが解決されるかも、とのこと。

HTML6

こちらの記事では、HTML6での「JSなしのSPA」について述べられており、議論をうみました。

サーバーサイドJavascript

Node.js

まだ動きの激しいところとして、サーバーサイドJavaScript（Node.js）があります。

JavaScriptなだけあって、非同期な処理をすぐに実装することができるので、リアルタイムなWebをつくるときや、JSONを扱うAPIサーバーとして使うのに向いています。

Express.js

だいぶ前にMEAN StackのEとして話題に上がった、Node.jsのフレームワークExpress.jsがあります。RESTfulなAPIがシンプルに記述できます。

io.js

Node.jsの話に欠かせないのがio.jsです。こちらもアンテナを張っておきたいところです。

CSS

CSS3

これまでJavaScriptでやっていたことが、次々にCSSでできるようになっています。

例えば、アニメーションにおいては、主要なJavaScriptフレームワークにおいても、すでにCSSが基本となっていて、GPUで処理されているため、処理能力の低いデバイス（スマホなど）でも滑らかに動きます。

また、3DなどをJavaScriptなしで実装できるのも、WebGLがモバイル対応していない機器が多いいまは助かります。

今後、より様々な技術がCSSでできるようになっていくのは間違いありません。

設計パターン

CSSの壊れやすさに関してはまだ進化しているとは残念ながらいえないと思います・・・。しかし、多くの概念やフレームワークが登場し、開発は楽になっています。

設計

設計方法でいうと以下が有名です。どれも共通しているのが、CSSに構造を持たせて（プログラムのオブジェクト指向のように）設計しなさいということです。なかでも簡単に導入できるのがBEMで、オレオレで設計するくらいなら絶対に入れるべき設計方針だと思います。

メタ言語

CSSを効率的にコーディングできるように拡張されたメタ言語が、SCSSとLESSになります。特にこだわりがないのであればSCSSを使うのがよいと思います。

Compass

SCSSをさらに使いやすくしたフレームワークで有名なものがCompassです。Compassを使うと、便利なmixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用するなど、多くの機能を使うことができます。

mixinが使えるのはいいですね。他にも、mixinが使えるライブラリは、Rails gemのBourbonがあります。mixinがいらないよ、という方は、GruntやGulpのautoprefixerとかで事足りるかもしれません。

フレームワーク

これは多すぎて把握できていません。基本、Bootstrapで十分なのかなと思っています。

ただ、2014-2015は、Angular.jsやReact.jsでも取り入れているというのもあり、Material design系が増えたという印象があるので、さくっと導入したいですね。

アートスクリプティング

HTML5のおかげで、かつてはフラッシュで行なっていたようなアートスクリプティングができるようになりました。

これらも、VR機器やIoTのおかげで無視できない存在になっていると思っています。理由は2つあって、1つ目は、多様なAPI、美しいグラフィックなど、アウトプット(=デバイスで取得したデータの表現先)にはHTML5が優秀なこと。2つ目は、サーバーサイドは、HTML5との相性、サポートなどの面でNode.jsが優秀なことです。

何より、未来なWeb UIをみるのはワクワクしますよね。

まとめ

以上、長くなりましたが、最近のフロントエンドをまとめてみました。

  • Javascriptフレームワーク
  • ES6
  • タスクランナー
  • モジュール管理
  • パッケージ管理
  • ハイブリッドアプリ
  • SPA
  • サーバーサイドJavascript
  • CSS
  • アートスクリプティング
  • まとめ

これ全部追いかけるのはたぶん無理ですが、やっぱりフロントおもしろいな、と。1年後にはまた状況が変わっているかもしれませんが・・・。

なにか間違っていれば@okmttdhrまでご意見くださいm(. .)m。参考になれば幸いです。

参考

最新のフロントエンド事情を把握した上で、適切なアーキテクチャによるシステム開発やモバイルアプリケーション開発をご希望の企業様は、是非MMMにご相談下さいませ！

AUTHOR
デロイト トーマツ ウェブサービス株式会社(DWS)
デロイト トーマツ ウェブサービス株式会社(DWS)
デロイト トーマツ ウェブサービス株式会社はアマゾン ウェブ サービス（AWS）に 専門性や実績を認定された公式パートナーです。
記事URLをコピーしました