# フロントエンドTech Cafe 〜2024年度のフロントエンド総振り返り〜

## 前半戦 （伊藤）（25分）

### state-of-frontend (10分)
- https://tsh.io/state-of-frontend/#team-composition
- Frameworks
- Reactが強い
- HTMX, Svelteが人気
- HTMX: 簡単に書けるところが人気の要因と思われる
- Svelte: 速度面（パフォーマンス）意識か？　脱仮想DOMの流れ?
- date management libraries
- date-fns: 生Date関数を使っていると潜在的なバグに出会うのでとりあえずでこれ使いがち
- https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/ 今後はTemporalに置き換わるかもしれない
- state management libraries
- Jotai: ラクスで使い始めている。簡潔に書けて使い勝手が良い。
- redux, redux-toolkit: 根強い人気。ラクスでも使っている。
- Contex-API: 小原はこれを前の会社でよく使用していた。https://ja.react.dev/blog/2024/12/05/react-19 React19で書き方が変わる

### state-of-javascript　（10分)
- https://2024.stateofjs.com/ja-JP/
- 機能
- Logical OR assignment (||=)

            const a = { duration: 50, title: "" };

            a.duration ||= 10;
            console.log(a.duration);
            // Expected output: 50

            a.title ||= "title is empty.";
            console.log(a.title);
            // Expected output: "title is empty."

            // ---↓とほぼ同じ---
            const b = { title: "" };
            b.title = b.title ? b.title : "title is empty.";

            console.log(b.title);
            // Expected output: "title is empty."

- 逆のLogical AND assignment (&&=)もある

            let a = 1;
            let b = 0;

            a &&= 2;
            console.log(a);
            // Expected output: 2

            b &&= 2;
            console.log(b);
            // Expected output: 0

### javascript rising stars(5分)
- https://risingstars.js.org/2024/ja
- 優勝: shadcn/ui
- 2冠。TailwindベースのUIライブラリ。
- 準優勝: Excalidraw
- いい感じの図が書けるツール。ブログなどでよく見る。
- 3位: AFFiNE
- Notion x Miro。使いこなせたら生産性爆上がりしそう。

---

## LT会:　テーマ「2024年度を振り返る」（20分）

### ① ブログが5分でデプロイできる時代になっていた（斉藤）（10分）

「[CAREER SKILLS ソフトウェア開発者の完全キャリアガイド](https://amzn.asia/d/3orhvnP)」という書籍をきっかけに、ブログを作成しました。
Astroを用いると5分くらいでサイトをデプロイすることができたので、構築方法の紹介をします！

### ② Jotai導入に失敗して学んだこと（持永）（10分）

担当プロダクトに状態管理ライブラリ「Jotai」を導入しようとして、失敗してしまいました。
この経験から得た学びを語ります！

---

## 後半戦 （小原）（35分）

### React19 リリース
- https://ja.react.dev/blog/2024/12/05/react-19
- 他の媒体でたくさん語られてるので詳細は省略予定
- まだ18を使ってるプロダクトが多いので早く上げたい...

### Recoil アーカイブ
- https://zenn.dev/mk668a/articles/88685dfa915474
- 移行先にはJotaiがおすすめのよう
- 実際ラクスでもRecoilからJotaiに移行したプロダクトがある

### 2024年のCSS
- https://coliss.com/articles/build-websites/operation/css/css-in-2024.html
- CSSのネスト
- 実際使ってはいないが、生のCSSを書くときには役立ちそう
- ラクスはCSS in JSがメイン

### state-of-css
- https://2024.stateofcss.com/ja-JP/

### state-of-html
- https://2024.stateofhtml.com/ja-JP/

### ESLint v9
- https://eslint.org/docs/latest/use/migrate-to-9.0.0
- https://zenn.dev/hsato_workman/articles/728e1551ab8b36
- flat config
- みなさんは移行しましたか？？
- ラクスでは一部移行が残ってます...
- Biomeにした方もいるのでは

### AI系2種類
- [v0](https://v0.dev/)
- すごかった！！
- 生のCSSを書くのは苦手?Tailwindは得意そう。
- [browser-use](https://github.com/browser-use/browser-use)
- https://weel.co.jp/media/tech/browser-use/

### UA終了 & GA4に完全移行
- https://support.google.com/analytics/answer/11583528?hl=ja
- 移行作業が地味に大変だった思い出

### vite v6
- https://ja.vite.dev/guide/migration
- 私のチームではまだバージョンアップできてないです。
- v4->v5に比べて変更は大きくないと聞いてるので時間見つけて上げましょう

### vitest browser mode
- https://vitest.dev/guide/browser/
- ブラウザ上でテストできるのでユーザーの環境に近く、vitestのAPIでplaywright的なことが書けるため学習コストが下がるのがメリット。
- まだBeta。