フロントエンド周りで読んだ技術書まとめ

2018/07/31

初めに

フロントエンドを学習したときに参考になった技術書をピックアップしてざっくり紹介する。
サービスを作るのであればこの辺は一旦後回しでいいと思うが、サービスをスケールさせたい時に知っておいて損はない技術書も紹介してるので気が向いたら是非読んでみてほしい。

HTML5/CSS3をハンズオン形式で学べる本。

これ1冊で基本的なレイアウトは組むための知識がつくと思う。
始めた当初はマージンの相殺とかに悩んだりしたのですごく助かった。
ONE POINTでの解説が非常に参考になる。

今だとアイテムの整列にflexboxを使うことが多いけど書籍が発行されたタイミングでは対応状況が微妙でベンダープレフィックを付ける必要があったりで採用されなかったみたい。

書籍の知識+flexboxとかGrid Layoutを覚えとけば良さそう。

JSを触り始めた時にそもそも何ができるかすら分からなかったからとりあえず買った。

全くプログラムを書いたことがない状態で読むと知らない単語だらけで中々進まないので progateとかドットインストールをやった後とかに見るといいかも。

ES2015までならこの本の内容をざっくり押えてればいいかなと思う。
ES2016以降の説明はないのでネットとかで学習する必要がある。

未来の仕様を先取りしたかったらTC39のProposalsを参照。
絶対に仕様が組み込まれるわけではない。

JavaScript本格入門を読んで仕様をより詳しく知りたくなった人におすすめ。
発行が2011年でES5までの情報しかないので注意。

プリミティブ値とオブジェクトの違いやよく混乱するthis、クロージャ、プロトタイプチェーンに焦点を絞って解説されている。

class構文はプロトタイプ継承のシンタックスシュガーなのでプロトタイプは知っておいて損はない。

片手間に読める薄さなので気が向いたときに読んでおくといいかも。
なぜメソッドチェインが使えるかとかも分かる。

Atmic Designの考え方やReactを使った実装について書かれている。
Storybookを仕様したコンポーネントカタログの作成やJest、Enzymeを使ったテストの書き方等幅広く学べる。

初めてReactを触る人にとっては難易度が高めだと思うが、別のFWにも応用が利く内容なのでおすすめ。

書籍内で直接言及されていないので本当に正しいかは自信がないけれど、 presenter層とContainer層をまとめる為にFunction as Child Componentsを利用していて、そのあたりの概念を理解するのが大変だった。HoCパターンも出てくる。

個人的にはすごく参考になった。

webフロントエンドのパフォーマンスチューニング本。
主にネットワーク、レンダリング、スクリプト処理に関する基礎知識と問題の調査、改善方法について書かれている。

devtoolの使い方や画像最適化のテクニック等スクリプトに関わらない部分までフロントエンドのチューニングについて体系的に学べる。

ハイスペックなマシン、安定した回線で開発しているとつい忘れがちになってしまう低スペックな環境が前提での高速化を意識しなければならないなど、考えを改めさせられた。

自分はCSSアニメーションでCPUではなくGPUアクセラレーションが使えることや世代別GCについて知らなかったので新鮮だった。
devtoolのUIはよく変わるので買うなら早い方がいい。

アクセシビリティの本。
自分もまだ読了していない。

インクルーシブデザイナーは、コードを書くデザイナーのボタンを、潜在ユーザーを想定した様々な観点から検討します。

上記引用にある潜在ユーザーの想定したコーディングができていなかった自分にとってはかなり刺激的だった。特にスクリーンリーダーでの読みあげとか全く意識したことなかった…
WAI-ARIAの具体的な使い方等学べることが多い。

紹介した技術書に加えてビルドツールの書籍があるといいなと思ったら以下の書籍を見つけた。
Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

gulpって書いてあるけどwebpackについても書かれてるらしいので読んでみるのもいいかもしれない。
webpack.config.jsとか書きたくないって人にはParcelをオススメしておく。

どうでもいいけどmarkdownで書いてるとリンクをいい感じに表示できなくて Hタグにリンク設定してるのがなんとも言えない。