AndroidやiOSアプリのエンジニアをしているみなさん、Webフロントエンド開発はどうしてあんなに色々なフレームワークやライブラリ、ツールの話題が多いのかな」と感じたことはありませんか。

私もそう思っていた一人です。

プログレッシブウェブアプリやAndroidのInstant Appsなど、ウェブとアプリの境目が少しずつあいまいになっている昨今、ただ遠巻きにWebフロントエンド開発を眺めているだけでは良くないと思ったので、まずは概要レベルでさくっと学んでみました。

この記事では、そんな私が理解したWebフロントエンド開発についてまとめていきたいと思います。

 

最近のWebフロントエンド開発の大枠を理解をすることで、実はそんなに敷居が高くなさそう、ということを感じていただければと思います。

それでは、いくつかのトピックに分けて、歴史や最近の流行について整理していきましょう。

JavaScriptの標準仕様化

「ES2015」や「Babel」といった単語を聞いたことがあるでしょうか?

「ES2015」はECMAScriptというJavaScriptの標準仕様の一つで、昨年2015年に登場したことからこう呼ばれています。

第6版にあたるので、ES6とも呼ばれています。(つい先日ES2016も出たようですね)

 

こうした仕様の標準化は、ブラウザによってJavaScriptの解釈が変わってしまうことから必要になったものです。

1997年に初版が出るなど、かなり歴史の深いものとなっています。

その中でも「ES2015」は、多くの機能や文法が追加されたことからかなり話題を集めています。細かな仕様などについては各所で記事が書かれていますので、そちらを参考にしてください。

 

この「ES2015」の普及に大きく貢献しているのが「Babel」というJavaScriptコンパイラーです。

平たく言うと、「Babel」は「ES2015」で書かれたコードを各ブラウザが読み込めるJavaScriptに変換を行ってくれるツールです。(実際にはもっと多機能です)

「Babel」というデファクトスタンダードとなるツールがあることで、「ES2015」のようなモダンなJavaScriptをWebフロントエンド開発では実現しています。

 

また、「Webpack」や「Browserify」というツールも聞いたことがあるでしょうか?

こちらもBabelと同じように、JavaScriptを別のJavaScriptに変換するツールです。

どのような変換を行うかというと、複数のJavaScriptファイル間の依存関係を解消したJavaScriptファイルを生成するものです。

「ES2015」ではファイル間の依存を解決するimportやexportといった仕様が追加されましたが、多くのブラウザではこれを読み取ることができません。

そこで登場するのがこれらの「Webpack」や「Browserify」といったツールです。

例えばBrowserifyでは、複数のJavaScriptファイルをまとめて1つのファイルにすることで、依存関係の解決を行います。

 

これらのツールを使用するため、最近のWebフロントエンド開発では以下の図ように、元のJavaScriptコードから2段階の変換を行ったJavaScriptをHTMLから参照するのが一般的になっています。(大変そうに見えますが、ビルド周りのツールの進化により、この変換はかなり楽に行えます)

modern-js-strategy

クライアントサイドの構造化

時を10数年ほど遡ると、Webフロントエンドで行われていたのはちょっとしたアニメーションやフォームの入力補完など、複雑度はそう高くない実装でした。

この状況を大きく変える原因の一つが、2005年ごろに登場したAjax(やそれを利用したGoogleマップ)です。

Ajaxは、JavaScriptを使ってサーバサイドに通信を行い、データの更新や取得、それに合わせたDOMの更新などを行う技術の総称です。

 

Ajaxの登場によって、これまではサーバサイドでHTMLを生成し、JavaScriptはDOMに対するちょっとした処理を行うだけだったところ、通信も行うなど一気にJavaScriptで担うべき処理範囲が広がりました。

 

こうした状況に対して、Webフロントエンドではさまざまな試みが行われてきました。

大きなところでは、Backbone.jsによるクライアントサイドでのMVC普及や、Angular.jsやVue.jsなどによるバインド機構の実現などがあげられるでしょう。

 

このように構造化が進むWebフロントエンド開発において、最近の流行となっているのが「Fluxアーキテクチャ」というものです。

処理が常に一方向に流れ、実装を常にシンプルに保つことが可能なアーキテクチャとされています。(細かな説明は他の記事に譲ります)

また、最近ではFluxの派生系でもあるReduxというフレームワークがかなり流行しているので、こちらについても調べてみると良いでしょう。

flux-simple-f8-diagram-explained-1300w

Viewに関する進化

最後に、View周辺についても見ていきましょう。

「React.js」という言葉、アプリエンジニアでも一度は聞いたことがあるでしょう。

「React.js」は、最近のWebフロントエンド開発では数多く利用されているViewに関するライブラリです。

 

「React.js」では、VirtualDOM(仮想DOM)という技術が実現されています。

VirtualDOMを使うと「変更のあったDOMだけを実際に変更して変更のなかったDOMはそのまま使い続ける」といったことが可能となります。

これまでは、パフォーマンス向上のためにデータの変更を全て細かくハンドリングして一部のDOMのみを書き換える実装をするか、パフォーマンスをあきらめてDOM全体を再描画するか、といった「実装」と「パフォーマンス」のトレードオフが行われてきましたが、VirtualDOM技術の確立によってこれらの両立が可能となっています。

登場した単語のひとことまとめ

  • ES2015 – 2015年に策定されたJavaScriptの標準仕様
  • Babel – ES2015などで書かれたJavaScriptをブラウザが読めるようなJavaScriptに変換するためのツール
  • Webpack / Browserify – モジュール依存を解決したJavaScriptに変換するためのツール
  • Ajax – JavaScriptで通信しながらデータ操作やDOM操作を行う技術の総称
  • Flux / Redux – 一方向にデータが流れる構造を持つフレームワーク
  • React.js – VirtualDOMを実現しているViewライブラリ

さいごに

私のように、Webフロントエンドから少し離れた位置にいるエンジニアは、特定のフレームワークやライブラリ、ツールについての記事をいきなり読んでもその意義について理解できないことが多いでしょう。

まずは全体を大枠で理解してから、各技術に踏み込んでいくのがおすすめです。(たとえ、全く知らない技術が出てきても、大枠から見れば些細な技術であることも多いでしょう)

この記事がWebフロントエンド開発の第一歩になれば幸いです。

follow us in feedly

↓↓Kindle本を出しました