0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Shankouin株式会社ONE WEDGE

番外編：開発技術のパラダイムシフト④

0
Posted at

番外編④：Node.jsと「黒い画面」の台頭

〜ブラウザから飛び出したJavaScriptの逆襲〜

導入：檻の中の道化師

かつて、JavaScriptは「ブラウザのおまけ」であり、プログラマーたちから見下される「嫌われ者の言語」でした。
jQueryの登場（番外編①）によって非常に書きやすくはなりましたが、それでもJavaScriptの居場所は、あくまで 「Webブラウザという檻の中」 に限られていました。

「裏側（サーバー）の本格的な処理はJavaやPHP、Rubyの仕事。JavaScriptは、画面上でアニメーションを動かすだけの道化師だ」

それが世界中のエンジニアの共通認識でした。
しかし2009年、一人の天才が 「ブラウザの檻」を破壊 します。道化師だったJavaScriptに「最強のエンジン」を積んで、サーバー側の世界へと解き放ったのです。

世界を制覇する「JavaScriptの逆襲」は、ここから始まりました。

1. 2009年、狂気のキメラ「Node.js」誕生

ライアン・ダール（Ryan Dahl）というエンジニアは、ある問題を解決するための技術を探していました。
それは「数万人のユーザーが同時に接続しても、順番待ちにならずサクサク動くサーバー（C10K問題）」を作る方法です。

彼は、第6回でお話しした「Google Chromeの爆速エンジン（V8）」に目をつけました。
「ChromeのV8エンジンをブラウザから引っこ抜いて、C++のプログラムとくっつけたら、サーバー側でJavaScriptを爆速で動かせるんじゃないか？」

2009年の技術カンファレンス（JSConf EU）で、彼はその狂気とも言えるキメラのプロトタイプを発表しました。これが 「Node.js（ノードジェイエス）」 の誕生です。

「えっ、サーバー側でもJavaScriptが書けるの!?」
これは世界中のフロントエンド・エンジニアにとって、革命的な出来事でした。今までブラウザの画面しか作れなかった自分たちが、急に「裏側のデータベース操作」までできるようになったのです。

2. 魔法の小包「npm」の爆発

Node.jsの普及を決定づけたのが、2010年に登場した 「npm（Node Package Manager）」 の存在です。

これは、世界中のエンジニアが作った「便利なJavaScriptのプログラム部品（パッケージ）」を、誰でも無料でダウンロードして自分のプロジェクトに組み込める、巨大な共有システムでした。

「カレンダー機能が欲しいな」と思えば、コマンドを一つ叩くだけ。
「日付の計算を楽にしたいな」と思えば、またコマンドを一つ叩くだけ。

このnpmという仕組みによって、JavaScriptのエコシステムは爆発的に拡大しました。現在、npmには200万個以上（！）のパッケージが登録されており、人類史上最大のオープンソースの宝庫となっています。

3. Webデザイナーを襲った「黒い画面」の恐怖

しかし、このNode.jsとnpmの台頭は、平和に暮らしていた日本のWebデザイナーたちに 「未曾有の恐怖と絶望」 をもたらすことになります。

さよなら、FFFTP

2010年代前半までのWeb制作といえば、「DreamweaverなどのソフトでHTMLとCSSを書き、完成したら『FFFTP』や『Cyberduck』といったFTPソフトでサーバーにアップロードして終わり」という、非常に牧歌的なものでした。

しかし、モダンなWeb制作の現場では、突然こんなことが言われるようになります。
「じゃあ、このプロジェクトの環境構築をお願い。まずは ターミナル を開いて npm install して。その後は gulp build でコンパイルしてね」

「ハッカーが使う黒い画面」へのアレルギー

「ターミナル（Windowsならコマンドプロンプト）」——通称 「黒い画面」。
マウスは使えず、キーボードで謎の英数字の暗号（コマンド）を打ち込むだけの、まるで映画のハッカーが使うような画面です。

「私は綺麗なデザインを作りたいだけなのに、なぜハッカーみたいな黒い画面を叩かなきゃいけないの!?」
「赤い文字で大量のエラーが出た！ 壊れた！ 助けて！」

デザイナーたちはパニックに陥りました。
しかし、CSSを効率的に書くための技術（Sass）や、画像を自動で圧縮する仕組みなど、最新の便利ツールはすべて「Node.js上で動くプログラム（npm）」として提供されるようになっていたのです。
Webサイトを作るためには、否が応でも「黒い画面」とお友達にならなければならない時代が到来しました。

「宇宙一重い物質」node_modules

さらにデザイナーたちを悩ませたのが、npm install と打ち込むと生成される node_modules という呪いのフォルダです。
ちょっとしたWebサイトを作るだけなのに、このフォルダの中に数万個のファイルが自動ダウンロードされ、容量が平気で1GBを超えるのです。
「ただのホームページになぜこんな大容量が必要なんだ」という戸惑いは、当時の”Web制作あるある”でした。（※今でも「ブラックホールより重い物質はnode_modulesである」というネットミームがあるほどです）。

4. JavaScriptの天下統一

多くの戸惑いとアレルギーを生み出しながらも、Node.jsの恩恵はあまりにも強大でした。

気がつけば、JavaScriptは「世界で最も使われるプログラミング言語」へと登り詰めていました。

  • フロントエンド（ブラウザ）： HTML/CSSを操作する
  • バックエンド（サーバー）： Node.jsでデータベースを操作する
  • スマホアプリ： React NativeなどでiOS/Androidアプリを作る
  • デスクトップアプリ： Electronという技術を使い、SlackやVSCodeなどのPCソフトを作る

かつて「ブラウザの中のおまけ」と馬鹿にされていた言語が、すべてのデバイス、すべての環境を支配する「共通言語（ユニバーサル・ランゲージ）」として、見事な天下統一を果たしたのです。

📚 参考文献・出典

本記事で紹介したエピソードや技術的背景は、以下の歴史的資料に基づいています。

  1. Node.jsの発表（JSConf EU 2009）
  2. npm (Node Package Manager) の公式
    • npm Docs:
      • JavaScriptのエコシステムを世界最大規模に押し上げたパッケージマネージャー「npm」の公式サイトとドキュメントです
      • npm - About npm
  3. Electron（デスクトップアプリ開発）
    • Electron Official Site:
      • Node.jsとChromiumの技術をベースに、JavaScriptでクロスプラットフォームのデスクトップアプリ（VSCode, Slackなど）を作れるフレームワークの公式サイトです
      • Electron | Build cross-platform desktop apps

🤖 執筆協力
本記事の構成案作成および推敲には、生成AIのアシストを活用しています。

次回予告（番外編⑤・最終回）

Node.jsと黒い画面を受け入れたフロントエンドの戦士たちは、ついに「ただのWebサイト」を「究極のアプリケーション」へと昇華させる最後の武器を手に入れます。

jQueryの「DOMを直接いじる」という手法は限界を迎えました。
Facebook（現Meta）から放たれた、Webの常識を根底から覆す「仮想DOM」という魔法。

次回、番外編・最終回。
「ReactとVueの覇権（SPA時代へ） 〜jQueryの終焉と『仮想DOM』がもたらした現代Webの最終形態〜」

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?