Go to Qiita Advent Calendar 2024 Top
LoginSignup
1902
1877

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@okmttdhr

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

Last updated at Posted at 2015-05-25

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

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

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

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

目次

  • 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を実行しても動かないので、BabelやTraceurをつかってコンパイルする必要がありますが、今後、遠くない未来に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.jsやReact.jsでも取り入れているというのもあり、Material design系が増えたという印象があるので、さくっと導入したいですね。

アートスクリプティング

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

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

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

まとめ

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

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

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

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

参考

1902
1877
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1902
1877

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?