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

@X-bit, Inc. All rights reserved   Index 1. 自己紹介 2.
目的 3. 従来型のWebアプリケーション 4. SPAへの進化 5. Web API 6. まとめ

@X-bit, Inc. All rights reserved   自己紹介 ❏ 那仁満徳(なりんまんど)
❏ 23卒でWebエンジニア3年め ❏ 2024/7月からmetricsチームにJoin✨ ❏ 学生時代プログラミングスクールのメンターをしていた ❏ 東京足立区→神奈川県川崎→埼玉県川口 ➢ https://www.notion.so/xbit/_Mando-Kutsuna-Narin-a5346b22a1924217a093be82f8c103fd

@X-bit, Inc. All rights reserved   - 業務をやる中、Web技術の知識をさらに補強したいと思ったのがきっかけ - Web技術の歴史を理解できる
- サンプルアプリを通して歴史を追随できる [改訂新版]プロになるためのWeb技術入門という本の紹介 4 ￥3,960 511p

@X-bit, Inc. All rights reserved   6 使用ツールの理解ブラックボックス化されがちなフレームワークやライブラリが何を
実現しているのか？楽にしてくれているのか？を理解して利用できる。デバッグで見るべきポイントが分かるようになる。新技術のキャッチアップ技術の歴史を大まかに把握することができる。過去の積み重ねで作られている新技術も、違いだけを把握すれば良くなる。

@X-bit, Inc. All rights reserved   8 リクエスト GET /todos
レスポンス HTTP/1.1 200 OK … <!DOCTYPE html> … クライアントサーバーレンダリングエンジンによってtodo一覧が描画される

@X-bit, Inc. All rights reserved   9 GET todos todo一覧の取得
POST todo todoの追加→GET todos HTMLを生成するのはサーバー側の仕事だった従来のWebアプリケーションの問題点は画面遷移が多く、遅いこと項目が追加されほんの少しの変化しかないのに画面全体を取得&描画し直す必要があった 2000年頃

@X-bit, Inc. All rights reserved   11 Ajaxの登場 - HTMLで全体を再読み込みせずに、画面の一部だけを更新
- デスクトップアプリケーションと同等の操作性を実現ドラッグ操作を検知して地図を動かし、ずれた分だけを取得 →JavaScript 2005年頃

@X-bit, Inc. All rights reserved   12 JavaScript - ブラウザを制御するための言語としてNetscape
Navigatorに搭載されたのが起源 - ブラウザに内蔵されているJavaScriptエンジンによって実行 - DOM操作やイベント処理ができる getElementById 1995年

@X-bit, Inc. All rights reserved   13 JavaScript - 当初は互換性の問題があった。MicroSoftのJScript。ブラウザ戦争
- Netscape社がEcma InternationalにJavaScriptを提出し、標準化が進められる - ECMAScript - Chromeに搭載されたV8が大幅な高速化を実現 2008年

@X-bit, Inc. All rights reserved   14 JavaScriptの台頭により、一つの画面上で非同期通信ができるようになった - HTTPがAPI化していき、JSONを返すように
- XMLよりシンプルしかし、純粋なSPAにも問題が - 検索エンジンと相性が悪い - JavaScriptが実行されないと初期のHTMLは空のまま - 初期表示の重さ - 多くのJavaScriptコードを配信サーバーから読み込む必要がある - 特にtoCサイトでは数秒の遅延でユーザーの離脱が無視できない

