👻

フロントエンド一年目が2020年に読んだ本まとめ

2020/12/29に公開

frontend

はじめに

年の瀬ということで、今年読んだ技術書をまとめてみようと思います。
今年の1月にフロントエンドエンジニアに転職して、ちょうど1年が経ちます。
この記事を書くことによって自分の成長が実感できればいいなと思います。
完全に個人の感想になってしまいお役に立つかわかりませんが、読んだことない本があれば、購入前に参考にしていただければと思います。

読んだ本リスト

まずはざっと読んだ本を列挙してみます。まだ読んでる途中の本もありますが、全部で18冊ですかね。

今の自分にはまだ難しすぎて理解できてないのがほとんどですが、それぞれ簡単に感想を書いていきます！

（順不同）

感想

【特典付き】HTML5&CSS3デザイン現場の新標準ガイド【第2版】

HTML関連の本を一冊手元にほしいな、と思って買った本。

発売したのが10月で、もうその頃はそれなりに案件担当してたんですが、普段使用してるタグに関して、全然理解できてなかったということに気付けたし、初めて知るタグもありました。
CSSのプロパティに関しても一つずつ図を載せながら解説してて、めちゃくちゃ参考になります。
これ片手に入社研修受けたかった。実務でも役に立つ本です。

コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション

個人開発でWebアプリを作成してる時、divタグでラジオボタンを実装したんですが、その時にキーボード操作がうまくいかなくて、アクセシビリティに行き着いて買った本。

"THIS IS FOR EVERYONE"という言葉に出会えた本であり、Tim Barners-Leeという方の存在を知れた本です。
Webの本当の価値を認識できたので、それが十二分に発揮できるような実装ができるようになりたいと強く思いました。
目次の翻訳は微妙ですが、アクセシビリティにおいて、何を考えないといけないのかを理解するのに役立つ本だと思います。

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

CSSの基本的なことを勉強したくて買った本。

CSS設計における4つのゴールの話が完結にまとまっていて、学びはじめの時に出会えて良かったと思える本です。
実務で書いてていつも思いますが、CSSって本当に自由に書けてしまうので、すぐ破綻への道に逸れてしまうんですよね。コンポーネント設計も簡単な例を用いて理解しやすかったです。

Web制作者のためのSassの教科書改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

入社時研修でSassを使用してたので、理解を深めるために買った本。

セレクタのネストや"＆"ぐらいしか使いこなせてないですが、@mixinや@functionを使おうと思う時に参照してます。
BootstrapやMaterial UIといったCSSフレームワークを使うより自分で書いていく方が好きなので、最後にまとまってるSass全機能リファレンスが便利でよくお世話になってます。
他のSassについての本はあんま知らないですが、Sassについて勉強したい人はこれを買っておけば問題ないと思います。

CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSSを書きはじめて、こういう時はどう記述するのが良いのか、と悩みはじめて買った本。

４つのゴールをさらに8つのポイントに分けて解説していて、より踏み込んだ話をしています。
Atomic Designにもこの本で出会えました。
CSSの何が問題となってるのかを明確にした上で、それに対してどういうアプローチが必要かを説いてます。例として載せているcssを、8つのポイントを元に何が問題となってるか指摘した上で、リファクタリングしていくので、めちゃくちゃ勉強になりました。
後半の実装例もそのまんま使用できます。私はボタンとかそのまんま使用しました。
これを超えるCSS本は出てこないと思えるぐらいの名著だと思ってます。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

入社後のJS研修時に大変お世話になった本。

DOM操作や演算子、ビルトインのオブジェクトといった基本的なことを理解するのに役に立ちました。
これと一緒にjs primer(本が出る前だったのでWEB版)も読んでJSの基礎を勉強したのが、もう懐かしいです。
こういう基本的なJSの挙動を調べるのための安心できる情報源は一冊手元にあって損はないと思います。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

Webアプリを作ってる時、どうしてもReactとReduxの接続部分が理解できなくて買った本。

今となってはHooksあるから必要ないですが、Reactのライフサイクルの話、ReduxのMiddlewareの話はとても勉強になりました。
こういうフレームワーク系って、すぐ新しい内容がリリースされるから本でキャッチアップするのが難しいんですよね。
かといって、公式読んだだけで理解できるかっていうとそうでもなく、GitHubでソースコード見て、何やってるかわかるレベルになりたいと強く思います。

プログラミングTypeScript――スケールするJavaScriptアプリケーション開発

なんとなく使い始めたけど、そろそろちゃんと勉強しようと思って買った本。

tsconfigのこととかビルドの話とか勉強になりました。
基本的な型に関しては、自分の認識を確かめながら読み進められたけど、後半は理解できない部分が多かったです。
この部分がわかるようになると、初めて触るライブラリとかも型から使い方を知ることができるので、理解進めていきたいですね。

Atomic Design ~堅牢で使いやすいUIを効率良く設計する

Reactのコンポーネント設計に悩んでいた時に買った本。

コンポーネント設計という言葉を知らない時に、勢いでWebアプリを作ったはいいものの、機能拡張しようとしたときにわけがわからなくなって、どんな風にコンポーネント作っていけば良いかを勉強したくて買いました。
読んだ当初は、なんでこんなにめんどくさい事するんだろう、と思ってましたが、開発進めていくうちに再利用性や責任範囲の狭さといったメリットを感じられるようになってます。storybookについてもこの本で出会えました。

