フロントエンド技術は、ある時期を境に爆発的進化を遂げて、面白く・DX（開発者体験）の良い世界に発展しています。

DXはDeveloper eXperienceの略で、2017年くらいから話題になっているようです。（正しい起源はわかりませんが、雑に検索した限りは、2017年のMediumやdev.toでの英語記事がヒットします）

DXに関して日本語での記事は「DX: Developer Experience （開発体験）は重要だ」を読むとわかりやすいと思います。

ウェブ技術をやっている人の中で、バックエンド側しかまだ触ってない、JavaやRuby、PHPのような言語でしかウェブに触れてない人は多く、そういった人に、今のフロントエンド情勢ってこんな感じだよ！って知ってもらいたいという思いがあり、都内の某所にある「ラボ」でモダンフロントエンドエンジニア勉強会というのをお試しで開催してみました。

元々「ウェブ系バックエンドエンジニアにこそ知って欲しいモダンフロントエンド勉強会」をやりたいなーと、ちょっと前から考えていて、それとは別に某所Slackの某分報 3/7にて、設計技術とかGit活用とか度々話題になったりするよなーという話の流れで「ラボでそういうの定期的に相談できる場とか作れれば良さそう」と言ったら、

モダンフロントエンド勉強会
erukiti先生とmotto先生にやってほしい
何でも質問できるもくもく会とか開催のハードルとしては一番低そう

とよしたくさんに言われたのでひとまず勢いだけで「今度の土日（3/9か3/10）にやるやでー」と言って、3/10 14:00〜18:00位で開催しました。

#0なのは 、お試し開催だからですね！ちなみにこの資料は今朝二時間くらいで作ったものなのでかなり雑です。

意図

ウェブフロントエンド、そしてJavaScriptは昔のイメージがあまりにも強烈過ぎて、未だに「JSってページに動きつけるようなしょうもない感じのアレですよね」とか「JSってプロトタイプベースのオブジェクト指向でなんかキモくてチャチな言語ですよね」とか「SPA技術とかいうけど、うちSPAなんていらんし」というような誤解が根強く残っています。

しかし冒頭でも触れたように、フロントエンド技術は、ある時期を境に爆発的進化を遂げて、フロントエンドを知らない多くの人には想像が付かないくらい、面白くてかつDX（開発者体験）の良い世界に発展しています。

ウェブ技術をやっている人の中で、バックエンド側しかまだ触ってない、JavaやRuby、PHPのような言語でしかウェブに触れてない人は多く、そういった人に、今のフロントエンド情勢ってこんな感じだよ！って知ってもらいたいという意図があります。

DXの向上

次世代Webカンファレンスのフロントエンドセッションでも、ここ3年くらいで一気にDXが向上してるよねっていう話が上がるくらいDXは向上しています。

僕はそのキーとなるのはVSCode+TypeScriptだと思っていて、VSCodeは並大抵のエディタと比べても高速なくせに立派にIDEなのです。

色々な情報を補完してくれるIntelliSenseはTypeScriptと組み合わせると最大限パワーを発揮しますすし、最近のVSCodeは少しずつリファクタリング機能なども実装されてきています。定義元の参照とかもさくさくできます。

ウェブというと「技術の流行廃りが早い」という印象が強いかもしれないですが、それはある意味仕方なくて、199x年代に蒔かれた芽が、200x年代にWeb2.0みたいな形で芽吹き、Chromeが台頭するまでは強烈な停滞時期があり、201x年代に進化を取り戻した揺り戻しが理由です。

その結果、何が起こったか？バックエンドエンジニアになじみ深い様々な技術や概念がフロントエンドに一気に流れ込んだのです。デザイン、マークアップ、JSみたいな感じの世界だったのが、普通にエンジニアリングが大切な世界に変わりました。

JavaやRubyやPHP、あるいはPythonやPerlでになってきたような「普通のエンジニアリングな世界」が、JavaScript/フロントエンドにももたらされたのです。

201x年代に発生した爆発的進化なので、最近の文化のいいとこどりをしているという側面もあり、199x年代や200x年代に生まれた・流行った技術よりも、スマートでハッピーなエコシステムができあがっています。

バックエンド領域からフロントエンド領域へのシフト

従来のウェブバックエンド、RailsのようなJS以外の言語+テンプレートでHTMLやCSSを書いて、サブ言語としてJSを書くという立ち位置から、最近ではBFF（backends for frontends）という、バックエンドはAPIに徹して、プレゼンテーションにまつわる部分は全部フロントエンドでやりましょうという流れがあります。

この構成にする理由は2つあり、サブ言語としてJSをやるのが複雑性を増す要因になっているため、UIのようなプレゼンテーション層とそれ以外を分離し分割統治することで問題を簡単にしようというものと、Android/iOS向けにAPIサーバーを提供する必要があるというものです。

今後のバックエンドはAPIサーバーとしてシンプルな機能を提供するというケースが多くなっていくでしょう。

また、マイクロサービスだったりSREだったり、高度で複雑な処理（機械学習など）をやったり、あるいは札束でぶん殴ってクラウドにスケーラビリティを完全に委ねるみたいな方向性もあるでしょう。

