共著で執筆した書籍が発売されます！

2020年8月28日、MdN様から発売の、
『初心者からちゃんとしたプロになるHTML+CSS実践講座』に
共著で執筆をさせていただきました。

この本は、Progateやドットインストール、他の初心者向け入門書などで
HTMLとCSSの基礎を学んだはいいけど、実際にゼロから自分でコーディングしようと思うとどうしたらいいのか分からなくて途方にくれるという方にピッタリの内容になっています。

現場レベルで最低限必要なスキル・知識をまとめて紹介

近年初学者向けの学習教材が充実し、一部インフルエンサー等の影響もあって未経験からWeb制作・開発の世界に飛び込んで来る方が増えていますが、そのような方々が最初に触れるHTML・CSSのレベルと、実際の仕事の現場で求められるスキル・知識レベルの間には大きな乖離があります。

Web制作・開発の世界は技術の進歩が非常に早く、使用されるスキルや知識のトレンドもどんどん変わっていきます。その事自体は仕方がないのですが、問題は基礎的な知識・スキルを学習した初学者に対して、そこから最低限現場で通用するレベルに引き上げるためのまとまった教材が極めて少ないという点です。

この本は、そんな初学者と現場レベルの間を埋めるための一冊になっています。

この本で学習できる内容

この本で扱うテーマは以下のとおりです。

・現場のコーディングとツール
・フロントエンド技術の“いま”
・開発環境の構築
・カンプからのコーディング設計（サンプル実習）
・BEMを使ったCSS設計（サンプル実習）
・Sass（SCSS）を取り入れる（サンプル実習）
・Vue.jsを取り入れる（サンプル実習）

前半は読み物として制作現場で必要とされる様々なツールや知識について解説。後半は現場で必要とされるスキルを具体的なサンプル実習を通して解説しています。

ひとつひとつの項目についてはそれ専門に扱った書籍等の方が詳しいかもしれませんが、Progateをやり終えたばかりくらいの初学者さんがいきなりそれぞれの専門書などにあたっても、覚えることが多すぎて消化しきれない恐れがあります。その点、この本は制作現場では知っていて当然とされるような内容に絞り、ある意味「教養」としてのWeb技術を網羅的に解説することで、これからプロになろうとしている初学者さんたちにこれから習得すべきことを広く知ってもらうのに最適な内容となっていると思います。

デザインカンプを元にイチからコーディング設計する過程を解説

その中で、私が担当したのは4章の「カンプからのコーディング設計」になります。
こちらは、以前noteで書いた「Progateが教えてくれない、デザインカンプからのコーディング手順」をベースに大幅に加筆し、カンプを渡されてから実際のコーディング作業を始める直前までに必要な設計・準備工程をサンプルを通して詳細に解説しています。

駆け出しの人がコーディングで盛大につまづく箇所の筆頭としてあげられるのが、「デザインカンプからどうやってコーディングすればいいのか分からない」
という点です。Progateで言えば「道場コース」がそれに近いですが、実際の制作では手順ひとつからして何のヒントもありません。全てを自分で考えて作らなければならず、そのやり方を誰にも教わっていない初学者にとっては途方もなく困難な道のりに思えてしまうのが、デザインカンプからの設計工程であると言えます。

従来この工程は、見習い新人さんが先輩に教わりながら少しずつ現場で身につけていくようなものだったため、実際に現場に入る前段階の学習者向けにまとまった形でやり方を解説した教材はほとんど無いのが現状です。今でこそオンラインサロン等を運営している方がコーディング練習用のデザイン素材を配布して解説を加えたりするような教材がぼちぼち出てきてはいますが、少なくとも書籍で設計工程だけをまとまって解説したようなものはほとんど無いはずなので、その点については本当に初学者さん必見です！！（自画自賛）

サンプルデータ（XD・HTML/CSS）も配布

解説に使ったサンプル教材のデザインカンプ（XD）と、実際にコーディングしたHTML/CSSデータも配布されますので、素材を書き出したり、カンプデータを元にイチからHTMLを書き起こしたりする練習も可能です。

なお、私の担当の章では設計して素材を抽出するところまでの解説になりますので、実際にそれを組み上げる段階になってからの具体的なHTMLやCSSのコード解説は行っておりません。本当はコード解説まで入れたかったのですが誌面都合でやむを得ず……（汗）

それについては、もし読者さんからのご要望が多ければnote等で追加解説してもいいかなーと思ってますので、「コード解説もして欲しい！」という方はTwitterなどでどしどし要望を上げてくださいね〜！

では、「ちょっと読んでみたいなぁ〜！」と思ったら、こちらをポチッとお願いします〜(●´ω｀●)

初心者からちゃんとしたプロになる　HTML+CSS実践講座