ここ数年、フロントエンドの技術が進化しています。
僕が個人的にウォッチしている全国各地のWeb制作会社の様子を見ても、それに追従する動きを見せてます。「Webの技術の進化はとっても早いですね」と言われる中、技術者たる者その動きについて行かなきゃいけない。

と、思いきやそうでもなかったりもする。

レガシーな技術、レガシーな作法の方がマネタイズは簡単です。案外、古臭い技術でも十分「やれる」んです。

結果、今、技術力のある制作会社とない会社との二極化が起きていますが、それはもうしょうがないことです。“そこそこの技術”でも十分売上は立つのだから、無理してモダンな技術を追い求めることもないだろう、と。

これは、ずーっと安定した成果物を納められるという意味でもあるので、僕としては良いことだと思っています。「それはそれでええやん、お客さん喜んどるんやから」と、素直に思います。

ただ、モダンな技術とレガシーな技術の差が、ここ数年でエゲツないことになりつつあります。このまま行くと、レガシーにいる人がモダンに移行しようと思っても、「壁が高すぎてムリー！」になっちゃいます。

なので、レガシーとモダンの違いを僕なりに表明したいと思います。
新しい技術を学ぼうかどうしようか迷ってる人、または導入を検討している会社さんは、参考にしてもらえると幸い。

レガシーなフロントエンド

レガシーなフロントエンドとは、いわゆる「Webデザイン」と呼ばれてるようなものです。

デザインとhtml/cssコーディング。ついでにjQuery、みたいな。
あと、WordPressのテーマ作成もコーダーがやるのがスタンダードなので、これもフロントエンドに入れちゃっていいでしょう。簡単だし。

これらの技術があれば、Webサイトは完成させられます。クライアントの要望に柔軟に対応しながら納品まで持っていけます。これに加えて、PHPでのスクラッチ開発もできるとなお良いって感じです。

ちなみに僕はこの「レガシースタイル」です。
だけど、トップクラスのWeb制作がどんなものなのかは個人的に興味があるので、技術の進化はずっと追いかけてはいました。「へー、こーゆーのがあるんだー」程度で。

ギャラリーサイトにアクセスすると、最近作られたステキなWebサイトがいっぱい並んでいます。

こんなの。
https://io3000.com/

職業柄、こーゆーサイトは頻繁に覗きに行くのですが、ここ数年で、「いやコレどーやって作ってんの？」って思うようなのが頻発するようになりました。ある時期を境に、急激に「置いてかれてる感」が出てきたのです。もうオッサンです。

嫌ぁ〜な予感がしてきたので、Webの新しい技術について調べました。主にネットと書籍で調査しました。勉強会みたいなのにもたま〜に顔出したりしました。
調べてみると情報ってのは出てくるもんです。いろんな新しい技術の存在を知りました。だけど、それが実務にどう役立つのかがイマイチわからなかった・・・。

どの情報にあたっても同じようなことしか書かれてないので、一定以上理解が進まないんです。なんか、「こっから先は別世界だよ」って、Webの神様に諭されているような感覚を覚えました。

だから、やってみることにしました。
新しい技術を使って、サイト1個作ってみちゃおう、と。

そしたらわかりました。思いっきりわかりました。
Web神様の言う、「こっから先」というやつが。

モダンなフロントエンド

モダンなフロントエンド開発技術の代表格は、「javascriptフレームワーク」です。そのjavascriptフレームワークの代表格が、

・Angular
・React
・Vue.js

あたりです。
ちょっと乱暴に言ってしまいますが、この3つのどれか1つを使ってWebサイトを作れるようになると、「モダンなフロントエンドエンジニア」の称号が手に入ると言っていいでしょう。（違った方向性もあるのでその限りではありませんが。）

今までhtml/css+jQueryでサイトを作ってた人からすると、「javascriptでサイトを作るってどゆこと？」って感じだと思います。これがレガシーとモダンを分断する壁です。この壁に歩み寄り、よじ登り、その先の景色を見ようとしない限り、もうずーっとレガシーです。

壁よりこちら側の技術はもうそれほど進化しません。
なぜなら、進化は壁の向こうで起こっているからです。それも物凄い勢いで。
（よく言う「jQuery不要論」は、この辺を背景にしていると考えられます。）

これは、本を買って実際に手を動かしてサイト作ってみるとか、オンラインのスクールでメンター的な人から学ぶとかしないと見えてこないでしょう。あぁめんどくさい。

成果物に見る違い

レガシーな開発でできたWebサイトとモダンな開発でできたWebサイトがどう違うのか。
Webを依頼するクライアントからすると、一見しただけではわからないと思います。両者を比較して初めて、「なんかこっち（モダン）のほうがイイね」っていう程度でしょう。

比較検討のためにレガシー開発とモダン開発の両方を走らせるなんてコスト的にありえない。だから、2つの手法でモロに比較されることはまずないです。レガシーがこれから先も通用し続ける1つの理由です。

目で見てわかる違いを1つ上げましょう。

・レガシーは動きがもっさりする
・モダンはサクサクぬるぬるする

こーゆー違いです。果たしてこれで説明したことになっているのかしら。

技術者目線でお話しましょう。
コーディングができる人なら、ソースコードを見ればわかる場合があります。

フロントエンド技術のコンパイル言語化

まずはレガシーの例としてこのサイト。
http://nakata.net/

このページのソースを見てみてください。
コードが整形されているのがわかるかと思います。（ある程度だけどね。）
コーディングができる人なら、このソース読めますよね。

続いて、モダンの例。
https://corp.scouter.co.jp/

ソース、見てみてください。
嫌になるでしょ？（笑）

もう1個、モダンの例。
https://uptoon.jp/

ソース見てみてください。
嘘みたいでしょ？（笑）

レガシーの方のソースは人間の目で読めるし、人間の手で書くことができます。
モダンの方は人間の目じゃあ読む気が失せます。

モダン側で使われているのがjavascriptフレームワークです。
ローカル開発環境で書いたソースコードを“コンパイルして”サーバーに上げてます。なので、サーバーに上がってるものは読めませんが、ローカルに残してあるコンパイル前のソースは読みやすい状態で管理されています。

コンパイラ型言語とは、人間が書いたプログラムをコンピュータが理解できる形式に変換するプログラム言語のことである。 コンパイラ型言語では、コンパイルする前にソースコードをオブジェクトコードに翻訳しておくため、プログラムを解釈しながら実行するインタープリタ型言語と比較して、パフォーマンスに優れている。

https://www.weblio.jp/content/%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E8%A8%80%E8%AA%9E

ざっくり言うと、今のフロントエンド界隈で起きてるのはこーゆー動きです。
かつてのWebサイトコーディングは、インタプリタ言語が中心にありました。それが今、コンパイル言語に移行しつつあります。厳密に「コンパイル言語」ではないかもしれませんが、扱うものが“コンパイル言語っぽく”なっているのは間違いありません。（Sassとかもそう。）

一般に、インタプリタよりもコンパイル型の方が敷居が高いとされています。技術レベルが要求されるということです。コーダーやプログラマーの世界では、「扱う言語によって年収が変わる」と言われますが、その意味でも（一般的には）コンパイル型はインタプリタよりも上です。

インタプリタに慣れきっちゃうと、コンパイル言語がマジキツイです。難しい。だから壁として立ちはだかるの。
レガシータイプのコーダーさんはみんなそこに苦しむと思います。僕がそうだったから。