00:16
はい、みなさんこんにちは。Keithこと桑原です。本日もやっていきましょう。
keithのエンジニア雑談チャンネルです。この番組では、Web業界に関することや、
エンジニアリング、いろんな技術についての雑談などの情報を発信していきたいと思います。
本日はですね、昨日に続きまして、Webフロントエンドの技術、何を学ぶのかだって、
今は何をキャッチアップしなきゃいけないのかなっていうのの、自分で思うことをダラダラと
喋りながら、脳内整理をしていってるっていう感じですね。
昨日はスタート4で出て、ランタイムフレームワークとか、
あとテスティングフレームワークですかね。確かテストの話をして止まった気がしますね。
レンダリングフレームワークの話もしましたね。
今日はそのテストの続きからちょっとしゃべってみたいなと思いました。
テストの続きなんですけど、今日はRinterフォーマータというところから入りたいと思います。
Rinterとしては基本的にはESLintがほぼほぼデファクトと言って良かったでしょう。
フォーマッターもPretierが多分デファクトなんじゃないかと思ってますけど、
最近そこにDprintというフォーマッターが入りましたね。
ラスト製です。いやもうラスト盛り上がってますね、本当に。
この尺子もそういう静的解析だったりCLIツールってラストで置き換えられていく時代なんだろうなと思いつつ、
自分もNode.jsのバージョン管理とかも、昔使ってたのはNodeMを使ってたんですけど、
今はVoltaを使ってます。Voltaもやっぱりラスト製で、単純に速いからっていう理由で使ってるんですけど。
そんな感じで色んなものがどんどんラストで置き換えられている時代だなと思います。
というのでフォーマッターとしてDprintというのができたんですね。
あとはこれ読み方分かんないですけど、biomunanというものが出たらしくて、
これは僕の会社の中でスラックで若手の方が教えてくれたんですけど、こんなものが出たと。
新しいフォーマッターで、とにかく速いと。
公式サイトのReadMeにも書いてあるんですけど、
ビジュアル使った時よりも比較して96%速くなりますよって言ってて、
何をもって96%速くなったかっていうのはまたあれですけども、
少なくともそういうデータは出ているってことですね、この会社さんの中では。
いや、そりゃすげえ話だと思いました。
一旦Biomと読みますけど、バイオムかもしんないなってちょっと思いましたが、
なんでもいいや。
英語の読み方は後で見るとして、これがラスト世代のやつができましたと。
ただこっちはですね、プラグインの仕組みが現時点ではないらしいですね。
さっきのDprintはプラグインの仕組みがあるんですけど、このBiomの方はプラグインが今のところはない。
ロームのチームが新たに開発していると。
あ、そうなんですね。ローム作ってた人たちが作り始めたんですね。
名前ちょっと似てるわけですね。
こっちはでもRinterプラスFormatter両方やってくれるらしいですね。
いや、これはでもありがたいかもしれない。
ESLintとPretierを両方とも入れて、それぞれの互換性だったり、プラグインを入れて、
03:05
よしなりバッティングしないようにみたいなことをやってたけど、
これが一つのスタートパーティーのライブラリで解決するんだったら、それに越したことはないなっていうところですね。
続いてStandardってやつですね。これもRinterとFormatter両方あります。
名前しか知らなくて全然使ったことはなかったんですけど。
最後にロームですね。こちらもRinter、Formatter、ホゲホゲといろんなものが入ってますけど、
こっちはもうアーカイブ済みだそうですね。
使いたい方はもう使っていいと思いますけど、
枯れているというかアーカイブされているので、今後はもうBIOMに移っていくんだろうなと思います。
人気というかダウンロード数を見ますと、
NPMトレンズ使われてますけど、やっぱりESLintとPretierが圧倒的ですよね。
この2つがほぼほぼRinterとFormatterとして派遣を取っていると思ってはいいでしょう。
ESLintとPretierを除くとBIOMの伸びが圧倒的に高いらしいです。
Deeprintもちょいちょい話題になってますけどね。
あとなんだっけ。GitHub Starの数を見ているんですけど、
こちらもやっぱりBIOMの伸びがすごく良いと。
DeeprintがGitHub Starとしては横ばいになりつつあるので、これは意外ですね。
今後のState of JSの伸びとかその辺気になりますけど、
よく考えたらState of JSにRinterとFormatterのカテゴリー確かになかった気がするので、
この辺は気になりますね。追加してくれたら嬉しいなと思います。
なかったのは今までは選択肢がほぼESLintとFormatterで確定していたからかもしれないですね。
続いての名前はCSS Frameworkですけど、これはほぼ決まりきっている感じはすごいんですが、
去年のState of CSSというサーペンもありましたけど、これでもはっきり消滅されてましたからね。
一応名前だけをガッと挙げると、BootstrapとかTailwind、BulmaとOpenPropsとUNO CSSとAntDですね。
よく聞いた名前だなという感じですけど。
他にもいっぱいありますし、マンタインってやつもあったり、
ラディッツじゃなくて何だっけ、なんたらCSSみたいなやつがあって、
結構最近出てきたものとか話題のものとかたくさんあるんですけど、
あとはTypeScript互換のやつとかもあったりするので、どれを本当に名前出すかすごく難しいです。
Bootstrapは歴史的にすごく長いし、最古産ではあるというところでずっと名前が上がり続けていると思うんですけど、
何がそういうかって、Bootstrapは未だにちゃんと公式チームがメンテナンスをし続けているし、
機能拡張とかも考えてられているし、メジャーバージョンが上がり続けているのがそういうところですよね。
そこが本当に素晴らしいなと思います。
最古産ですけど、全然未だに世界でも使われ続けているという、もうOSSの理想系ですね。
こういうチームになったら理想だよねっていうのが本当にそのままだと思います。
続いてTailwindですね。
やっぱ去年一昨年と伸び率という利用率という人気ナンバーワンのCSSフレームワークです。
案の定やっぱりダウンロード数もBootstrapとTailwindがほぼ圧勝ですね。
他のやつらと完全に群を抜いています。
Tailwindはまあまあご存知だと思いますけど、議論しまくられてますし、
06:02
批判もやっぱ大きいですね。
まあいろんな言い方もあるしあれですけど、
WebコンポーネンツとかWeb標準のことを加味すると、
果たしてTailwindはどうなのっていう話は言いたいことはわかりますけど、
結果やりたいことはスタイリングだったり装飾だったり表現の話なんですよね。
結局CSSフレームワークって。
それができるのであればWeb標準であることっていうのは確かにシステムとしては望ましいし、
開発者としての思想としては良い話ではあるんですけど、
とはいえやりたいことは見た目の装飾ってところをいかに効率よくとか、
いかに便利にまた開発者の時間を使わないようにするってところが焦点だと思いますので、
まあ別に僕は何でもいいなと思っております。
ただまあ思想的にユーティリティの塊であるTailwindは捨てやすいし入れやすいっていうのはもちろんあるんですけど、
それだけフランクにやるってことは逆に言うといろんな縛りとか制約をつけないと大々カオスになるなっていう話ですね。
あとはHTMLのDOMが見た目上汚れますよね。
DOMにそのまま直接スタイルを書いていくっていうところなので、
パッとクラス目見たら何をやるかっていうのは見たらわかるんですけど、
結局CSSってJengaみたいにいろんなものをどんどん組み合わせていくじゃないですか、設定っていうか。
スタイリングの話をどんどん変えていくので、
結果DOMがどんどん長くなっていって汚れていくような見た目になってしまうので、
それをどこまで許容するかっていうのと、
しかも書き方の順番とかも人によってバラバラになるので、
この辺が気にはなりますよね。
CSSって後がちじゃないですか。
後に書いたやつが優先されてしまうので、
その書き方の順番変えたら、
CSSちゃんと当たる当たらないって人によってバラバラになる気がしていて、
その辺の問題もあったりするのがあってどうなんだろうっていうのはありますね。
あと、CSSわからない人が、
あまり慣れてない方がTailwindとかの思想に乗っかって書くと、
便利に早く書けたり、わからない人でも書けるようになるっていうのは、
一定間違ってはないんですけど、
でもCSSをわからない方とか慣れてない方が書くと、
途端にカオスになって、一応スタイレンが当たらないよって話と、
すぐに問題が当たる気がするので、
Tailwindはやっぱり慣れた人が書くフレームワークだなっていうのはちょっと思っていますので、
その辺を加味してTailwindの導入は、
僕は一朝一晩というかちょっと会議的なスタンスでいます。
僕の質はどうでもいいや。
ダウンロード数はとにかくTailwindとBootstrapがほぼ一挙と二挙時代なんですけどね。
他、BootstrapとTailwind除くと、
アントリーがやっぱり伸びてたらしいですね。
それは確かにわかると思います。
かなり名前聞いた感じですね。
去年、一昨年と本当に名前よく聞きました。
順調にずっと右肩上がりなので、
なんだかんだ熱力、ユーザー数を伸ばし続けているところで、
こちらもState of CSSの2023のサーベイはちょっと気になりますね。
僕のCSSはもうだいたい横ばいになって、
あんまもう伸びていないんじゃないかなというところですかね。
あと、他の新興のCSSフレームワークがどこまでパイを食いに来るかというところがちょっと気になりますけどね。
GitHub Starはそんな変わらないな。
VMのダウンロード数とだいたい比例しているような感じです。
09:01
というので、CSSフレームワークでも本当ね、
今たくさんいろんなものがまた生まれてきてますので気になりますけど、
オーサムUIコンポーネンツライブラリーというGitHubリポジトリがあるので、
その辺に一覧化されているので、それを見てもいいかもねというのは確かにあるかもしれないです。
というところでした。
では続いて、みんな大好き、状態管理ですね。
いやーもう状態管理もずっと歴史長いですね。
とりあえず登場人物だけ名前をざっと挙げますと、
Redux Recoil ザスタンド 状態 MOVX VALTIO
VALTIOって読むのかなこれは。わからないですけど。
ダウンロード数とかインストール数は圧倒的にReduxですね。
まあこれはしゃーないと思います。
Fluxが出てReduxっていうのがだいぶ早く生まれたんですけど、
これも数年前からですからね。
というので、その時からほぼほぼReduxは大体派遣を取っていたという感じです。
で、React Hookが生まれてからちょっとまたいろいろ変わってきてる気はしますけど、
Hook生まれる前とかはもう僕の周りはほぼほぼみんなRedux使ってた印象ありますね。
で、VueとかNuxtを使っている方はもちろん違うと思います。
そっちの界隈だとたぶん、なんだっけ、Nuxt.jsの状態関連ライブラリもう忘れました。
もう書かなすぎて忘れました。
でもVue界隈だとたぶん新しくできた、なんだっけ、piniaってやつですかね。
あのステートライブラリがたぶん今はデファクトなのかわかんないですけど、
よく使われてると思いますけどね。
この中に名前挙がってないっていうのは、
だいたいReact系の状態関連ライブラリばっかりが名前挙がってるんだろうなっていう印象がちょっとありますね。
なのでここはVue系の方のライブラリも名前ちょっと挙げてほしかったなっていうのはありつつ、
まあまあいいとはして。
で、Reduxが未だに圧倒的に筋がでかいですけど、
ちょっと2023年から現象ですね、見方が下がり始めたって感じですね。
まあでもReduxはほぼ一時代気づいたっていうのもあるので、
ここからもうちょっとですね、Reduxの思想とReact Hooksの思想といろんなものと、
あとはReduxのでもやっぱりちょっと大きかったので、
それをもうちょっとAtomレベルで設定できたりとか、
もうちょっと状態自体を細分化をするっていう思想が今伸びてきてる印象があるので、
で、Recoilとか状態みたいなのが生まれたんだろうなって思ったりしてます。
まあReduxもすごくね、Redux SagaとかRedux Sunkとか、
いろんなReduxをさらに便利に書くライブラリーが派生したんですけどね。
まあそれぐらい盛り上がっていたっていうのはそうしてあって、
まあでも書かないとか使わないにしても一回見てもらって、
Reduxの思想を学ぶのは僕悪くないと思ってますね。
単純に思想ってやっぱ面白いと思うので、興味あれば見てみてください。
はい。で、Redux以外を見るとThe Standがかなり伸びているんですね。
すいません、僕がちょっと不勉強すぎ、かつ全然触ったことがないんで、
あれですけど、まあストアのアプローチがちょっとバックエンド、
REST APIと相性が良いんですね。
というふうに書かれてるんで、なるほどと思いました。
で、Recoilと状態の比較結構されること最近あります。
12:00
かなり小さなステート管理のライブラリとして、
状態とRecoilのよく名前聞いてて、私的には状態結構好きですね。
自分でも禅の記事書いたことあるんですけど、状態はかなり入門しやすかったし、
分かりやすかったし、状態にさらに派生した他のエコシステムとか
ライブラリが生まれているので、開発者にとった環境というのは
整いつつあるという印象はあります。
あと状態は、確か日本人の方がコミッターでやられてたので、
そういう意味もあって応援したいなというので、僕は名前を挙げてみました。
あとなんだっけ、Recoilのメンテナーがレイオフされたニュースが
確かに最近ありましたね。
というところで、ライブラリの進化というよりも、
その中のメンテナーの人の動向とかによって
作用されるのは確かにあると思うので、
ある意味で、でもRecoilの状態もそうですけど、
小さければ小さいほどやっぱり捨てやすかったり、
置き換えたい、乗せ換えたいという時に
小さい方がやりやすいというのはあると思いますので、
そういう意味でもいいかもしれないですね。
ただ、小さければ小さいほど表現力が上がっていくので、
ボタンに漏れずしっかりコーディング規約を決めるとか、
書き方のルールを縛っていくということをしないと、
またソースコードがカオスになりがちなので、
この辺は気をつけていただきつつという感じですね。
はい、こんな感じでした。
GitHub スターも大体リタックスが圧倒的という感じ。
The Standの伸びがかなりいいよというところですかね。
今後はたぶん状態がもう少し伸びてくるというか、
周りでも名前が聞かれるんじゃないですかね。
というので、今後の動向を期待ですけれども、
僕の周りだけの話ではあるので、
全世界どうなのかというのは少し気になるので、
こちらもやっぱり今年のState of JSで
ちょっと評価しつつというところですね。
では続きまして、バリデーションですね。
はい、バリデーションもライブラリかなり増えましたね。
昔、僕はずっとバックエンドの開発を昔はやってて、
いわゆるランプ環境ですね。
LinuxランプAでなんだっけ、やっぱりA忘れました。
MはMySQLでPがPHPですね。
Aなんだ、Apacheか、ウェブサーバーの話ですね。
今はたぶんNZXのほうが人気かもしれないですけど、
昔Apacheというのもかなりあったし、
でもスラックって確かにApacheで動いてるんですよね。
ちょっとびっくりしました。
一個一個のサーバーの処理というのは
やっぱりApacheのほうが圧倒的に強いんですよね。
処理のスレッドの管理とかは全然違うんで、
NZXとApacheというのは。
で、その処理のスピードを上げる
Apacheの台数を増やすというのはね、
たぶんスラックは完全にサーバーの台数を増やして
数で一気に処理をかけるというので
勝負してるんだと思います。
これはでも本当お金あるからというのもあると思うし、
先にサーバーへの投資を考えたというのは
結構すごい判断をしたと思いますね。
さすがスラック社って感じはありますけど。
そんな感じでランプ環境で僕は
バックエンドでECサイトをずっと作ってたんですけどね。
なのでバリデーションって
基本バックエンドでやるものとずっと思ってて
フロントエンドは多少やるっちゃやるんですけど
あんまり考えてなかったんですよね。
ただ最近はバックエンドに投げる前から
ちゃんとユーザーにエラーとか
入力項目が間違ってるよっていうのを
教えてあげるのはやっぱりユーザー体験としては
高いんですよね。っていうのもあるので
15:01
フロント側でもバリデーションをするっていうのが
もう今は当たり前の思想になってきたんじゃないかな
と思っています。
そのためのライブラリもたくさん生まれてきた
というところですね。
僕はバリデートJSぐらいしか知らなかったんですけど
今は全然知らない名前がいっぱい出てきますね
っていうのでやっと本題に入りますが
登場人物は
AJVとZODと
JOYとYAPと
バリボットってやつですね。
僕はZODしか知らないですね。
この5個のうち4つ全然知らない名前だったんですね。
この中で比較すると
AJVってものが圧倒的に
ダウンロードされてるんですね。
全然ZODだと思ったんですけど
やっぱり進行ライブラリだけあって
まだまだそんなに浸透してるわけじゃないんですよね。
JSONスキーマは言語選ばず移植できるから
選択肢に上がるっていうのが納得ですと。
それは確かにそうですね。
設定周りがJSONスキーマで書けるのであれば
そりゃあそうかもね。
他に全然流用できるという意味で
一回これで書けておいて
他でそこにポンとそのまま設定持っていけるのは
結構大きいかもしれないですね。
AJVを除くとやっぱりZODの
勢いと伸びがやっぱり
伸びてるなって感じですね。
JOYもYAPバリボットも
全然名前知らなかったので
不勉強だなぁ。
どこでバリデートをかけるかっていうのは
また別であるかもしれないですね。
まぁまぁZODでいいんじゃないかなと思いますけどね。
タイプスクリプトを使っている開発環境で
あればっていう意味ですけど。
ちょっと他でもAJVがこんなに伸びてるというか
単突だったの知らなかったので
ちょっと触ってみようと思います。
GitHub Starもだいたいダウンロードすると
ほぼほぼ綺麗してるような感じですけど
スタースはZODが実は一番だったんですね。
へぇー、なるほどでした。
で、オルタネイティブのZODを歌っている
バリボット。あぁバリボットはそういうもんなんですね。
ZODのオルタネイティブなんですね。
はい、で、一時期話題になって
急激にスタースを伸ばしていたと。
すいません、僕は知らなかったですので
その話題にすら乗れなかったなぁ。
ラストですね。
ラストはアニメーションライブラリですね。
アニメーションはCSSでやるのか
それともJSでやるのかっていう議論は全然あるんですけど
まぁとりあえず名前だけ出していくと
アニメートCSS、フレイマーモーション、ギャスプ
ロッティウェブ、リアクトモーション
リアクトスプリンク、リアクトトランジッション
グループというのでリアクトばっかりだな
これ。
アニメーションって
アニメートJSっていうのも確かあった気がしますけど
まぁもうあれ古いんですかね。
僕の周り確かに名前聞かなくなったし
まぁCSSでアニメーションすることも
まぁだいぶ増えてきたっていうのもあるんで
はい、さておきですけど
そっかぁ、今はもうやっぱ僕のライブラリ
ちゃんと棚載ししないともうおじさん化してますね
名前あげたんですけど
NPMダウンロードを見ますと
リアクトスプリンクが強いのかな
ほんとに
もちろんアニメートCSSもかなり人気っぽいですけど
リアクトスプリンクがもう圧倒的に
数字1個伸ばしているのかな
これは、と思いますね
ごめんなさい、リアクトスプリンクではなくて
リアクトトランジッショングループが圧倒的ですね
これ、ごめんなさいダウンロードするの
まぁやっぱりでもそもそもリアクトが
圧倒的にJavaScriptフレームワークで
使われ続けているっていうのもあって
確か年間ダウンロードする9億
いってましたよね、っていうのがあるので
リアクト周りのライブラリがかなり注目
18:01
浴びているっていうのはその当然ではあるんですけど
とはいえこんなに伸びるとは思ってなかった
リアクトトランジッショングループ
っていうのが単突中の単突で
数字を取り続けているといったところですね
で、アニメートCSSは
なんか更新がしばらくないらしい
まぁでもこれも昔から定番のライブラリっていうところで
はい、ごめんなさい、僕は知らなかったです
あんまりアニメーションを書いたことがない
っていうのがその背景にあって
やったことないから知らないけど、知らないが
果たしてどうなのっていうのはあるので
勉強し直さなきゃなっていうのはあります
あとはなんだっけ、フレームアモーションの伸びが
結構良いと、ロッティと同じくらいの
インストールで推してたんですけど
2年間でだいぶ差をつけたところだそうですね
まぁそうです、確かにアフターエフェクトも
あったりするしフィグマでアニメーションを作成する必要も
結構あったりはするので
そのロッティってやつがですね、その辺が
ロッティを使いづらさがちょっとあるのかもしれないですね
ただアニメーションを全部プログラマーの方だけで
ガリガリやるのもちょっと大変だったりするので
まぁそういうデザインツールとかを
使いながらやれたら便利だよなと思ったりしますが
まぁ環境と
やりたいことどこまでやるのと
そもそもアニメーション必要なのかどうかって
別の議論も全然あったりはするので
まぁその辺との比較っていう気はしますけど
まぁ本当フロントエンド今学ぶこととか
知らなきゃいけないことたくさんあるんですね
っていうのがつくづく感じましたっていうのと
あとまぁこの中になかったんですけど
なんかパフォーマンス改善とか
パフォーマンスチューニングのための
可視化ツールとかライブラリとかがあったらまたよかったな
と思ったりしましたね
例えばウェブパックとか使ったら
ウェブパックのアナライザーってものがあったりするので
まぁそれを入れると例えばバンドルの中で
どのファイルとかどのライブラリ
どのソースコードがどれだけ容量を
食ったりとかかなり重いですよっていうのが
可視化されたりまぁそれもパフォーマンスチューニングの
一つですけどもあったり
あとなんだっけパーティータウンみたいなものがあって
パフォーマンスチューニングのためにこれを入れると
まぁそのサードパーティーの解析系のタグとかを
入れるんですけどそれはバックグラウンドで
処理しつつ先にレンダリングの方を優先させる
みたいなパーティータウンっていう
ライブラリがあったりとか僕は結構この辺が
気になったりはしますね注目
してたりしますあとはやっぱり現代だと
あれですね
アクセシビリティA11Yですね
アクセシビリティの話もだいぶもう話題に
上がってきてますしデジタル庁の
公式サイトがアクセシビリティすごい
考慮されてるっていうところもあるので
今後日本でもしっかりアクセシビリティの
話題がどんどん上がってくる気がしてますので
この辺がまたなんかライブラリとかツールとか
があれば気になったりするので
テレ飛ぶしJSでアクセシビリティの
項目あったか覚えてないんですけど
もしあるんだったらアクセシビリティは
注目していいと思ってますし
海外とか特にアメリカだと
アクセシビリティ考慮しないと
なんか裁判座になったみたいな事例もあるぐらい
なのでこの辺はしっかり追っていきたいなと
は思ってますねやっぱウェブエンジニア
としてははいこんな感じで
この辺が僕の後気になるところで
またなんか記事見つけたら
喋っていきたいなと思ったりしてます
はーいでは今回はこんなところで
終わっていきたいと思いますいつも聞いて
くださり本当にありがとうございます
ではまた次回の16でお会いしましょう
バイバイ
