まっつーのブログ

本の感想や振り返りなど雑多に書いてます

2025年振り返り

振り返り

今年も終わりということで、ゆるゆると振り返ります。

去年: 2024年振り返り

OSS

今年の11月に pnpm のメンバーになりました。 コントリビューションのきっかけは、昨今相次いだ npm のサプライチェーン攻撃でした。npm への信頼が揺らぐ状況を見て、パッケージマネージャ側でセキュアな対策を導入することで防げることがあるのではないかと考え、いくつか改善に取り組みました。

具体的には、minimumReleaseAge に除外オプションのバージョン指定を追加したり、リリース方式がダウングレードされたことを検知する trustPolicy を追加しました。そのほかにも細々とした改善を継続しています。

一方で、HeroUI は今年の3月にメンバーを外れました。現在は Collaborator として、たまに眺めたり手伝ったりするくらいの距離感で関わっています。

HeroUI では、YC S24 として Zigma の開発を一部お手伝いするなど、OSS に限らずさまざまな経験をさせてもらいました。声をかけてくれた Junior には感謝しています。

現在は HeroUI v3 や mobile 向けの HeroUI Native など、引き続き面白い取り組みが進んでいるので、今後の展開も楽しみにしています。

自作 OSS

今年は2つの自作 OSSを作成しました。

また、既存の OSS にもいくつか手を入れました。

例えば Cron Visualizer では、ロジックを Wasm 化して高速にするなどの改善を行いました。そのほか、自分のポートフォリオサイトにブログ機能を追加して、Chrome Translator API を使った AI 翻訳機能を試したりもしました。気になったことをサクッと試せる場所があるのは良いですね。

登壇 / ブログ

今年は4回登壇しました。

登壇内容は CSS Linter や pnpm など、今年取り組んでいた OSS 活動と直結したものが多かったです。OSS での試行錯誤が、そのままアウトプットにつながるのは楽しいですね。

ブログ

Zenn で3本記事を執筆しました。また、会社のエンジニアリングブログにも1本書きました。

去年に引き続き、登壇や記事のネタの多くは個人で取り組んでいる OSS 関連の内容だったので、来年は業務を通じて得た知見や判断のプロセスを言語化し、アウトプットできるといいなと思っています。

直近では、EM から経験学習という考え方を教わり、自分の経験を振り返って言語化することの大切さを改めて意識するようになりました。

42 の Alumni になった

42 では、Common Core 修了後に一定期間課題を進めないと Alumni になります。今年は時間が取れず Alumni になりましたが、課題自体は引き続き進められるため、実質的な環境はほとんど変わらないです。余力があれば課題をやりたいところですが、余力がないのが悩みです。

また今年は、42 Tokyo 初の Common Core 修了式が DMM 本社で開催されました。 久しぶりに懐かしい顔ぶれとも再会できて良い時間でした。

それと今年の夏頃から少額ではありますが 42 Tokyo に寄付をしています。 大変お世話になったので、今後も継続して支援していければと思っています。

英語学習

今年は英語にも少し力を入れました。

  • 1月〜6月：コーチバディ
  • 7月〜12月：goFluent

いずれも会社が費用を負担してくれていてとてもありがたかったです。

PROGOS による CEFR レベルの推移は以下の通りです。

  • A2 High（去年12月）→ B1 High（今年7月）→ B1（今年12月）

7月に伸びたのは、コーチバディで図表説明の練習をしており、PROGOS の出題形式と噛み合ったためだと思います。一方で、その後はアウトプット量が減り、12月は少し下がりました。

goFluent は正直あまり自分の好みに合わなかったものの、今後英語を使う機会は増えそうなので、来年も継続して取り組みたいです。日常業務で困らずに説明できる英語力を身につけることを目的にして頑張ります。

仕事

ブログにもまとめましたが、今年は技術的な改善施策を余力で進めつつ、多くの Growth 施策をチームで協働して進められた一年でした。 toC Growth の領域で「どうすれば最短でユーザーに価値を届けられるのか」を常に考え、PM・BE・QA・デザイナーと密にコミュニケーションを取りながら、さまざまな施策を大きな不具合なく進められたのは、とても良い経験でした。

どの職種にも優秀な人が多く、刺激的な日々を送ることができました。サービスが道半ばでクローズしてしまったのはとても残念ですが、中長期を見据えた改善や、定量的な指標をもとに議論しながら施策を進められたことは、今後のキャリアに確実に活きる経験でした。

