2024年で使えるようになったCSSの新機能まとめ

アニメーションとか sizing の面がめちゃくちゃ楽になった…

ちゃんと使えるように見ておこう

Adobe がだしてる React Ariaがとんでもなく便利そう

特に下記のような点がめっちゃ良さげ

• コンポーネントが豊富でアクセシビリティーがかなり意識している
• スタイリングが自由で CSS でも Tailwind でもいける
• Drag and Drop の実装が簡単にできる
  • ファイルのアップロード系の実装も簡単
  • Trello のカンバンみたいな、画面の要素を移動させる実装も簡単に実装できる
  • フォームで順番を入力しているような箇所などを、これで入れ替えとかできそう

Web Driver BiDi という新しいプロトコルが出てきた

直近使用するなら Playwright かなと思っていたけど、もしかしたら新しいフレームワークが登場したりするかな？

Playwright や Selenium も Web Driver BiDi に対応予定らしいので、まだここらへんが強いと思っていて良さそう。

Prisma Client API で実現できないようなクエリを、SQLで書く際にも型安全になる機能が追加されたみたい。

公式の実装例では、 .sqlファイルで SQL を記述して、 prisma generate --sqlコマンドを実行すると 型安全なクエリが生成されていた。

JS / TS から WebAssembly や ネイティブバイナリを生成するコンパイラ Porffor というものがあるらしい。

wasm の実装は Rust , C++ とかのイメージがあったから手を出すのはまだまだ先だと思ってたけど、

これがリリースされたら気軽に試せそう。

現状 Wasmtime とかだと Rust の実行環境が必要になるみたいだけど、

それもいずれ不要になったりしたらかなり触りやすくなりそう。期待。

sqlite の postgres 版、PGliteというのがあるらしい。

TS/JS で操作可能で、 Supabase との同期等もできるらしいので、

フロントエンドエンジニアが個人開発する時にはいい選択肢になりそう。

Webサービス系なら

ローカルDB： PGLite

ORM(?)：ElectricSQL

クラウドDB：Subapase

みたいな組み合わせで試してみたい。

nuqs （旧名：next-useQueryState）がめちゃ良さそう。

クエリパラメータをuseStateみたいに管理できるもので、

一覧画面の検索やページネーションでパラメータ付けているところをこれで簡単に管理できるかも…！

（数が多いと逆に大変…？）

[その他ポイント]

ちょっとだけ追加実装を行えば、server コンポーネントでも型安全にクエリパラメータを取得できる

オプションも充実していてshallowやscroll-topなどにも対応できる

CSS だけで 乱数が使えるようになるかも！

乱数だけではなく、渡した引数からランダムなものを返す関数まで準備されているみたい。

これで JS 使わずともランダムなアニメーションが作成できるようになる

HTMXも少しづつ盛り上がってきているし、脱JSのサイトも出てきそう。

Poku という新しい JS テスティングツールが出てきた

• Deno, Bum などのランタイムにも対応
• 書き振りは Jest とあまり変わらなさそう

実行速度の事についての記載が見当たらなかったのでそこが気になるのと、

応用的な使用法のドキュメントが comming soonだったので引き続き watch したい。

Jest が強すぎてプラグイン等の充実度がすごいので、Poku が勝てるのか今後楽しみ

node.js v22 の変更点まとめてくれているスライドがわかりやすかった。

個人的には npm script の実行コマンドが、 npm run [script name]から node --run [script name] に変わったのが衝撃。

npm run で実行するより npm の立ち上げまでの起動時間が減って実行速度が速くなるらしい。

husky + lint-staged の対抗馬 lefthook なるものがあるらしい

書き心地良さげだし、ちょこちょこ試している記事もあった

TypeScript の標準ライブラリを目指している Effect なるものがあるらしい。

現状はまだ Bate だけど、すでに機能盛りだくさんで少し期待。

フロント周りだと zod, yup みたいなバリデーション機能があったり、

httpClient も用意されている。今度試してみたい。

Gleam が 1.0 リリースされたみたい。

JavaScriptへコンパイル可能ということで少し watch してみようかな…？

OSSで個人開発？っぽい感じなので、サポートはちょっと心配。

Deno から TypeScript に最適化した新しいパッケージレジストリ JSR が出てきた。

npm と似た様な立ち位置になるけれど、Node以外でも Bun, Cloudflare Workers などにも対応しているらしい。

「JSR は npm レジストリに代わるものではありません。これは npm のスーパーセットです。」との事。

React 19 に入る予定の新機能

• useMemo , useCallback 等のメモ化を明示的にしなくてもよしなにやってくれるようになるかも
• フォーム周りの hooks が多く追加されて、簡単なものならライブラリ不要になるかも
• 非表示になったコンポーネントを破棄ぜずに保持し続けるようになり、再表示のタイミングの表示速度が上がるかも

js の新しい日付操作ライブラリ Tempo が注目されているらしい。

Dateオブジェクトをそのまま扱えることや、軽量なことを強みにしているっぽいけど

今の所 date-fns から乗り換えるほどの魅力が見当たらない…。

引き続き様子見。

新しい icon ライブラリ…！

サイトがめっちゃ見やすい！デザイン可愛い！

es2024から、JSで配列のグルーピングが簡単にできる様になったみたい。

これは色々と助かるかも…！

rust製の js / ts の linter Oxlint が eslintに比べると 50 ~ 100倍早いらしい。

parserとしてもswcより2倍早くて、formatterとかminifierとしての機能も実装中っぽい。

似たような思想だった Biome とどっちがメジャーになるのか引き続き注目。

新しいデスクトップアプリ作成フレームワーク WebUI

ブラウザのGUIを使用する事で軽量になっているらしい。

firefox, chrome, edge, brave等々のモダンなブラウザは殆ど対応していて、

アプリ実行時にそのブラウザ上でアプリが実行される。

バックエンド側が多言語対応していて、 Tauriだったら Rust, Electronだったらjs みたいな縛りがない。

デフォルトは C , C++ っぽい Wrapper噛ませると Go ,Python , Ts にも対応してる。

新しいheadless cms TinaCMS

Githubリポジトリ自体をデータベースとして使うのは良さげな感じがする。

新しいサーバレス系の Postgres DB サービスが出てきた。

Vercel についに Storage 機能が…！

今までOGPの自動作成というと、Canvasを使って力技で生成したり

大変なイメージがあったけど、これを使えばかなり楽にできるかもしれない！

Rust製デスクトップアプリケーション作成フレームワーク「Tauri」

iOS / Android にも対応し始めたらしい。開発スピード早い。すごい。

デベロッパーツールでCSSが効かない理由を教えてくれる

ツールチップ機能が追加されたみたい。これはありがたい。

Rust製アプリケーションフレームワークのTauriがついにvar.01リリースしたみたいです。

Electronと比べるとやはり速度がダンチらしいのですが、フロントエンド目線だとやっぱりバックエンドの処理をNode.jsでかけるのはありがたかった…。

ちょっとElectronで作ったアプリをTauriで作り替えてみようと思ったのですが、任意のディレクトリからファイルを取得してくる処理だったり

画像の加工処理だったりをRustで書く必要があり、早々に挫折。

Rust…学習コスト高いって聞くからちょっと腰が重いなぁ…。