まっつーのブログ

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

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やオープンリダイレクト、認証・認可の対策といった、重要なトピックもカバーされていました。

感想

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

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

ポートフォリオサイトをつくりました

日記

ポートフォリオサイトのスクリーンショット
ポートフォリオサイトのスクリーンショット

ポートフォリオサイトを作成しました。

ryo-manba.vercel.app

2023年4月から正社員として働き始めましたが、実はポートフォリオサイトがないことに気づいたんです。 WantedlyやLinkedInでも十分かなぁとも考えましたが、スキル向上も兼ねて1から作ってみることにしてみました。

制作の流れ

まずはFigmaでデザインカンプを作成し、それを元に各ページを作成することにしました。

Figmaで作成したデザインカンプ
Figmaで作成したデザインカンプ

Figmaを使うのは初めてでしたが、操作がシンプルだったので、スムーズに作業を進めることができました。 画面遷移や共通コンポーネントが作成できたりと便利な機能もあったので、使いこなせたら何かと役立ちそうです。

Figmaを使い始めるにあたって、以下の記事が参考になりました。

zenn.dev

サイトには以下の4つのページを設けました。

  • 自己紹介ページ（ホーム）
  • 技術スキルページ
  • プロジェクト一覧ページ
  • 投稿一覧ページ（Qiita、はてなブログ、note）

デザインが決まってからは、Next.jsでサイトを実装していきました。

UIフレームワークとしてChakra UIやNextUIを試してみましたが、結局CSSの勉強も兼ねてTailwindCSSを使うことにしました。 レスポンシブ対応に苦戦してCSSの奥深さを感じました。

使用した技術は以下の通りです。

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Vercel（デプロイ）

工夫した点

投稿一覧ページでは、Qiita、note、はてなブログのRSSフィードを取得して一覧表示しています。 はじめはリクエストごとにデータを取得していたので表示に時間がかかっていましたが、投稿ページをISRにして24時間おきにページを再生成することで、表示速度が向上しました。

ちなみに、ISR（Incremental Static Regeneration）とは、静的サイトの特定の部分を必要に応じて更新・再生成する技術のことです。 これにより、ページの表示速度が向上し、サーバーへの負荷も軽減されます。今回はVercelでデプロイしたため、ISRを利用できました。 （GitHub Pagesのような静的サイトのホスティングサービスだと、ISRのような動的な機能は使えません）

感想

デザインカンプから実装、デプロイまで一貫して行ったので楽しみながら作ることができました。 カンプがあることで作業がスムーズに進みましたが、予定と違うデザインになることもあり、初めから上手くはいかないんだぁと改めて実感しました。

今後はダークモード対応を始め、ちょくちょく更新していく予定です。

着手から1ヶ月ほどかかりましたが、いろいろ経験できたので作ってよかったと思います。 404ページも工夫したので（？）ぜひ見てみてください。

以下のリンクからソースコードもご覧いただけます。 github.com

【感想】プリンシプルオブプログラミングを読んだ

読書感想文

新米プログラマーが読むべき本として、「リーダブルコード」や「Webを支える技術」などと共に名前を上げられている1冊。 特定のプログラミング言語に依存しない普遍的な101個の原理原則について書かれたものです。

用語の解説にとどまらず、なぜそうするのか、具体的にどのように取り組めばいいのかが書かれているため、プログラマとしての重要な考え方を網羅的に学ぶことができました。

今回は、その中でも特に印象的だった3つのTipsについて感想と共にまとめてみました。

名前は短いコメントとして考えること

変数や関数、クラスなど、名前を考える場面は多々あります。 適切な名前付けを行うにはどうすればよいのでしょうか。

考え方の一つとして、名前は短いコメントとして考えることが挙げられていました。

コメントといっても詳細まで書く必要はありません。 効果と目的だけを説明して、手段には言及しないようにします。 そうすることで、コードを読む人は詳細を理解する手間を省くことができるのです。

具体例を考えてみましょう。例えば、チャットアプリで、メッセージが送信可能かを判定する関数を作るとします。

// 手段についての説明
bool isNotBannedAndNotMutedAndNotBlocked();

// 目的についての説明
bool canSendMessage();

以下の条件を満たしているかを判定するというロジックです。

  • BANされていないこと
  • ミュートされていないこと
  • ブロックされていないこと

手段についての説明では、コードを読むだけでは何を伝えたいのかが分かりませんね。 ロジックの追加や変更時にも名前の修正が必要になってしまいます。 関連したコードの修正を行うにも、周りのコードから意図を汲み取らないといけないので時間がかかってしまいそうですね。

それに対し、目的を名前で説明している方は、明確に意図が伝わりますね。 関連したコードの修正も容易に行うことができそうです。