今年よかったもの

最後に今年よかったものを上げときます。

  • 技術書：LLMのプロンプトエンジニアリング
  • 小説：スター（朝井リョウ）
  • 映画：チェンソーマン レゼ篇
  • 大阪万博
  • 観葉植物
  • SF6
    • 睡眠導入としてウメハラの YouTube を流すのが日課になり、そこからプレイ動画や SFL まで追うようになった
    • 特にマゴ / ハイタニ / ときど / ウメハラ などのベテランプレーヤーを推している
  • インド
    • 人生初の海外旅行でデリーに行った
    • チャイが美味しかった
  • 登山
    • 友人に誘われて最大 2000m 級に挑戦した
    • 正直ハマってはいないが、山頂の景色、その後の銭湯など親しい友人と過ごすにはいいかもしれない
  • 定食：すけそう鱈と野菜の黒酢あん（大戸屋）

終わりに

振り返ってみると今年も色々ありました。
来年は運動したいです。皆さん良いお年を〜。

2024年振り返り

振り返り

2024年も色々ありました。ゆるく振り返ります。

去年: 2023年振り返り

OSS

NextUI と Stylelint のメンバーになりました。

NextUI は React Aria ベースのコンポーネントライブラリなので、React Aria へのコントリビューションが評価され、Stylelint は10月以降に高頻度でコントリビューションした結果、メンバーに招待されました。

他にも React Spectrum は Contributor Slack に招待してもらい、5月のリリースでは Special Thanks に名前を載せて頂きました。さらに水筒やチームステッカーなどの Swag をプレゼントしていただいて嬉しかったです。

今年は全体で127件のPR を作成し、そのうち115件がマージされました。

月ごとにばらつきはありますが、一月あたり10件前後の PR を作成していたことになるので結構コード書いてますね。OSS コントリビューション楽しいからついやっちゃうんですよね。

メンバーになったプロジェクトでは PR の作成以外にも issue のトリアージや PR レビューなども行いました。技術以外の観点での学びも多くて楽しいです。

来年もフロントエンドエコシステムを中心に様々な OSS にコントリビューションしていきたいです。

登壇した

5回登壇しました。

登壇はスライド作成に時間がかかるし、発表直前はプレッシャーを感じますが、終わったあとは毎回やってみて良かったなと思えるので楽しいです。

勉強会に参加してると圧倒的に発表が上手い人がたくさんいて、そういう人たちから懇親会でアドバイスや登壇で意識していることを聞けたのも良い経験でした。

発信活動

Zenn で記事を4本執筆しました。 他に、サイボウズ フロントエンド通信というポッドキャストに2回、サイボウズ フロントエンドマンスリーに1回ゲストで参加しました。

今年は登壇だけでなく、ブログやポッドキャストなどでも活発に発信できて良かったです。

引っ越した

上京してから長いこと住んでいた部屋を引っ越しました。 引っ越し先が決まる前に解約日を決めてしまったのはあまりにも悪手で、引っ越し直前で結構バタつきました。次回はもっと計画的に進めると良さそうです。

転職した

今年の10月に転職しました。 サイボウズを辞め、現在はメルカリで働いています。

労働環境や人間関係が非常に良く、尊敬するエンジニアの方々も多く在籍していたため、とても悩みましたが、toC の新規開発でスピード感のある開発を経験したかったことが決め手となりました。

退職後も同期とはたまに会ったりしてるので、良い関係を続けられているのは嬉しいです。

旅行した

新潟、北海道、福岡、京都（奈良）に行きました。 長岡の花火、北海道のスープカレー、太宰府、嵐山の紅葉とさまざまな魅力を堪能しました。中でも今年の MVP は福岡で食べた水炊きですね。あれはまた食べに行きたい。

42 の課題やった

セカンドサークルの課題を2つやりました。 アセンブリで libc の一部を実装する課題と C 言語、アセンブリ、JavaScript で Quine を作成する課題をやりました。

新しい校舎は以前よりも活気があって良かったです。

今年よかったもの

