2020年のウェブフロントエンドエンジニアが学び実践すべきこと

先日、ウェブフロントエンドについて理解するためのただ一つの方法を記事にしました。それは「古い知識に頼るな。公式を読め」でした。たった一つの方法です。これをできない人は必ず行き詰まります。公式をひたすら読み込むことができる人は、たぶん大丈夫でしょう。

今回の記事は、その先にあるものです。

モダンフロントエンドの重要性

ここでは少し前回の記事のおさらいをしておきます。

2020年のソフトウェアエンジニアリングの世界ではウェブ技術の重要度は増すばかりです。もちろんウェブ技術というのは広い分野です。ウェブ（HTTP/HTML/JS/CSSその他）によるサーバー・クライアント型のソフトウェアは、莫大な市場を背景にどんどか技術が投入されています。

ウェブ技術の中でも、ここ数年はフロントエンド技術の比重がとても大きくなりました。前回の記事にも書いた通り、少なくとも50%以上の影響力を持っています。

ソフトウェア開発の本質は、大昔の「人月の神話」という有名な本にも書かれていたように、複雑性との戦いであり、変化への適応にあります。

React/Vue/AngularなどのSPAライブラリ・フレームワーク（面倒なので以後、モダンウェブ技術と呼びます）が一般的になったのもそういった理由からです。

最近ではSSG（static site generator）と呼ばれる、SPA技術を応用して静的ページを生成する技術なども当たり前になりました。

つまり、もうjQueryやDOMを知っていればいいという世界観ではなく、モダンウェブ技術を知っていれば、静的ページの生成にも応用が効くのです。

皮肉交じりの冷笑屋なら「201x年にも同じようなことを言ってたじゃないか？どうせReact/Vue/Angularなんかも時代遅れになるんだろ？それなら、今それらを覚えても価値はない」と言うかもしれませんが、それは明確に間違いです。

当然のことながらReact/Vue/Angularが2025年や2030年に生き残っているかどうかを保証することはできません。

Reactは最低でも5年はトップを走り続けて、10年以上は生きてることは間違いないと思いますけど、これはあくまで個人の見解です。

いま全世界で最もシェアのあるReactも、それを超える何かが登場すれば、リプレースされることでしょう。おそらくそれはVueやAngularでもない、新しい何かです。

ただ、絶対、確実に言えることが1つだけあります。

今後VanillaJS（何もライブラリやフレームワークを使わない素のJS）やjQueryの時代に戻ることは絶対にありえません。新たな技術が登場したとしても、Reactなどを新たに進化させた次の何かです。

※補足: もちろんjQueryで十分という局面もあり、そういうときにjQueryを使えるエンジニアはかっこいいと思いますが、それがメインストリームに来ることはないでしょう。

そもそもReactが提供した最大の功績は概念でありソフトウェア世界観です。つまり、大きなパラダイムシフトをもたらしました。SwiftUIを始めとした、現代のUIプログラミングに大きな影響を与え続けていることが何よりもの証明です。

Vue/Angularにしても、それぞれReactパラダイムシフト以後の世界観に合致するソフトウェアです。

それ以前に戻ることが無い以上、今のReactなどを覚えて実践して、エンジニアリング力を高めても、決して損することはありません。

・ React がもたらしたパラダイムシフトの影響は誰も無視できない

ウェブフロントエンドは元々DOMを直接操作したり、おもちゃのようなスクリプトをやっていればそれで良いだけの世界でしたが、すでにそのような時代ではありません。石器時代とは異なり、仮想DOMなどといった抽象化が導入されました。

もしあなたが他のソフトウェアエンジニアと差をつけたいのであれば、モダンフロントエンドを学び、実践すべきです。前回の記事にも書いたように、古い知識忘れ、公式をひたすら読むことがその方法です。

複雑性との戦いと変化への適応のためにソフトウェア工学を学び実践しよう

先程も述べたようにソフトウェアエンジニアリングの本質は複雑性との戦いであり、変化への適応にあります。

ビジネス状況は常に変化します。2020年オリンピックが感染症の世界的流行によって延期になるなどと誰が予想できたでしょうか？あるいは今回の不況がもたらす経済的インパクトはリーマンショックをも超えると言われています。