一度書いたコードは、多くの人から何度も読まれることになります。
長期的な視点を持ち、コメントのように伝わりやすい名前付けを行うことを意識していきたいと思いました。

エゴを捨て去ること

積極的に自分の書いたコードを見てもらい、改善点を指摘してもらうことは重要です。

とはいえ、自分が書いたコードに愛着が湧いてしまい、不具合を指摘されるのが嫌になるという気持ちもあります。 また、攻撃的な言葉で指摘をされると、素直に受け入れづらいということもあると思います。

その対策として、うぬぼれやプライド、自分の方が優れているといったエゴを捨て去ることが必要だと述べられていました。 コードを見る側も見せる側も、お互いに敬意を持って、真摯にコードレビューと向き合う気持ちが大事なのだと学びました。

もちろん、自分の仕事と自我を切り離すのは簡単なことではありません。 それでも、日常的に意識することで、自分自身とコードを切り離して考えられるようになるのだと思います。

名前がないものは見えない

名前がないものは、身近に存在しても見えないが名前を知った途端に見えてくる。 これはジョシュアツリーの法則という法則です。

例えば、デザインパターンは名前があることで、様々な設計方法が再利用可能になっています。 名前がついていなかったら、仮に共通点を見出すことができたとしても、チーム全員が同じ実装方針で進めることは難しそうです。

ジョシュアツリーの法則は、この書籍で学んだ数多くの概念にも通ずるところがあると思います。 用語と要点を知っただけでは意味がないと思う方もいるかもしれません。 しかし、その概念を知らないことには、身近に存在していても気がつくことは困難です。

重要な概念のニュアンスだけでも抑えておくことで、今後の学びや気づきにつながるのだと思います。 もちろん名前を知っているだけでは、不十分なところもあるので、各トピックで紹介されている関連書籍を読んで深堀りするのもよいでしょう。

まとめ

以下の3点がこの書籍の中で特に印象的なトピックでした。

  • 名前は短いコメントとして考えること。
  • エゴを捨て去ること。
  • 名前がないものは見えない。

他にも数多くの原理原則が紹介されており、今後のプログラマー人生に役立つ書籍だと思いました。 要点を掴んでおくことで、今後の取り組みに役立てていきたいです。

興味がある方はぜひ読んでみてくださいね。

プリンシプル オブ プログラミング3年目までに身につけたい一生役立つ101の原理原則

プリンシプル オブ プログラミング3年目までに身につけたい一生役立つ101の原理原則

Amazon

2022年振り返り

振り返り

2022年は、42 Tokyoの課題やインターンを中心に色んな経験を積むことができました。 どんな一年だったかタイムライン形式で振り返ってみようと思います。

1月

  • C++の基本構文を学ぶ課題をクリアする。
  • 月終わりに振り返り記事を書き始める。

2月

  • Railsチュートリアルを終わらせる。
  • STLコンテナを実装する課題に着手する。
  • ターミナルに動くドーナツなどのグラフィックを表示する課題をクリアする。

  • 42の友人と共に毎朝の読書会を始める。

  • 初めての長期インターンに参加する。

3月

4月

  • STLコンテナを実装する課題をクリアする。
  • HTTPサーバーを実装する課題に着手する。
  • 42の学生10名ほどで開発合宿を行う。
  • 42の学生インタビュー記事を書いていただく。

5月

  • Goの基本構文を学ぶ課題をクリアする。
  • fukabori.fmを始めとしたテック系ポッドキャストを聞き始める。

6月

  • 友人の結婚式で感動する。

7月

8月

  • HTTPサーバーの実装が終わりに近づく。
  • Twitterに朝読書の感想をツリー形式で投稿した。

9月

  • HTTPサーバーを実装する課題をクリアする。
  • docker-composeでLEMP環境を構築する課題をクリアする。
  • チャット機能付きのゲームアプリを作る課題に着手する。（共通過程の最終課題）
  • お散歩中に素敵な作品に遭遇する。

10月

  • 気分転換にオモコロの広告巡りをする。

11月

  • AWS Cloud Questをやってみる。

  • Siv3D触ってみる。

12月

一年を振り返って

改めて貴重な経験がたくさんできたということに気が付きました。

特に印象的だった出来事は、開発合宿に行ったことです。 42の仲間たちと友好を深めることができて良い経験ができました。

課題では、HTTPサーバーの実装が大変だったことを覚えています。 設計思想の違いなどで、ときに衝突することなどもありながら、最終的に協力して良いものを作成できたと感じています。 技術以外の観点でも今後につながる学びを得ることができました。

おわりに

良いお年を〜。