Webフロントエンドハイパフォーマンスチューニング

ブラウザのレンダリングについて興味を持って買った本。

毎日ブラウザ使ってるのに、知らない知識ばかりで驚きました。
パフォーマンス改善と一口に言っても何が問題点なのかによってアプローチが全く異なってくるので、「推測するな、計測せよ」を忘れないようにしたいです。

ハイパフォーマンスブラウザネットワーキング――ネットワークアプリケーションのためのパフォーマンス最適化

HTTP通信に興味を持って次に紹介する本を買って読んだけど撃沈しました、と上司に伝えたら紹介してくださった本。

パフォーマンスをよくしていくために知っておいた方がよいネットワークの知識が学べます。
上記の本でパフォーマンスに興味を持てたので、この本は読み進められました。
内容は難しく理解するのは大変ですが、目に見えないネットワークの部分がどうなってるか知ることのできる良著だと思います。
こういうところまで気を遣うことができるエンジニアになりたいと思いました。

Real World HTTP 第2版――歴史とコードに学ぶインターネットとウェブ技術

HTTP通信に興味を持って買ったんですが、読んでみてHTTPに興味があったわけではないことに気付いた本。

一通り読んだけど、ほとんど頭に残ってなく感想書けません。また興味が沸いたら再度読んでみようと思います。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

改めて感想を載せる必要はないと思いますが、エンジニアの誰もが読んでいるであろう本。

変数名や関数名に迷った時、このコードもっと読みやすくならないかなと思った時に見返してます。
正直、本に書かれてるコードに関して理解できない部分が多かったので、次の本を買いました。

現場で役立つシステム設計の原則 ~変更を楽で安全にするオブジェクト指向の実践技法

どうしたらもっと読みやすいコードが書けるのか、と考えてる時に見つけた本。

PR出す時、コメントでの説明が多くなっていることに気付き、コードがもっとわかりやすければ、この補足の説明を減らせるんじゃないかと思って買いました。
本に出てくるコードはJavaですが、読みやすさのポイントを細かく分割してあり、段階的に改善していくので、理解しやすかったです。実際コード書こうと思うと、まだうまく実践できないので、焦らず意識していこうと思います。

やりたいことが今すぐわかる逆引きGit入門

Gitの操作で困った時に頼るソースが欲しくて買った本。

Gitのこと理解するには不十分ですが、実務でこんな時どのコマンドつかえばいいんだっけ、って困った時に参照してます。

マイクロサービスアーキテクチャ

Backends For FrontendsとConsumer-Driven Contractに興味を持って、上司に勧めていただいた本。

大きな意味での設計（アーキテクチャ）について初めて読んだ本でもあり、モノリスやマイクロサービスといった言葉もここで出会いました。
一度読んだだけでは全然理解できなかったですが、フロントエンド以外の存在を気付かせてくれて、バックエンドに興味を持つことができました。

レガシーコードからの脱却――ソフトウェアの寿命を延ばし価値を高める9つのプラクティス

良いコードとはどんなコードか、について興味を持って買った本。

良いコードを書くためのベストプラクティスを説明していて、全体像を理解するのに役立ちました。
アジャイルに関して基礎知識がなかったので、ベロシティとかスクラムとか知らない用語に戸惑いましたが、アジャイル開発についても興味を持てました。
ここに書いてあること全て実践してくのはかなりハードル高いと思ってしまいますが、できることからやらないと永遠に変わっていかないし、何もやらなかったから今この目の前にあるどうしようもないコードがあるんだよな、って思います。
実装中、もっと視野を広く持たなきゃいけないんだなと思いました。

体系的に学ぶ安全なWebアプリケーションの作り方第2版脆弱性が生まれる原理と対策の実践

個人開発で作ったWebアプリのセキュリティが気になって買った本。

これはまだ全部読めてません。今は気になる部分のみを読んだだけなので、ちゃんと全部読まないと。
（常駐先で徳丸さんの研修を受けたんですが、めちゃくちゃわかりやすく、この本を購入しました。）

番外編

せっかくなので技術書以外でオススメの本も載せてみました。

逆ソクラテス (伊坂幸太郎)

大好きな作家である伊坂幸太郎さんの本。

短編集なんですが、伊坂さんの作品は短編集でも全部繋がってるので長編として楽しめるんですよね。
他人の意見を押し付けられそうになった時、「僕はそう思わない。」って言える勇気をもらうことができる本です。

世界は贈与でできている――資本主義の「すきま」を埋める倫理学 (近内悠太)

読み終えたら幸福感に包まれた本。

ジャケ買いしたんですが、買って良かって心から思えます。
サンタさんについて書かれた本、というと間違った説明になるかもしれませんが、読むと人に優しくなれる本です。多くの人に読んでもらって、贈与溢れる世界になってほしいと願います。

あとがき

30歳になる年で、未経験からエンジニアに転職しましたが、なんとか一年やってこれました。
転職時に周りの方からいろんなアドバイスをいただきましたが、「新しいことを始めるのに遅いなんてことはない」という一心で転職して後悔はないです。
変化の早い世界で、キャッチアップを継続していくのは大変でしたが、こうして振り返った時に多くの学びがあって良かったと思ってます。まだまだ理解不足の部分は多く残ってますが、来年も自分の興味の赴くまま本を読んでいこうと思います。
最後まで読んでいただきありがとうございました！
良いお年を！