i-Vinci TechBlog
株式会社i-Vinciの技術ブログ

1 年目の自分に薦めるならこの 1 冊 「[改訂新版]プロになるための Web 技術入門」

皆さんこんにちは、ソアテックソリューション部の k.a です。
早いもので私が i-Vinci に入社して 5 年以上経ち、後輩をフォローする立場になったり、面接に駆り出されたりといった経験も何度かしてきました。

そんな中でよく聞かれるのが、「何から、どのように勉強していけばよいか?」という問いです。
実は私自身、新人の頃にまさに同じ悩みを抱えていました。
フロントエンド、バックエンド、セキュリティ、インフラ……とにかく Web 技術の世界は広大で、最初の頃は「全部勉強しなきゃ」と思って焦っていたのを覚えています。
ですが、実務を通じて気づいたのは、「まずは大まかな全体像をつかんでおき、必要に応じて掘り下げていく」ことが、結果として効率よく学べるということでした。
全体像を把握していれば、「どんな技術があるのか」「今学んでいることが Web 技術全体の中でどこに位置するのか」といった感覚がつかめるようになります。
これにより、限られた時間の中で自分にとって必要な技術を選び、優先順位をつけて学ぶことができるようになりますし、実務で知らない技術に出会ったときにも、焦らず落ち着いて調べる余裕が持てるようになります。

本稿では、そうした「全体像の把握」を手助けしてくれる書籍として、『[改訂新版]プロになるための Web 技術入門』をご紹介します。

目次

本記事で紹介する書籍

電子版を購入する場合は、DRM フリーの PDF での購入が可能な Gihyo Digital Publishing がおすすめです。
また、同じ著者の なぜ,あなたは Java でオブジェクト指向開発ができないのか も Java 初学者やオブジェクト指向を学びたい方におすすめです。

こんな人におすすめ

  • Web システムの初学者や若手の IT エンジニア
  • フレームワークの裏で、Web システムがどう動いているのかを知りたい人
  • Web 技術の誕生から現在に至るまでの歴史的な変遷を追いたい人

おすすめする理由

  1. Web システムを構成する様々な技術の基礎について、満遍なく学ぶことができる
  2. Web 技術の歴史的な変遷を知ることができる
  3. 新しい技術を学ぶ際の土台ができる

1. Web システムを構成する様々な技術の基礎について、満遍なく学ぶことができる

Web システムの開発においては、Ruby on Rails や Spring Boot といったフレームワークを用いるのが一般的です。
また、若手のうちは「すでに誰かが作ったコードに手を入れる」ところから経験を積んでいくことが多く、担当範囲以外の仕組みについては、ついブラックボックスのままになりがちです。
本書では、そうしたフレームワークの土台となっている Web システムの構成要素を一つひとつ紐解き、フロントエンドからバックエンドまで、全体がどのように連携して動いているのかを体系的に学ぶことができます。
中盤以降の章では、ToDo リストのサンプルアプリケーションを題材に、実際に手を動かしながら理解を深めていく構成になっており、実践的に学びたい方にも非常におすすめです。

2. Web 技術の歴史的な変遷を知ることができる

本書の第 3 章の「3.1 World Wide Web の始まり」(p.46)によると、世界初の Web サイト(info.cern.ch)が公開されたのは 1990 年とのことです。
本書では、上記の Web サイトに対して telnet コマンドで通信してみるところから始まり、簡単な HTTP サーバを立てたり、従来型の MPA(マルチページアプリケーション)を構築したり、更にそこから現代的な SPA(シングルページアプリケーション)へと発展させていくといった様に、1990 年から現在に至るまでの Web 技術の進化を実際に手を動かしながら追体験できる構成になっています。
初心者向けの React 講座などで「HTML + CSS + JavaScript で作ったページを React に置き換えて便利さを実感させる」という構成をよく見かけますが、本書ではそれを更に広く深く体験できるのが魅力です。
技術の誕生から順を追って体験することで、「なぜこの技術が必要だったのか」や、「どのような課題を解決しようとしたのか」といった背景が自然と理解できるため、読み物としても面白い内容になっています。

3. 新しい技術を学ぶ際の土台ができる

新しい技術に触れるときには、その技術が「何を解決しようとして登場したのか」や、「どんな技術とどう関係しているのか」といった視点を意識することで、表層的な理解にとどまらない応用力が養われていくと思います。
以前参画していた案件で、サーバ側からクライアントの画面をリアルタイムに切り替える処理が WebSocket を使って実装されていました。
私自身、本書を読むまでは WebSocket の様なサーバプッシュ技術については名前だけ聞いたことがある程度で、実務でも MPA(マルチページアプリケーション)ベースの開発が中心だったため、ソースコードを読んで何となく処理の流れは把握できても、「なぜこの技術が採用されているのか」まで深く理解できていませんでした。
ちょうどその頃に本書を手に取り、第 9 章「サーバプッシュ技術」の内容がまさにその疑問を解決してくれました。

本章ではまず、HTTP の基本的な性質として「クライアントからのリクエストがなければサーバは応答できない」という仕組みがあり、この制約を回避するために長らくさまざまな工夫がなされてきたことが紹介されています。
たとえば、Ajax を利用したポーリング、接続を長時間維持して擬似的なプッシュを実現する Comet(Long polling)、HTTP/1.1 のチャンク転送を利用した SSE(Server-Sent Events) などです。
これらはいずれも「HTTP の枠内」でリアルタイム通信を実現しようとしたものですが、接続の不安定さや双方向通信の難しさなど、構造的な限界を抱えていました。
対して、WebSocket は、初回のみ HTTP を使って接続を開始し、その後は 独自のプロトコルへアップグレードして永続的な接続を維持するというアプローチをとっており、HTTP の制約にとらわれず、サーバとクライアントの双方向通信をリアルタイムかつ効率的に行うことができます。

この背景を知ることで、単に「リアルタイムに通知できる技術」として WebSocket を捉えるのではなく、「HTTP ではどうしても越えられなかった壁を破るために設計されたプロトコル」であるという、技術的な必然性を深く理解することができました。
実際に本書を読んだ後は、現場のソースコードに対しても「なぜ双方向通信が必要だったのか?」といった観点で読み解けるようになり、表層的ではない技術理解が少しずつ身についてきた実感があります。
今後も本書を折に触れて読み返しながら、学びの土台として活用していきたいです。

最後に

今回紹介した『[改訂新版]プロになるための Web 技術入門』は、書籍名にもあるように 2010 年出版の旧版の改訂版です。
私が新人エンジニアとして i-Vinci に入社した頃、先輩方がこの旧版をおすすめしてくださいました。今回改訂版を改めて読んでみて、「あの頃、言うことを聞いて真面目に読んでおけばよかった...」としみじみ思っています。
若手エンジニアの皆さんは、ぜひ今のうちに読んでみてください。