<p>こんにちは。妹尾です。フリーランスでフロントエンドエンジニアをやっています。詳しいプロフィールは<a href="https://blog-sorellina-coda.dev/profile" target="_blank" rel="noopener noreferrer">こちら</a>から。<br><br>今日は「フロントエンド開発入門」という本について紹介していきます。<br><br>本書はWeb系エンジニアに興味を持っている方、特にフロントエンド技術に興味を持っている方に特にお勧めな書籍です。<br><br>Webフロントエンド開発が未経験の方でも十分に読める内容であり、フロントエンドに携わったことのある方ならばより深く共感を持って読めると思います。<br><br>本書はフロントエンド開発の変遷や、必要とされている技術、アジャイル開発のようなWeb系開発の手法について解説がされているため、現代フロントエンド開発へ入門するための教科書と言えるでしょう。</p>

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/1ea8cd64.6717e47b.1ea8cd65.51a3487c/yomereba_main_202101300956384906?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F16461535%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1771/9784798061771.jpg?_ex=200x200" style="border: none;" /></a></div><div class="booklink-info"><div class="booklink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/1ea8cd64.6717e47b.1ea8cd65.51a3487c/yomereba_main_202101300956384906?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F16461535%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" rel="nofollow" >フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装</a><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">安達 稜/武田 諭 秀和システム 2020年10月09日頃    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/1ea8cd64.6717e47b.1ea8cd65.51a3487c/yomereba_main_202101300956384906?pc=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F16461535%2F%3Fscid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2Fev%2Fbook%2F" target="_blank" rel="nofollow" >楽天ブックスで探す</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4798061778/gengineer-22/" target="_blank" rel="nofollow" >Amazonで探す</a></div>                                    	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

