プロになるためのWeb技術入門

# プロになるためのWeb技術入門 ## はじめに #### 書籍の目標 **何年先も通じるWebアプリケーションの基礎技術**を手軽に身に付けられる ※本書で説明している内容は、現在使っているフレームワークなどに隠蔽され、通常は知らなくても開発に支障はないかもしれない。しかし、問題解決や既存技術を応用させて新たな技術を生み出していくためには、必ず理解する必要がある。 ## 目次 [amazon | プロになるためのWeb技術入門 | 試し読み](https://www.amazon.co.jp/%E3%80%8C%E3%83%97%E3%83%AD%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEWeb%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80%E3%80%8D-%E2%80%95%E2%80%95%E3%81%AA%E3%81%9C%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AFWeb%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E9%96%8B%E7%99%BA%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B-%E5%B0%8F%E6%A3%AE-%E8%A3%95%E4%BB%8B/dp/4774142352/ref=sr_1_1?adgrpid=64974311945&gclid=CjwKCAiAxvGfBhB-EiwAMPakqs1i-4oExQoCO1sVfzj3EkWzVspgYgz1fNTM3aHj4mfPS61uGpYUuxoC-eEQAvD_BwE&hvadid=649188913901&hvdev=c&hvlocphy=1009103&hvnetw=g&hvqmt=b&hvrand=2041525227460741837&hvtargid=kwd-653543689895&hydadcr=27271_14653887&jp-ad-ap=0&keywords=%E3%83%97%E3%83%AD%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AEweb%E6%8A%80%E8%A1%93%E5%85%A5%E9%96%80+%E3%81%AA%E3%81%9C&qid=1677497943&sr=8-1&asin=4774142352&revisionId=&format=4&depth=1) ## LESSON0「プロローグ」 - 市民権を得た「Webアプリケーション」 - 最近は申請とかもインターネットを通じて行える - システム開発業務の大半はWebアプリケーションが占めている - 「Webアプリケーション」開発の難しさ - 以下のような悩みを抱えている人がいると思う - Webアプリケーションを作ることはできるが、障害が起きるとどうしたらいいかわからない - 新しい言語や技術が身に付かずに苦労しており、プログラミングが楽しくない - これらの一因として、**なんで動作するのか？つまり根本の仕組みを理解できていない**が挙げられる - 「Webアプリケーション」の開発技術はどこで学べる？ - 現状 - 書籍や雑誌 - 現場の経験の中で先輩エンジニアから教えてもらう - 他には？ - セミナーは？ - 時間足らん - 大学の授業は？ - 教える教授が技術の変化の流れについていくことが難しい - なぜ、あなたはWebアプリケーション開発技術を学べないのか - **アプリケーション自体が、さまざまな既存技術（ネットワーク, HTML, アプリケーションサーバ, OS, etc...）で成り立っている**ため、プログラミング言語以外の知識も身に付ける必要があるから - 上記のような基礎知識を知らなくても開発自体は可能 - だけど、設計や障害の原因追及&解決をできるレベルのエンジニアにはなることができない - 本書の対象読者 - これからWebアプリケーション開発に取り組もうとする人 - **Webアプリケーションがどのような仕組みで動作しているのか自分で説明できない人** - LESSON1~LESSON5は、Webアプリケーション開発を学ぶ方が押さえるべき内容 - LESSON6~LESSON7は、ある程度Webアプリケーション開発の経験がある方向けに基礎知識を強化するための内容 - ## LESSON1「Webアプリケーションとは何か」 #### デスクトップアプリケーション vs Webアプリケーション | | デスクトップアプリケーション | Webアプリケーション | | -------- | -------- | -------- | | 処理の主体 | 手元のPC | サーバ | | 画面の表示 | OS(Windows, macOS, etc...) | Webブラウザ(Chrome, Safari, etc...) | | インストール | 必要 | 不要 | | 例 | ・Microsoft Word</br> ・Slack | ・[@cosme](https://www.cosme.net/)</br>・[ファッション通販ZOZOTOWN](https://zozo.jp/) | ※オフィスアプリケーションもSlackも現在は、デスクトップアプリがある - [Microsoft Office Online](https://www.microsoft.com/ja-jp/microsoft-365/free-office-online-for-the-web) - [ワークスペースを検索する | Slack](https://slack.com/intl/ja-jp/workspace-signin) ## LESSON2「Webはどのように発展したか」 #### wwwの誕生と普及 - 世界中のコンピュータを結ぶインターネット - 簡単に言えば、世界中のコンピュータを相互に接続し、通信できるようにしたネットワーク網 - 電話のようなもの - 電話では、音声信号のやりとりしかできない - インターネットでは、電子メール, Webサイトの閲覧, 画像や映像の送受信など、さまざまな情報を世界の裏側まで送ることができる - インターネット普及の立役者・World-Wide WebとMosaic - 1969年(50年前くらい?)にインターネットの原型が誕生 - 誕生したとて、20年近くは大学や研究機関の関係者など、一部の限られた人だけが利用するものだった - インターネットを利用するためのコンピュータやネットワーク資源が現在に比べて非常に高価だったから - 利用用途が電子メールの交換やファイル共有といった比較的地味なものが中心で、一般人にとっては興味が向かないものだったから - wwwの誕生 - 誕生経緯 - CERNという原子核研究機構で、実験結果を全世界の研究者で共有しようとなった - 電子メールやファイル転送では、どうにも使い勝手悪かったらしく、もっとよい方法を試行錯誤 - ある研究者がまず研究成果をHTMLと呼ばれる統一された形式で表現することを考えた - 少しずつHTMLの仕様が固められ、今にいたる - Hyper Textと呼ばれる仕組みは、かなり画期的だった - ハイパーテキストでは、Hyper Linkというコンピュータに理解できる形式で記述されているので、瞬時に参照先の文章(関連論文など)を、ネットワーク経由で簡単に閲覧できるようになった - ネットワーク上でリンクされたハイパーリンクの繋がりが、あたかも蜘蛛の巣のように見えることから、Word-Wide Webと名付けられる ---------------------------- ## LESSON2「Webはどのように発展したか」 #### Webを支える技術の発明 - WebサーバとWebクライアント - Webサーバの例 - Apache HTTP Server - Webクライアントの例 - IE, Firefox ```mermaid sequenceDiagram participant クライアント(お客様) participant サーバ(仕える人) クライアント(お客様)->>サーバ(仕える人): HTMLください！(要求) サーバ(仕える人)->>クライアント(お客様): はい、お求めのHTMLです！(応答) ``` - URLとは...インターネット上のコンテンツを一意に指定するための仕組み - これが無いと欲しい情報の特定ができない - 工藤正隆を探せ⇒何人もいてどれを探しているかわからない - URLの構成 - http://www.littleforest.jp/webtext/index.htmlを例とする - http - スキーム - www.littleforest.jp - ホスト名 - webtext/index/html - パス名 - スキームとは...リソースを取得するための方法 - https - ftp - file - ホスト名とは...リソースが存在するホスト（コンピュータ）名 - ネットワークに接続されてほかのコンピュータからの要求を受け取り、処理した結果を返すようなコンピュータを一般的に「ホストコンピュータ」と呼ぶ - 最近ではネットワークに接続されたコンピュータでも「ホストコンピュータ」と呼ぶ - ホスト名の構成 - www - ローカル名 - 自由に決められる - littleforest.jp - 親ドメイン名 - 勝手に決めてしまうとインターネット上の一意性が失われるので、指定された団体が管理している - 確かにドメイン購入とかあるもんな - 「www.littleforest.jp」というホスト名はどういう意味？ - jp - 日本の - littleforest - littleforestという組織の - www - WWWサーバというコンピュータ - URLを利用することで、ドメイン⇒コンピュータ⇒ディレクトリ⇒ファイル名というように階層的にリソースの位置を指定することができる - 通信プロトコル(HTTPとか)について - 携帯もない時代は狼煙を使っていた - 狼煙の意図は共通か？ - 敵の襲来なのか - 食料になる動物を見つけたのか - モールス信号みて何言ってるかわかる？俺はわからんw - 相手と何らかの情報をやりとりするには、事前にこのような取り決めが重要になる - コンピュータ同士の通信に使用されたのが通信プロトコル - HTMLの転送に適したプロトコルであるHTTPが考案された ### CGIの誕生 - 今までは静的コンテンツについて触れてきた - もともと用意されていたコンテンツをクライアントからのリクエストに応じて返すのが仕事 - どんなに有益な情報でも内容が毎回同じだと飽きが来る - より多くの人に差異とを見てもらうために、常に新たなコンテンツを提供する必要がある - コンテンツを常に更新していくのは人間なので非常に大変 - 最初はアクセス数が表示される、アクセスした時刻が表示されるレベルで動的にしていった - Webサーバ上で動作するプログラムを作成し、プログラムが人間の代わりにコンテンツを生成すればいい - 動的コンテンツと呼ばれている - Webサーバとコンテンツを生成するプログラムとの連携をするために考え出されたのが、CGI(Common Gateway Interface) - CGIが普及することで... - 掲示板システムやショッピングサイトといった便利な機能を提供するサイトが実現できるようになった - 世界中の人々が利用する巨大メディアを作成できるようになったのは、CGIが発展を陰で支えたからだ ### サーブレットの登場 - CGIを利用したWebアプリケーションが普及するにしたがって、新たな問題が生じた - 開発言語の問題 - Perlが使用されていたが、大規模なアプリケーションの開発に向いてなかった - 当時OOPも取り入れられてなかった - 性能の問題 - Webブラウザからリクエストが届くたびに、CGIを通してプロセスを起動していた - 数十万単位のリクエストを捌けなくて、なかなか画面が表示されないと苦情殺到 - Java登場 - OOPをサポートしているから大規模システムの開発がしやすい - ネットワーク通信やセキュリティなど重要性が増していた技術が標準でサポートされていた - サーブレットというWebアプリケーション開発をサポートするための機能が提供されるようになった - サーブレットとはq - CGIを経由して起動するPerlやC言語のJava版に相当する - CGIのように新たなプロセスを毎回起動する必要がなく、Webサーバと同じプロセスの中でコンテンツを生成するプログラムが動作する - Javaでアプリケーション開発することの利点 - 直接機械語にコンパイルするC言語と違ってJavaVMと呼ばれる仮想的なコンピュータの言語にコンパイルして実行するので、Windows, MacOS, Linuxなど異なるプラットフォームで動作する - ただ、Webコンテナの設置がWebサーバのみと比べて少し難しいことやOOPの知識が必要なことから個人開発では敬遠されていた - すみわけとして、以下のような感じだった - 企業ではJava/サーブレット - 個人ではCGI/Perl ### JSPの誕生 - サーブレットの問題点 - 画面のデザインを変更する度にプログラムの変更が発生すると作業効率が悪い - プログラム破壊もありえる - 複雑なデザインが施されたHTMLページの場合、Webデザインの知識が必要になる - デザインの知識を持っている人は、プログラミングの知識がない可能性もある - サーブレットによって出力されるHTMLが想像しにくい - JSPの誕生 - 出力されるHTMLに近い形で記述できる - JSP内部に書かれたJavaプログラムを、スクリプトレットと呼ぶ - 開発者はJavaコード、WebデザイナはHTMLというように - アプリケーション開発の分業が可能になった - サーブレット vs JSP - サーブレットはJavaコードの中にHTMLを埋め込む - JSPはHTMLの中にJavaコードを埋め込む Amazonとか銀行口座へ振込や預金確認ができるサービスなど大規模なアプリケーションが開発されるようになってきた。ゼロから作るの大変...コード量えぐいて...時間かかるし... ### Webアプリケーションフレームワークの誕生 - 効率よく開発するには、「再利用」 - よく利用される処理はライブラリと呼ばれるプログラム部品として整備され利用される - 再利用できる部分を増やしていこうぜ - フレームワーク ### まとめ - 研究者同士の情報共有が大変 ⇒ Web誕生 - 動きねぇとつまんない ⇒ CGL, サーブレット, JSPの誕生 ## LESSON3「HTTPを知る」 ### HTTPの知識はなぜ必要か - 通信プロトコル - 情報の伝達手段 - 情報の意味付け - 狼煙 - 「煙」によって情報を伝達 - その煙には「敵の襲来」という意味付け - WWWの世界でHTMLをやり取りするために定められたプロトコルがHTTP ![](https://i.imgur.com/DpNXfhp.jpg) - HTTPリクエストを覗く - HTTPリクエスト・ライン - HTTPリクエストの中で一番重要 - 空白で区切られた3つの文字列から成り立つ - 1行目の部分 - GET / メソッド - リクエストの種類 - GETならURIで指定した情報を送ってください - https://www.littleforest.jp/webtext/http/index.html / URI - 「何が欲しいのか」を表す - URLとURIは何が違うのか - URIはURLとURNを内包した概念 - URLは位置を示す - URNはインターネット上に存在するリソースに対しての統一的な名前 - リソースが別のサーバに引っ越ししても識別できる - URLは位置を示すものなので、リソースが別のサーバに引っ越ししてしまうと、居場所がわからなくなる - URLもURIも大体同じ - HTTP/1.1 / HTTP バージョン - バージョンによって以下が変わる - 利用できるメソッドの種類 - リクエスト・ヘッダの種類 - メッセージ・ヘッダ - リクエストの付加的な情報を表す - <フィールド名> : <フィールド値> - 2行目以降の部分 - \*/* Accept - Webクライアントが受け取ることのできるデータの種類を表す - データの種類はContent-Typeという形式で表す - テキストファイルなら、「text/plain」 - JPEG画像なら、「image/jpeg」 - \*/*は - 任意の情報を受け取る時に利用する - IE7では利用できないが、IE8では利用できる - 他のクライアントでも無理なものがあると思う - <details><summary>なんでAcceptフィールドがHTTPリクエストに必要なの？</summary>クライアントによってはテキストのみで表現し、JEPGやGIFは不要という場合もあるので、そのようなケースでは不要な情報をWebサーバ側が送信しなくて済む</details> - ja-JP / Accept-Language - Webクライアントが受け取ることのできる自然言語の種類を表す - 自然言語とは人間が使用する言語のこと - 同じコンテンツの英語版と日本語版が存在する場合、Accept-Languageフィールドによって、Webサーバがクライアントの使用する言語に合わせたコンテンツを返すことができる - Mozilla/4.0 ... / User-Agent - 利用しているWebブラウザの種類やバージョンを表す - Webサーバがアクセスしてきたクライアントの種類に応じて適切なコンテンツを返すために利用される - 利用例 - PCと携帯電話の両方から閲覧できるサイトがある - このようなサイトではWebサーバがUser-Agentフィールドを参照して、携帯電話からのアクセスの場合は携帯電話用のHTMLを返す - サイトの利用者がどのようなブラウザを利用しているか統計をとるのに利用されたりもする - www.littleforest.jp / Host - リクエストの送信先ホスト名やポート番号を表す - HTTPレスポンスを覗く - ステータス・ライン - メッセージ・ヘッダ - メッセージ・ボディ - HTTPは1回で1つのリソースを取得 - ファイル名を省略した場合のリクエスト ### WebブラウザとWebサーバの通信をのぞいてみよう ### 情報はどうやってインターネットの大海原を超えるのか ### Webサーバへの要求をどのように伝えるか ### まとめ