43号線を西へ東へ

フリーランスの備忘録、アウトプットの実験場

JavaScriptからNext.jsへ:ウェブ開発30年の進化を振り返る

このブログはプロモーションリンクを含むときがあります


AIを使ったバイブコーディングをしていたら、「自社のサブスクで使っているWebサービスも、なんだか自分で作れる気がしてきた…」という壮大な勘違いをしてしまいました。そこでまず手をつけたのが、Web開発に強いと言われる JavaScript の歴史を調べることです。

JavaScript、Node.js、そしてNext.jsは、それぞれの時代で新しい技術や環境の変化に合わせて進化し、ウェブ開発をぐっと便利にしてきたらしい。 本記事ではそのあたりをざっくり振り返ってみます。


1990年代:JavaScriptの誕生とブラウザ戦争

1995年、Netscape社のブレンダン・アイクが「Mocha」として開発し、その後「LiveScript」を経て、当時人気だったJavaにあやかって JavaScript と名付けられました。
当初の目的は、ウェブページに「動き」を加えること。例えば、ボタンを押したときの反応やフォーム入力のチェックなどです。

Webブラウザウインドウの下の方で

ようこそ!エド105のホームページへ!

「ようこそ!エド105のホームページへ!」

という文字がスクロールしていたのがJavaScriptです。

当時のネット環境は ダイヤルアップ(56kbps程度) が主流で、ウェブは静的HTMLが中心。JavaScriptは「おまけのスクリプト」的な位置づけに過ぎませんでした。

2000年代前半:Ajaxとリッチウェブの登場

2004年頃、GmailGoogle MapsAjax(エイジャックス・非同期通信) を活用し、ウェブ上でデスクトップアプリケーションのような体験を提供しました。これにより、JavaScriptの重要性が一気に高まります。

Ajaxとは、Webページ全体を再読み込みすることなく、サーバーとデータをやり取りできる仕組みを指します。従来はボタンを押すたびにページ全体が更新されていましたが、Ajaxを使うことで必要な部分だけを素早く書き換えることが可能になりました。

  • Ajax(エイジャックス)とは、「Asynchronous JavaScript and XML」の略

例えば、はてなブログで「スター」を押したときにページ全体が切り替わらずに自分のアイコンが表示されることや、地図アプリでスムーズにスクロールや拡大縮小ができる、といった体験はAjaxのおかげです。

はてなスターAjax

仕組みとしては、JavaScriptが裏側でサーバーにリクエストを送り、サーバーから返ってきたデータを受け取り、ページの一部に反映させています。

クリックによってページ全体を再読み込みせず、一部を変更する。

これにより処理速度が向上し、ユーザーは快適に操作を続けられます。現在ではGoogleマップやショッピングサイトなど、多くのWebサービスで標準的に使われており、アプリのように軽快でインタラクティブなWeb体験を支える重要な技術となっています。

同時に、ブラウザも進化を続け、Google ChromeV8エンジン をはじめとするJavaScriptエンジンの性能競争が始まったそうです。
同時期に jQuery のようなライブラリが登場し、ウェブ開発はよりリッチな方向へと進化していきます。

ネット環境は ADSL光ファイバー が普及し始め、回線速度の向上がリッチコンテンツを支えました。

画像サイズが大きいと、なかなかダウンロードが終わらず写真が見れない時代もあったことも懐かしく思います。

2009年:Node.jsの登場

2009年、当時フリーのプログラマーだったライアン・ダールが Node.js を発表しました。 彼は、従来のWebサーバーが同時接続やリアルタイム通信に弱いと感じ、非同期処理に強いJavaScriptとV8エンジンを活かし、軽量で高速な新しい仕組みを作ろうと考えました。

これによりJavaScriptサーバーサイドでも動かすことが可能となり、ウェブサーバーやAPIサーバーをJavaScriptで記述できるようになりました。

Node.jsは以下の点で画期的でした:

  • Google V8エンジン採用による高速処理
  • 非同期I/Oとイベントループによる多接続の効率処理
  • チャットやストリーミングなどリアルタイム通信に強い

さらに、AWSやHerokuといったクラウドサービスが広がり、npm(Node Package Manager) によるライブラリ共有が加速。開発の効率が飛躍的に高まりました。

とはいえ、Node.jsも完璧だったわけではないようです。後年ライアン・ダールはNode.jsに安全性や標準準拠を欠き、依存管理やAPI設計が複雑化したことを後悔しています。この反省から2018年によりシンプルで安全なDenoを開発しましたが、それは後の話し。

Web業界は一気にNode.jsの方向に向かっていったようです。

2010年代前半:フロントエンド革命

Node.js上で動くビルドツール(Grunt, Gulp, Webpackなど)が登場し、JavaScriptでアプリ全体を構築する流れが加速しました。

2013年にはFacebookReact を公開し、コンポーネント指向のUI開発が主流に。これにより、SPA(Single Page Application)という概念が広く浸透しました。

時代背景としては、スマートフォンの普及が進み、「モバイル対応」が必須に。ネット回線は 4G へと広がり、動画やアプリ利用が当たり前になっていきました。

2016年:Next.jsの登場

2016年、Zeit社(現Vercel)が Next.js をリリースしました。
これはReactの弱点であった 初回表示の遅さSEOの弱さ を解決するためのフレームワークで、以下をサポートしました。

これにより「SEOに強いReactフレームワーク」として急速に人気を集めます。

また、VercelやNetlifyといったクラウド環境が一般化し、Gitにプッシュするだけで自動デプロイ が完了するようになり、開発者体験(DX)が大きく向上しました。

2020年代フルスタックJSとDXの時代

Next.jsは v13 以降で App Router を導入し、API Routesとあわせてフロントからバックエンドまで統合できるフルスタックフレームワークへと進化しました。

さらに Supabase や Firebase といった BaaS(Backend as a Service) と組み合わせることで、JavaScriptだけでフルスタック開発が可能に。

この時代の特徴は以下の通りです:

  • 5G通信の普及 により、モバイルでもリッチな体験が可能に
  • VercelやCloudflare Workers によるエッジコンピューティングの台頭
  • VS Code が開発環境のデファクトスタンダード
  • TypeScript の普及で、より安全で大規模なJS開発が主流に

まとめ

技術の進化

ネット環境の進化

  • ダイヤルアップ → ADSL光回線 → 4G → 5G
  • 通信速度の向上に伴い、ウェブは「静的なページ」から「モバイルアプリ並みのリッチアプリ」へと進化

最後に

30年前のJavaScriptの知識しか無かったので、JavaScriptの地位をかなり下のほうのものと思っていました。大学院を中退したフリーのプログラマーライアン・ダールが、世界を変えるNode.jsを開発したのは、熱い話ですね。