# 私的Webサイト制作史part.2

書いていたらいつの間にか3000文字を超えていたので、分割してシリーズ化しました。今回は僕が脱初心者した話です。

# CSS設計に出会う

前回の説明で、CSSのコードがカオスになったんだなぁと言うのは想像に難くないと思います。実際、CSSというのはカオスになりやすい構造を持っています。僕の場合は単にアホなことをしていただけですが……。まぁCSSはカオスになります。

# CSS設計って何？

そこで、出てくるのがCSS設計というものです。CSS設計とは、読んで字の如く、CSSがカオスにならないように秩序立ててコーディングする手法の総称です。BEMとかOOCSとかSMACSとかが知られてますね。ものによりますが、大体、セレクターの使い方とかクラスの命名法とか、こういうところではこのプロパティを使ってはならないとかが規定されています。

# CSS設計を知るのってムズくね？

僕の経験になりますが、Webサイトを作っている過程でCSS設計に出会うのは、その必要性に対して、なかなか難しいと思います（サンプル数1）。

というのも、初心者の間っていうのは、初心者のためのサイトを見るものです。そういうところっていうのは大概言語仕様を解説しているに過ぎず、そういう設計とか工夫みたいな書き方とでも言いましょうか、一歩進んだ中級者になるためのやり方は教えていないんことが多いんですよ。精々クラスセレクターをうまく工夫して…程度のことです。更に、世の中熟練度別の人口はピラミッド型をしているはずで、儲けようと思っているサイトは、人口が多く需要が高い初心者向けの教材を作ったほうが儲かります。その上、そういう儲けようと思っているサイトは、PV数を稼ぐためにSEOがつよつよなので、検索にも引っかかりやすくなっています。僕はそういうサイトを否定したいわけではないですが、CSS設計にたどり着けるように、リンクを貼るなりCSS設計解説記事みたいな脱初心者/至中級者みたいな導入をする記事があってもいいと思うんですよね。

また、今まで僕はCSSがカオスになるという表現をしていますが、そもそもWebサイトを作り始めたばかりの僕にはその語彙/表現がありませんでした。その表現を知ったのはCSS設計を知ってからです。当時の僕のHTML/CSS学習は、Google先生にキーワードを尋ねるスタイルだったので、言葉がわからないと検索しようがないんですね。今ならばAIを使えばCSS設計という単語を引き出せるかもしれません。

以上の理由で、CSS設計にたどり着くのは難しかったのだと考えています。

# 出会いはGoogle検索アプリのニュース

Google検索アプリのニュースって、可処分時間をゴリゴリ奪ってくる忌々しきショート動画に匹敵しそうなぐらい、僕にとっては見ていられるものです。しかし、Google検索アプリのニュースは、あくまで娯楽でしかないショート動画と違って、トレンドのQiita記事とかZennの記事が流れてきます。なので、学習のインプットするのに比較的良いと感じています。

ある日のこと、いつものようにGoogle検索アプリのニュースを眺めていたらCSS設計とかいう初めての言葉をテーマにした記事が流れてきました。覗いてみれば、これこそが自分がモヤモヤしていた原因で、CSS設計を使えば解決できるということがわかりました。これがCSS設計との出会いです。本当に偶然です。

# CSS設計は何で学んだのか

最初は適当なQiita記事や、個人ブログみたいなのを参考に学んだと思います。僕はBEMを採用したのでほとんどBEMしか学んでいません。

ただ、CSS設計くらいまで来ると、体系的な教材がネット上に見つからないんですね。HTML/CSSの言語仕様ならたくさん体系的な教材があったのに……。CSS設計はそういう意味でも学びにくいような感じがします。手法としてはちゃんとドキュメントとして存在しているので、そういうのを読んでも良いのですけど、やっぱり最初は第三者が書いた記事を読みたいと思うものです。公式ドキュメントってとっつきにくいので。

ネットに情報が少ないので、僕は本を探しました。というか中級者になるならどんなことでも書籍に当たるのが良いのではないかと思っています。実際本は結構出ています。ただ、それが当時の僕の手の届きやすい価格帯、もしくは場所にあるかといえばないのですけど。当時僕は高校の図書館の先生と仲が良かったので、お願いしてCSS設計の本を1冊入れてもらいました。非常にありがたかったです。

# CSS設計が変えたもの

CSS設計に出会ったことで、自分のCSSのコードがスッキリするようになりました。管理性、拡張性が向上して、楽になりました。

# SSGに出会う

SSGに出会ったのもCSS設計に出会ったのとほぼ同時期だったように思います。出会い方もほぼ一緒だと思います。実践したのが同時期だったのは確実に言えますが……。個性派文庫のサイトリニューアルのときに両方とも導入したので。

# SSGって何

SSGは日本語で静的サイトジェネレーター(Static Site Generator)というツールのことで、SSGのルールに則って書いたコードを、サーバーにアップロードできるHTML/CSS/JSのファイル群に変換してくれます。最近はSSRとかの登場で静的/動的の境目がぼやけているので説明が難しいです。

このサイトでもHugoというSSGを使っています。このサイトのリポジトリを見てくれるとわかりますけど、この一見Webサーバーにアップロードしてもなんの意味もないファイル群は、Hugoを通して変換することで、Webサイトとして機能するファイル群になります。

# 何が良いのよ

Webサイトの部品を一元管理のもとで使い回すことができることが最初に僕が感じたメリットです。

それまでの個性派文庫では、ヘッダーやフッター、ボタンなどのサイトの各ページで使い回すような部品はコピペして使いまわしていました。そこで、ヘッダーの見た目を変えるために編集したとしましょう。そうしたら、他のページ全てにコピペし直す必要があります。それが2,3ページ程度ならなんとかなるかもしれませんが、いつか必ずコピペを忘れて悲惨なことになります。

SSGを使うとコピペをプログラムにやらせるので、絶対そのような悲惨な状況になることはありません。部品をファイル単位で管理して、部品を変更すればその部品を使っているすべてのページにその変更が反映されるからです。

また、SSGにはマークダウンなどのテキストベースのドキュメントファイルをHTMLに変換してくれる機能もついていたりします。このブログもその機能を活用して書いています。毎回毎回HTMLを書いていると流石に死んじゃいます。今やHTMLは人間が書くものではなく機械が書く時代になっているのです（それでも基礎を知ることは大事なのでちゃんとHTMLも勉強しましょう）。

# 何で学んだのか

流石にSSGともなってくると、HTMLとかCSS設計みたいないわゆる界隈の常識みたいなものではなくなってきます。そのため、体系的な解説書が存在するわけではなく、ネット上に散乱している導入事例を参考にしたり、もっと細かく弄るのであればツールを作っている公式のドキュメントみたいなものを読むようになってきます。

個性派文庫で採用したのはJekyllで、これにはありがたいことに公式で日本語のドキュメントサポートがありました。というかJekyllの開発言語のRubyが国産なんですよね。とまぁ、その日本語ドキュメントとか巷に散乱している事例を拾いながら作ったって感じです。

対してこのブログではHugoを採用したというのは前に書いたとおりです。Hugoはたくさんの導入事例があったので、あまり公式のドキュメントは参考にしませんでした。また、既存のテーマを導入して少しいじっただけなのでそこまで深いことはやっていないっていうのも公式ドキュメントにお世話にならなかった理由です。

# 終わりに

書いていたらまたもや3000文字を超えてしまったのでこのへんで切って、次回に回しましょう。次回は次の個性派文庫のリニューアルで使いたい技術/ツールに触れてみた話が主題です。