Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2024年の振り返り #92

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

2024年の振り返り #92

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 162 additions & 0 deletions app/routes/posts/2024-review.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
title: "2024年の振り返り"
description: "a"
date: "2024/12/31"
updatedAt: "2024/12/31"
path: "2024-review"
published: true
---

## Intro

2024年の振り返りをします。これまではいろんなプラットフォームを使用してきましたが、今年かは本ブログで残すようにします。

## ブログ

### コンテンツ

4月ごろまでの記事数が多いのは、自分が新卒入社するまでの時間圧倒的に暇だったためです。
それ以降はほぼ月一で書いています。

<ul style="font-size: 14px;">
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/01/28:</span> <a href="#">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="#">dotfilesとスクリプトを組んでMacbookを簡単セットアップ</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/04:</span> <a href="#">1月のOSS活動の振り返り</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/12:</span> <a href="#">YAPC:Hiroshimaに参加しました</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/02/25:</span> <a href="#">ES2024で導入予定のAtomics.waitAsyncについて理解する</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/07:</span> <a href="#">読書メモ: デザイニングWebアクセシビリティを読んだ</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/12:</span> <a href="#">HonoXでブログを作り直した。そしてテンプレートも作った</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/22:</span> <a href="#">「Google Developer Expertsが語るWeb技術の最前線」に参加しました</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/23:</span> <a href="#">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="#">HonoXでshadcn/uiを使用する</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/30:</span> <a href="#">jsr.ioのパッケージのアップデートをgithub actionsを使って行う</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/03/31:</span> <a href="#">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="#">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="#">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="#">React19からJSXの変換処理が高速に</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/21:</span> <a href="#">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="#">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="#">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="#">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="#">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="#">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="#">enableForestを使うことでReact Compilerのメモ化レベルを変更できる</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/10:</span> <a href="#">React Compilerで出力されるc(number)について</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/23:</span> <a href="#">renderToPipeableStreamとHonoを組み合わせてSSRをする</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/06/29:</span> <a href="#">BiomeがforEachではなくfor...ofを推す理由を処理速度の観点から見る</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/07/21:</span> <a href="#">Tanstack QueryのuseSuspenceQueryでクエリを実行したくない時はどのようにするか</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/04:</span> <a href="#">@eslint/compatのfixupPluginRulesとは何をやっているのか</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/04:</span> <a href="#">'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="#">読書メモ: コンパイラ</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/08/11:</span> <a href="#">読書メモ: テスト自動化実践ガイド</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/01:</span> <a href="#">typescript-eslintでの型情報の利用とルール実装の実際</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/08:</span> <a href="#">CSS anchor positioningを1分で話した</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/09/23:</span> <a href="#">読書メモ: Web配信の技術</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/10/13:</span> <a href="#">Chrome 130でのCSSネスティング改善: CSSNestedDeclarationsの詳細</a></li>
</ul>

毎月一本のブログ投稿はかなり良かったので、来年度も続けていこうと思っています。

### 一人アドベントカレンダー