従来のやり方でウェブ技術を触ると、せっかく新しく使いやすい技術があるのにそれを活かせず、わざわざ難しいやり方でウェブ開発を行うことになります。

モダンフロントエンドは後で詳しく述べますが、従来のバックエンドエンジニアにこそ親和性の高い世界なので、バックエンドエンジニアがモダンフロントエンドエンジニアに転身、あるいは両方やるという選択肢があります。

個人的な考えですが従来のやり方でウェブ開発するよりは、APIサーバー開発とモダンフロントエンド開発の両方をやる方が、問題がシンプルになりわかりやすく、かつ潰しが効きやすいと認識しています。

SPAにまつわる誤解

mizchiさんの「SPA が、ウェブ開発のベストプラクティスになる時代」という記事に僕もすごく同意するところなのですがはてブコメントを見ると

言いたいことはわかるが正直ウェブってそんな複雑なものを本当に必要としているのっていうかどれだけの人がそれほどのものを必要としているの?と思う。

とはいえそのページ本当にSPA必要ですの?って思うこともある。技術は使うべきところで適切に使うべきだよなと。

などのコメントがあり「SPAなんていらんのでは？」と考える人が多いようですが、それは大きな誤解です。

「SPAがベストプラクティス」というのはSPA技術を使うこと自体を指していて、SPAをサービスすること自体は必須要件ではありません。

「SPA嫌い！」とか「複雑なページなんていらない」ということであればSPAじゃないサイトをサービスしても全く問題ありません。ただ、そういった開発もSPA技術で簡単かつ、統一的にできるようになってるよ！ということです。

NextやNuxtを使ってSPA技術でコードを書けば、これらのフレームワークがいくつもの役割を果たしてくれます。

1. サーバーとしてSPAなアプリケーションをサービスする
2. サーバーとしてHTML/CSS/JSを提供するサイトをサービスする
3. 2に加えてSPA機能を有効にする
4. 静的ページを生成して、あとは勝手に使う

2番はある意味Railsなどと同じような立ち位置になりますし、3番はそこにSPA機能を追加したハイブリッドなものになります。SPAがいらないという人は2番か4番を選択すればいいでしょう。SPAがあってもなくてもいいということなら3番でいいでしょう。

これらは、全く同じソースで、設定を少しいじるだけで役割を変えられます。面倒なことは全てフレームワークがやってくれるのです。SPA技術を1つ覚えさえすれば一通りのことが同じ技術で出来るようになるのです。

つまり「ウェブに複雑な挙動いらんよね」という価値観は、SPA技術がベストプラクティスという方法論とは直交できるモノです。

逆に「SPA以外のウェブ技術覚える方がコストかかるやん」という世界になるのです。

フロントエンドも普通のエンジニアリングが必要な世界になった

僕が以前、「JavaScriptにフレームワークが必要な理由」という記事や「JavaScriptにはむしろもっと抽象化がもたらされるべき」という記事を書きました。

「SPAいらんやん」「ウェブページに複雑なものいらんやん」みたいな意見と共によくある「jQueryで十分だよね」とか「フロントエンドなんてコストかけても仕方ない」みたいな意見に対する反論が、これらの記事にあたります。

200x年代のJSのチャチさ、面倒な割に得られるものの少なさが強烈な印象となって、未だに覚えてる人が多いでしょう。

今のJavaScript（の言語仕様であるECMAScript2018）はものすごく現代的なマトモな言語仕様になっていますし、DOMを直接操作したりjQueryバンザイな時代のバッドノウハウを覚える必要はありません。

むしろ、バックエンドでJavaやScala、あるいはRubyやPHPを触ってきた人たちが体験してきた技術や文化こそ、今のフロントエンドに必要なのです。

それはレイヤードアーキテクチャだったり、色々なオブジェクト指向や関数型言語のノウハウ、ユニットテストや、静的型付けによる安心感のような、プログラムの複雑性と戦うためのもの全てです。

モダンフロントエンドを、まっとうなコンピュータサイエンス、設計論で適切に開発できる技術者は足りていません。

フロントエンドなんてチャチだと思ってたバックエンドエンジニアの方にとっては、モダンフロントエンドはブルーオーシャンです。

まとめ

長々と述べましたが、今のフロントエンド技術は、DX（開発者体験）がすごく良くなっていること、SPA技術を覚えれば、Web制作にまつわる他のあれこれもカバーできるようになっていて、この事実をバックエンドエンジニアにこそ知って欲しいということでした。

予定

今回の勉強会ではハンズオンも含めてやってみましたが、Macでanyenv+nodenvでも意外にインストールで手間取るという知見などが得られたので、本開催のときはそこらへんを改善しますし、何より資料ちゃんと作り直します。

時期はまだ未定ですが3月末か4月に1回目を開催しつつ、モダンフロントエンドについて勉強・相談できる会を月1くらいで定期開催していきたいと考えています。

今回の資料ではさわりの部分にしか触れてませんが、Reactで作るとき実際どうなの？Nuxtで作るときどうなの？Dockerと組み合わせたり、Firebase活用したりと言った、実際の部分を中心に定期的に勉強・議論・相談できる会にしようと思っています。

詳細が決まればまた情報を書きたいと思います。