最後に今年よかったものを上げときます。

  • 技術書：ルールズ・オブ・プログラミング
  • 小説：正欲
  • アニメ：呪術廻戦2期
  • ドラマ：地面師たち
  • 場所：猫カフェ
  • 日用品：ソーダストリーム（炭酸水作るやつ）
  • 定食：茄子と豚のコク旨味噌炒め（大戸屋）

おわりに

良いお年を〜。

アセンブリで libc の一部を実装した

42 Tokyo のセカンドサークルの課題で libc の一部を 64 bit ASM で再実装しました。

課題の概要

strlen や strcmp, strcpy といった文字列操作やシステムコールを扱う write やread、動的メモリ確保を行う strdup をアセンブリで実装する課題です。

作ったものは以下のリポジトリにあります。 github.com

どのように進めていったか

次の流れで進めていきました。

youtu.be

提出するタイミングで校舎の macOS が Linux に移行したため、コンパイルフラグを -f macho64 から -f elf64 にしたり、errno の設定を __errno から __error_location にするなどの処理をして Linux 向けの実装対応をしました。

課題を通して学んだこと

感想

Web アプリケーションの開発に忙殺されていて、長らく手を付けられませんでしたが久しぶりに課題を進めることができました。今回の課題ではアセンブリでの実装を通じて C 言語などの高級言語がどのように動作するのかについての理解が深まりました。時間があるときに他の課題も進めていきたいところです。

2023年振り返り

振り返り

2023年は、42 Tokyo の First Circle 突破や就職、勉強会での登壇などエンジニアとして色々と成長できた年になりました。今年一年をタイムライン形式で振り返ってみようと思います。

1月

42 Tokyo の最終課題が終わりそう

富樫展に行った

2月

42 Tokyo の First Circle を突破！

2021年の4月に入学した42 Tokyo を約2年かけて無事に卒業（ではないんですが）することができました。最初の一年はフルコミット、次一年は週3インターンといった生活でなんとか最後まで駆け抜けることができたので達成感がありました。 ピアラーニングを通じて、多様なバックグラウンドを持つ人達と共に学び合うのはとても貴重で良い経験だったと思います。ここでの経験が今の自分の糧になっています。

3月

サバイバル TypeScript の執筆会に参加

初めての OSS 活動でした。この経験をきっかけに OSS に貢献することの楽しさを知りました。

協賛企業の課題を進める

42 Tokyo には様々な課題があり、協賛企業のうちの数社が独自の課題を提供してくれています。Web アプリケーション開発を学びたい気持ちがあったので、この時期は協賛企業の課題をいくつか進めていました。内容としては、Go で Twitter ライクなバックエンドアプリケーションの実装や nginx の設定をいじるやつなどがありました。自分は4つの課題の内3つを終わらせることができました。

pnpm のドキュメント翻訳にコントリビュート

インターン卒業

自分自身良く使っているサービスの開発に携われたのはとても良い経験でした。 週一でチームメンバーと 1on1 をする機会もあり、仕事に対する考え方や今後のキャリアなど沢山の学びを得ることができました。

体験記も書きました。

4月

入社

寿司

そしてかっこいい一言

Next.js のドキュメントfix

個人サイト作成

初任給で 42 にちょっとだけ支援

お世話になったおじさん（42 の同期）に感謝する会

5月

個人サイト作成

技術書展にいく

Renovate にコントリビュート

初めて Zenn で記事を書く

6月

とんかつをご馳走になる

Cron のビジュアライザーを作る

7月

Mastodon 始める

全然使い道のない Chrome 拡張をつくってしまう

君たちはどう生きるか

映像と音楽が印象に残りました。

配属される

フロントエンドエンジニアになりました。

8月

  • 副業始めた
  • 呪術廻戦にハマる

9月

SNS の名前を変えた

インターン先の先輩の送別会

React Aria へのコントリビュート

10月

Playwright の VSCode 拡張の記事が伸びる

嬉しい。

11月

42の OB/OG 会に参加

JSconfJP参加

アドカレを企画

12月

アドカレ書いた

アクセシビリティの勉強会に参加

Nihonbashi.js で登壇

42 同期二人の就職祝い

42 同期10人くらいで集まって盛大にお祝いしました。いい話。

応用情報ギリギリ合格する

アドカレ完走の感想

一年を振り返って

2023年は、42 Tokyo の First Circle 突破や就職、勉強会での登壇などエンジニアとして色々と成長できた年になりました。プライベートについてもなんかいい感じにゆるゆると過ごしてます。

