フロントエンドの今
2020-12-15
こんにちは
どうも、僕です。
今日はフロントエンドについて書いて行こうと思います。（抽象的〜〜〜）
僕はフロントエンドの人間ではないのであまり詳しくはないのですが、そんな僕でも知っていることや最低限意識していることなどを簡単にですがまとめていきたいと思います。
最近のフロントエンド
最近はフロントエンドの進化が早く、バックエンド側まで侵食しかけている印象を受けます。SPAとはみたいなことを思うようなフレームワーク（Blitzとか（僕は好かない））なども見かけますが、そこは今回は考えないこととして、あくまでSPAでのコーディングを前提とした話をしていますのでよろしくお願いします。
また、解釈や概念が違う、これも書いた方がいいなどがあればコメント欄にご記入ください。よろしくお願いします。
アトミックデザイン
アトミックデザイン、これはとてもいい感じの概念です。
近年、コンポーネントベースのフレームワークが増え、共通化が容易になってきました。
アトミックデザインはページを作成する際にAtom（原子（最小単位））の組み合わせで構成していくという概念です。
これをすると何が嬉しいのか、それはパーツなどを使い回すことができます。
個人的には[このサイト](https://uxdaystokyo.com/articles/glossary/atomic-design/)がわかりやすくて好きです。
アトミックデザインのアトミック、その構成要素としては以下のものがあります。
と大きく5つくらいに分類されます。
どれくらいの粒度で分割するか、その他の設定については現場によって異なりますが、基本的にはこんな感じでやっています。
僕は個人開発ではここまで細かく区切ったりしないですが、まあ原子と有機体とページくらいには分割します。粒度は組織によってお任せなのじゃ。
Web Assembly
巷でwasmという愛称で親しまれているWeb Assembly。
wasmはブラウザ上で動くバイナリコードの新しいフォーマットであり、Web開発をする上で言語の多様性をもたらしてくれます。ブラウザ上でプログラムを実行するという新しい概念（仕様）であり、高速に実行することができます。
とは言っても、そもそものJSの処理が速いので使い所を間違えると逆に遅くなってしまったり、、、なんてこともあります。
ではなぜ速いのでしょうか？wasmは抽象構文木でバイナリデータが与えられてるため字句解析や構文解析の過程を省くことができ、処理が高速になります。人類は例外なく一度はプログラミング言語を作成したことあるはずですから、ここの処理がなくなることの恩恵はみなさん身に染みて感じることができるはずです。
先ほどwasmは使い所によると言いましたが、一体どのようなユースケースがあるのかを考えてみましょう。
力で殴れないのでこれくらいしか思いつきませんでした（もっと深く学びたい）
でもこれだけでも今後のWebに対しての未来は明るい気がします。
これってDOMをいい感じにいじれたりしないのかなとか思ってます。また、Web以外の部分にも全然応用できそうだし、またサーバとフロントの表裏一体（htmlをサーバ側でレンダリングする手法にはならなそうだけど）の時代になってもおかしくないのかなとか思ってます。（blitz的なポジションのやつ）
ここは後日別記事で深掘りします。
（個人的にはGolangが好きなので[ここらへん](https://golangtokyo.github.io/codelab/go-webassembly/?index=codelab#4)を参考にして頑張る）
JSからTSへ
これは今更言うことでもないくらい進んでることですね。今やTypeScriptを推してる人は世の中には多く、僕調べだとなんと100％の人がフロントエンド開発ではTypeScriptを使用すると言っています。(n=3)
TypeScriptを使用するメリットとしては型を安全に処理できることでしょうか。
JavaScriptライクなのでこれもまた人類皆例外なしにコードを書くことができますし、型がしっかりしてるので何かおかしいところあったら実行前に「てめえ！！」みたいなこと言ってくれますし、JavaScriptでよくある実行してみてあーらびっくりみたいなことがなくなる気がします。
また、想定できるどんな型でも書けちゃうし、if文で型チェック入れれちゃうし最強かて。
また、みんな大好き入力補完が強力です。VSCode使ったらさらに恩恵を感じられそう。
さらにさらに、DOMのイベントなどは最初から型がついています。イベントリスナーのeだったらeのメンバーはもう補完の対象です。いますぐVSCodeのインストールとTSの拡張を！！
SSR
これは「ダブルスーパーレア」のことです。（真顔）
ほんとはSSRはサーバサイドレンダリングのことを言います。
これも最近だともはやイチローくらいの知名度を誇っているので特筆することはないのですが、とても大事な技術です。
概要を以下に書きます
こんな感じで先にやることやっていい感じにしようねって感じです（抽象的な表現を避けてください。ごめんなさい。）
これが通常のSPAだとして、これだとクローラーがしっかり認識してくれなかったり、クライアントがリロードなど処理をするたびにフェッチしてしまうので無駄が生じてしまいます。
これをSSRをすると以下のようになります。
BFFなるものが登場しました。こいつは何かというと、レンダリングをしてくれるやつで、リクエストをまとめて受け取り、それをいい感じにしてクライアントに渡してくれます。これをすると、先にページを作ってある状態でクライアントに渡すことができるので非常に良い感じになります。（良い感じとは）
マイクロサービス化
マイクロフロントエンド？などと呼ばれています。
これ良さげ。
マイクロフロントエンドはアプリケーション開発で、その実装とは異なる部分で開発をする他のチームのためにフロントエンドのアーキテクチャを分割するという約束をしてくれる概念です。どういうこっちゃって感じですよね。
要は、マイクロサービスにフロントエンド（UI）まで含めてしまおうみたいな考え方です。
近年ではSPAサイトが主流であるため、マイクロサービスとしてもフロントエンドとサーバサイドは切り離して考えることが一般的ですが、ここではフロントエンドもマイクロサービス化してよしなに開発をしようという考え方です。
これをすることによって肥大化するフロントエンドの管理が楽になり、エコシステムとして活躍することができます。
富豪的プログラミングは死後？
みなさん、富豪的プログラミングって言葉を知っていますか？
数年前に話題になった（まだ僕はその頃は生まれてない（は？））概念なのですが、フロントエンドの多少のリソースは気にせずにリッチなUIを作ろうという考え方です。
慶應大学の増井先生という方が唱えたもので、個人的にはこの考え方は好きです。増井先生といえばスマホのフリック入力の開発をしたことで有名で、あれもリッチなUIの1つだと考えています。
ただ、近年はSPAサイトが主流になり、wasmのような技術が出てきている中でリッチなUIを低リソースで実現することは不可能ではなくなってきているため富豪的プログラミングという言葉自体がいい意味で忘れられてるような印象を受けます。
リッチなUIを高速で実現するための技術が発達してるので考える必要がないということです。すごい時代。
まとめ
ここまで割と最近の技術についてまとめてきましたが、最近の技術はやっぱりすごいなあと感じました。個人的にはwasmをしっかり勉強していきたいなと感じました。
また、これ書いてたらあとからそれぞれの項目について1つのブログにしたいと思ってきました。今度やります。
最後まで読んでいただきありがとうございました。