00:05
はい、5月15日月曜日ですね。 時刻は朝9時8分になりました。
昨日から東京はすごく雨が降ってですね。 しかも今日は最低気温12度まで下がるということなので、かなり寒い1日になりそうですね。
はい、おはようございます。ひめみの技術家の桑原です。 では、本日も朝活を始めていきたいなと思います。
本日はですけども、久しぶりにちょっと技術の情報収集したいなって思ったので、またお世話になっているJSA.infoですね。
の、更新ブログをちょっと読んでいこうかなと思っております。 はい、もういつもあずさんにはお世話になっておりますという感じですね。
というところで、今日は2023-05-10ですね。 5月10日のJSというところで読んでいきたいなと思います。
多分見えてないけどオンライン上でスーさんですかね。ご参加いただきありがとうございます。 今からタラタラと読んでいこうと思っています。
はい、まあ5月10日なんでちょっと古いというか、 ほぼ先週に近いところですけどね。まあ読んでいこうと思います。
いきましょう。まあ一つ目ですね。一つ目JSAinfoシャープ643ですけど、 Next.jsのやっぱ13.4がリリースになりました。
で、公式ブログですね。Next.js 13.4というのが出ていますので、まあ見てみてください。
で、AppRouterをステーブルに変更しています。でまたAppRouterについての参考になるリソースはちょっと少ないんですけど、次の
ドキュメントや記事などが参考になるので、まあ見てみてくださいと。 さっきの公式ブログもそうですし、AppRouterですね。公式ブログのAppRouter専門の
ページがあるので、まあそれを見てみてもいいと思いますと。 あとは5 Lessons Learned from Taking Next.js AppRouter to Productionというブログもあったりしますので、
まあそれを読んでみてもいいかもしれません。 Next.js 13.4ではそのターボパックをベータに変更して実験的な機能としてサーバーアクションズの
追加なども行われていますよと。 このサーバーアクションズが結構僕の中では注目というかどうなるんだろうなっていう興味が
あるので、これは追っていきたいかなと思っております。 では続いてFirefoxの113.0というのがリリースになりました。
公式ブログ、Firefox113.0 See All New Features, Updates and Fixesというブログがあるので見てくださいと。
あとはModularですね。MDN Modularの113.4 Developersという記事もありますので、それを見てみてくださいと。
これはですねCSSのカラーメソッドとかラボメソッド、そしてインチかなというなどのメソッドなどのサポートが入ったり、
CSSセレクターのOBですねっていう構文がサポートになったなどですね。 というのがFirefoxにも追加されています。
またCompression Streams APIっていうのがあって、それのサポートが入ったとか、AndroidでAV1のビデオコーデックなどをサポートしていますよと。
その他にはアクセシビリティエンジンを刷新し、スクリーンリーダーなどを使った際のパフォーマンス改善なども行われていますと。
詳しい改善内容については次の記事で書かれているので、それを見てもいいかもねという。
先ほど見たやつの別の記事ですね。Firefox113のSignificantly Boosted Accessibility Performanceという別のブログですね。
あとはCache the Worldってやつですね。Turbocharging Firefox Accessibility Performance and Maintainabilityですね。
03:01
これはちょっと僕が別のところで読んだんですけど、この記事結構面白かったですね。Cache the Worldっていうブログが面白かったので、これは興味ある人は見てみてください。
Firefoxが中でどんな風にCacheを設計しているとか、Cacheの戦略的などうやって構造っているのかっていうのが書いてありますので、見てみると面白いと思います。
なかなかそういうブラウザ周りでのCache戦略ってどういう設計になっているかって見る機会あんまなかったので、これは本当に面白かったし参考になりましたね。
途中でChromeのCache戦略とFirefoxのCache戦略、要するに開発側の設計レベルの話ですけど、の比較の話もあってすごく興味深かったですね。
というところでメインとなるホットトピックは今の2つですね。Firefoxの113とNext.jsの13.4と。
ここからじゃあヘッドラインに行きたいと思います。
ヘッドライン1つ目は先ほどと同様ですね。Next.js 13.4でそれは飛ばして、続いてAstroですね。Astro 2.4がリリースになっています。
Scope to Styled Strategyのオプションが追加になったりとか、コードタグのコンポーネントの改善、あとはSSRGにもサイトマップをサポートするようになりましたよということですね。
あとはフラグ付きでミドルウェアのサポートしたりとか、CSSのインライン化のサポートなどなどというところで結構いろんなものが入っているっぽいので、使っている人はアップデートしてもいいんじゃないかなと思うんですね。
続いてリリースバージョン0.1.10、これはRSPACってやつですね。RSPACの0.1.10がリリースになりました。
Compilation Module 2のサポートとSplit Chunksのオプションの互換性改善など、あとはAngularの初期化サポートの追加などというのが入っているそうですね。
バージョンを見る限りパッチバージョンかなというところなので、RSPACを使っている人はアップデートしてみましょう。
続いてPNPMのリリースバージョン8.4.0が出てますよ。
今回はあんま大きなものではなさそうですけど、PNPM Publish-Provenienceのサポートになったよとかです。
そんな大きな変更はなさそうですけど、PNPMも上げて良さそうですね。これはマイナーバージョンアップなので。
続いてFirefox113のリリースです。これは先ほど読んだ通りですね。
いろんなものが入っているけど、今回はアクセシビリティ周りのところが結構大きそうでしたね。
ちゃんとスクリーンリーダーを使った際のパフォーマンス回転は結構大きかったので、この辺の話なのかなと思います。
そもそもアクセシビリティのエンジンを刷新ということで全部見直したというのがかなり大きいなというところですね。
今のがヘッドラインですね。続いてアーティクルです。記事周りですけども、1つ目の記事ですね。
オリジンプライベートファイルシステムを使ってブラウザ上でファイルを高速に操作しようというところですね。
これはZENの記事ですけど、Cybosのフロントエンドの方が書かれているそうですね。
だからCybosフロントエンドだから、フロントエンドチームが書いているっぽいですね。
オリジンプライベートファイルシステムの基本的な使い方というところですね。
ブラウザでそんなにファイル操作ってやるようでやらないので、この辺なんか気になるので興味ある人は見てみてください。
では続いて、5 Lessons Learned from Taking Next.js Uploader to Productionという、先ほどの冒頭に挙げた記事ですね。
06:00
Next.jsのアップルーターの最新記事についてですね。これ別の1個切り出した記事があるので、これ見てもいいと思います。
クライアントサイドのキャッシュとサーバーサイドのキャッシュ、あとはサーチパラメーターの扱いとか、ディレクトリ構造、学習リソースについても書かれているそうですね。
アップルーターはやはり大きいDDSであるので、しっかり触っていかなきゃわからないし、
でも公式ブログでちゃんとそういう学習リソースが出てるんだったら、キャッチアップしていきたいなというところですね。
少なくとももうアップルーターはNext.js 12と13で本当になんかデカい変更になるので、ほぼ作り直しになる可能性が大いにあるなってちょっと思ってますので。
今後でもNext.jsで案件とかアプリケーションを作るのであれば、13であるのは確実だと思うので、アップルーターはもう待った話で勉強しなきゃなというところですね。
では続いて、Chromiumブログですね。Unupdate on the lock iconというものです。
Chromium117ですね。ちょっと前にリリースされてましたけど、こちらでメニューの鍵アイコンをやめて調整アイコンに変更するという話が出てますというところで、
Chromiumの公式ブログですね、更新ブログも読んでも面白いかもしれないですね。
僕ちょっと読みたべてますけど、113周りで開発者ツールのところのリリースが結構出てたので、その辺を読んでみたいなと思ったし、
そこからついに117周りでバンバンと一気にリリースされたので、本当にChromeの進化早いなとツクツク感じますので、この辺も勉強していきたいなと思います。
記事としてはラストですね。先ほど言及しましたCache the worldというブログですね。113で入ったアクセシビリティエンジンの刷新の詳細ですね。
あとは、Quantumでパフォーマンスが低下したのをCacheによって改善する取り組みであったりとか、
アクセシビリティツリーのCacheをするけどそのCacheをする動機ですね、とかの仕組みについても書かれてますよというところです。
冒頭で申し上げた通りなんで、興味ある人見てみてください。本当に面白いと思います。
あと、アクセシビリティとかFirefoxの若干の歴史についても語られているので、この辺の話も見てみて面白いと思うんですね。
では続いて、サイト・サービス・ドキュメントというところですけど、今回は1本ですね。
サイト・ワイド・グーグル・ライトハウスですね。というものがピックアップされた記事になります。
サイトをクロールして、ライトハウスによるスキャンをまとめてやってくれるようなツールがあるそうですね。
そのものがあるんですね。
クロール対象をルーティングからも定義できて、結果を求めたレポートも作成してくれると。
これ結構便利そうですね。
まあ単純にライトハウスだけでもいいって言ったらいいんですけど、その先のサイトをクロールしてスキャンをまとめてやってくれるというのはなかなか熱いですね。
では続いて、ソフトウェア・ツール・ライブラリ関係ですね。
今回は2本ですけども、1つ目はですね、ウルトラ・マターっていうライブラリですね、これは多分。
1KBのフロントマッターパーサー、That supports a reasonable subset of YAMLですね。
フロントマッターをパースする小さいライブラリですよと。まあ1KB出てますからね。
YAMLのサブセットののみを扱うことでファイルサイズを小さくしているということでしたね。
結構ピンポイントなところのツールでというところなので、使いたい人は見てみてください。
YAML関係で操作したいよって人が使うんでしょうね。
09:00
どこまでYAMLを拡張したりとか、フルに使うかという話は出てくると思いますけど、まあでもYAMLね、難しいですね。
API関係とわちゃわちゃやるんだったらYAMLは必須だと思うので、まあ見てもいいかもですねこれは。
では続いて2つ目のツール、ライブラリは、これなんて読むんだろうな、ink-uiかな、ink-uiかなっていうものです。
でもあれですね、絵文字でリップみたいなのが書いてますね、本当にインクかもしれないですね。
コマンドラインインターフェースメイドイージーってやつですね。
インクを使ったターミナル向けのUIコンポーネントだそうです。
対応的な入力フォームとか選択肢、ローディング、アラート、リスト表示などのコンポーネントが入っているそうですので。
まあターミナル周りですね、これ結構便利そうですね。
でも、記事のタグを見るとリアクトとかコンソールって書いてあるんで、割とフロント側でも本当に使えそうなものかもしれないのでね。
ちょっと後でチラッと見てみたいと思います。
ではラスト、書籍関係ですね。
今回の書籍は1冊ですけど、リアクトアプリケーションアーキテクチャー4プロダクションっていう書籍ですね。
これ多分英語の書籍か、リアクトでのアプリケーション開発についての書籍です。
著者はバレットプルーフリアクトの中の人だそうです。
そのバレットプルーフリアクトっていうところの記事もリンクが貼られているので興味があったら見てみてくださいということでした。
全然知らないものだったんですけどね。
そんなツールライブラリがあるっぽいです。
ではではそんなことで、ちょっと短いですけど、今日の2023年5月10日のJSというところは以上になります。
今回はあんまりリリース周りはそんなに大きくなかったらしいのと、
やっぱりNext.js 13とFirefox 113のリリースがかなり大きかったという感じはありますので、
いろいろ見ていただければと思います。
どうしようかな、Firefox、まあデベロッパーズの記事は読まなくてもあれですし、
さっきのCyborgさんのオリジンプライベートファイルシステムってところから僕はちょっと気になったので、
サクッと読んでいきたいと思います。
NASさんって方が書かれたものです。
まあ一応3行まとめですけど、いきましょう。
オリジンプライベートファイルシステムという名の通り、オリジンに紐づくプライベートなファイルシステムが扱われるAPIのことです。
Firefox111で実装されたことで、主要ブラウザーでほとんどの機能を扱うようになりました。
主要ブラウザーと言ってますけど、サファリで一部使えないなど実装されてない機能もありますね。
ファイルシステム、ライタブルファイルストリームがサファリで使えないので、
完全に全部ブラウザー、モダンブラウザーで対応しているかというとそういうわけではないけど、
まあほぼほぼ使えるようということですね。
で、あとオリジンプライベートファイルシステムっていうのは、
ファイルシステムアクセスAPIよりもファイル操作のパフォーマンスが良いというので、
あ、そうなんや。
であればこっちの方が良いかもしれないですね。
オリジンプライベートファイルシステム、僕知りませんでしたこれは。
普通にファイルシステムアクセスAPIの方を使ってたので、
これはちょっと不勉強でしたね。
情報ありがとうございます。
でまあ何かっていうと、オリジンの紐づいて、
ユーザーには非公開なブラウザー上で扱えるファイルシステムのことですよと。
もうブラウザーでファイルシステムをガンガン使えるようになるのは本当にありがたい話ですよね。
で、なぜオリジンプライベートファイルシステムを使うのかというところですけど、
オリジンプライベートファイルシステムを使うとともに、いわゆるBLOBですね。
とかURL.CREATEOBJECTURLというのを組み合わせれば、
12:00
Aタグの要素をクリックすることでファイルダウンロードしたりとか、
ファイルシステムアクセスAPIのWindow.showopenfilepickerなどを使って、
ファイル操作を使うことが全然できますよと。
しかしこれらの手法、方法では手元にダウンロードしたファイルが残ったり、
ユーザーから見えるフォルダファイルが対象なので、
安全性の観点からファイル操作のパフォーマンスが最適化されないのが問題があると。
はいはいはい、なるほど。
一応ですね、Google Safe Browsingの参考リンクの一言があるので、それもちょっと読んでいきたいと思いますけど、
ファイルシステムアクセスAPIを使ってファイルにデータを書き込む場合、
セキュリティチェックをパスしない限り変更されないみたいな話があるそうですね。
オリジンプライベートファイルシステムを使うことで、ユーザーには見えないフォルダとかファイルとして扱えます。
また、オリジンプライベートファイルシステムを使うことで、パフォーマンスが最適化された方法でファイルにアクセスできるそうですよと。
実際にはSQLite3のwasm/.jsとかでは、オリジンプライベートファイルシステムというのが実は採用されていますと。
そうなんや、SQLiteのwasmの方ではそういうの採用してないんですよ実際。
なるほど。
まあ一応その別の記事も貼られているので、参考程度に読んでみてくださいと。
では実際にオリジンプライベートファイルシステムを使ってテキストファイルとの操作をしてみましょうと。
テキストファイルを作成、読み込み、書き込みというのを実装してみましょうと。
一応次のリンクからデモもあるというので、GitHubのリンクも貼られていますね。
はい、でてもか、あれか。
GitHub Pagesで簡単なフォームがあって、実際にファイルを操作してみましょうというサンプルののも公開されていますと。
一応リポジトリのリンクも貼られていますね。
オリジンプライベートファイルシステムのルートを取得するということですけど、
まずはナビゲーターのstorage.getdirectoryというメソッドがあるので、これを実行すると、
リゾルブ時にオリジンプライベートファイルシステムのルートディレクトリの操作ができる、
ファイルシステムディレクトリハンドルというののインスタンスが返ってくるそうですね。
へー、なるほどなるほど。ナビゲーターがありけるんですね。
で、プロミスで値が取得できると。
はー、はいはいはい。あくまでプロミスがもらえるんですね。
で、このインスタンスをもとにオリジンプライベートファイルシステムのファイルやフォルダーというのを操作していく。
で、作る時ですけど、ファイルやフォルダーの作成には、さっき受け取ったファイルシステムディレクトリハンドルのインスタンスのメソッドである
getdirectoryハンドルというメソッドとgetfilehandleというメソッドですね。
というオプションを指定して実行することで、ファイルとフォルダーが作成できますよと。
あー、結構簡単ですね。
名前も分かりやすい。getdirectoryハンドルとgetfilehandleですね。
で、ファイル名だったりとかを指定して、
オプションに例えばcreate://trueとかでやると、作成ができるそうですね。
で、getdirectoryハンドルメソッドというのは、フォルダーがあった場合はそのフォルダーのファイルシステムディレクトリハンドルインスタンスのそのまま返してくれます。
で、このインスタンスを使って特定のフォルダー範囲下のファイルにもアクセスができますよと。
で、先ほど見ましたnavigator.storage.getdirectoryメソッドを実行すると、まあなんかルートが取得できます。
で、これ、プロミスが返ってくるので頭にアウェイトをつけておくといいよということですね。
で、あとはまたアウェイトで先ほど受け取った取得したルートのオブジェクトからgetdirectoryハンドルでそのファイル名というのを指定してさらに実行してあげると。
15:09
で、やるとルート直下の指定したファイル名ですね。
あ、だって今回ディレクトリーか。
getdirectoryハンドルだからディレクトリーが取得できます。
で、ここをファイルにするともちろんファイルが取れるようになりますよという感じですね。
それぞれ今見ているルートのインスタンスですね。
のメソッドを実行するのでそのルート直下のものになると。
なのでそのルート直下のさらにネストして掘って掘っていきたい場合はルート直下の中にあるディレクトリー名を指定してっていうのをちょっとこれを繰り返し取得しなきゃいけないっぽいですね。
なんかまとめてガーンと取れれば一番楽なんですけど、これはちょっと今んとおそうじゃなさそうですね。
まあでもデモ画面ではそのファイルネームに作成したいファイル名を入力してクリエイトボタンを押すとファイルが作成できるようになっていますと。
同様にディレクトリーネームに作成したいディレクトリーメニューに押してクリエイトボタンを押すとディレクトリーが作成できるというので、
本当にブラウザ上でファイルの作成とかフォルダの作成ができるっていうことはこれで確認できますよと。
続いて今の作成だったのに次は書き込みの話ですね。
GETファイルハンドルメソッドで取得するファイルシステムファイルハンドルインスタンスのメソッドであるCreateWritableっていうメソッドがあってこれを実行することでファイルに書き込みができるようになります。
ファイルシステムWritableFileStreamっていうインスタンスがあるのでこれが取得できますよ。
で、このファイルシステムWritableFileStreamですね。
で、この中のインスタンスのWritableMethodを実行するとファイルにデータが書き込めますよと。
今までやってきたようなGETファイルハンドルとかで値を受け取って取得しますと。
で、それの中にCreateWritableみたいなメソッドがあるのでファイルシステムWritableFileStreamっていうのを取得しますと。
このインスタンスを取ってそのインスタンスの中のWritableMethodをやるというので。
ちょっと手続き的に手順が多いんですけども
まぁこれで書き込むことができるし
writeで書き込みをして
writable.closeっていうメソッドがあって
実行することで、いわゆるコミットするって感じですかね
でもcloseメソッドがあるんだったら
これ途中でロールバックできる
はい、なんかメソッドもありそうな気はしますけど
このデモでは出てこないですね
はい
で、ついでファイルの読み込みですね
さっきは書き込みだったんですけど
読み込みですけど
読み込みはさっきのやつの単純に
readメソッドがあるのかな?
わかんないけど
はい、ファイルシステムファイルハンドルインスタンスのメソッドである
getファイルを使うことでファイルの内容を確認できる
ファイルオブジェクトというのを取得できると
残念ながら
writeメソッドと対比して
readメソッドかと思ったら
getファイルっていうメソッドでしたね
まぁまぁでも読み込みっていうか
ファイルを読み込みたいから
getファイルっていうのは確かにそうかもしれない
で、ウェブワーカー上でファイルの読み込みもできますよ
ってことですね、これは
ここまでのファイル操作は基本的に非同期で実行していました
まぁそら、プロミスが帰るからそらそうですね
アウェイトすると思うんですけど
ウェブワーカー上であれば
ファイルシステムファイルハンドルインスタンスのメソッドである
createSyncAccessHandleっていうメソッドを使うことで
同期的にファイルや読み込み書き込みもできるようになります
で、今回はメインスレッドからポストメッセージ経由で
指定されたファイル名とテキスト元に
該当のファイルにテキストを書き込むっていう
まぁソースコードがだーっとあるんですけど
これはちょっと長いので割愛します
18:00
で、今までやったやつを上手いこと組み合わせながらやるってことですね
で、次にメインスレッド側から
ファイル名とテキストっていうのを
ポストメッセージでまた渡してあげると
はい、今回のデモではBeatの
Query suffixっていうのを使って
ワーカー.jsをインポートしますよと
で、あとはオリジンプライベートファイルシステム上の
ファイルフォルダーっていうのを確認しましょうと
で、そのブラウザのDevToolから対応するまでは
OPFS Explorerを使うことで
オリジンプライベートファイルシステム上の
ファイルとフォルダーっていうのを確認できますと
これはですね、拡張ツールの中に
OPFS Explorerっていうのがあるのかな?
これはChrome拡張かな?
あ、別のChrome拡張っぽいかな?
ですね
これを使えば一応できますよってことでした
なるほどね
では最後に
オリジンプライベートファイルシステムのAPIがサポートされたことで
ファイルシステムの仕組みは結構簡単利用できるようになって便利ですねと
クライアントサイトで完結するメモアプリなどを使ってみるのも
楽しそうと思いましたということですね
ソースコード自体すごいシンプルで
手続きが多くて長いかもしれないですけど
可読性高いしパッと見て何してるかって
そんな感じだよねってすごく分かりやすいので
メソッド面は分かりやすくていいなと思いましたので
今後確かにファイル操作するんだったら
ファイルシステムアクセスAPIよりも
オリジンプライベートファイルシステムを使う方に
シフトしていくんじゃないかなって気はしましたね
というところで
ちょっと突発ですけど
これでアサカツ終了していきたいと思います
とてもいい記事だと思いますね
両方とも
後ほど2つ読んだ記事のリンクをツイートしますので
皆さんの方でも見ていただければと思います
改めまして
今日の参加者が読むのがめちゃくちゃ増えてる
しちゅうゆうせんさんと
こうへいさんと
けんじさんと
れいのなさんですね
あとオンライン上のスーさんですね
ご参加いただきありがとうございました
ちょっと雨の日からスタートなんで
出だしも悪いかもしれないですけど
今日からまた1週間頑張っていけたらなと思います
じゃあ終了したいと思います
お疲れ様でした