ちなみに去年の振り返りはこちらです。

ryo-manba.hatenablog.com

おわりに

良いお年を〜。

【感想】フロントエンド開発のためのテスト入門を読んだ

読書感想文

フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識

フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識

Amazon

これまで見たことがなかったフロントエンドのテストに特化した入門書ということで読んでみました。 特に印象深かった3つのポイントを感想と共に挙げてみたいと思います。

コード例がたくさんある

コード例がとにかく多かったです。書籍の半分近くはコード例で占められているといっても過言ではないかなと思います。

シンプルな足し算を行う関数から始まり、例外処理や非同期処理の検証方法、さらにはUIコンポーネントのテスト方法など、多様なテストシナリオが詳しく説明されていました。

値が期待値を満たしているかを検証するマッチャーの部分では、真偽値、数値、文字列、配列、オブジェクトなど、様々なデータ型に対してのテストの実装と具体的な理由が書かれていました。 入門書ということもあり、序盤からとても丁寧に説明されているという印象を受けました。

また、闇雲にコードが散りばめられているというわけではなく、それぞれのテストコードがなぜ、どのように実装するべきなのかという背景も合わせて述べられているため、理解が深まったように感じます。

Storybookの活用方法が学べる

ツールのインストール方法から、コンポーネントをStoryに登録する手順など、Storybookを初めて使用する方でも問題ないように解説されていました。

内容としては、文字入力やトグルスイッチのクリックといった基本的なインタラクションの登録方法から、ReactのContext APIやWeb APIに依存したコンポーネントといった少々複雑なケースについても取り扱われています。

導入からテストの実装方法まで、一通りの流れについて学ぶことができて、これまでのStorybookに対する苦手意識が薄まりました。 Storybookを初めて使う方から既に経験がある方まで、価値のある内容となっているのかなと思います。

テスト導入のハードルが下がった

これまでフロントエンドのテストを書いたことがない人からすると、テストを導入するハードルはそれなりに高いはずです。 しかし、この書籍を読むことで、少なくとも単体テストレベルなら比較的楽に導入できることが分かります。

さらに、ビジュアルリグレッションテストやE2Eテストといった応用的な手法についても説明があるため、単体テストや結合テストから自然にステップアップし、既存の開発に組み込むことが可能になると感じました。

そして、テストの書き方に迷ったときは、この書籍のコード例を参考にして実装に役立てることもできるはずです。

おわりに

他にもアクセシビリティを配慮したテストの書き方や、カバレッジレポートの読み方などの新しい学びがたくさんありました。 フロントエンドのテストについて学んでみたいという方はぜひ読んでみてください！

【感想】プロになるためのWeb技術入門を読んだ

読書感想文

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

Amazon

「プロになるためのWeb技術入門」を読んだので感想をまとめてみました。

特長

Web技術について基礎からしっかり学びたい人におすすめです。 2010年に発売された本ということもあり、JSPやサーブレットといった少し古めの技術から始まり、背後にある基本的な考え方まで包括的に解説されています。

一見、古い技術を学ぶことに無意味さを感じるかもしれませんが、それぞれの技術が生まれた背景を理解することで、新しい技術を追うだけでは見えない本質をつかむことができます。

強調される考え方

Webアプリケーションの領域では、日々新しい技術が出てきます。 だからといってすべてを追いかけ続けるのは現実的ではありません。 それよりも、新しい技術が解決しようとしている問題や、どのような背景から生まれたのか理解することの方が重要です。

新しい技術の使い方だけを抑えるのも重要ですが、何よりその技術の背景にも焦点を当てることの大切さが強調されていました。 似たような話を先輩から聞いていたので、改めて重要性を実感しました。

印象的だったトピック

印象に残ったトピックは3つです。

網羅的な内容

HTMLの誕生から始まり、Webアプリケーションの基本的な概念、HTTPの役割、Webアプリケーションの進化、セキュリティ対策といった広範なトピックが取り扱われています。

Webアプリケーションの進化を理解するためには、このような基礎知識が必要不可欠なため、基礎の部分を丁寧に書かれていたのが印象に残りました。

サーブレットとJSP

Java開発者にはおなじみの技術かもしれませんが、これらの技術について本書を読むまで私自身が十分理解していませんでした。 そのため、CGIに関連した問題をどのように解決してきたのか、なぜJSPが必要になったのかといったことについても知ることができたのが良かったです。

