🌱

AI Shift フロントエンドトーク 2024-02

2024/03/04に公開

こんにちは、AI-Shift フロントエンドエンジニアの栗崎(@kk_sep_tt)です。

最近、AI-Shift ではフロントエンドエンジニアが増えてきたこともあり、週1でフロントエンドの気になるトピックについて話す会を開催しています。
本記事では2月中で話したトピックについてまとめています。

トピックが多いので目次から気になる部分を読んでいただければと思います。

iOSに入るブラウザのWebKit制限の緩和

EUでiOSに入るブラウザのWebKitの制限が緩和されました。
日本での規制緩和はされていませんが、今後緩和されるかもしれません 👀
https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/

https://blog.jxck.io/entries/2024-01-28/apple-sideloading.html

「Vue・Nuxt情報が集まる広場」というものが日本コミュニティの若手の間で密かに盛り上がっている

AI-Shift では現状Vue.jsを使っているプロダクトはありませんが、Vue.jsの動向は追っていきたいと思っています 👀
https://zenn.dev/p/comm_vue_nuxt

TanStack Router がいい感じ

TanStack Router は弊社の新規プロダクトでも採用中です!
https://tanstack.com/router/latest/docs/framework/react/overview
https://zenn.dev/aishift/articles/ad1744836509dd

Remix SPA モードが良さそう

最近ではSSR が要らないときに SPA 開発は Vite を採用することが多いですが、File based ルーティングが欲しくなることが多いです。
Remix SPA モードでは File based ルーティングを使ったSPA開発ができて良さそうです 👍
https://remix.run/docs/en/main/future/spa-mode
https://speakerdeck.com/nkzn/the-spas-chronicle-reaches-to-remix

Turborepo Go から Rust への移行完了

15ヶ月かけてGoの70,000行のコードをRustに移植したそうです。
https://vercel.com/blog/finishing-turborepos-migration-from-go-to-rust

SPA上でService Workerを複数動かすのは大変

Service Worker は複数のscopeを設定することで管理対象のページを設定することができます。
Service Worker が対象スコープのページをコントロールするにはService Worker がactiveな状態でそのページをローディングする必要があります。しかし、SPAのページ遷移ではローディングが発生しないので、相性があまり良くないと感じました。

https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API

Tailwind CSS x Framer Motion で作られたアニメーションコンポーネント集

様々なリッチなアニメーション付きのUIコンポーネントが提供されています。
shadcn/ui と同じく cli でローカルにコンポーネントをコピペして使えて使い心地が良さそうです 👍
https://ui.aceternity.com/

React 19 の新機能が発表された

React Compiler, Actions, Offscreen などの新機能が発表されました。
AI-Shift の画面にはレンダリング最適化のためのコードが多くあり、複雑になっているので、React Compiler がこれを解決してくれることを期待しています。
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

React Strict Dom

React Native のコードをWebのAPIに変換する際のオーバーヘッドを少なくすることを目的としたDom実装です。
https://github.com/facebook/react-strict-dom
以下で React Strict Dom のモチベーションについて書かれています。
https://github.com/react-native-community/discussions-and-proposals/pull/496

2024年のWebデザインのトレンド

見栄えが良いだけでなく、デザイナーに影響を与えたデザインのトレンドがまとまっています 👀
https://blog.prototypr.io/ux-ui-design-trends-going-into-2024-ca43a839b541

煩雑な処理をシンプルに書けるTSフレームワーク Effect

エラーハンドリング、リトライ処理などの記述が長くなりがちなTSの処理をシンプルに書けるフレームワークです。フロントエンドの使用も十分に価値がありますが、堅牢なバックエンドこそ、Effectの導入価値がありそうという意見もでました。 Effectは今はまだベータ版です。
https://effect.website/

polyfill.io 買収

プロダクトで使用している場合は直ちに取り除いた方が良さそうです。
https://twitter.com/triblondon/status/1761852117579427975

最後に

AI Shiftではエンジニアの採用に力を入れています!
少しでも興味を持っていただけましたら、カジュアル面談でお話しませんか?
(オンライン・19時以降の面談も可能です!)

【面談フォームはこちら】
https://hrmos.co/pages/cyberagent-group/jobs/1826557091831955459

AI Shift Tech Blog

Discussion