フレームワークに依存しない学習で市場価値のあるWebエンジニアになろう！

こんにちは！島根支社でWebエンジニアをしている杉谷です。

Webフロントエンド開発をしている皆さん、Webフロントエンドエンジニアを目指している皆さん、普段どのような環境で開発を行っていますか？

近年の開発では、フレームワークとしてReact・Vue・Angularなどを使うことが多いかと思います。同時に、TypeScriptやSCSS・styled-componentsなどを導入しているプロジェクトも多いでしょう。

これらの技術は、品質の高いWebアプリケーションを高い作業効率で実装していくために欠かせないものとなっています。一方で、こうしたフレームワークは素のWeb開発（VanillaのHTML/CSS/JavaScript）で使用する方法とはかけ離れた便利な実装方法を提供するため、素のWeb開発の姿が見えなくなりがちです。

この記事ではCSSフレームワークを例に、フレームワークが私たちに提供する便利な仕組みを学ぶとともに、フレームワークを使うことの長所と短所を確認します。その後に、特定のフレームワークに依存しない知識を学ぶことの重要性を説明します。

フレームワークの役割

近年のフレームワークは、ReactやTypeScriptのようなトランスパイルを必要とするフレームワークや言語と統合された仕組みのうえで利用されることが多くなっています。この場合、バンドルを行うことでブラウザで動作するコードが出力されます。

本記事では話を簡単にするために、バンドル不要で利用できるCSSフレームワークのBootstrapを例に挙げて、CSSフレームワークのメリットとデメリットを見ていきます。

Bootstrapは要素にクラス名を指定するだけでレイアウトを簡単に実装できます。また、ボタンや入力フォームなど頻繁に利用するUI部品については完成したデザインを提供します。

例えば、ボタンを実装するコードと実行結果は以下のようになります。

<button type="button" class="btn btn-primary">bootstrap</button>

青いボタンに「bootstrap」と文字が表示されている。 — Bootstrapで実装したボタン

Bootstrapを使用せず、上のボタンとほぼ同等のものを素のHTMLとCSSで実装すると以下のようになります。

<button class="raw-button">raw css</button>

.raw-button {
  cursor: pointer;
  color: #fff;
  background-color: #0d6efd;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  text-transform: none;
  margin: 0;
  font-family: inherit;
}

.raw-button:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
}

.raw-button:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

同じ見た目の青いボタンが2つ並んでいる。左は「bootstrap」、右は「raw css」と書かれている。 — 左はBootstrapのボタン、右は上記のCSSで実装したボタン

上記のコードを比較すると、Bootstrapにより簡単にUIの実装を行えることが分かります。細かい部分の実装はフレームワークの提供する機能に任せることで、エンジニアはより重要なアプリケーションの機能を実現する部分に注力できます。

一方で、フレームワークに頼ることは良いことばかりではありません。例えば、Bootstrapだけでオリジナリティのある細かなUIを実現することは難しいことが多いでしょう。

また、私達は常に同じフレームワークを利用して開発を行うわけではありません。Bootstrapを使うプロジェクトもあれば、ゼロからCSS(SCSS)を書くプロジェクトもあるでしょうし、最近ではTailwindなど他のCSSフレームワークも登場しています。

このように異なる要件を求められた場合に、素のCSSに関する知識が身についていれば柔軟な対応が可能となるでしょう。なぜなら、SCSSもCSSフレームワークも全てCSSをベースに、より便利な機能を提供するツールだからです。

様々なフレームワークの土台となっている、素のWeb開発で使用される技術は、時代やプロジェクトの要件が変化したときにも使いまわしが効く普遍的な知識として役立ちます。

まとめ

フレームワークの機能を利用すると迅速な開発が行えます。その一方で、フレームワークごとに異なる考え方に基づいた機能を提供するため、独自の書き方で実装することを求められたり、それによって実現可能な機能が制約されることがあります。

各フレームワークには特色があり、それを使いこなすためには学習期間が必要です。今盛んに使われているフレームワークの人気が数年後も続いているとは限りません。適切な技術選定をするためにも、上述した素のCSSのような普遍的な知識を持っておくことが大切です。

特定のフレームワークや技術に依存していないかを意識し、適切な技術選定をすることはプロダクトの将来価値を高めることに繋がります。また、エンジニアである自分自身の市場価値を高めるためにも必要です。

自分の行った技術選定の説得力を高めるためにも、「なぜそのフレームワークを使うのか」「他のフレームワークはなぜ選ばなかったのか」を説明できるとよいですね。

共著：西田