初版の発売から4年後に改訂2版が出て、そこから7年ぶりに大幅刷新された「Web制作者のためのSassの教科書」の改訂3版が発売します。
7月辺りから頑張って書いていましたが、ようやく入稿待ちになって落ち着きました。
前回は個人ブログの方に紹介記事を書いてましたが、あっちは全く更新してないのでこちらで紹介です。
Amazonで予約受付中
Amazonで予約受付中です。発売は、2024年12月11日予定です。アフィリエイトリンクになっていますので、嫌な方は書籍名で検索するなどしてください。
ページ数が増えたのも有りますが、昨今の物価高騰とかの関係もあって、値上げとなってしまいました。
大きく変わった点
7年経ったのでSassに関しても色々変わりましたが、むしろCSSの進化がすごかった気がします。 変数やネストの実装など、今まではSassでしか出来なかったことがどんどんCSSだけで出来るようになっています。
そう言ったCSSの進化に合わせるように、Sassもアップデートが行われてきました。
また、この間にLibSassからDart Sassに変わったのも大きな変更点です。
中でも、関数を使うには @use 'sass:color'; みたいに、最初に使いたい関数のモジュールを読み込む必要があります。
今まですべての関数がグローバルで使えたので、使い勝手としては良かったんですけどね。
ちょっと不便な部分は有りますが、仕方ないですね。
他に、 @import が非推奨になり、Dart Sass 3.0.0で削除予定になりました。
ホントはもっとずっと前に削除予定だったけど、想定より移行が進まず、ずいぶん引っ張った感じは有りますが、いよいよ消されるときが迫ってきた感じです。
また、タスクランナーの流行りも変わってきて、当時圧倒的人気だったGulpが下火になってきました。
こういった変化が有りましたので、それらに対応するために色々加筆修正しまくったのが、今回の改訂3版です。
より具体的な変更点は、公式サポートサイトにまとめる予定なので公開をお待ち下さい。
悩んだ点や苦労した点とか
書籍の紹介だけだと著者の1人として味気ないので、今回の改訂版を出すにあたって悩んだり苦労した点などをお伝えできればと思います。
コンパイル方法どうする問題
改訂2版では、タスクランナーの「Gulp」を使った方法で説明していました。しかし、Gulpの人気が低下し、Gulpのアップデートもされていなかったので、どうしようか悩んでいた時、ホントにタイムリーな感じで、突然Gulp5がリリースされました。
2年くらい何の更新もなかったので、中々衝撃的でしたね。
Gulpも更新されたし、言うてもまだまだGulp使う機会も多いと思ったので、最初はGulp継続の方向でした。
しかし、いくらGulpが更新されたとしても人気が戻るかは定かでは有りません。
そこで、あまり特定のツール等に影響されない、npm scriptsでの方法に変更することにしました。
また、VS Codeの人気も非常に高く、多くの人が使ってることと、拡張機能を入れるだけでSassのコンパイルが出来る点から、今回はVS Codeの拡張機能を使ったコンパイル方法も紹介しています。
CSSの進化にどこまで対応するか問題
ネストはSassにしか出来ない機能だぜ！どやぁみたいな感じでSassの優位性を書いていましたが、現在は主要ブラウザ全てでネストが実装され、普通に使えるようになってしまいました。
そのため、CSSでも出来るけど、Sass独自のネストの機能も有るよーとかって文章に調整したりするのも地味に大変でした。
変数に関しては、CSSのカスタムプロパティの方が使い勝手が良い部分も有るので、その辺のバランスも悩んだところです。 結果としては、Sassの変数とCSSカスタムプロパティの共存的なネタを5章で追加しています。どっちかだけ使うのではなく、双方の利点を活かすと良いよ的な内容です。
関数がモジュール化された問題
Dart Sassになって大きな変更点の1つが関数の扱いでした。
今までは全てグローバル関数という扱いで使えたのに、色関係はcolorモジュール、計算とかはmathモジュールとかそういう感じで分けられてしまったので、事前に関数を使いたいSassファイルでモジュールを読み込む必要があります。
これの何が問題かというと、最初に @use 使ってモジュールを読み込む関係で、ソースコードが最低でも1行もしくは2行増えるという点です。
紙媒体という都合上、2行増えてしまうと、1ページで収まっていたのが収まらなくなったりするので、かなり厄介な問題でした。
執筆後にcolor関係の関数が大幅に変更
7-2章に関数の一覧が有るんですが、その関数一覧は全文書き直しました。その時点で結構な作業量でしたが、原稿を提出して、初校が上がってきて、そのチェック、そして再校……と作業を進めるのですが、わりとチェックが終わってきた頃にcolor関係の関数で大きな変更が有りました。
ちなみに、コレです。
ここに書かれているように color.red() とか多くの関数がDeprecated Functions（非推奨の関数）になりました。
この変更点を追いかけて、関連ページの修正ってのがかなりきつかった部分です。 タイミング的に、ページ数の増減が許されない頃だったので、ページ数が変わらないように気を使ったりと色々有りました。
5章のネタどうしよう問題
5章は実践的なテクニックを掲載している章で、ここにGulpのタスクネタが有ったのですが、今回Gulpは使っていないので、別の内容にする必要がありました。
そこで、色々考えた結果、AI（ChatGPT）を使ったネタにしました。なので、5-3は全く異なる内容で全文書き換えています。
個人的にもChatGPTにはかなりお世話になってて、もうChatGPT無しでは仕事するのがきついレベルです。 そのくらい、AIは便利ですね。
他にも、新しいネタをいくつか追加していますが、結局ちょっと複雑なミックスイン紹介みたいになってしまうので、そうならないようネタ出しは苦労しました。
追加したネタには、 @import から @use を使ったインポートへの移行ネタも有るので、まだLibSass使っててDart Sassに移行出来てない方には有益な情報かと思います。
それと、1つだけかなり複雑で、こんなの誰も手打ちしないだろ！みたいな1ページ丸々ソースコードのネタも有ります（笑
@import廃止関係
3章の一番の変更点が、@import を使ったインポートから @use と @forward を使った方法になった点です。
これも当然全文書き直していますが、大変だったのは仕様をちゃんと理解する必要が有った点です。
自身の環境ではだいぶ前に書き換えていましたが、一度書き換えたら普段はあまり意識する部分でもなかったので、そこまで深くは理解しておらず、それぞれの違い等をちゃんと理解して、それを文章にするというのは苦労した部分です。
今回も大幅刷新です
なんか雑な苦労話の紹介でしたが、全章を何度も読み直して、全体的に相当変更しています。
大枠は変わってはいませんが、細かい文章の言い回しなども、より理解しやすく読みやすいように変えたりしています。
Dart Sassへの移行が億劫になっていた人も、この機会に知識のアップデートを図るにも良いと思いますので、初版や改訂2版をご購入された方も良ければSassの教科書 改訂3版を購入して下さいませ。