モダンフロントエンド開発とは

今までサーバーサイドで行わないといけなかった重たい処理を、ブラウザ側で完結させることができるようになりました。

1995年に登場したjavascriptはWebとともに普及していった。しかし、当初はブラウザごとに独自の言語仕様が拡張されていたため、ブラウザ間での互換性が低い状態でした。ですが、2009年5月に公開されたES5でjavascriptが明文化され、各ブラウザの実装が標準化されました。そして、2015年6月にメジャーアップデートとなるECMAScript2015（ES6）がリリースされ、より安全で便利に効率的にプログラムを書くことができるようになりました。

javascriptの技術進化とスマートフォンの性能向上によって、サーバーサイドで行うような重い処理をブラウザ上のフロントエンドで完結できるようになり、フロントエンド開発という呼び名で分けられるようになりました。

モダンフロントエンド開発を行うメリット

マルチデバイスでのUI/UXの向上

現代はスマホが主流です。スマホでも機種によりデバイスサイズに変化があり、さまざまなデバイスサイズに合わせたレスポンシブデザインが求められます。従来の構成では、サーバーでデータ処理を行なってHTMLを生成し、ブラウザへ配信を行なって表示していますが、UI/UX向上のトライ&エラーが求められる時代では、フロント領域でもシステムと一体となって慎重に取り組む必要があります。

モダンフロントエンド技術を使用すると、フロントエンドとバックエンドを切り離して開発することができ、フロントエンドチームはUI/UXの試行錯誤に集中しやすくなります。

ビジネスのスピードを加速させるマイクロサービスとの親和性

マイクロサービスとは

現代のような社会の急激な変化に合わせて開発期間が短くなる傾向から、注目されているソフトウェアのアーキテクチャです。従来は、サービスのシステムを分割せずに一体化されていましたが、マイクロサービスは、個別に開発しされた小さなサービスを組み合わせて一つのサービスを提供するというものです。

マイクロサービスでは主に次のような小さいサービスを開発し、WebAPIを通じて各サービスへ呼び出します。

メリット

フロントエンド開発の技術進歩の歴史

言語仕様の標準化

JavaScriptの実行環境はブラウザであり、ブラウザごとに言語仕様が異なっていましたが、標準化が進み安定感が増しました。

型の登場（TypeScript）

TypeScriptとは、、、静的型付け言語。動的型付け言語は、実行しないとエラーがわからないが、静的型付け言語はコンパイルする時点でエラーがわかります。

サーバーサイドの実行環境（Node.js）

Node.jsはJavaScriptのサーバーサイド実行環境です。ブラウザだけでなく、サーバーサイド側でも動作できるようにするために開発された。

世界中のオープンソースライブラリ・モジュールが再利用可能に（npm）

npmはJavaScript向けのパッケージマネージャーです。

webpack

webpackはモジュールバンドラーです。複数ファイル間の依存関係を解決し、ブラウザで実行可能なJavaScriptファイルを生成するツールです。

Babel

Babelは新しいJavaScriptの構文を古い構文に変換して、昔のブラウザにも互換対応させるためのトランスパイラです。

開発フレームワーク

クライアントサイドレンダリング（CSR）

ブラウザ上でJavaScriptを実行してDOMを生成し、マウントしコンテンツを表示させます。

ブラウザで完結するためサーバーが不要。

HTMLファイルとバンドルされたJSファイルの2つだけで動くので配信が簡単。

JSファイルサイズが大きくなると初回ロードが遅くなる。

2015年当初はSEOに不利と言われていた。