Webクリエイターボックスさんの「1冊ですべて身につくJavaScript入門講座」の書籍レビューです。実務で役に立つ内容かという点も踏まえた、現役フリーランスコーダーの本音での感想です。
「JavaScriptを基礎から勉強したい」「Webアニメーションの知識を深めたい」という方の参考になればと思います。
基本情報
書籍名 | 1冊ですべて身につくJavaScript入門講座 |
著者 | WebクリエイターボックスMana |
定価 | 2,794円 |
出版社 | SB Creative |
- フリーランスのWebコーダー(歴約2年)
- コーディングやWordPressサイトの制作実績80件以上
- 主に受託制作でWeb制作会社からの依頼に対応
結論
とにかく「読みやすさ」に配慮されていて、Webアニメーションの基礎を学習するには最適な1冊だと感じました。
特に、これまでに様々なJavaScriptの本を読んだけどあまりしっくりこなかった方や、理解できなかった方にオススメの内容です。
具体的には次のような方に適していると感じます。
- HTMLとCSSの基礎学習を終えた方
- スクールでWeb制作の講義を受講中の方
- 他のプログラミング言語に触れたことがないプログラミング初心者
- Web制作でよくあるアニメーションを実装したい方
逆に次のような方には合っていないでしょう。
- HTMLとCSSの基礎を学習していない方
- 概念も含めて、JavaScriptを網羅的に学びたい方
- JavaScriptのフレームワークを学びたい方
まとめると、Web制作の学習中〜実務で仕事を開始したあたりの方に適している内容かなと思います。
書籍のコンセプトとして「Webデザイナーでも楽しく学べるJavaScript本」と文中で書かれていますが、まさしくその通りの内容だと感じました。
良かった点
この本を読んでよかったなと思った点です。
読み進めやすい
たくさんの画像や図解が使われていて、また噛み砕いた表現も多用されており、初学者も無理なく読み進めることができます。
個人的には、chapter 3で解説されている「なぜdefer属性を付けたのか?」の図解がとてもわかりやすいなと感じました。
また、重要なところには黄色のアンダーラインが引かれており、読み飛ばしたい時にはアンダーラインのテキストを追うことで、最低限の内容を理解できそうです。
制作物が実務やポートフォリオで使えそうなものばかり
本書では次のような制作物を例に、解説が進められていきます。
- カラーピッカー
- ローディング画面
- ダークモード切り替えのボタン
- 文字数カウンター
- チェックボックスのバリデーション
- スクロールに応じたプログレスバー
- 画像ギャラリー
- スライドメニュー(ドロワーメニュー)
- 見出しのアニメーション
- スクロールで要素を表示
JavaScriptの入門書にありがちな「これどこで使うの?」というものではなく、実務で頻出の制作物を作る内容となっています。Web制作の営業をする際のポートフォリオにも使えるものばかりです。
作るモノが実用的なため、学習する上でのモチベーションが保ちやすいように感じました。
また、HTMLとCSSはダウンロードデータの中にまとめられていて新たに書く必要がなく、JavaScriptの理解に集中できる点も良かったです。
分量がちょうど良い
約340ページのボリュームで、分量的にちょうど良いなと感じました。1日あたり2 〜3時間の学習だとすると、5日もあれば十分1周することができます。
学習の流れとしても、イベント操作、配列の扱い方、アニメーションの解説になっており、とてもスムーズに読み進めることができます。前項で学習したことが次の項で利用されることが多く、記憶に残りやすい構成だなと感じました。
ただ、IntersectionObserverが登場するchpter 6の中盤あたりから、難易度が少し急に上がりますので脱落しないように注意が必要です。
もうちょっとだった点
逆にこの本を読んでいまいちだったなという点です。
GSAPは学習できない
Webアニメーションを学習するChapter 6では、Web Animations APIやIntersectionObserver を使用した実装が中心となります。
もちろん上記2点での実装でも問題はないのですが、実務ではアニメーションライブラリのGSAP等を使用することが多い印象です。
GSAPを使用するとコードの記述量が減り、直感的に理解しやすいコードが書けるようになります。
本書ではGSAPには触れておりませんので、GSAPを学習したいと考えている人には向いていません。ただし、「アニメーションの基本の書き方」を身につけることができるので、この後にGSAPにチャレンジする人にも有益であることは間違いないでしょう。
購入前の注意点
これから購入するという方は以下の点に留意した方がいいでしょう。
最低限のHTML/CSSの知識は必要
HTMLとCSSが全くわからない人には向いていません。JavaScriptの入門書ですが、HTML/CSSの理解が前提となって解説されている点があるためです。
本書を手に取る前に、HTML/CSSの基礎を固めておきましょう。
Webデザインの基礎固めには、同じ著者が書かれた、1冊ですべて身につくHTML & CSSとWebデザイン入門講座がオススメです。
網羅性は高くない
「1冊ですべて身につく」と書かれていますが、JavaScriptの全ての内容を盛り込んだ書籍ではありません。
文法についても、その項で作成するプログラムに合わせて、必要な情報を必要なタイミングで解説していることが多いです。作りたいモノからの逆算的な思考で解説しているイメージです。
個人的には、現代のJavaScriptにおける開発でよく見かける、map
やfilter
といった配列メソッドを解説してほしかったです。
JavaScriptの基礎を1から網羅的に学ぶには次のZennの記事がオススメです(無料)。文系の学生をターゲットに見立てて書かれているので、とてもわかりやすいです。
この本で学べる内容
この本で学べる内容をざっと振り返ってみました。
流れとしては、JavaScriptの基本を解説した後に、DOM操作やイベントリスナー、配列の扱い方を説明し、最後にWebサイトにアニメーションをつける方法の順に進んでいきます。
①JavaScriptの基本
HTMLやCSSとの違いも含めて、JavaScriptでできることを解説しています。
実際のWebサイトを例に、どこの部分にどのようなJavaScriptの技術が使われているのかの解説がとてもイメージしやすいなと感じました。
その他にも、次のようなことを学習します。
- JavaScriptの開発環境の構築方法
- 文法の基本ルール
- コンソールの使用方法 など
②Web制作におけるJavaScript
DOM操作、関数、条件分岐、イベントリスナー、配列の扱い方などの、Web制作をする上で必須のJavaScriptのお作法を解説しています。
特にchapter 4の「イベントで操作しよう!」がこの書籍のハイライトだと感じました。色々な書籍やブログ等で勉強してきましたが、これほどわかりやすく順を追ってイベントについて解説している媒体はありませんでした。
JavaScriptについてなんとなく不安がある人には、この章だけでも読んでいただきたいです!
③Webアニメーションの実装
Web Animations APIやIntersectionObserverを使用したアニメーションの実装方法について学びます。一つ一つの解説がとても丁寧で、図解も豊富で理解しやすい内容です。
「なぜ動きがあると効果的なのか」「心地よいと感じる動きとは」という、一つ上での目線のテーマについても言語化されているのが印象的でした。
実装者として言われたことだけを再現するのではなく、上記のようなことを意識し、ディレクターやお客さんに提案することも重要だなと認識させられました。
④アニメーションありのWebページを作成
最後に総まとめとして、アニメーションのあるWebページを作成します。
内容としては、ローディング、画像ギャラリー、スライドメニュー、スクロールで要素を表示するページとなります。
これまでの章を理解できれいれば特に問題なくクリアできるでしょう。
まとめ
冒頭でもお話ししたとおり、「JavaScriptを楽しく学びたいWebデザイナー」向きの一冊です。
学習中の方から、実務でJsvaScriptを使う機会が発生したWebデザイナーまで、間違いなくオススメできる書籍です。ぜひ一度手にとってみてください。
手元に置いておくと何かと便利で安心を与えてくれる、そんな一冊です。
1冊ですべて身につくJavaScript入門講座コーディングを学習中の方で、今後コーダーとして案件を受注したいという方には次の記事もおすすめです。