<h2 id="h9707d3a59a">概要</h2><blockquote><span style="color:#0f1111">最近のWeb開発ではフロントエンドの技術が必須です。とはいえ、HTMLに追加される新しい要素や属性、増えていくCSSプロパティやルール、年々アップデートされるJavaScriptなど、複雑かつ膨大な情報を整理するだけでも大変です。本書は、初級者向けにフロントエンド開発支援ツールの選び方や使いこなし方、効率的に開発をするための基礎知識が身につく入門書です。複数の支援ツールから「なぜそれを使うのか」選択する基準がわかります。（</span><a href="https://www.shuwasystem.co.jp/book/9784798061771.html" target="_blank" rel="noopener noreferrer">秀和システム「この本の内容」 説明文</a><span style="color:#0f1111">より引用）</span></blockquote><p><br>Webフロントエンド開発において、非常に技術・ツールは流行の変化が早く、「どこから学び始めれば良いかわからない」「学習できたと思ったらまた次のツールが出てきた」などの感想を持つ方もいるでしょう。<br><br>しかし、著者も記しているように2010年代に比べると混沌とした技術変遷は穏やかになりつつあります。<br><br>それでもフロントエンドエンジニアが担当する技術領域は広範囲に渡ります。<br><br>この本ではフロントエンドのWebアプリ開発領域で主要となる技術・ツールについて、<strong>「なぜその技術・ツールを使うのか」</strong>を主眼において解説されています。<br><br>「変わり続けるプラットフォームで変わらないことを学ぶ」と帯にも書かれていますが、本書を読むことで変わり続けるWeb開発記述の変遷の中でベースとして身に付けておきたい知識を得ることができます。<br></p><h2 id="h0d376e5d4e">構成</h2><p>本書の構成は大きく3部構成です。</p><ol><li>導入編 なぜ使うかを知る</li><li>実践編 どう使うかを学ぶ</li><li>応用編 より深く学ぶために知る</li></ol><h3 id="h72fabbaf4f">パート1 導入編</h3><p>パート1は紹介されたツールが「何を解決するもので」なぜ「導入するのか」を、これまでのフロントエンドの歴史的変遷を踏まえて理解するパートです。<br><br>パート1では以下のことを学ぶことができます。</p><ul><li>フロントエンドエンジニアの歴史</li><li>フロントエンドに求められるスキル</li><li>フロントエンドにおける一般的なツール群</li><li>開発の現場における仕事の進め方</li></ul><p>一部コードは書かれているものの、ここで重要なのはコードよりも雰囲気を掴むことなので、特に初心者の方はパート1だけでもまず読み進めても良いでしょう。<br><br>特に開発現場での仕事の進め方について触れられている点は非常に良い点でした。<br><br>パート1で、フロントエンドに求められる技術スキルの範囲はやはり広いということが理解できると思います。</p><h3 id="h783b0e84a5">パート2 実践編</h3><p>パート2はフロントエンド開発の基盤構築からライブラリ・フレームワークの導入、設計・実装方法など、実際の開発現場のことを想定しながら学習できるパートです。<br><br>パート2では以下のことを学ぶことができます。</p><ul><li>既存アプリケーションの開発環境構築</li><li>設計と実装</li><li>CI&#x2F;CDによって受けられるメリット</li></ul><p>実際に手を動かしながら読み進められるパートです。<br><br>このパートではReact, TypeScript, styled-components, Jestが取り扱われていますが、昨今のフロントエンド事情からしてもこれらの技術を触れる・理解できているのは重要だと思います。<br><br>意識が薄れがちなパフォーマンスにおいてもLightHouseとGitHub Actionsを使った定期的なパフォーマンス計測が紹介されており、実践的な内容になっています。</p><h3 id="h7e120506d6">パート3 応用編</h3><p>パート3ではパート2よりもさらに発展的な内容が解説されています。<br><br>フロントエンドエンジニアとして開発チームでどう仕事に取り組むべきか、マインドセットなども紹介されています。<br><br>パート3では以下のことを学ぶことができます。</p><ul><li>解析とモニタリング</li><li>チーム開発とWebへの貢献</li></ul><p>保守運用フェーズで必要となってくるデータ解析や、エラーモニタリングについて、また、スクラム開発の詳説がなされています。<br><br>フロントエンドはユーザーから見える部分、いわばユーザーがWebサービスを使用するかどうかの入り口に当たるので、日々Google Analyticsなどの解析ツールを使いこなして、サイト・アプリ改善に活かしていくことがビジネスの成功に繋がります。<br><br>ある意味でビジネスに深く関われるのがフロントエンドが重要かつ面白いと個人的に思う点です。<br><br>OSSやコミュニティなどへの貢献について記されているのもこのパートです。</p><h2 id="h0b23a3ce2c">本書で紹介、取り扱われている技術・ツール・考え方</h2><ul><li>Node.js</li><li>Vue.js &#x2F; Angular &#x2F; React</li><li>Babel</li><li>webpack</li><li>TypeScript</li><li>Redux</li><li>Flux</li><li>Prettier &#x2F; ESLint</li><li>Mocha &#x2F; Jest &#x2F; Karma</li><li>Google Analytics &#x2F; Google Optimize</li><li>Sentry</li><li>スクラム開発</li></ul><p>どれもモダンフロントエンドを志向する現場で使う可能性の高いものです。</p><h2 id="h9be0c3393d">おわりに</h2><p>「フロントエンド開発入門」という本について紹介しました。<br><br>本書が発刊されたのは2020年10月なので、ブログ執筆現在(2021年1月)でもほぼ最新のフロントエンド開発事情を知ることができる本でもあります。<br><br>自分の経験から振り返ると、SIerからフロントエンドエンジニアへ転身する時点でこの本に巡り合いたかったと思いました。<br><br>フロントエンドエンジニアを志す人、今フロントエンドエンジニアとして従事している人、HTML&#x2F;CSSはやってみたけど次に何をすれば良いかわからない人にぜひ読んでみていただきたいです。</p>

<ol><li>概要</li><li>構成</li><li>本書で紹介、取り扱われている技術・ツール・考え方</li><li>おわりに</li></ol>

 「フロントエンド開発入門」という本を紹介しました。本書はWeb系エンジニアに興味を持っている方、特にフロントエンド技術に興味を持っている方に特にお勧めな書籍です。

書評: フロントエンド開発入門