00:05
はい、1月27日金曜日ですね。時刻は朝9時を回りました。 今日も東京は寒いらしくですね。
最低気温はマイナス1度だったり、今日は断属的に雨が降るらしいですね。 はい、今日も皆さん、体調を気をつけて頂ければなと思います。
はい、おはようございます。ひめめのkeethこと桑原です。 では本日も朝活を始めていきたいと思います。
本日はですね、昨日の配信で言った通りですけど、JS周りの方を優先して読みたいなと思ってたんですけど、
ちょっと久しぶりにですね、JSインフォの記事ですね。
アズさんっていう方が毎週毎週更新されている jsa.info っていうサイトがあるんですけど、それを今日読んでいきたいと思います。
毎回見てはいるんですけど、ちゃんと配信で読むことってそうそうなかったんですけど、今日はちょっと読んでいきたいかななんですね。
はい、早速行きたいと思いますが、inniさんですね。おはようございます。ご参加いただきありがとうございます。
タイトルにある記事をタラタラと、ただただ読んでいく感じですね。
はい、今日はこのアズさんの jsa.info ですけど、いろんなJS周りのライブラリだったり、フレームワークだったりの更新をざーっと集めて、それをまとめてくださっているというような記事なので、
ちょっとニュース記事に近い感じになりますけどね。はい、まあ情報いっぱい出てくるので見ていただければと思いますし、
僕は新しいライブラリとか新しいフレームワーク系の情報だったり、そのリリースっていうのを jsa.info から受け取ることが結構多いんですよね。
はい、それぐらいアズさんのこの記事は毎回毎回お世話になっていてですね。はい、すごくいい記事なので興味があったら見てみてください。
じゃあ本題に入っていきたいと思います。2023年1月24日のJSということでいきましょう。
一つ目ですね、jsa.info 628で版のバージョン0.5っていうのがまずリリースされましたと。
はい、版っていうフレームワーク的なものがあるんですけど、パッケージJSONのワークスペーシを使ったインストールをサポートしていますと。
ノードJSONの互換性としてノードコロンDNSとノードコロンDLS、そしてノードコロンネットとノードコロンリードラインのサポートも追加になりましたよと。
またモジュール解決しの識別しの優先度の変更などもこの中に含まれているようということでした。
細かいのは版のバージョン0.5っていう版ブログが公式に出てますのでそれを読んでみてくださいと。
今更だけどこれ版って読むのか文って読むのかわかんないですけど多分版だと思うんです。
では続いてリミックスのバージョン1.11.0っていうのがリリースになったそうです。
こちらも公式ブログがあるので見てみてくださいと。
今回の更新にはDifferを使ってレスポンスのマッチを減らせるようにしたとか、
atremix-runの//css-bundleですね。
のようにCSSファイルのロードとかCSSモジュールとかBunnylikeStructのサポートも追加になったようですね。
リミックスも地味に進化してきているようなところでした。
またリミックスバージョン2で導入予定のflatroutiesっていうopt-inでものが利用できるような想定になっているところでした。
今1.11.0ですけどすでに裏でバージョン2のリリースに向けて実装進んでたんですね。
僕全然リミックスまだ触ったことないんですけど、サーバーサイドレンダリングに振り倒したフレームワークなので、
03:03
リミックス触れるんだったら僕の個人の感想ですけど、今はastroの方触りたいかなと思ったりしてます。
僕が今一番注目しているのは、やっぱり僕スピード中なので、
QWIKっていうフレームワークの方を僕はちょっと期待してますね。
リミックス自体も世界でも議論とか話題になるぐらい、結構利用事例も多かったりするので、
ちょっと触ってみてくださいってことでした。
続きまして、Fixing a Memory Leak in a Production Node.js Appっていう記事と動画があるそうですね。
YouTube動画がありますけど、こちらではNode.jsのアプリケーションで発生したメモリーリークの原因を調査して、
どのように修正していったかについて語られたり、ブログでも書かれているそうですね。
動画でのライブデバッグでは、Node.jsのメモリープロファイラーですね。
Chrome DevToolsとかですね。
を使ってメモリーリークの原因をデバッグしていたりします。
あと、Heap Snapshotsを使ったメモリーリークのデバッグだったり、
AutoCanonみたいなHTTPのベンチマークツールを使って継続的にリクエストを送って、
状況を再現させる方法などを紹介しているそうですね。
待機したりとか時間ロスしたりとかっていうところがあると思うので、
これ見るツールがあるんだったらそれはすごくありがたいですね。
はい。
以上、3つが特筆すべきピックアップの記事でした。
ここからですね、ヘッドラインで一気にいきたいと思います。
1つ目ですね。
1つ目は冒頭にもありました、バンのバーチャル0.5ってところですね。
はい、これはちょっと簡単にします。
続いて、リリースですね。
version2.0.0-alpha.1ですね。
ReduxJSのReduxツールキットですね。
Reduxツールキットのversion2.0.0-alpha.1がリリースになるそうです。
ESM形式とCJS形式のデュアルパッケージに変更になったと。
あと、SANK関数とRedux-SANKのパッケージへ、
SANK関数をRedux-SANKっていうパッケージに移動したと。
あとReduxツールキットってSANK関数あったんですね。
それがちゃんと明示的にパッケージに移動になりましたと。
version2.0正式版にはImageというものを含める予定になっているとかそうですね。
Imageのプロポーザルとかのリンクとか貼られたりしてますので、
興味ある人は公式リポジトリのイシューとかを見てみてください。
結構Reduxツールキットを使っている事例は結構増えてきていると思いますので、
使われている皆さんはちょっとこの辺見てみてもいいんじゃないかなと思いました。
まだα1なので、ちょっと静観するぐらいでもいいかもしれないですね。
続いて、Q1ロードマップイシューですね。
DINOですね、これは。
DINOのロードマップのイシューが立てられているそうです。
DINOの2023年のQ1ですね、Quarter 1のロードマップというのが公開されましたと。
DINO.jsonに直接インポートマップを埋め込めるようにしたとか、
type="modules",のパッケージJSONをサポートしたりとか、
node://のプレフィックスのサポートになったとか、
結構いろんなものをサポートするように今のところそのロードマップが描かれているそうですね。
DINO.land/.xでのセムバー指定のサポートだったり、
あとDINOバンドルをデプリケートにしてDINOパックになったとかなるなどとか、
06:01
いろいろやろうとしていることはありますね。
Q1だけど常に大きいことをやろうとしているので、
今年一年DINOでかなりまたいろんな変化を解けるのかなっていうところはありますので。
DINOね、プラットフォームだったり技術ですけど、
いい加減触らなきゃなって思いながらいつも逃げてきたんですけど、
どっかでチャレンジしたいと思います。
続いて、SAFARIの16.3のリリースですね。
リリースノートもちゃんと出てますよってことでした。
あとはCSPですね。
CSPにprefetch sourceっていうディレクティブを追加したなど、
細かいところですけどちょこちょこ変更したり問題修正したよってところなので、
SAFARI使われている方はのきなみにアップデートしていいんじゃないかなと思いますね。
バグ修正がほとんどっぽいです。
マイナーリリースなんですけど、いろいろ問題修正とか入っているので、
普通に上げていいんじゃないかなと思ってたりしましたね。
では続いて、次はJESTですね。
FacebookのJESTですけど、Ver.29.4がリリースになりましたと。
メジャーバージョン29だったんですねJESTって。
いやーすごいな。頻度高くJESTで更新されてるんですね。
JESTをそもそも何かっていうと、
Node.jsベースでの文字通りFacebookが作ったフレームワークですけど、
もちろん、あとはオブジェクトのプロパティをMockする
JEST.replaceプロパティみたいなものを追加になったりだと。
あんま大きい変化でやっぱないですね、これは。
ですけど、興味ある人は見てみてくださいということでした。
続いてRemixですね。
Remixのバージョン1.11.0がリリースになりましたと。
これも冒頭に言った通りですね。
では続きまして、アーティクル、記事周りのところです。
ここからはいろんな記事がまたピックアップされてますけど、
今日はヘッドラインがちょっと少なめで、今回はアーティクルがかなり多いですね。
1つ目の記事ですけど、
Next.js製のアプリケーションのコンパイルを約100倍高速化した話っていうのが前に上がってそうですね。
Next.jsのビルド速度の問題を.nextスラッシュトレースのトレースデータを見て分析する方法っていうのを紹介されてるってことでした。
一応ですね、バーセルが公式に出しているイシューがあって、それをベースに何かやられてるっぽいので。
確かにNext.jsのトレースってあんま使ったことなかったんですけども、
約100倍高速化したって結構すごいですね。
どれだけ逆に既存の作り方が遅い作りになってるのかってそれも気になりますけど、
興味ある人は見てみてくださいと。
続いて次のブログは、Why Not Document Writeっていう記事ですね。
CSS Wizardryっていうところの記事だそうです。
これもまたウェブパフォーマンスオプティマイゼーションですね。
最適化の記事だそうですけど、
Document.Writeっていうメソッドがあるんですけど、
それがなんで遅いのっていうところについて詳しく解説しているそうです。
ただ、CSS Wizardryっていうドメインを見る限りだと、
CSS観点の方かなとちょっと思ったりしますけど、
でもドキュメントなのでJSかもしれないですね。
続いて、Why is my test too slow?と言ってます。
はい、ジェスト。
私のジェストで書いたテスト数字がなぜそんな遅いの?みたいなブログですね。
ジェストのテストのパフォーマンス、ポトルネックの調べ方についてです。
起動時間だったり、JS DOMのロードだったり、
キャッシュだったり、テストファイルのロードだったり、
テスト実行時間についてなどなど、
Dodo JSのプロファイラーを使って、
どこに問題があるかっていうのを調べる方法っていうのを解説されているそうです。
いや、テストが遅い問題はね、
09:01
たぶんテスト書いてる人はみんなぶち当たると思うんですよね。
特にアプリケーションが大きくなればなるほど、
テストってかなり時間が比例して長くなってくるので、
この辺は結構参考になるかもしれないですね。
では続いて、
Fixing a Memory Leak in a Production Node.js Appですね。
これも冒頭に出てきました3つの記事の1つですね。
はい、Node.jsのアプリケーションでそのメモリーリークが発生して、
どんな風にデバッグして問題を見つけていったかっていう記事ですね。
っていうものでした。
で、続いての記事はSSSVGですね。
Uninterfaces SVG Referencesっていうことでした。
実際に触りながらSVGのタグを見れるリファレンスサイトっていうのがあるので、
まあこれは単なる紹介っぽいですね。
でもこれ結構いいですね。
触りながらSVGのタグが見れるサイトって地味に欲しかったやつだと思います。
特にSVGを使ってゴリゴリなんかアニメーションしたりとか、
SVGを直接触りたい人にとってはこれはすごくありがたそうですね。
えー、ffuel.co//sssvgっていうドメインURLですけど、
なんかドメイン名もそうですし、記事の名前もそうですけど、
なかなかこの人は頭文字を結構重ねるのが好きな人なんでしょうね。
では続いて、アーティクルとしてはラストで、
Optimize Time to First Byteっていう記事で、
タイムトゥーファーストバイト、あるいはTTFBっていうやつですね。
パフォーマンス周りの基準値ですけど、
これの改善についての記事だそうです。
サービングタイミングっていうヘッダーを用いて詳細化をしていくと、
あとCDNを利用したりとか、ページのリダイレクトを下げたり、
サーバーサイドレンダリング時のストリーミングサーバーレンダリングっていうのを行ったりとかですね。
ストリーミングでのサーバーレンダリングですね。
あとサービスワーカーを使ったキャッシュ戦略だったり、
103のアナリヒンツについてなどと、
結構細かいですね、これ。
かつ幅広いお話が書かれているので、
これもこれで結構参考になりそうな気がしました。勉強になりそうですね。
というところで、アーティクルの一覧は以上になりますが、
かなりパフォーマンス改善のアーティクルだらけになりましたね、今回は。
今、AZさんもパフォーマンスのところに結構注目をしているのかもしれないし、
たまたまピックアップした記事がそうだったかわかんないですけど、
今回のアーティクルは全部パフォーマンスに関わるものですね、これ。
SVGだけちょっと違うか。
パフォーマンスはどこまで行っても早いが正義なので、
終えるようになって大きくにしたことはないですね。
もちろんアプリケーションもそうですし、初期レンダリングもそうですし、
レンダリング後のランタイムのスピードもそうですし、
テストのスピードとかもそうですし、
いろんなところにパフォーマンスって話が出てくると思います。
単にエンドユーザーが使うところだけの話ではなく、
僕ら開発側のパフォーマンスを上げるっていうのも結構重要だったりしますからね。
あともう一個余談をすると、パフォーマンス周りでいくとやっぱり、
最近バンドルツール、ビートが主流というかメジャーなんだろうなと思ってて、
今年、去年か。
去年のState of JS 2022っていうのもついに公開されて、
そこそこ時間が経ち始めましたけど、
あれを見る限りやっぱりビートと、
テストの方もBテストが人気、たしか1位2位とかその辺を取った期待がするので、
やっぱりなんだかんだみんな早いものを求めるんだなっていうのがすごくありましたね。
ただバンドル、ビートはまだまだ出たばっかりっていうのもあって、
なかなか熟成してきているわけでもないので、
いろんなバグとかあると思いますけど、
それでもやっぱり早いとみんな使うというところは、
本当そうなんだなってツクツク感じました。
12:00
でもWebpackはちなみに順位かなり下がってましたよね。
なかなかきついんだろうなと思います。
一時代を築いたっていうのはすごくその通りですけど、
毎回のメジャーバージョンアップでつらかったですね。
バージョン1,2,3,4って僕も触ってきましたけど、
5は僕は触ってないです。
4まで止まったんですけども、
毎回のメジャーバージョンで結構破壊的変更多くてつらかったんで、
いいかなって感じですね。
もう一個バンドルの余談をすると、
パーセルバンドラーですね。
だいぶ前に出ました。
ノーコンフィグとかで吉成にやってくれるパーセルバンドラーですね。
ちょっとブラックボックスが強いんですけど、
実は今ってそのWebpackよりもパーセルバンドラーの方が
人気高いっていうか使われてるらしいんですよね。
あの世界ではって意味ですけど。
これは結構僕意外でしたね。
絶対にWebpackの方が上でしょってちょっと思ったんですけど、
バンドルする時って細かいところに手が届く方がいいなと思ったんですけど、
じゃない方がいいっていうので、そこは意外でしたね。
あとそれを凌駕するのがロールアップですね。
ロールアップは余談に余談が過ぎるのと、
State of JS 2022をただただ眺めながらコメントするっていう朝活動を
どっかでしてもいいなっていう気がしてきたので、
ちょっとこれ一旦は分けます。
じゃあ本記事に戻りまして、
続いてサイト、サービスドキュメントってところですけど、
こちらも今回は1ライブラリですね。
の紹介で終わってます。
GPU-IOっていうライブラリですね。
GPU Accelerated Computing Library for Physics Simulations and Other Mathematical Calculations
っていうものですけど、
WebGLを使ったGPU処理を行うライブラリっていうのが出てましたよっていうのの紹介で終わりましたね。
続いてソフトウェア・ツール・ライブラリっていうところですけど、
これもラストですね。
こちらもBluecreenっていうドメインのCanvasっていうライブラリですね。
Native Add-Onsを使ったSphereバックエンドのCanvas APIの実装ライブラリだそうです。
アーキテクチャに合わせたオプショナルディペンデンシーズで
プリビルドのSphereっていうのを含めたバイナリーがダウンロードされるため、
システムに対して事前に依存をインストールする必要がなくなりますというようなちょっと便利になったライブラリですね。
興味ある人は見てみてくださいというところで、
ちょっと今回のJSARインフォー、短めですけどこれで終了になりますね。
皆さんやっぱりパフォーマンスがすごく関心が最近強いのかなってつくづく感じましたね。
あとは去年も出てましたけど、
クラウドフレアですね。
クラウドフレアのD1が出てフロントエンド側でもかなりデータベースが触れたりとか、
エッジサーバーでSQLライトが動くみたいな話ですよね。
もうバケモンみたいな話が出てきたりしているので、
いい加減フロントエンドエンジニアとしてもCICD周りが触れるようになっておくとか、
そういうのの需要が今度どんどん高まるんだろうなと思ったりはしてますね。
三口さんもおっしゃられてましたけど、
CICDに関する専門的なエンジニアっていうのがどんどん今後需要が高まるんじゃないのっていう話もちょっとされていて、
それはなんかありそうだなっていう気もしているので、
CICDの話をすると絶対インフラ周りとネットワーク周りっていう知識が必要になり、
そうなると結果的にパフォーマンスの端は絶対出てくるので、
特にCDLなんてパフォーマンスのために入れているようなもんだから、
パフォーマンスの観点も今年もずっとメジャーなトピックなんだろうなっていう気はしてました。
それに加えてできればセキュリティのところももうちょっとホットな話題になってくれるといいなと思ったりしてますね。
15:01
僕も全然セキュリティ弱いので、
知見だったりっていうのがどんどん出てくるといいのかなと盛り上がってくれたらいいなと思ったりしてます。
ではちょっと短いですけど、今日の朝活はこちらで以上にしたいと思います。
やっぱりあれですね、
JSARインフォーはいろんな情報がバーッとまとめられてますので、
本当に新しい情報だったりニュース的なものが知れるのに本当にありがたいなっていうところでした。
皆さんも興味あったらJSAR.infoっていうサイトですね、見てみてください。
では、金曜日ですね。
金曜日っていうと結構もう週末感があって、
あまり仕事に熱が入らない人もいると思いますけど、
しっかり締めていただいて土日にのんびり休んでいただけたらと思います。
じゃあ今日も一日頑張っていきましょう。
はいお疲れ様です。
