Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

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

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

目次

  • 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
  • タスクランナー
  • モジュール化
  • パッケージ管理
  • ハイブリッドアプリ
  • 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を実行しても動かないので、BabelTraceurをつかってコンパイルする必要がありますが、今後、遠くない未来にES6標準がくるので今のうちに取り入れたいですね。

タスクランナー

Gulp

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

モジュール化

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

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

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

新規でアプリを作る際はWebpackにするのがいいかなあと思います。

パッケージ管理

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

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

最近は、「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.jsReact.jsでも取り入れているというのもあり、Material design系が増えたという印象があるので、さくっと導入したいですね。

アートスクリプティング

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

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

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

まとめ

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

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

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

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

参考

okmttdhr
dmmcom
総合エンタテイメントサイト「DMM.com」を運営。会員数は2,900万人を突破。動画配信、FX、英会話、ゲーム、太陽光発電、3Dプリンタなど40以上のサービスを展開。沖縄での水族館事業参入、ベルギーでのサッカークラブ経営など、様々な事業を手掛ける。また2018年より若手起業家の支援を強化、「DMM VENTURES」による出資や、M&Aなどを積極的に展開している。
https://dmm-corp.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away