@X-bit, Inc. All rights reserved   16 History API -
当初のSPAでは単一のURL上でフラグメント(#)を利用して異なるビューを管理 - HTML5からHistory APIが登場 - アドレスバーのURLや履歴を操作し、擬似的な画面遷移を実現 - JavaScriptで本来の画面遷移を禁止しルーティング→e.preventDefault(); - 再読み込みせずURLを切り替え、DOM操作で表示内容を更新 - 特定のページをブックマークできたり、「戻る」ができるようになった - Vue Routerなどのライブラリで利用されている 2014年

@X-bit, Inc. All rights reserved   17 SSRへの回帰 - 初期表示のみ、HTMLをサーバーで生成するようにした
- 初期表示以降は、SPA(with History API)と同じ動作をする - 画面描画の処理がクライアントとサーバーに分散して面倒だが、サーバーで JavaScriptを扱えるようになってきて流行した - Next.js, Nuxt.js History APIとSSRの合わせ技によって →検索エンジンと相性が悪い問題と初期表示の重さ問題に対応💡

@X-bit, Inc. All rights reserved   19 初期のネットワークごしAPI - 離れた場所の繋がっているコンピュータプログラムを実行する
- 遠隔呼び出しをし合う分散システムは昔から研究されてきた - RPC, CORBA - Web上でRPCを実現するSOAPが登場 - HTTP上でXMLでやり取り 2000年頃

@X-bit, Inc. All rights reserved   20 RESTの登場と論争 - SOAPは複雑で各社独自の仕様をどんどん作っていってしまう
- そんな中Web APIの一つの指針を示したのが、RESTというアーキテクチャ - Roy Fieldingが学生時代に考案 - シンプルさが受けて徐々に広まっていく RESTをWeb APIに当てはめて具現化したものをリソース指向アーキテクチャ - URLによってリソースを示す=アドレス可能性 - リソース同士辿ることができる=接続性 - 何をしたいかをHTTPメソッド、操作の結果をHTTPステータスで表現=統一インターフェース - 一度でほしい情報が手に入る=ステートレス - サーバーに状態を持たせないことで台数を増やせる 2000年

@X-bit, Inc. All rights reserved   25 - WWWの始まり -
HTMLの歴史 - ネットワーク - セッションとユーザ管理(Cookieなど) - サーバープッシュ技術(リアルタイム通信) - Server-sent events - WebSocket - セキュリティ - 文字コード - 構造化データ - CSV, XML, JSON, YAML - etc,,,

@X-bit, Inc. All rights reserved   26 使用ツールの理解ブラックボックス化されがちなフレームワークやライブラリが何を実現している
のか？楽にしてくれているのか？を理解して利用できる。デバッグで見るべきポイントが分かるようになる。新技術のキャッチアップ技術の歴史を大まかに把握することができる。過去の積み重ねで作られている新技術も、違いだけを把握すれば良くなる。 ❖ SSRを使うべき？SPAで十分？ ➢ 商業アプリなら、SEO対策と初期表示の重要性からSSRを選択すべきかな？ ➢ 業務系アプリであれば、SEOと初期表示のデメリットが小さいのでSPAのシンプルな構成でアリかも？ ❖ GraphQLってどんなものだろう？ ➢ Restのデメリットを補完するもの。HTTPをAPIコールの窓口としてのみ利用まとめ

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

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

m-narin

More Decks by m-narin

Featured

Transcript

@X-bit, Inc. All rights reserved   プロになるためのWeb技術入門那仁満徳 2024/2/21

@X-bit, Inc. All rights reserved   Index 1. 自己紹介 2.

@X-bit, Inc. All rights reserved   自己紹介 ❏ 那仁満徳(なりんまんど)

@X-bit, Inc. All rights reserved   - 業務をやる中、Web技術の知識をさらに補強したいと思ったのがきっかけ - Web技術の歴史を理解できる

@X-bit, Inc. All rights reserved   読んで嬉しいこと

@X-bit, Inc. All rights reserved   6 使用ツールの理解ブラックボックス化されがちなフレームワークやライブラリが何を

@X-bit, Inc. All rights reserved   従来型のWebアプリケーション

@X-bit, Inc. All rights reserved   8 リクエスト GET /todos

@X-bit, Inc. All rights reserved   9 GET todos todo一覧の取得

@X-bit, Inc. All rights reserved   SPAへの進化

@X-bit, Inc. All rights reserved   11 Ajaxの登場 - HTMLで全体を再読み込みせずに、画面の一部だけを更新

@X-bit, Inc. All rights reserved   12 JavaScript - ブラウザを制御するための言語としてNetscape

@X-bit, Inc. All rights reserved   13 JavaScript - 当初は互換性の問題があった。MicroSoftのJScript。ブラウザ戦争

@X-bit, Inc. All rights reserved   14 JavaScriptの台頭により、一つの画面上で非同期通信ができるようになった - HTTPがAPI化していき、JSONを返すように

@X-bit, Inc. All rights reserved   15 https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-indu stry-benchmarks/ 表示速度とユーザーの離脱数

@X-bit, Inc. All rights reserved   16 History API -

@X-bit, Inc. All rights reserved   17 SSRへの回帰 - 初期表示のみ、HTMLをサーバーで生成するようにした

@X-bit, Inc. All rights reserved   HTTPのAPI化

@X-bit, Inc. All rights reserved   19 初期のネットワークごしAPI - 離れた場所の繋がっているコンピュータプログラムを実行する

@X-bit, Inc. All rights reserved   20 RESTの登場と論争 - SOAPは複雑で各社独自の仕様をどんどん作っていってしまう

@X-bit, Inc. All rights reserved   21 再注目されるRPCスタイル Restに沿ったAPIだと、通信のN+1問題が発生し得る=オーバーフェッチング detail

@X-bit, Inc. All rights reserved   22 GraphQL どのような情報を取得したいかをクライアントが柔軟に指定できる 2015年

@X-bit, Inc. All rights reserved   23 GraphQL - HTTPをAPIコールの窓口のみとして使っている

@X-bit, Inc. All rights reserved   本書には他にも色々な話題があったよ

@X-bit, Inc. All rights reserved   25 - WWWの始まり -

@X-bit, Inc. All rights reserved   26 使用ツールの理解ブラックボックス化されがちなフレームワークやライブラリが何を実現している