特にJSPが必要になった過程から、ReactのJSXやRuby on Railsのerbといった現代的な考え方にも繋がるのかなと感じ印象に残りました。

アーキテクチャ

すでに開発の道筋が定まっているRuby on Railsのようなフレームワークを使用していると、その根底にあるアーキテクチャを意識せずに使ってしまうことがあると思います。 しかし、そのアーキテクチャが何を解決し、存在しないとどのような問題が起こり得るのかを理解することでより深い洞察が得られたと感じます。

MVCモデルやレイヤパターンなどの、何となく使う理由は知っていましたが、その本質的な理由について触れられたことで印象に残りました。

まとめ

新しいフレームワークやライブラリを学ぶ前に、Webの基本的な仕組みを理解することがとても重要だと再認識しました。 Webの進化の歴史を学ぶことで、新たな技術がどのような背景から生まれるのかを理解する手助けにもなりそうです。

初学者に限らず、Web技術の基本的な仕組みから改めて理解を深めたいと思う方にはきっと役立つはずです。 興味が湧いた方はぜひ読んでみてください！

【感想】フロントエンド開発のためのセキュリティ入門を読んだ

読書感想文

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識

フロントエンド開発のためのセキュリティ入門 知らなかったでは済まされない脆弱性対策の必須知識

Amazon
「フロントエンド開発のためのセキュリティ入門」を読みました。 この記事では、その感想をまとめてみたいと思います。

概要

この書籍は、その名の通りフロントエンドのセキュリティについて入門者でもわかりやすく解説されたものです。 XSSやCSRF、クリックジャッキング、オープンリダイレクトなど、フロントエンドで考慮すべきセキュリティ上の課題が幅広くカバーされています。 さらに、問題に対する具体的な対策が紹介され、その後にハンズオン形式でその手法を試すまでの一連の流れで学ぶことができます。

特に印象的だった内容を以下にピックアップしてまとめてみます。

セキュリティとHTTPの基礎知識

前半部分では、Node.jsやnpmのインストールといったセットアップから始まり、Webアプリケーション開発の基本となるHTTPの仕組みについて全般的におさらいしています。URLの各部分の意味からDNS、TCP/IPといったネットワーク関連のトピック、さらにはHTTPメッセージやステータスコードなどの情報が丁寧に説明されているため、後々の学習がスムーズに進めることができます。

CORSの仕組み

CORSに関する章では、単純リクエストとプリフライトリクエストの違いから始まり、クロスオリジンでのCookieの送信を制限する方法、fetchのCORSモードからHTML要素のcrossorigin属性と幅広く説明されています。オリジンが異なるアプリ間でのやり取りがなぜ必要なのか、から入った上で、それをCORSでどのように制限するかが説明されているため理解がしやすいと感じました。

サイドチャネル攻撃と対策

同一オリジンポリシーでは防げないサイドチャネル攻撃の対策が紹介されていました。 具体的には、サイト単位でプロセスを分離したり、オリジンごとにプロセスを分離する仕組みなどが解説されています。 TLD、eTLD、eTLD+1についても深く理解していなかったので、これらの概念についても学べたのもよかったです。

XSSの仕組みと対策

特に内容が充実していたのがXSSの章です。反射型、蓄積型、DOM-based XSSという3種類のXSSについて詳しく解説されていました。 DOMPurifyというライブラリを使用したサニタイズ方法や、CSP、Trusted Typesを用いたポリシー関数を使用した柔軟な処理など、具体的かつ有用な手法が紹介されています。

上記に紹介した以外にも、CSRFやオープンリダイレクト、認証・認可の対策といった、重要なトピックもカバーされていました。

感想

全体を通じて、簡単なサンプルをハンズオン形式で行えるのが良かったです。 一度に全体のコードを出すのではなく、段階的に解説されているため、理解しながらコードを書くこともできました。 コード例も色や記号の工夫により非常に見やすかったです。

徳丸本でバックエンドを中心にセキュリティについて学び、フロントエンドはこの書籍を学ぶと良いように思いました。 流れとして、この書籍を読んでから、徳丸本の方が分量的には良いかもしれません。フロントエンドでもセキュリティ対策を施す意識が高まるよい本でした。