はじめに
気づけば、Web に関わって 15 年が経っていました。
僕がこの世界に足を踏み入れたのは、HTML5 が「これから来る！」と言われていた頃。Flash が下火になりはじめ、IE6 の対応に頭を抱え、コードをメールで納品することすらあった時代です。
デザインソフトの使い方すら知らなかった人間が、今ではフロントエンドエンジニアとして React と TypeScript を書き、AI を相棒にコードを書いている。
振り返ってみると、この 15 年は 「新しいものが次々と現れて、それらに翻弄されながらもしがみついてきた歴史」 でした。
AI が台頭してきた中これからどうすればいいのか手探りな状況です。
今後の身の振り方を考えようと振り返ってみたものを文字に起こしました。
これは技術解説ではなく、一人の Web 屋の振り返りです。
同じ時代を生きた人には「あったあった」と、これから始める人には「そんな時代もあったのか」と、それぞれ楽しんでもらえたら嬉しいです。
ざっくり 15 年の変遷
| 時代 | 当時の"当たり前" | 何が変わったか |
|---|---|---|
| 黎明期 | Flash / テーブルレイアウト / IE6 対応 | HTML5 へ移行、タグの厳格化 |
| jQuery 期 | jQuery で動きをガリガリ実装 | CSS アニメーション・標準 API の充実 |
| スマホ対応期 | URL で PC/SP 出し分け（DOM2 つ） | レスポンシブ（ワンソース）へ |
| レイアウト変革 |
float + clearfix の段組み |
Flexbox / Grid で数行に |
| 設計模索期 | Sass 導入、CSS 設計戦国時代（BEM 他） | 命名規則・スコープ問題と格闘 |
| モダン化期 | gulp / webpack の「package ってなに?」 | ビルド前提の開発が標準に |
| SPA 期 | Vue / Angular でアプリのような Web | ぬるぬるページ遷移体験 |
| 現在 | React + TypeScript / lint / formatter | 秩序と自動化 |
| そして | AI と一緒にコードを書く | 「こんな時代が来るなんて」 |
Web との出会いは唐突に。ハローワークの職業訓練
そもそも、僕が Web に関わったのはまったくの偶然でした。
たまたまハローワークで募集していた職業訓練に、Adobe のデザインソフトを教えてくれるコースがあったんです。
それに参加したのが、すべての始まりでした。
最初に触ったのは Illustrator と Photoshop。
「Web サイトを作れるようになる」というカリキュラムのテーマに沿って、HTML や CSS も学んでいきました。
そして流れるままにコードの世界へ足を踏み入れていくことになります。
Flash とキーフレームの時代、そして HTML5 へ
当時 Flash はまだ残っていましたが、少し下火になりかけていました。
僕も触っていましたが、キーフレームごとに動作を設定していく作りは、とにかく面倒だった思い出があります。
だからこそ、Flash が衰退し HTML5 へ移り変わっていく流れは、僕にとってはむしろ歓迎でした。
ただ、HTML5 に対する当時の印象は「すごく便利になった！」というより、「時代に合わせて最適化されていく」 という感覚に近かったです。
それまでと違ってタグの扱いに厳格さが出てきた、くらいの印象でした。
そして何より忘れられないのが地獄の IE6 対応 です。
IE6 だけのために、わざわざ別の CSS ファイルを用意する。
条件分岐コメントで読み込みを切り替える。
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->
「たった 1 つのブラウザのために、こんなことを…」と思いながら、それが当たり前の作業でした。
ファイル受け渡しと画像スライスの原始時代
当時は Git なんて知りませんでした。
コードはファイルでやり取りし、デザインカンプからの切り出しも Photoshop のスライス機能で手動。
とにかく面倒で非効率な作業を、当たり前のようにやっていました。
インターンに行った会社では、クライアントへの納品が メールでコードを送る というところもあった気がします。
今思えば、ある意味で恐ろしい時代です。
たまーにファイルを上書きして、書いたコードを消してしまうみたいなことをしていました…。
jQuery でガリガリ動かしていた頃
動きをつける手段といえば、当時は jQuery 一択でした。
CSS アニメーションなんてまだ存在しなかった時代です。だから、
$('.menu').fadeIn();
$('.box').animate({ opacity: 1 }, 300);
こんな具合に、jQuery でガリガリと動きをつけていく。それが現役バリバリの主流でした。
プラグインを探してきては貼り付けて、動かす。プラグインを魔改造してしまう。
そうすると地獄みたいな環境ができてしまうのは言うまでもありません…。
float の呪縛と、Flexbox の衝撃
レイアウトの話も外せません。
昔は段組みを float で組んでいました。でも float には謎の挙動があって、親要素が高さを失う。
だから、それをリセットするための記述（clearfix）をわざわざ書く必要がありました。
.clearfix::after {
content: "";
display: block;
clear: both;
}
「は？」って感じですよね。僕も float を理解するのに少し時間がかかりました。
だからこそ、Flexbox が登場したときは衝撃でした。
あの float の呪縛から解放され、複雑なレイアウトがたった数行で実現できる。今でも、あれは最高の体験だったと記憶しています。
.container {
display: flex;
justify-content: space-between;
}
「これだけでいいのか」と。Web 制作の景色が変わった瞬間でした。
レスポンシブという複雑化の波
スマホの普及とともに、レスポンシブ対応が避けて通れなくなります。
そしてこれで、制作の複雑度は一気に跳ね上がりました。
ブレイクポイントの調整もそうですが、もっとしんどかったのは 古いサイトの作り です。
当時は CSS で出し分けるのではなく、URL で PC サイトと SP サイトを分けて実装する パターンもありました。
つまり、HTML（DOM）を 2 つ用意しなければならない。
これが本当に厄介で、
- 同じ修正を 2 箇所でやらなければならない
- 片方を直してもう片方を忘れる → 実装漏れ
- 機能追加のたびにコストが倍
という状態でした。今振り返ると、レスポンシブ（ワンソース）への移行は、まさに 「重複をなくす」という Web の進化 そのものだったと思います。
Git との出会い。「なんてすごいものなんだ」
しばらく Git というものを知らないままやっていましたが、その仕組みを理解した瞬間のことは今でも覚えています。
「なんてすごいものなんだ」 と。
誰が・いつ・どこを変えたのかが全部残る。
間違えても戻せる。複数人で同じコードを触れる。
バージョン管理という概念を知らずにきてしまった自分にとっては凄まじい衝撃でした。
Sass と、CSS 設計の戦国時代
CSS の世界もどんどん進化していきました。
Sass（SCSS）を使い始めたときは、管理の幅が一気に広がった感覚がありました。
- ネストで構造を表現できる
- 色コードを変数にして使い回せる
- 連番や規則的な命名なら、プログラムを書いて出力できる
$primary: #3498db;
.card {
border: 1px solid $primary;
&__title {
color: $primary;
}
}
CSS がただのスタイル定義から、設計するもの へと変わっていく。
奥深さが増していきました。
そして、いわゆる CSS 設計 が出始めたのもこの頃です。BEM、SMACSS、OOCSS、FLOCSS…。
どの構成がいいのかをこぞって吟味し、導入のために工数を使いました。
教育コストも大きく、教育が足りなければ急に設計が崩れ始めます。
初めて CSS 設計を学ぶ人にとってその概念、プロジェクトの独自ルール、命名の適切さを全て伝えるのは困難を極めました…。
そして、うまく導入しきれずにカオス化したり、そもそも CSS に名前空間（スコープ）がない という根本問題にめちゃくちゃ困った記憶があります。
クラス名がぶつかる、意図しないスタイルが効いてしまう。
あの苦労は、後の CSS Modules やコンポーネント単位のスタイリングへの伏線だったのかもしれません。
ビルドツールの濁流 。「package ってなに?」
そして、僕が一番面食らったのがビルドツールの登場でした。
gulp だったり webpack だったり、静的解析、SCSS のビルド…。
それまで HTML と CSS のコーディングしかやってこなかった僕にとって、まさに 「package ってなに?」 という状態でした。
中身の仕組みをまったく読み解けないまま、見様見真似で使っていた。
-
node_modulesという巨大なブラックボックス - 設定ファイルが呪文にしか見えない
- 「FTP でアップすれば済んでいたのに、なぜ "ビルド" が必要なのか」
デザイン畑から来た僕にとって、これは急にエンジニアリングの濁流に放り込まれたような感覚でした。
知識がなさすぎて、本当にちんぷんかんぷんだったんです。
では、どうやって乗り越えたか。
結局は スクラップ&ビルド でした。
何度も環境を作っては壊し、作っては壊しを繰り返すうちに、仕組みが少しずつ理解できてくる。
一つひとつの設定を調べて、点と点をつないで線にしていく。
当時は AI なんてありませんから、調べるだけでも時間がかかって本当に大変でした。
「分かってきたかも」という手応えを感じたのは、エラーが出たときに、なんとなくその理由が想像できるようになった瞬間 です。
あの感覚は、今でも自分の中の一つの基準になっています。
SPA の衝撃
もう一つ強く印象に残っているのが、SPA（シングルページアプリケーション）との出会いです。
当時は React よりも Vue や Angular が主流でした。
初めてサクサク動く SPA に触れたとき、衝撃を受けました。
技術的にどうこうというより、体験としての驚き です。
ページ遷移しても画面が真っ白にならない。ぬるぬる動く。
まるでアプリのような Web がブラウザの中で動いている。
「これまでの Web とまったく違う」と感じました。作り手として、Web の可能性にワクワクした瞬間でした。
TypeScript、そして今の React
TypeScript に触れ始めたのは、3 年ほど前からです。
正直、触り始めたときはよく分かりませんでした。「型なんて要るのか?」と。でも今では、完全に 「型がないと無理」 な体になっています。補完が効く、壊れる前に気づける、コードが仕様を語ってくれる。一度この快適さを知ると、もう戻れません。
そして今、メインで使っているのは React です。
それ以外はもう触っていません。あれだけ Vue・Angular に驚いていた自分が、今では React 一本に落ち着いている。これも時代の流れだなと思います。
7 年半関わった、Web の"博物館"
ここで、忘れられない現場の話をさせてください。
僕は、あるサイトに 7 年半 関わってきました。15 年のうちの、半分以上です。
このサイトが、まるで Web の博物館 のような構成でした。
- PHP をフルスクラッチ
- コンテンツ配信は WordPress
- ディレクトリごとに異なるフレームワークで構成される
- JavaScript もあれば、ライブラリを魔改造している箇所もある
- SCSS や gulp のビルド環境も同居していて
一つのサイトの中に、Web の各時代が 地層のように堆積している。
新しい技術が来るたびに、古いものを残したまま上に積み重ねていった結果でした。
正直、実装には本当に苦労しました。でも今思えば、この現場こそが、僕が Web の 15 年を文字通り「体で」理解する教材だったのかもしれません。
一つのサイトの中に、HTML5 以降のすべての変遷が詰まっていました。
そして今 「package なしなんて考えられない」
あれだけ「package ってなに?」と戸惑っていた僕が、今では 「package を使って開発環境を作らないなんて考えられない」 と思うほどになりました。
そして React などのフレームワークが普及したことで、実装は格段にやりやすくなったと感じています。
特に大きいのは、"オレオレな作り方"が減ったこと です。
昔は自由でしたが、その分カオスなコードもたくさんありました。
今はフレームワークによって作り方がある程度制限され、lint や formatter で静的解析やフォーマットの統一ができる。
「制限されること」が、かえって秩序とメンテナンス性をもたらしてくれる。
無法地帯だった時代を知っているからこそ、この便利さのありがたみが身に染みます。
……とはいえ、「なにこの書き方！」と思わず叫ぶような、強烈なコードに出会う機会が減ったのは、少しだけ寂しくもあります（笑）。
AI と書く時代 。「こんな時代が来るなんて」
そして今、AI と一緒にコードを書く時代がやってきました。
正直、こんな時代が来るなんて思いませんでした。
AI はめちゃくちゃすごい。師匠であり、相棒 のような存在です。不要な繰り返しをしなくて済むし、開発はとても便利になりました。
一方で、思うところもあります。
AI に任せると、コードを自分で読まなくなる。すると、コードから仕様を推測する力 は身につきにくくなるし、感覚も鈍っていくかもしれない。あの「エラーの理由が想像できるようになった」手応えを、自力で積み上げる機会は確実に減るでしょう。
ただ、僕は AI に対して基本的にネガティブな印象は持っていません。
AI の登場によってアウトプットだけでなく、インプットも早くなりました。
開発環境で悪戦苦闘していた日々はなくなり、インプットしたいことに集中できる環境を簡単に整えられるようになりました。
ポイントは、うまく使いこなせるかどうか。
そして使いこなした上で、どう自分の価値を高めていくか を考えながら、日々研鑽を積んでいく必要があると感じています。
15 年やってきて思うこと
振り返ると、Web は「分からないもの」が次々と現れる世界でした。
そのどれもが、最初は「ちんぷんかんぷん」で、気づけば「当たり前」になり、やがて「過去のもの」として置き換えられていきました。
最初は仕組みが読めなくても、向き合って使い続けていれば、必ず乗りこなせるようになる。
変化を恐れず、便利な道具に飲まれず、"使いこなす側"に回り続けること。
AI の時代だからこそ、これまで以上に大事になってくるはずだと考えています。
これから始める人へ
もしこれから、僕のように未経験から、あるいは別の畑から Web の世界に入ってくる人がいたら、伝えたいことがあります。
偶然の入り口でも大丈夫。最初は分からないことだらけで当然です。
新人が次々と先進的な考え方や技術を披露して、自分の持っている知識に見劣りすることもあるでしょう。
ハローワークの職業訓練から始まって、「package ってなに?」と戸惑いながら、15 年続けてここまで来ました。
才能があったわけでも、上手くできたと思えることなんて一度もありません。
スクラップ&ビルドを繰り返しているうちに、分からなかったものは必ず分かるようになります。
これから Web がどう変わっていくのか。それを楽しみにしながら、僕もまだまだ、研鑽を積んでいきたいと思います。