ReactやVueを使っているフロントエンド開発者と話していて、会社の上司たちはフロントエンドの重要性を理解していないと言っていました。
現在では、フロントエンド開発者（フロントエンド・エンジニア）という言葉が使われていますが、Ruby on Railsが生まれた2004年くらいはフロントエンド開発者という言葉は使われていなかったと思います、対義語のバックエンド開発者も使われていなかったかもしれません。
フロントエンドとは
英語版WikipediaにFrontend and backendという項目があります、ここにあるフロントエンドの関心事（Front-end focused）を意訳すると。
- HTML, CSS等のマークアップ言語、JavaScriptやjQueryなど
- AJAX
- SPA、 React, Angular, Vue.jsなど
- Webの性能、画面がスムースに動く
- レスポンシブウェブデザイン、 スマフォ・PCどのデバイスでも使い易
- さまざまなブラウザーで正しく表示できる
- ヘッドレスブラウザでのE2Eテスト
- JavaScriptや画像等の自動変換/構成ツール、Webpack
- SEO（検索エンジン最適化）
- アクセスィビリティ
- 画像ツール（例Photoshop）の使い方
- UI（ユーザインタフェース）
現在、フロントエンドの仕事は、以下のように分けられるのではないでしょうか（私の感覚です）。
- UIデザイン : 5, 10, 11, 12
- 画面作成（HTML/CSSコーディング） : 1, 5, 6, 11
- ちょっとしたJavaScriptを使う : 1, 2, 6
- React, Vueでフロントエンド構築 : 3, 4, 6, 7, 8
- SEO: 9, 1
フロントエンドの歴史
2000年代 HTML時代
2000年代になり日本でもインターネットが普及し、ブログサイトやECサイトが立ち上がり出しました。この時期にはJavaScriptは存在しましたが、あまり使われていませんでした。したがってWebアプリを作るには、
- UIデザイン
- 画面作成（HTML/CSSコーディング）
- バックエンドの作成（Webアプリケーションフレームワーク利用、各種ロジック作成、データーベース設計）
などの仕事がありました、ここではビジネスモデル構築やインフラの作成は除いておきます。
この時代Web業界には、WebデザイナーとWeb開発者と呼ばれる人がいました。
- UIデザインは、Webデザイナーが行いました
- 画面作成は、Webデザイナーが行うことも、Web開発者が行うこともありました
- バックエンドの作成は、Web開発者が行いました
一部の会社にはHTML/CSSのコーディングのみ行う開発者もいたようですが、私の周りにはいませんでした。
2005〜2015年 Ajax時代
JavaScriptはIE vs Netscapeのブラウザー戦争の中1995年に生まれました、当初は大きな注目を浴びましたがブラウザー毎の互換性の低さなどからWeb開発者からは見放されて行きました。
しかし、2005年に登場したGoogle MapなどのAjaxを使ったWebアプリの登場でJavaScriptが再度注目されるようになりました。
1996年にはjQueryのような便利でブラウザーの非互換をカバーしてくれるJavaScriptライブラリーも現れ、WebアプリはAjaxや気の利いた機能をJavaScriptを使って実装するようになりました。
この時代では、
- UIデザインは、Webデザイナーが行いました
- 画面作成は、Webデザイナーが行うことも、Web開発者が行うこともありました
- ちょっとしたJavaScriptを使うも、Webデザイナーが行うことも、Web開発者が行うこともありました
- バックエンドの作成は、Web開発者が行いました
また、この時代に開発者やプロジェクトマネージャーとして活躍した人が、そのイメージを持ったまま、現在はマネージャーや経営層になっているかも知れません。
この時代に、JavaScriptやブラウザーに詳しくフロントエンドの難しい問題を解決する、フロントエンド・エンジニア（フロントエンド開発者）と呼ばれる人が登場した気もします。
2015〜2022年 SPA時代
複雑なAjaxアプリを作った開発者は、バックエンドとJavaScriptの両方が連携しながら画面を作るAjaxの難しさを体験したと人も多いと思います。そんな2009年にAngularJSが登場しました、JavaScriptが全てのビュー（画面）を組み立てるSPA(single-page application)の走りです。
その後Backbone.js KnockoutJS, Ember.jsなどのライブラリー（フレームワーク）が登場しましたが、
2013年にReact、2014年にVue.jsが現れ、SPAが開発者に受け入れられだしました。
やっと、フロントエンド開発者の登場です、
- UIデザインは、Webデザイナーが行います
- React, Vueでフロントエンドは、フロントエンド開発者が行います
- バックエンド（APIサーバー）の作成は、Web開発者が行います
もちろんフロントエンドもバックエンドもできる開発者もいますが、ある程度の規模の会社では分かれていると思います。
この時代になるとフロントエンド開発は、マークアップ（HTML/CSS）から、JavaScriptのプログラミングに比重が増えています。たとえば、Reactでは従来のHTMLにプログラミング要素を導入したテンプレート、テンプレートエンジンはなく、JavaScript言語にHTML定数を導入するというかなりプログラマー寄りな設計思想になっています。コンピュータサイエンスになじみのないWebデザイナー系の方には難易度が高くなったと思います。
さらに、各種ライブラリーやツールの進歩が早く、それに付いて行くための勉強が必要になります。Reactも2019年に導入されたHooksにより、以前のReactとは大きく違うものになってしまいまいました。
まとめ
ざっくりとフロントエンドの歴史を眺めてみましたが、2015年以前フロントエンドは、コンピュータサイエンスを学んだソフトウェア開発者ではなく、WebデザイナーやHTML/CSSだけを学んだ初学者が書ける簡単なものというイメージがありました。
しかし、ReactやVue.jsのようなSPAが現れバックエンドで行っていたビュー（画面）作成の部分がフロントエンドに移ってきました。そこには画面作成だけではなく、状態管理やロジックなどもあります。
さらに、現在のWebアプリは使い勝手の良さも要求されます。これらは良いUI設計も重要ですが、実際のアプリでは作成・評価の試行錯誤を繰り返す事が多いと思います。そのためにはメンテナンス性の高いコードが実装できる知見も必要になります。
逆にバックエンドは、ビュー（画面）がなくなり、データ管理やロジックのみを実装した、APIサーバーとなりシンプルになりました。さらにFirebaseのようなサービスを利用すればバックエンド無しでもWebアプリが作れるようにもなってきました。
このようにフロントエンドは進化してアプリ（システム）の中で重要度が高まって来ています。ただし、その事があまり広がってないようにも思えます。