ビジネスの世界に大きな地殻変動が生じます。これはもう間違いありません。

ソフトウェア開発では、複雑性を抑えて、いかに変化に適応しやすいようにするか？というのがキーです。

アジャイルソフトウェア開発宣言が発表されてから20年近くになります。そもそもアジャイルのさらに源流の概念にしても、20世紀に生み出されたものです。

ここ20年ほどで様々なものが生み出されました。ユニットテスト、CI（継続的インテグレーション）、CD（継続的デリバリー）、リファクタリング、ペアプロ・モブプロなど。あるいはgitおよびGitHubなど、バージョン管理システムなど数え上げられないほどの有益な技術・概念です。

現代プログラミングではそれらは統合されています。テストを書くからCIやCDが可能になり、CI/CDがあるからこそ安全にリファクタリングができるようになりました。それらはgitなどのバージョン管理システムと連動して、フルオートで動きつづけます。

たとえば DDD（ドメイン駆動設計）のような常にビジネスロジック（ドメイン知識、ユビキタス言語）に合わせて設計やコードを書き換えるというのを実践するためには、リファクタリングが絶対必須です。

これがもたらす生産性向上が大きいことは間違いありません。

同様に、ソフトウェア設計論も進化し続けています。

たとえば20世紀の間に培われてきた経験則は、SOLID原則という名前で形式化されました。複雑性を抑えるためには、疎結合と高い凝集性が重要なためです。

それらの知識を元に様々なソフトウェアアーキテクチャが生み出され、前述のDDDや、The Clean Architecure （クリーンアーキテクチャ）などとして世に広まっています。

フロントエンドでは The Clean Architecture よりも派生形である VIPER の方が馴染みやすいかもしれません。

さて、伝統的なフロントエンドはおもちゃだったために、設計論などソフトウェア工学は軽視され続けてきました。でも今は石器時代ではありません。令和のいま、バックエンド以上に複雑化しつつあるフロントエンドにはソフトウェア工学の重要性が増すばかりです。

・ ソフトウェア設計論やソフトウェア工学といった基礎そのものを学び実践すべき

もしあなたが他のフロントエンドエンジニアと差をつけたいのであれば、ソフトウェア設計論やソフトウェア工学を学び、実践すべきです。

ウェブで色々探してもいいですが、古典的な本を読むのもいいでしょう。最近は色々な本が現代向けにリプレースされていることもあります。細かい中身は変わり続けても本質が変わることはあまりありません。

・ 自動テスト （ユニットテスト、スナップショットテスト、画像回帰テスト、E2Eテストなど）
・ リファクタリング（外からみた振る舞いを変えずに中身を改善すること）
・ CI・CD
・ バージョン管理
・ ソフトウェアアーキテクチャ
・ etc...

バックエンドJavaScriptに手を出してみよう

これは人によるかもしれませんが、バックエンドJavaScriptをやってみる価値はあるでしょう。

Firebaseなどと言った、お手軽BaaS/mBaaSもありますが、それだけだと引き出しとしては弱いかもしれません。

Prisma や Hasura のようなフレームワークや、Apollo Server のような BFF をやっておくと、バックエンド込みで手早くプロトタイプを作る、リーン開発に有利になります。

何よりもフロントエンドだけ開発するのではなく、バックエンドも、フロントエンドと同じ技術で、地続きに開発できれば、それは間違いなく強みになります。

・ 世界的に見て大規模なサイトから中小規模のサイトまでバックエンドJavaScriptは、部分的導入を含めれば、決して珍しいものではありません

もしあなたが他のソフトウェアエンジニアと差をつけたいのであれば、バックエンドJavaScriptを学び、実践するといいかもしれません。

自分をフロントエンド寄りにしたいのか？バックエンドも込みでウェブ開発者としてやっていきたいのか？で決めるといいでしょう。HTML/CSSの達人なら前者で良いでしょう。でもバックエンドの知見があるなど、ウェブ開発全般を極めたいなら、ぜひともバックエンドJavaScriptを始めてみましょう。

リンクなど