HTMLとCSSの人が、Reactを学ぶのにぴったりな最高の一冊！ 解説がていねいで、すごく分かりやすい
Post on:2022年7月29日
sponsors
HTMLとCSSだけではキャリアアップの限界を感じている、JavaScriptを今より使えるようになりたい、Next.jsやReactも気になるけどどこから手をつければよいか分からない、そんな人にお勧めの解説書を紹介します。
最近ではCSSにもReactの存在が感じられるようになり、FigmaでもReactを理解している方が便利だったりします。ReactベースのフレームワークNext.jsを使用できるようになると、Web制作での選択肢は一気に広がります！
著者は「作って学ぶ HTML&CSSモダンコーディング（紹介記事）」でもお馴染み、ていねいで分かりやすい解説で評判のエビスコム様。
HTMLとCSSの解説書を数多く執筆している著者様ならではの、HTMLとCSSを使用してきたけどReactにはちょっと手を出せなかった人向けの解説書です。Next.jsとReactの環境構築から、実際にブログを作成しながらWebサイトの構築まで、基本と実践をステップバイステップで学べます。
本書は明日発売の最新刊！
Kindle版も同時発売です！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書は、HTMLとCSSをメインにJavaScriptを多少使用している人向けに、Next.jsとReactの基礎知識を実践的に学べる解説書です。本書の大きな特徴の一つはHTMLとCSSをメインにしてきた人を対象にした解説であることです。
本書ではNext.jsとReactがメインなので、それに伴う開発環境（GitHubやNode.jsなど）のセットアップについては、サポートサイトからPDFでダウンロードできます。もちろん、本書で作成するプロジェクトのデータ、画像素材、Figmaのデザインデータなどもダウンロードできます。
Reactを学ぶには、JavaScriptという壁があります。JavaScriptの解説書というと基本構文や変数などを思い浮かべる人がいるかもしれませんが、本書は違います。HTMLとCSSを使用している人であれば誰もが目にするヘッダやフッタ、メイン、見出し、記事などをJSXで記述することから始まります。
もちろん最初はHTMLとCSSで実装するのと同じ結果ですが、少しずつステップアップしながら、Reactのコンポーネントを利用して再利用可能な部品として扱えるようにします。
各ページに表示されるヘッダをコンポーネントで管理できるようにすると、ページを増やしても簡単にヘッダを再利用できます。ページごとに異なるタイトルや画像を変更することもできます。
HTMLとCSSをメインにしてきた人からみると、Reactを使用できるようになるとかなり便利になることが分かると思います。第1章と第2章は環境の準備とReactの触りだけですが、次章から基礎知識をがっつり学んでいきます。
第3章では、Next.jsが標準でサポートしているCSS Modulesを使いながら、ReactでのCSSの扱い方を学びます。
グローバルスタイルを設定したり、CSSリセットを設定したり、コンポーネントのスタイルを設定したり、お馴染みのCSSをCSS Modulesで管理します。
CSS Modulesでは共通したレイアウトのCSSを1つのファイルで管理し、各ページで使用します。ここらへんはHTMLとCSSで実装するのと同じです。
共通のスタイルでヘッダやフッタをスタイルし、各コンテナをスタイルし、CSS Modulesを組み合わせてさまざまなレイアウトのページを実装します。
サードパーティのアイコンもReactコンポーネントとして利用できるものが増えています。定番のFont Awesaomeもその一つで、コンポーネントとして利用すると、SVGアイコンを簡単に利用・管理できます。
Webページの実装にはヘッダやコンポーネントなどの表示されるところだけではありません。head内に設定するメタデータも重要です。メタデータ用のコンポーネントを作成し、管理することもできます。
第7章からは、実際にブログを作成しながらWebサイトの構築を学びます。ヘッドレスCMSから外部データを取得して表示したり、React Hooksでカスタマイズし、サイトを完成させます。
本書で作成したコンポーネントの一覧です。
レイアウト、ヘッダ、フッタ、メタデータ、ロゴ、コンテナ、ナビゲーション、ヒーローをはじめ、Webページで使用されるさまざまなコンポーネントの作成方法を学べます。
作って学ぶ Next.js/React Webサイト構築の目次
作って学ぶ Next.js/React Webサイト構築の目次
作って学ぶ Next.js/React Webサイト構築の目次
作って学ぶ Next.js/React Webサイト構築の目次
作って学ぶ Next.js/React Webサイト構築の目次
「作って学ぶ」とある通り、本書ではHTMLとCSSで実装したWebページをNext.jsで実装・管理できるようになる解説書です。Next.jsやReactは敷居が高そうと思っていた人は、ぜひ手に取って本書を見てみてください。
献本の御礼
最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
