この記事について

web開発を勉強して約半年、ようやく最新の技術の概要が理解でき、まだまだ未完成ではありますが、自分のホームページを作成することができました。
この記事では、web開発の初心者であった僕が、LaravelとReactを利用して、未熟ながらも自分のwebサイトをデプロイするまでの経緯を記しています。今からweb開発を独学で学ぼうとしている方々に少しでも参考になれば幸いです。

記事の量が多いので、いくつか記事を分割しています。

CSS設計を学ぶ(4~7月) ←本記事
Wordpressをいじり、見切りをつける(TBD)
Reactの美しさに感動する(TBD)
Laravelの美しさに感動する(TBD)

web開発を学びたかった理由

社会人になって半年以上経ちました。僕が配属された部署は、入社一年目の新人にあまり残業をさせないという方針をとっていたため、プライベートの時間に結構余裕がありました。
兼ねてから、自分の考えや学んだことをアウトプットしたいという思いがあったこと、そして、web開発やアプリケーション開発によって自分のスキルの幅を広げたいという気持ちがあったので、この空いた時間を利用して、web開発の勉強をすることになりました。
ただ、単純にウェブサイトを作れれば良いというのが目標ではなく、最新のテクノロジーの本質を学び、いろいろ使いこなしたいと思っていました。
まだまだ未熟なところも多いですが、自分が作成したサイトがこちらになります。バックエンドにはLaravelを、フロントエンドにはReactを使用しており、バックエンドとフロントエンドの接続をInertiaを用いて接続しています。どちらも、現時点ではweb開発の最前線で使用されているフレームワーク・テクノロジーであると思います(僕はweb開発のエンジニアが本職ではないので、おそらくですが...)。デプロイ先はさくらのレンタルサーバーです。

半年前の僕があらかじめ持っていたスキルセット

半年前の僕は、web開発を全くしたことが無かったです。ただ、HTMLとCSSがなんとなく読めるくらいの知識はありました。
大学時代には、Pythonを用いたデータ分析と機械学習をしていた他、たまにatcoderでC++を用いて問題を解いていました。
従って、プログラミングの知識はあるけれども、webの知識はほとんどないという状況でした。

とりあえずWordpressでのブログの作成を目指す

前期のような状態だったので、正直何から手をつけていいのか分かりませんでした。そこで、とりあえず有名なWordpressをいじってみようと思い、さくらのレンタルサーバーを契約し、ドメインを取得してWordpressのサイトを作成してみました。
しかし、僕のしたいことは、Wordpressで出来合いのサイトを作成することではなく、そのコアのテクノロジーを学びたいということであったため、Wordpressのカスタムテーマの作成を次の目標にしました。

CSSが思い通りに書けない

Wordpressのカスタムテーマの作成に取り組むと、すぐさま課題に直面しました。それは、CSSが思い通りに書けないということです。
CSSはカスケーディングシステムを採用しており、HTMLのどの要素にCSSのどのスタイルが適用されるのかが非常に分かりづらいです。PythonやC++に慣れていた僕としては、なぜオブジェクト指向的な考えがCSSに採用されないのだ？と非常にフラストレーションが溜まりました。おそらくそれは、CSSが誰にとってもコーディングしやすいという面を重視したからなのでしょう。しかしながら、個人のブログ規模のサイトであっても、カスケーディングシステムを意識しながらデザインするのは非常に難しいです。
何はともあれ、このままではまずいと感じ、CSSの勉強をしっかりとすることにしました。

CSS設計を学ぶ

調べてみると、何やらCSS設計なるものがあることを知りました。前節のカスケーディングシステムによる設計の難しさを先人たちは当然認識されており、BEMなどの記法を編み出していました。BEMなどのCSS設計の要点を端的に説明すると、カスケーディングシステムには頼らずに、CSSのクラスのみを使用してスタイリングをする記法です。見方を変えると、オブジェクト指向的な考えをCSSのスタイリングに取り入れたものなのだと理解しています。
CSS設計を学ぶ上で参考になった書籍は、CSS設計完全ガイドとプロの「引き出し」を増やす　HTML+CSSコーディングの強化書の2冊です。CSS設計完全ガイドは理論的な説明がメイン、プロの「引き出し」を増やす　HTML+CSSコーディングの強化書は実践的な内容がメインという印象で、どちらも良書だと思います。HTMLの復習にもなりました。また、ブラウザによるデフォルトのCSSを無効化するreset CSSもこの本で知りました。

SaSSを学ぶ

CSS設計完全ガイドとプロの「引き出し」を増やす　HTML+CSSコーディングの強化書を読み進めていると、Sassという便利なものがあることを知りました。これは、CSSを便利に書くための記法で、例えば変数や入れ子にしたスタイリングなどが簡単に実現できます。
具体的には、以下のような例がSassのオフィシャルのサンプルで挙げられています。

variable.css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

variable.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

nesting.css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

nesting.scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

これも、当時の僕の、プログラミング的な考えがCSSに取り入れられていないことへの不満を解決するものでした。直感的な記法を採用しているため、基本の書き方を学ぶのに大して時間はかかりませんでした。

Sassのコンパイルがうまくいかず、npm

SassはCSSを書きやすくしたものであって、最終的にはCSSにコンパイルしてあげる必要があります。次に悩んだのは、Sassを学んだはいいものの、そのコンパイルがうまくいかないということでした。
プロの「引き出し」を増やす　HTML+CSSコーディングの強化書に記載されているインストール方法・コンパイル方法を使用しても、どうにもうまくコンパイルできず、悩みました。インストールには、npmを使用していましたが、当時の僕にとって、npmがなんなのかもよくわからない状態でした。
正しくSassをコンパイルするだけであれば、ネットの情報を参考にするだけでなんとかなりましたが、npmやそれを取り巻く関連技術に興味が出てきました。npmは、Node.jsのパッケージ管理ツール(Pythonでいうpip、phpでいうcomposerと理解している)ということが分かり、Node.jsについて学ぶことにしました。そこで、ハンズオンNode.jsを購入し、Node.jsとEcma scriptの違いや、Node.jsについて理解しました。ここで学んだことが、のちにReactを学ぶ際に多少なりとも役に立ったと思います。

Bootstrapを学ぶ

いろいろ学ぶ過程で、さらにBootstrapという何やら便利そうなものがあることを知りました。Bootstrapは、よく使われるHTML/CSSのパーツをまとめたライブラリのようなものです。最終的にBootstrapは使用しなかったのですが、使用しなかった理由を、備忘録の意味も込めて記載しておきます。
書籍は、Bootstrap 5　フロントエンド開発の教科書を購入しましたが、公式ドキュメントを追うような内容がメインで、あまり役に立たなかったと記憶しています。
基本的な内容を理解して、Bootstrapでコーディングしてみると、すぐさまこのライブラリの問題に気づきました。それは、制約があまりにも大きいということです。結局、このようなライブラリを使用すると、作成することのできるコンポーネンツにあまりにも制約があり、ライブラリ特有の、大して役に立つことのないテクニックを使ってなんとかするか、自分で書いたCSSを適用することになります。そうすると、結局1から自分でコーディングした方が早いじゃん、ということになるわけです。
Bootstrapが業界ではあまり使用されていないというような記事も見かけ、結局Bootstrapは使用しないことにしました。

まとめ

ここまで、CSSを中心に学んできた経緯を述べました。
次は、Wordpressを学び、その限界を理解するまでを記したいと思います。

勉強した書籍

CSS設計完全ガイド
 プロの「引き出し」を増やす　HTML+CSSコーディングの強化書
 Bootstrap 5　フロントエンド開発の教科書
 ハンズオンNode.js