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

本書は、HTML と CSS、JavaScript の基本を 1 冊で学べる本です。
現在、HTML と CSS、JavaScript という「Web」を構成する技術は、Web サイトや Web アプリケーションをはじめとして、さまざまな環境で使われるようになっています。本書では、その 3 つの技術に焦点をあてて、1 冊で「現在の Web」の基本を総合的に学べるようにしました。

これから Web の仕事をしたいと考える方にとって、最初のスタートとして最適な 1 冊です。

HTML5.1/CSS3 対応。

===(以下、著者による「はじめに」より編集・抜粋)===

本書は、HTML と CSS、JavaScript すべてを 1 冊で紹介した欲張りな本です。

ただ、それは単に「お得」とか「色々なことをさらっと」というわけではありません。これから「Web」という技術を学んでいきたいという方に向けて、最初に必要となる知識をしっかりと身につけて欲しくて執筆しました。

HTML といえば、最初に思いつくのは「Web サイト (ホームページ) 制作」です。ただ、本書は Web サイト制作の入門ではないため、それに必要となる次のような知識については、あえて触れていません。

・Web サイトの設計・画面設計手法
・コンテンツの作成方法
・Web サイトの公開方法やメンテナンス方法など

これら、「Web サイト制作に必要な知識」は他の書籍にお任せし、本書は技術としての HTML/CSS/JavaScript の解説だけに絞りました。

「Web」の技術は、今やサイト制作だけでなく、スマートフォン向けのアプリケーション開発や Pepper 等のロボット開発、AI のインタフェース開発など、あらゆる分野で活用されています。そんなとき、これらの技術をまとめて解説する書籍があればと思い、執筆するに至りました。

Web サイト制作者になりたい方はもちろん、これまで Java や Python などのプログラミング言語は学んできたものの、HTML や JavaScript について学ぶ機会がなかったエンジニアの方、そしてこれからネット業界、AI 業界を目指す学生の方など、幅広い方々に活用して頂ければありがたく思います。

===(「はじめに」以上)===

HTML と CSS、JavaScript という Web の基本技術を、1 冊でまとめて学び始めたい人のための入門書が『これから Web をはじめる人の HTML & CSS、JavaScript のきほんのきほん』 (たにぐちまこと 著、マイナビ出版、2017 年 3 月 27 日発売) です。版元の紹介は本書を「HTML と CSS、JavaScript の基本を 1 冊で学べる本」と説明し、「HTML5.1/CSS3 対応」と明記しています。紹介に抜粋された著者の「はじめに」は、本書が Web サイト制作の入門ではないと断ったうえで、「技術としての HTML/CSS/JavaScript の解説だけに絞りました」と書いています。

全 7 章と付録 5 本、開発環境の準備から Ajax 通信まで

版元公式の目次は全 7 章です。Chapter 1「Web の開発環境を整えよう」で PC と Web ブラウザー、エディターを用意し、Chapter 2「HTML と CSS のきほんを学ぼう」で簡単な HTML の作成からタグの使い方、CSS による見た目の調整へ進みます。Chapter 3「スマートフォン対応のきほんを学ぼう」は基本のレイアウトを 2 回に分けて組んだあと、スマートフォンへの対応と CSS アニメーションを扱います。Chapter 4「CSS フレームワークのきほんを学ぼう 〜Bootstrap でフォームを作る」はページの大枠からフォームの仕上げまでを作る章です。Chapter 5 から Chapter 7 は JavaScript の章で、Chapter 5「JavaScript のきほんを学ぼう」は文字や数字の表示と今日の日付の取得を、Chapter 6「イベントドリブンのきほんを学ぼう 〜DOM を使ってストップウォッチを作る」は要素の取得と書き換え、if 構文やファンクション、イベントに反応する処理、繰り返し実行される処理を扱います。最後の Chapter 7「Ajax 通信のきほんを学ぼう 〜jQuery、Vue.js にもチャレンジ」は、JSON データの用意と for 構文による要素の追加から Ajax 通信へ進み、jQuery と Vue.js を使う節で終わります。付録は Emmet、Node.js、Sass、CSS プリプロセッサーの歴史、TypeScript で始める ES20XX の 5 本です。

構造と見た目と振る舞い、3 つの技術の分担

Web ページは、ブラウザーが HTML を読み込んで文書の木構造を組み立て、CSS の規則を当てて画面に描き、JavaScript がその木を書き換えることで動きます。HTML が文書の構造と意味を、CSS が配置や色などの見た目を、JavaScript が利用者の操作に応じた振る舞いを受け持つという分担を押さえておくと、画面のどこを変えたい時にどのファイルを直せばよいのかで迷わなくなります。この分担は、ブラウザーの上で動く画面側の開発、つまり フロントエンド の仕事の土台です。画面の幅に応じてレイアウトを切り替える レスポンシブデザイン は、CSS のメディアクエリで幅の条件ごとにスタイルを書き分ける手法で、閲覧する端末の画面の大きさがまちまちな Web では基本の技法になっています。ページ全体を読み直さずにサーバーとデータをやり取りする Ajax では、JSON のような軽量な形式でデータを受け取り、JavaScript で画面の一部だけを更新する形がよく使われます。3 つの技術を別々の本で学ぶと、この連携の部分が抜け落ちやすくなります。

2017 年刊の前提と、Web サイト制作を学びたい人への注意

版元は、これから Web の仕事をしたい人にとって「最初のスタートとして最適な 1 冊」と紹介しています。著者は「はじめに」で、Web サイト制作者を目指す人に加えて、Java や Python などは学んだものの HTML や JavaScript を学ぶ機会がなかったエンジニアや、ネット業界や AI 業界を目指す学生も読者として挙げています。一方で、Web サイトの設計と画面設計の手法、コンテンツの作り方、公開やメンテナンスの方法には触れないと著者自身が断っているため、サイトを作って公開するところまでを学びたい場合は、制作の進め方を扱う本を併せて選ぶ必要があります。刊行は 2017 年 3 月で、版元が明記する対応範囲は HTML5.1 と CSS3 です。W3C の HTML 5.1 (2nd Edition) は 2021 年 1 月 28 日に Superseded Recommendation (後継の仕様に置き換えられた勧告) とされ、W3C の HTML の仕様の URL は WHATWG の HTML Living Standard へ転送されるので、要素や属性の細部はそちらで確かめながら読みます。Bootstrap や jQuery、Vue.js といったライブラリは刊行後に版を重ねているので、本書で考え方をつかんだうえで、手元で使う版の公式ドキュメントを確かめながら進める読み方が合っています。

ブラウザーとエディターだけを用意して、HTML の 1 行目から CSS のレイアウト、JavaScript のイベント処理、Ajax 通信までを 1 冊の流れでたどれるのが本書の強みです。他の言語は書けるのに Web の画面側だけが手薄なエンジニアや、Web の仕事に就く前に 3 つの技術のつながりを一度で見渡しておきたい人にとって、最初の 1 冊として元が取りやすい入門書です。