2023卒新人研修で利用した書籍フロント編 - こだわりデベロッパーズノート

今年、弊社「株式会社こだわり」では初めてとなる新卒採用を実施いたしました。それに伴い、採用した新人にどのような研修を行うか？が大きな課題となりました。

自分たちでゼロから全て作成するという方法もありますが、世の中には既に初学者向けの評価が高い書籍が沢山存在します。良い本が沢山あるのだから、活用しない手はない！！ということで評価の高い初学者向けの技術書を活用する方針を取りました。

弊社に引き合いが多い分野が「Webアプリケーションのバックエンドエンジニア」となるためその方向性で書籍を選定しました。そのうちの1冊がこちらになります。

書籍紹介

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

作者:たにぐちまこと
マイナビ出版

Amazon

この本を選んだ理由

Webアプリのバックがメインでありフロントは網羅的な書籍が良い。

本書はHTML、CSS、JavaScriptを網羅的に扱っていて要求にマッチ。

名前の通り「基本」から取り扱っており、未経験者も読みやすい。

実際にコードを作成して学ぶ本なので、ハンズオン形式の研修ができる。

基本を学んだ後には、レスポンシブWebデザイン、Bootstrap、Ajax、Vue.jsと基本から一歩踏み込んだ情報もある。

他にもフロントに関する評価が高い書籍は色々とありました。しかし、評価が高い本はデザインに踏み込んでいる本が大多数でした。

今回の研修ではあくまでもメインは「Webアプリのバックエンド」です。とは言っても、バックエンドだからとHTML、CSS、JavaScriptを全く知らないわけには行きません。そのため、UIデザインの知識より、広く網羅的にHTML、CSS、JavaScriptが学べる本が欲しかったという形です。

本書の構成

Webの開発環境を整えよう

HTMLとCSSのきほんを学ぼう

スマートフォン対応のきほんを学ぼう

CSS フレームワークのきほんを学ぼう～Bootstrapでフォームを作る

JavaScriptのきほんを学ぼう

イベントドリブンのきほんを学ぼう～DOMを使ってストップウォッチを作る

Ajax通信のきほんを学ぼう～jQuery、Vue.jsにもチャレンジ！

Appendix

Index

取り扱った内容

1章 Webの開発環境を整えよう

VSCodeを用いたフロント開発環境の作成

VSCodeは仕事で触ることが多いエディタです。新人の方はメモ帳しか触ったことが無く、高機能なエディタは初めてという方が多かったです。ここでVSCodeを実際に動かす経験ができるのはとても良いですね。

2章 HTMLとCSSのきほんを学ぼう

HTMLとCSSを利用したフロントの作成

サンプルと説明が豊富にあるため、初めてHTMLを利用する人にも説明しやすい構成となっています。新人研修の際は、せっかくVSCodeを利用していますので「Microsoft公式のLive Preview」をインストールして作成したHTMLのプレビューを見ながら作れるようにしました。

3章スマートフォン対応のきほんを学ぼう

リキッドレイアウト、レスポンシブWebデザイン、CSSアニメーションの実装

サンプルに則り作成を進めることで、実際のECサイトにありそうなかっこいい商品紹介ページができ、新人の方にエンジニアリングの楽しさを体感してもらうことができます。本章まではHTMLとCSSを全て手書きしているため、どこに何を記載したらどのように見えるのか？どのように動くのか？がすぐに分かるようになっているのがとても良いです。

4章 CSS フレームワークのきほんを学ぼう

CSS フレームワークのBootstrapを利用

3章で学んだレスポンシブWebデザインがBootstrapのグリッドシステムを利用することで簡単に実現できることが説明されます。 2章、3章を通して自分でCSSを書いていたことから、Bootstrapがとても巨大なCSSの塊であることも理解できるようになっています。

5章 JavaScriptのきほんを学ぼう

JavaScriptを利用した動的表示の実装

静的なHTMLだけでは実現できない、JavaScriptを利用した動的な表示の仕方を学びます。弊社新人研修のタイミングでは、既に新人の方々にJavaの基礎研修を行っていたため、本章を問題なく進めることができました。初学者が本書籍を読んでいる場合は、本章からプログラムロジックが出てくるためちょっと苦戦するかもしれません。

6章イベントドリブンのきほんを学ぼう

DOMを利用した画面描画とイベントドリブンの実装

DOMとイベントドリブンは初学者にはやや難しい概念となります。そのため、新人研修の際、DOM操作やイベントドリブンに関しては本書籍だけではなく、別途資料を作成して研修を進めました。

7章 Ajax通信のきほんを学ぼう

jQueryやVue.jsを利用したAjax通信

本章は読み合わせるだけとしました。この章ではAjaxを行うためにjQuery、Vue.jsを取り扱っています。 Vue.jsなどのJSフレームワークを利用する場合、フロントはフロントエンジニアが担当することが多いです。今回の新人研修はメインターゲットが「Webアプリのバックエンド」であるため、フロントにどのような技術が存在しているか？を紹介するに留め、フロント技術の深堀は行いませんでした。

総括

未経験者を含む新人研修に活用する本として申し分ない本です。

題名の通り「きほんのきほん」を教える本となっていますので、より専門的な知識が欲しい場合は本書籍では不足する部分があります。

本書籍の記載が「基本」→「応用」という形になっています。そのため、新人研修でもまずは基本を抑えて、その後に応用に進む形になります。ちゃんと基本が理解できていれば応用も進める内容となっていますが、実は基本がまだちゃんと理解できていなかったために応用で躓くことがありました。

これは、応用に入った際に基本の理解ができているか？がチェックできているということになります。研修であれば躓いたときに基本に立ち返って深堀して理解を進めることができます。

サンプルが豊富にあり、実際に物を作りながら理解を進める書籍となっていますので新人研修で活用できる良い書籍です！