今年は[ユウトの1人 Advent Calendar 2024](https://adventar.org/calendars/9980)という一人アドベントカレンダーもやりました。

前々から一人アドベントカレンダーはやってみたいと思いつつ、特定の分野一つについて書ける自信はなかったので、Webに関わることなんでもありで書きました。

やり切ることを目標にしていたので、オンスケで最後までやり切れたことは嬉しいです。
ただもし次があれば、特定の分野のことをひたすら書いていきたいです。

<ul style="font-size: 14px;">
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/01:</span> <a href="#">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="#">EdgeComputingのプログラマビリティの課題</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/03:</span> <a href="#">Translator APIを使ったブログの自動翻訳</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/04:</span> <a href="#">Ladybirdでビルドしてtest262を走らせるまで</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/05:</span> <a href="#">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="#">Braveでlocalhostにアクセスしたときにhttpsにリダイレクトするのを防ぐ</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/07:</span> <a href="#">Chromiumではprefetchを含んでリソースを消費しようとするとキャッシュ制御は5分間無効化される</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/08:</span> <a href="#">ブラウザバック/ブラウザフォワードはなぜ存在するのかを考えてみる</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/09:</span> <a href="#">ブラウザの戻る・進むを高速化するBFCache</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/10:</span> <a href="#">BFCacheの動作確認とテスト方法</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/11:</span> <a href="#">ソフトナビゲーションの仕組みと使い方</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/12:</span> <a href="#">Next.jsでBFCacheが有効化されない原因と解決方法</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/13:</span> <a href="#">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="#">Turbopackでkuma-uiが動かない理由</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/15:</span> <a href="#">rspackでもkuma-uiは動かせる</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/16:</span> <a href="#">yossy.devでisolatedDeclationを有効にしてtscの速度を測る</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/17:</span> <a href="#">node.jsのtsサポートに関して再度理解する</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/18:</span> <a href="#">Node.jsの進化とTypeScriptランタイムの未来</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/19:</span> <a href="#">書いたTypeScriptがブラウザでそのまま動く未来はあるのか</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/20:</span> <a href="#">React Compilerから学ぶgeteratorの使い方</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/21:</span> <a href="#">Bunでフロントエンド開発どこまでできるのか</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/22:</span> <a href="#">Bunはダウンレベルコンパイルはしてくれない</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/23:</span> <a href="#">BunのFramework API（Bake）の概要と目的</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/24:</span> <a href="#">BiomeのnoDuplicateObjectKeysはJSとJson両方見てくれる</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/12/25:</span> <a href="#">Biomeとtypescript-eslintの併用と型情報Lintの課題</a></li>
</ul>

### CyberAgent Way

[【エンタメ×テクノロジー】LDHファンサービス「CL」の若手エンジニアが描く挑戦と成長](https://www.cyberagent.co.jp/way/list/detail/id=31065)という記事で、私について社内で書いていただきました。

いつかは個人で記事に書いてもらえる存在になりたいとは思っていたんですが、まさかこんな早く叶うとは思っていませんでした。

関係者の方々、本当にありがとうございました。

## Youtube

今年からYoutubeも始めました。特にReact Compilerを読む会は周りからの反響がよく、そして私自身も学びになることが多かったのでとても良いコンテンツでした。

今年後半から更新が止まっていますが、来年度は月1での更新を目標にしていきたいと考えています。

今年協力してくれた[@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="#">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="#">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="#">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="#">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="#">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="#">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="#">Podcast #1</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/07/20:</span> <a href="#">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="#">Podcast #2</a></li>
</ul>

## Muddy Web Podcast

[#15 新卒1年目のWebフロント業務を、半期を終えて振り返ってみた](https://open.spotify.com/episode/6Jkdiq0F927q5x042leHxN?si=661b75467ef14abd)で出演しました。

新卒同期がかなり多いので、私も他のみんながどんなことしているのか知れてよかったです。

あと、ずっと聴く側だったMuddy Webに出演ができて嬉しかったです。

## 登壇

今年は3回の登壇を行いました。

特に[cadc](https://cadc.cyberagent.co.jp/2024/sessions/fantech-web-biome/)の登壇は撮影機材もちゃんとした中で行われことと、発表時間も25分ほどという一番長い時間で発表しました。
緊張しましたが、とてもいい経験になりました。

来年度はjsconfやtskaigiなどの登壇を目標にしつつ、より登壇回数を増やしていこうと思います。

<ul style="font-size: 14px;">
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/04/24:</span> <a href="#">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="#">Introduction to React Compiler</a></li>
<li style="line-height: 150%;"><span style="display: inline-block; width: 6em;">2024/10/30:</span> <a href="#">成長中の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+)

来年度は何かしらのOSSのメンテナに慣れたらいいなと思ってます。

## まとめ

2024年度はかなりの量のアウトプットができたかなと思っています。来年度も引き続きブログを書きつつ、Youtubeへの更新もやっていきます。
Youtubeは以前よりもクオリティは上げたいです。

あと、今年は本業への集中と、自分の使える時間を増やそうと思って副業を一切しなかったんですが、余裕も出来てきたので来年からまた再開しようかなと思っています。
もしお仕事あればご連絡いただけますと幸いです。

いろんなことに取り組んで、新しい発見があった一年でした。2025年度は、今年よりも良くなるようにまた頑張ります！🔥
Loading