· 3分で読了
フロントエンドはCSを学ぶべきか?
この記事は中国語から自動翻訳されたものです。翻訳によりニュアンスが失われている場合があります。
この議論はずっと昔から交わされているが、ここで僕自身の考えを簡単に書き残しておこうと思う。
遥か昔、HTMLとCSSくらいしかなく、せいぜいjQueryが加わる程度だった時代は、静的ウェブページを作ってFTPにアップロードするだけで「達人」と呼ばれていた。
ブラウザでできることが増えるにつれて、フロントエンドがカバーできる領域もますます広がり、今や「フロントエンド」という言葉だけでも、いくつかの専門分野に枝分かれしている:
- UI:ユーザー体験を重視し、APIステータス処理、データ処理、UX、アクセシビリティ(a11y)、適切なアニメーション演出などが含まれる。
- マルチメディア:音声、映像、ライブ配信などの比重が大きいサービス。UIへの理解はもちろん、マルチメディアのエンコード・デコードやストリーミング伝送に関する知識も求められる。
- データフロー/フロントエンドエンジニアリング:フレームワークやツールの習熟度、ビジネス要件やドメイン知識に対する深い理解。
- データ可視化/ストーリーテリング:チャートライブラリやD3への習熟に加え、ブラウザにおける描画限界を把握し、いつCanvasを使い、いつSVGを使い、いつWebGLを使うべきかを知る必要がある。さらに、ただ派手なだけの使われないグラフを作ってしまわないための、ストーリーテリングのスキルも求められる。
- アーキテクチャ:フロントエンドのデプロイ、ロギング、基盤フレームワーク、規約、API管理、状態管理など。経験だけでなく、それを支える一定のCS知識のバックグラウンドも必要となる。
- ゲーム:ゲームを通じてストーリーを伝えるものや、純粋なエンタメ用。ゲーム理論に関わり、一般的なフロントエンド開発手法とも少し異なる。
- コンセプト主導:Vue、React、Svelteのように、コンポーネントやVirtual DOMといった概念からアプローチし、開発者のフロントエンドに対する認識を根本から変えるようなもの。
CSのバックグラウンドを持つ開発者が書くUIは、CS出身でないフロントエンドエンジニアのUIよりもひどいことだってある。アルゴリズムを勉強するよりも、a11yやUIを深く掘り下げるほうが、よっぽど社会の役に立つかもしれない。
これらすべてに精通している人などそう多くはない。基本的にすべてを極めているなら、もはやフロントエンドとは名乗らず、ソフトウェアエンジニアへと進化しているはずだ。そんな人材は滅多に出会えるものではないし、誰もがスキルの全開放された超人になる必要もない。
こうした観点から見れば、自社の要件や需要を考慮せずに盲目的にアルゴリズムやCSのバックグラウンドばかりを強調するのは、もはや横暴というものだ。多くの場合、それは採用側の手抜きにすぎない。
昔から言われている通り、結局のところ重要なのは、君の目標と、君がどんな人間になりたいかだ。
関連記事
- Three.js で僕の部屋を表現する 僕が React Three Fiber を使って実際の自分の部屋をブラウザ上に再現し、実世界のオブジェクトを目録に見立て、空間の記憶を通してここ数年の生活と仕事について語った話。
- フロントエンドで画像を扱う際に注意すべきこと Jake Archibaldの記事を起点に、現代のレスポンシブ画像の書き方を整理する。なぜwidth/heightを付ける必要があるのか、CSSのaspect-ratioはいつ使うべきか、AVIFとWebPの選び方、そしてpicture/source/srcsetを使ったモバイル向け画像の切り替えについて。
- CSS field-sizing — たった1行のCSSでフォーム要素を自動リサイズする かつてtextareaの自動高さ調整は、JavaScriptでscrollHeightを監視するしかなかった。しかしCSSのfield-sizing: contentなら、わずか1行で代替でき、textarea、input、selectに対応している。本記事では従来のやり方のペインポイントと、field-sizingの使い方をまとめる。
- リンクの下線をもっと見栄え良くする:text-underline-offset デフォルトでは下線と文字が近すぎて、このスタイルを好まないデザイナーもいるし、僕自身もあまり綺麗ではないと感じていた。