2024年の振り返り (#92)

* feat: 2024年の振り返り

* update

app/routes/posts/2024-review.mdx

@@ -0,0 +1,162 @@
+---
+title: "2024年の振り返り"
+description: "2024年の振り返りです！"
+date: "2024/12/31"
+updatedAt: "2024/12/31"
+path: "2024-review"
+published: true
+---
+
+## Intro
+
+2024年の振り返りです！
+
+## ブログ
+
+読書メモなども入っていますが、今年は全部で57記事書きました。ほとんど今までブログは書いてこなかったのに、今年は量だけで言えばかなり書いた方かなと思います。
+
+ちなみに4月ごろまでの記事数が多いのは、圧倒的に暇だったためです。
+それ以降はほぼ月一で書いています。
+
+
+<ul style="font-size: 14px;">
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/01/28:</span> <a href="/posts/next-image-remote-and-local">next/imageのlocal imageとremote imageのパフォーマンスの違いをみてみる</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/02:</span> <a href="/posts/macbook-migration">dotfilesとスクリプトを組んでMacbookを簡単セットアップ</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/04:</span> <a href="/posts/2024-01">1月のOSS活動の振り返り</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/12:</span> <a href="/posts/yapc-hiroshima-2024">YAPC:Hiroshimaに参加しました</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/25:</span> <a href="/posts/es2024-atomics-wait-async">ES2024で導入予定のAtomics.waitAsyncについて理解する</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/07:</span> <a href="/posts/designing-web-accessibility">読書メモ: デザイニングWebアクセシビリティを読んだ</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/12:</span> <a href="/posts/honox-blog-created">HonoXでブログを作り直した。そしてテンプレートも作った</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/22:</span> <a href="/posts/gdgtokyo-web-0319">「Google Developer Expertsが語るWeb技術の最前線」に参加しました</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/23:</span> <a href="/posts/weekly-2024-0323">weekly blog 3/18 ~ 3/24</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/26:</span> <a href="/posts/hono-shadcn-ui">HonoXでshadcn/uiを使用する</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/30:</span> <a href="/posts/jsr-io-github-actions">jsr.ioのパッケージのアップデートをgithub actionsを使って行う</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/31:</span> <a href="/posts/weekly-2024-0325">weekly blog 3/25 ~ 3/31</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/07:</span> <a href="/posts/weekly-0401">weekly blog 4/1 ~ 4/7</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/14:</span> <a href="/posts/weekly-0408">weekly blog 4/8 ~ 4/14</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/20:</span> <a href="/posts/react19-jsx-fast">React19からJSXの変換処理が高速に</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/21:</span> <a href="/posts/weekly-2024-0415-0421">weekly blog 4/15 ~ 4/21</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/29:</span> <a href="/posts/weekly-2024-0422-0428">weekly blog 4/22 ~ 4/28</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/05/05:</span> <a href="/posts/weekly-2024-0429-0505">weekly blog 4/29 ~ 5/5</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/05/12:</span> <a href="/posts/weekly-2024-0506-0512">weekly blog 5/6 ~ 5/12</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/05/18:</span> <a href="/posts/weekly-2024-0513-0519">weekly blog 5/13 ~ 5/19</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/05/26:</span> <a href="/posts/weekly-2024-0520-0526">weekly blog 5/20 ~ 5/26</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/02:</span> <a href="https://zenn.dev/yuto76/articles/e3efbdc0ee212e">enableForestを使うことでReact Compilerのメモ化レベルを変更できる</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/10:</span> <a href="https://zenn.dev/yuto76/articles/d2cbd4d61f7a3a">React Compilerで出力されるc(number)について</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/23:</span> <a href="/posts/render-to-pipeable-stream-with-hono">renderToPipeableStreamとHonoを組み合わせてSSRをする</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/29:</span> <a href="/posts/biome-no-for-each">BiomeがforEachではなくfor...ofを推す理由を処理速度の観点から見る</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/07/21:</span> <a href="/posts/tanstack-suspence-enable">Tanstack QueryのuseSuspenceQueryでクエリを実行したくない時はどのようにするか</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/04:</span> <a href="/posts/eslint-fixup-plugin-rules">@eslint/compatのfixupPluginRulesとは何をやっているのか</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/04:</span> <a href="/posts/introduce-to-react-compiler">'Introduce to React Compiler' blog.</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/05:</span> <a href="/posts/compiler-book-memo">読書メモ: コンパイラ</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/11:</span> <a href="/posts/auto-test-guide-book-memo">読書メモ: テスト自動化実践ガイド</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/01:</span> <a href="/posts/typescript-eslint-type-info-rules">typescript-eslintでの型情報の利用とルール実装の実際</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/08:</span> <a href="/posts/wdc-lt-css-anchor-positioning">CSS anchor positioningを1分で話した</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/23:</span> <a href="/posts/webcast-book-memo">読書メモ: Web配信の技術</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/10/13:</span> <a href="/posts/css-nesting-improves-with-cssnesteddeclarations">Chrome 130でのCSSネスティング改善: CSSNestedDeclarationsの詳細</a></li>
+</ul>
+
+毎月一本のブログ投稿はかなり良かったので、来年度も続けていこうと思っています。
+
+## 一人アドベントカレンダー
+
+今年は[ユウトの1人 Advent Calendar 2024](https://adventar.org/calendars9980)という一人アドベントカレンダーもやりました。
+
+前々から一人アドベントカレンダーはやってみたいと思いつつ、特定の分野一つについて書ける自信はなかったので、Webに関わることなんでもありで書きました。
+
+やり切ることを目標にしていたので、オンスケで最後までやり切れたことは嬉しいです。
+ただもし次があれば、特定の分野のことをひたすら書いていきたいです。
+
+<ul style="font-size: 14px;">
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/01:</span> <a href="/posts/eslint-v9-biome">eslint v9で追加されたunused disable directivesとbiomeは相性がいいかもしれない</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/02:</span> <a href="/posts/edge-computing-probrem">EdgeComputingのプログラマビリティの課題</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/03:</span> <a href="/posts/google-translator-api">Translator APIを使ったブログの自動翻訳</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/04:</span> <a href="/posts/lady-bird-test262">Ladybirdでビルドしてtest262を走らせるまで</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/05:</span> <a href="/posts/proposal-safe-assignment-operator">proposal-safe-assignment-operatorでJSに新しいエラーハンドリングが入るかもしれない</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/06:</span> <a href="/posts/brave-localhost-http">Braveでlocalhostにアクセスしたときにhttpsにリダイレクトするのを防ぐ</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/07:</span> <a href="/posts/prefetch-five-miniute">Chromiumではprefetchを含んでリソースを消費しようとするとキャッシュ制御は5分間無効化される</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/08:</span> <a href="/posts/browser-back-forward-reason">ブラウザバック/ブラウザフォワードはなぜ存在するのかを考えてみる</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/09:</span> <a href="/posts/browser-back-bfcache">ブラウザの戻る・進むを高速化するBFCache</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/10:</span> <a href="/posts/bfcache-check">BFCacheの動作確認とテスト方法</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/11:</span> <a href="/posts/soft-hard-navigation-and-bfcache">ソフトナビゲーションの仕組みと使い方</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/12:</span> <a href="/posts/nextjs-bfcache-check">Next.jsでBFCacheが有効化されない原因と解決方法</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/13:</span> <a href="/posts/peer-dependencies-kuma-ui">kuma-uiの@types/reactで知ったpeerDependenciesの抜け道、そしてpnpmとnpmの挙動の違い</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/14:</span> <a href="/posts/turbopack-kuma-ui">Turbopackでkuma-uiが動かない理由</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/15:</span> <a href="/posts/kuma-ui-with-rspack">rspackでもkuma-uiは動かせる</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/16:</span> <a href="/posts/yossy-dev-isolated-declarations">yossy.devでisolatedDeclationを有効にしてtscの速度を測る</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/17:</span> <a href="/posts/node-typescript-support">node.jsのtsサポートに関して再度理解する</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/18:</span> <a href="/posts/node-js-strip-types">Node.jsの進化とTypeScriptランタイムの未来</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/19:</span> <a href="/posts/typescript-browser-support">書いたTypeScriptがブラウザでそのまま動く未来はあるのか</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/20:</span> <a href="/posts/react-compiler-look-generator">React Compilerから学ぶgeteratorの使い方</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/21:</span> <a href="/posts/bun-frontend-challenge">Bunでフロントエンド開発どこまでできるのか</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/22:</span> <a href="/posts/bun-transpile-target">Bunはダウンレベルコンパイルはしてくれない</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/23:</span> <a href="/posts/bun-framework-api">BunのFramework API（Bake）の概要と目的</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/24:</span> <a href="/posts/biome-no-duplicate-object-keys">BiomeのnoDuplicateObjectKeysはJSとJson両方見てくれる</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/25:</span> <a href="/posts/biome-and-typescript-eslint">Biomeとtypescript-eslintの併用と型情報Lintの課題</a></li>
+</ul>
+
+## Youtube
+
+今年からYoutubeも始めました。特にReact Compilerのコードリーディングは、自分の視野が広がって気がして、とても良いコンテンツでした。
+8月以降更新が止まっていますが、来年からまた定期的に更新しようと思っています。
+
+今年協力してくれた[@re_taro_](https://x.com/re_taro_) [@sor4chi](https://x.com/sor4chi) [@shun_shobon](https://x.com/shun_shobon) ありがとうございました。
+
+<ul style="font-size: 14px;">
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/31:</span> <a href="https://www.youtube.com/watch?v=Ml0l5bN_-ao">Web Speed Hackathon 2024 感想会 with @re_taro_ @sor4chi</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/05/26:</span> <a href="https://www.youtube.com/watch?v=uPMw7ow9MgA">React 19 RC をキャッチアップする with @re_taro_</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/02:</span> <a href="https://www.youtube.com/watch?v=PqPgr_hlVKM">React Compiler Code Reading #1</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/10:</span> <a href="https://www.youtube.com/watch?v=ghjiGoKkJ_c">React Compiler Code Reading #2</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/22:</span> <a href="https://www.youtube.com/watch?v=O-IrW7IwcF8">React Compiler Code Reading #3</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/28:</span> <a href="https://www.youtube.com/watch?v=E8N9_QnPH_c">React Compiler Code Reading #4</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/07/14:</span> <a href="https://www.youtube.com/watch?v=FlNx2xbZsN4">Podcast #1</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/07/20:</span> <a href="https://www.youtube.com/watch?v=ZaZb1FhwdxQ">React Compiler Code Reading #5</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/11:</span> <a href="https://www.youtube.com/watch?v=yUPdDInj3Eg">Podcast #2</a></li>
+</ul>
+
+## CyberAgent Way
+
+[【エンタメ×テクノロジー】LDHファンサービス「CL」の若手エンジニアが描く挑戦と成長](https://www.cyberagent.co.jp/way/list/detail/id=31065)という記事を、社内で書いていただきました。
+
+いつかは個人で記事に書いてもらえる存在になりたいとは思っていたんですが、まさかこんな早く叶うとは思っていませんでした。
+
+関係者の方々、本当にありがとうございました。
+
+## Muddy Web Podcast
+
+[#15 新卒1年目のWebフロント業務を、半期を終えて振り返ってみた](https://open.spotify.com/episode/6Jkdiq0F927q5x042leHxN?si=661b75467ef14abd)で出演しました。
+
+新卒同期がかなり多いので、私も他のみんながどんなことしているのか知れてよかったです。
+
+あと、ずっと聴く側だったMuddy Webに出演ができて嬉しかったです。
+
+## 登壇
+
+今年は4回の登壇を行いました。
+
+特に[CyberAgent Developer Conference 2024](https://cadc.cyberagent.co.jp/2024/sessions/fantech-web-biome/)の登壇は撮影機材もちゃんとした中で行われことと、発表時間も約20分という自分史上一番長い時間で発表しました。
+緊張しましたが、とてもいい経験になりました。
+
+2025年は、今年よりも登壇回数を増やしていきたいと思います。
+
+<ul style="font-size: 14px;">
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/24:</span> <a href="https://speakerdeck.com/yossydev/fast-jsx-dont-clone-props-object-number-28768">Fast JSX: Don't clone props object #28768</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/04:</span> <a href="https://speakerdeck.com/yossydev/introduction-to-react-compiler">Introduction to React Compiler</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/08:</span> <a href="/posts/wdc-lt-css-anchor-positioning">CSS anchor positioningを1分で</a></li>
+  <li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/10/30:</span> <a href="https://speakerdeck.com/cyberagentdevelopers/fantech-web-biome">成長中のFanTech領域におけるBiomeを活用したCIの高速化 / fantech-web-biome</a></li>
+</ul>
+
+## OSS活動
+
+後半はあまりやっていませんでしたが、React CompilerやHonoX、OXCなど、いくつかのOSSへのコントリビュートも行いました。[PRs](https://github.com/pulls?q=is%3Apr+author%3Ayossydev+archived%3Afalse+-org%3Ayossydev+)
+
+今年はブログを書いたり登壇のためにコードを読むことは多かったんですが、あまりコントリビュートはしていなかったので、来年はこちらも頑張っていきたいです。
+
+## まとめ
+
+本業でもそれ以外でも、いろんなことに挑戦できた一年だったかなと思います。
+
+何よりも、一年を通してずっと楽しかった。もちろん大変な時もありましたが、それも含めて楽しかった。
+多分、初めてやることも多かったし、色々刺激になることが多かったからかなと思います。
+
+2025年は2024年より良くなるよう、頑張っていきます！来年も引き続きよろしくお願い致します！！