diff --git a/.gitignore b/.gitignore index 3d5b5623..c3b300d1 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,8 @@ chat-gpt-api/sample/log node_modules -.cache \ No newline at end of file +.cache + +# Webアプリケーション概論の講義メモ（台本・設計判断） +# 手元でだけ見るもの。スライド本体は about-webapp/slide.md +about-webapp/NOTES.local.md diff --git a/about-webapp/imgs/3tier-cs-system.png b/about-webapp/imgs/3tier-cs-system.png deleted file mode 100644 index 81549bc0..00000000 Binary files a/about-webapp/imgs/3tier-cs-system.png and /dev/null differ diff --git a/about-webapp/imgs/3tier-data-flow.drawio.png b/about-webapp/imgs/3tier-data-flow.drawio.png deleted file mode 100644 index 7ae2d743..00000000 Binary files a/about-webapp/imgs/3tier-data-flow.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/aws.drawio.png b/about-webapp/imgs/aws.drawio.png deleted file mode 100644 index a719b7b9..00000000 Binary files a/about-webapp/imgs/aws.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/delivery-actor.drawio.png b/about-webapp/imgs/delivery-actor.drawio.png deleted file mode 100644 index dc1e222a..00000000 Binary files a/about-webapp/imgs/delivery-actor.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/deno-deploy.drawio.png b/about-webapp/imgs/deno-deploy.drawio.png deleted file mode 100644 index 89064966..00000000 Binary files a/about-webapp/imgs/deno-deploy.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/fig-3tier.svg b/about-webapp/imgs/fig-3tier.svg new file mode 100644 index 00000000..2990447c --- /dev/null +++ b/about-webapp/imgs/fig-3tier.svg @@ -0,0 +1,35 @@ + + + + + + + + サーバー + + + + 画面 + プレゼンテーション層 + + + + + + + + 処理 + アプリケーション層 + + + + + + + + 保存 + データ層 + + + diff --git a/about-webapp/imgs/fig-comment-flow.svg b/about-webapp/imgs/fig-comment-flow.svg new file mode 100644 index 00000000..a22fa2a6 --- /dev/null +++ b/about-webapp/imgs/fig-comment-flow.svg @@ -0,0 +1,78 @@ + + + + + + サーバー側 + + + + + + + + + + + + + + + + + 処理 + + + + + 保存 + + おもしろい！ + + あなたの画面 + + + + + + + + + おもしろい！ + + ほかの人の画面 + + + + + + + + + おもしろい！ + + 1 送る + + + + 2 しまう + + + + 3 出す + + + + 4 見せる + + + + + diff --git a/about-webapp/imgs/fig-data-kv.svg b/about-webapp/imgs/fig-data-kv.svg new file mode 100644 index 00000000..7a11cf9c --- /dev/null +++ b/about-webapp/imgs/fig-data-kv.svg @@ -0,0 +1,27 @@ + + + + + + サーバー + + + + + Deno KV + + + おもしろい！ + + + 神回だった + + + ここ好き + + 動かしているのは Deno + + みんなのデータがここに集まる + + diff --git a/about-webapp/imgs/fig-html-css-js.svg b/about-webapp/imgs/fig-html-css-js.svg new file mode 100644 index 00000000..b5bfc82e --- /dev/null +++ b/about-webapp/imgs/fig-html-css-js.svg @@ -0,0 +1,37 @@ + + + + + HTML + + + + + + + 骨組み + + ＋ + + CSS + + + + + + 見た目 + + ＋ + + JavaScript + + + + + + + + 押したら動く + + diff --git a/about-webapp/imgs/fig-if-not-split.svg b/about-webapp/imgs/fig-if-not-split.svg new file mode 100644 index 00000000..995a128f --- /dev/null +++ b/about-webapp/imgs/fig-if-not-split.svg @@ -0,0 +1,62 @@ + + + + + + + サーバーがなかったら + + + + + + + + + + + + + + + + + + + 自分 + + + + ほかの人 + + ほかの人の画面に出てこない + + 処理・保存も画面側にあったら + + + + + + + + 高評価 3 + + + + 書き換え + + + + + + + + 高評価 99999 + + いくらでも増やせる + + diff --git a/about-webapp/imgs/fig-js-both.svg b/about-webapp/imgs/fig-js-both.svg new file mode 100644 index 00000000..17822c55 --- /dev/null +++ b/about-webapp/imgs/fig-js-both.svg @@ -0,0 +1,32 @@ + + + + + つかうもの + 動かす環境 + + + + + + + + + + + + + + 画面 + 処理 + 保存 + + HTML・CSS・JavaScript + JavaScript + Deno KV + + ブラウザ + Deno + + diff --git a/about-webapp/imgs/fig-native-vs-web.svg b/about-webapp/imgs/fig-native-vs-web.svg new file mode 100644 index 00000000..25b99095 --- /dev/null +++ b/about-webapp/imgs/fig-native-vs-web.svg @@ -0,0 +1,58 @@ + + + + + + + + スマホアプリ + + + + + + アプリストア + + + + + + + + + + + + + + + + + + + Webアプリケーション + + + + + + Webサーバー + + + + + + + + + + + + + + + + + + diff --git a/about-webapp/imgs/fig-other-stacks.svg b/about-webapp/imgs/fig-other-stacks.svg new file mode 100644 index 00000000..84b7d23d --- /dev/null +++ b/about-webapp/imgs/fig-other-stacks.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + 画面 + 処理 + 保存 + + + React + + Vue + + Hono + + NestJS + + PostgreSQL + + MongoDB + + 1つで2役こなすものもある + + + + + + Next.js + + Nuxt + 画面 ＋ 処理 + + Firebase + + Supabase + 処理 ＋ 保存 + + + 動かす環境 + + Deno Deploy + + Cloudflare Workers + + diff --git a/about-webapp/imgs/fig-runtime.svg b/about-webapp/imgs/fig-runtime.svg new file mode 100644 index 00000000..14c215fc --- /dev/null +++ b/about-webapp/imgs/fig-runtime.svg @@ -0,0 +1,42 @@ + + + + + + クライアント + ブラウザ + 画面を動かす + + + + + + + サーバー + + + + + + + + + + + + Deno + 処理と保存を動かす + + diff --git a/about-webapp/imgs/fig-site-vs-app.svg b/about-webapp/imgs/fig-site-vs-app.svg new file mode 100644 index 00000000..bff1089b --- /dev/null +++ b/about-webapp/imgs/fig-site-vs-app.svg @@ -0,0 +1,75 @@ + + + + + + + + Webサイト + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 誰が見ても同じ + + + Webアプリケーション + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 人によって違う + + diff --git a/about-webapp/imgs/fig-split.svg b/about-webapp/imgs/fig-split.svg new file mode 100644 index 00000000..0c088ffe --- /dev/null +++ b/about-webapp/imgs/fig-split.svg @@ -0,0 +1,19 @@ + + + + + + 画面 + ユーザーから見える + + + + + + + 処理 + 保存 + ユーザーから見えない + + diff --git a/about-webapp/imgs/fig-summary.svg b/about-webapp/imgs/fig-summary.svg new file mode 100644 index 00000000..61ecbf9a --- /dev/null +++ b/about-webapp/imgs/fig-summary.svg @@ -0,0 +1,39 @@ + + + + + + クライアント + ブラウザが動かす + + + 画面 + HTML・CSS + JavaScript + + フロントエンド + + + + + + + サーバー + Deno が動かす + + + 処理 + JavaScript + + + + + + + 保存 + Deno KV + + バックエンド + + diff --git a/about-webapp/imgs/fig-thread.svg b/about-webapp/imgs/fig-thread.svg new file mode 100644 index 00000000..169bee1f --- /dev/null +++ b/about-webapp/imgs/fig-thread.svg @@ -0,0 +1,50 @@ + + + + + + + + # 授業スレ + + + + + mori + 16:05 + Deno むずかしい + + + それな！ + 1 + + + 😭 + 2 + + + + + + + + + yama + 16:08 + 画面と処理の違いがわからない + + + + + aoki + 16:11 + クライアントってそういう意味だったんだ！ + + + 🙌 + 3 + + + + + + diff --git a/about-webapp/imgs/fig-three-languages.svg b/about-webapp/imgs/fig-three-languages.svg new file mode 100644 index 00000000..89a6bcce --- /dev/null +++ b/about-webapp/imgs/fig-three-languages.svg @@ -0,0 +1,15 @@ + + + + + + HTML + + + CSS + + + JavaScript + + diff --git a/about-webapp/imgs/fig-three-parts-grouped.svg b/about-webapp/imgs/fig-three-parts-grouped.svg new file mode 100644 index 00000000..c8a2bd72 --- /dev/null +++ b/about-webapp/imgs/fig-three-parts-grouped.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + 画面 + 見せる + + + + + + + + + + + + + + + + + + + 処理 + 動かす + + + + + + + + + 保存 + 覚える + + クライアント + ユーザーから見える + + サーバー + ユーザーから見えない + + diff --git a/about-webapp/imgs/fig-three-parts.svg b/about-webapp/imgs/fig-three-parts.svg new file mode 100644 index 00000000..3071e9d0 --- /dev/null +++ b/about-webapp/imgs/fig-three-parts.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + 画面 + 見せる + + + + + + + + + + + + + + + + + 処理 + 動かす + + + + + + + + + 保存 + 覚える + + diff --git a/about-webapp/imgs/fig-two-places.svg b/about-webapp/imgs/fig-two-places.svg new file mode 100644 index 00000000..05ee36e1 --- /dev/null +++ b/about-webapp/imgs/fig-two-places.svg @@ -0,0 +1,39 @@ + + + + + + + + クライアント + + 画面 + + ユーザーから見える場所 + + 送る + + + + 返す + + + + + サーバー + + + 処理 + + + + + + + 保存 + + ユーザーから見えない + + + diff --git a/about-webapp/imgs/fig-youtube-inside.svg b/about-webapp/imgs/fig-youtube-inside.svg new file mode 100644 index 00000000..255b8663 --- /dev/null +++ b/about-webapp/imgs/fig-youtube-inside.svg @@ -0,0 +1,66 @@ + + + + + + + + トップページ + 画面 + + + + + + + + + + + + + + あなたへのおすすめ + + あなたから見えるところ + + 開く + + + + おすすめ + + + + + YouTube の中 + + + + + + + + + + + おすすめを選ぶ + 処理 + + + + + 見る + + + + + + 視聴履歴・高評価 + 保存 + + あなたから見えないところ + + + diff --git a/about-webapp/imgs/fig-youtube-scene.svg b/about-webapp/imgs/fig-youtube-scene.svg new file mode 100644 index 00000000..dc826eee --- /dev/null +++ b/about-webapp/imgs/fig-youtube-scene.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + コメント + + + + おもしろい！ + + + 送信 + + + + diff --git a/about-webapp/imgs/httpserver-withdns.drawio.png b/about-webapp/imgs/httpserver-withdns.drawio.png deleted file mode 100644 index 81ce7236..00000000 Binary files a/about-webapp/imgs/httpserver-withdns.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/httpserver.drawio.png b/about-webapp/imgs/httpserver.drawio.png deleted file mode 100644 index f902465c..00000000 Binary files a/about-webapp/imgs/httpserver.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/jigjp.site.png b/about-webapp/imgs/jigjp.site.png deleted file mode 100644 index d0eb01b2..00000000 Binary files a/about-webapp/imgs/jigjp.site.png and /dev/null differ diff --git a/about-webapp/imgs/smartphone-application-delivery.drawio.png b/about-webapp/imgs/smartphone-application-delivery.drawio.png deleted file mode 100644 index f3160702..00000000 Binary files a/about-webapp/imgs/smartphone-application-delivery.drawio.png and /dev/null differ diff --git a/about-webapp/imgs/web-application-delivery.drawio.png b/about-webapp/imgs/web-application-delivery.drawio.png deleted file mode 100644 index b6c0c5bc..00000000 Binary files a/about-webapp/imgs/web-application-delivery.drawio.png and /dev/null differ diff --git a/about-webapp/slide.md b/about-webapp/slide.md index 3507c2eb..89f85d2b 100644 --- a/about-webapp/slide.md +++ b/about-webapp/slide.md @@ -1,410 +1,387 @@ --- marp: true -theme: uncover paginate: true ---- +size: 16:9 +--- + + + # Webアプリケーション概論 - - - ---- - -### 目次 - -1. Webアプリケーションとは -2. Webアプリケーションの仕組み - 1. Webアプリケーションのシステム構成 - 2. Web開発フレームワーク - 3. Webアプリケーションを公開するためには -3. まとめ -4. 参考文献 - --- -## 1. Webアプリケーションとは - ---- +## この1時間の目標 -### Q. Webアプリケーションとは +
+2週間でつくるWebアプリケーションが
+どんなものなのか、イメージをつかむ！ +
--- -### Q. Webアプリケーションとは +## わからないときは、授業スレへ -**ブラウザ上で動作するアプリケーションのこと** +![](imgs/fig-thread.svg) --- -### Q. Webアプリケーションとは +## 今日は3本立て -**ブラウザ上で動作するアプリケーションのこと** - -↕ - -**各種OS上にインストールして利用するソフトウェア** - -*ネイティブアプリケーション* +1. Webアプリケーションとは**何か** +2. どんな**仕組み**で動いているのか +3. 作るために**必要なもの** --- -### 例えば？ - ---- + -- 動画配信 +
CHAPTER 1
-![height:450](imgs/youtube.png) +# Webアプリケーションとは何か --- -- EC +
+Webアプリケーションとは
ブラウザの中で動くアプリケーション +
-![height:450](imgs/amazon.png) +
+ブラウザ＝ Chrome、Safari、Edge など +
--- - -- 地図 - -![height:450](imgs/google-map.png) +
+スマホの中に入ってる
アプリとのちがいは？ +
--- -- ゲーム - -![height:450](imgs/game.png) +## ちがい① どうやって手元に届くか ---- - -- 表示の動的な変化を伴うホームページ +![](imgs/fig-native-vs-web.svg) -![height:450](imgs/jigjp.site.png) +
+サーバー＝ 頼まれたものを渡してくれるコンピュータ +
--- - -すべて **Webアプリケーション** といえる +
+Webサイトとのちがいは？ +
--- -### インターンの目標 - -### **Webアプリケーションを作る！** +## ちがい② 読むだけか、操作できるか - +![](imgs/fig-site-vs-app.svg) --- - -**Webアプリケーション**は**どんな仕組みで動いている**の？ - ---- - -## 2. Webアプリケーションの仕組み - -- 2-1 Webアプリケーションのシステム構成 - - 2-1-1 Web開発の技術スタック - - 2-1-2 フロントエンドとバックエンド -- 2-2 Web開発フレームワーク - - 2-2-1 フロントエンドフレームワーク - - 2-2-2 バックエンドフレームワーク - - 2-2-3 フルスタックWebフレームワーク -- 2-3 Webアプリケーションを公開するためには - - 2-3-1 コンテンツ配信とは - - 2-3-2 コンテンツ配信の方法 +
+どんなものがある？ +
--- -### 2-1. Webアプリケーションのシステム構成 - -- 2-1-1 Web開発の技術スタック -- 2-1-2 フロントエンドとバックエンド + ---- +### 動画配信 -モダンなWebアプリケーションの構造 -**3層クライアントサーバーシステム** +![height:470](imgs/youtube.png) --- - -![height:270](imgs/3tier-cs-system.png) + ---- - +### ネットショップ -![height:600](imgs/3tier-data-flow.drawio.png) +![height:470](imgs/amazon.png) --- -#### 2-1-1. Web開発の技術スタック + -- 技術スタック - - 開発に用いるフレームワークやツールなどの組合せのこと - - プログラミング言語、動作環境のOS、サーバー、サーバーサイドフレームワーク、サーバーサイドライブラリ、API、クライアントサイドフレームワーク、クライアントサイドライブラリ、クライアント、開発支援ツール、運用支援ツール、etc... +### 地図 ---- - -##### 有名な技術スタック - -- LAMP/WAMP - - Linux/Windows Server, Apache HTTP Server, MySQL, PHP - - 比較的レガシーな構成でWeb上の情報が多い -- MEAN/MERN/MEVN - - MongoDB, Express.js, Anguler/React/Vue, Node.js - - サーバーとクライアントを同じ言語で開発できる +![height:470](imgs/google-map.png) --- -##### LAMPスタック→3層クライアントサーバーシステム + -| LAMPスタック | 3層C/Sシステム | -| ------ | ------ | -| Linux | - | -| Apache HTTP Server | プレゼンテーション層 | -| MySQL | データ層 | -| PHP | アプリケーション層 | +### ゲーム - +![height:470](imgs/game.png) --- +
+これ、ぜんぶ
Webアプリケーション +
-##### Deno/Deno Deployを活用した技術スタックの例 - -**管理するものがDeno Deployとソースのみでシンプル** - -- クライアントサイド - - HTML/CSS/JS (バニラ) -- サーバーサイド - - Deno HTTP Server APIs -- サーバー - - Deno Deploy +
+
動画配信
+
ネットショップ
+
地図
+
ゲーム
+
--- -##### AWSを活用した技術スタックの例 + -**Web上に情報が多くあり利用障壁が低い** +
CHAPTER 2
-- クライアントサイドフレームワーク - - Angular -- クライアントサイド構成 - - Amazon CloudFront - - Amazon S3 -- サーバーサイド構成 - - Amazon API Gateway - - AWS Lambda (Node.jsランタイム) - - Amazon DynamoDB +# どんな仕組みで動いているのか --- -##### Microsoft Azure を活用した技術スタックの例 - -**既存のMicrosoft製サービスと親和性が高い** - -- フルスタックフレームワーク - - Flask + Jinja2 -- サーバー - - Azure App Service (Pythonランタイム) - - Azure SQL Database - ---- +## Webアプリケーションには、3つの役割がある -#### 2-1-2. フロントエンドとバックエンド +![](imgs/fig-three-parts.svg) --- +## この3つ、実は2つに分けられる -これまでに出た単語とほぼ対応する - - -**フロントエンド** = *クライアントサイド* -**バックエンド** = *サーバーサイド* +![](imgs/fig-three-parts-grouped.svg) --- -**フロントエンド** - -- 役割 - - ユーザーに情報を提示する - - ユーザーの操作を処理する -- 例) バックエンドから受け取ったデータの表示 +## Webアプリケーションの仕組み -**バックエンド** - -- 役割 - - フロントエンドが要求した処理を行う - - データの保存や取得を行う -- 例) Webページから送信されたデータの処理 +![](imgs/fig-two-places.svg) --- - -### 2-2. Web開発フレームワーク +## YouTube だと -- 2-2-1 フロントエンドフレームワーク -- 2-2-2 バックエンドフレームワーク -- 2-2-3 フルスタックWebフレームワーク +![](imgs/fig-youtube-inside.svg) --- -#### 2-2-1. フロントエンドフレームワーク - -三大Webフレームワーク (JS系) - -- React -- Vue.js -- Angular - -他にも +## YouTube で、コメントを送ったとき -- Svelte -- Solid -- Lit +![](imgs/fig-youtube-scene.svg) --- -#### 2-2-2. バックエンドフレームワーク +## こう動く -- Express (JS) -- NestJS (JS) -- Spring Boot (Java) +![](imgs/fig-comment-flow.svg) ---- - -#### 2-2-3. フルスタックWebフレームワーク - -- Deno Fresh (JS) -- Django (Python) -- Flask + Jinja2 (Python) -- Ruby on Rails (Ruby) -- Laravel (PHP) +
+保存されることで、ほかの人にも共有できる。 +
--- -### 2-3. Webアプリケーションを公開するためには +## もしも、、、 -- 2-3-1 コンテンツ配信とは -- 2-3-2 コンテンツ配信の方法 +![](imgs/fig-if-not-split.svg) --- +
+だから、2つに分けてある +
-#### 2-3-1. コンテンツ配信とは +![](imgs/fig-split.svg) --- -コンテンツは何らかの方法で配信され -ユーザーがアクセス可能な状態にある必要がある +## 3層クライアントサーバーシステム -- ※ コンテンツ: -　アプリケーションやWebページ、画像、動画など +![](imgs/fig-3tier.svg) --- -アプリケーションをユーザーが利用するには -**ユーザーにアプリケーションを届ける仕組み**が必要 + -![height:450](imgs/delivery-actor.drawio.png) +
CHAPTER 3
---- - -例えば：スマホアプリ -各種アプリストアを通してユーザーに届けられる - -![height:450](imgs/smartphone-application-delivery.drawio.png) - ---- - -**では Webアプリケーション は？** +# 作るために必要なもの --- +## 今回使う言語は、主にこの3つ！ -アプリケーションの実行に必要な情報を -**Webサーバーから配信する**ことでユーザーから利用可能に - -![height:450](imgs/web-application-delivery.drawio.png) - ---- +![](imgs/fig-three-languages.svg) -#### 2-3-2. コンテンツ配信の方法 +
+JavaScript は、画面側でもサーバー側でも使います。 +
--- +## 書いたものを動かすのは -実際の構成の例：Deno Deployを利用する場合 +![](imgs/fig-runtime.svg) -![height:400](imgs/deno-deploy.drawio.png) +
+Deno は、サーバー側で JavaScript を動かすものです。 +
--- -実際の構成の例：オンプレミスの場合 +## 今回つかう技術 - +![](imgs/fig-js-both.svg) -![height:350](imgs/httpserver.drawio.png) +
+画面は ブラウザ、サーバー側は Deno が動かします。 +
--- -より詳細には... +## 画面 は、この3つでつくる -![height:500](imgs/httpserver-withdns.drawio.png) +![](imgs/fig-html-css-js.svg) --- -実際の構成の例：クラウドを利用する場合(AWS) +## 保存 は、Deno KV に -![height:400](imgs/aws.drawio.png) +![](imgs/fig-data-kv.svg) ---- - -## 3. まとめ +
+Deno KV は Deno に入っているデータベースです。 +
--- -- Webアプリケーションとは - - **ブラウザ上で動作するアプリケーションのこと** +## まとめ -- 世の中のWebアプリケーションはどんな仕組みの上で成り立っているのか - - *3層クライアントサーバーシステム* - - *フロントエンドとバックエンド* - - *フレームワーク* - - *コンテンツ配信* +![](imgs/fig-summary.svg) --- -- **これからWebアプリケーションを作っていくために** - - ***まずはDeno Deployで作ってみる*** ←イマココ - - 構成がシンプル - - コンテンツ配信やフレームワークを - 意識しなくていい - ---- + + -*インターンがおわったあと*... - -- フレームワークに挑戦する - - Deno Fresh など -- 静的サイトを作る - - フレームワーク・コンテンツ配信 -- フルスタック開発へ... - ---- +# 質疑応答 -### ようこそ、Webアプリケーションの世界へ +授業スレに来ているものから見てみます！
メンターが空いたタイミングで適宜返信していくので、
授業後に書いてもらっても大丈夫です◎ --- -## 4. 参考文献 +## 参考 -- [ウェブアプリケーションとは? - ウェブアプリケーションの説明 - AWS](https://aws.amazon.com/jp/what-is/web-application/) -- [3層クライアントサーバシステムとは？概要と仕組みを理解する](https://www.learning-nao.com/?p=224) -- [クライアントサイドフレームワークの概要 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction) -- [CDNとは？コンテンツ配信の方法とCDNの仕組み｜コラム｜クラウドソリューション｜サービス｜法人のお客さま｜NTT東日本](https://business.ntt-east.co.jp/content/cloudsolution/column-66.html) +- [ウェブのしくみ（MDN）](https://developer.mozilla.org/ja/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) +- [ウェブアプリケーションとは?（AWS）](https://aws.amazon.com/jp/what-is/web-application/) +- [Web三層構造の図解](https://kitsune.blog/web-system-structure) --- +## Tips -## 4. 参考文献 +![](imgs/fig-other-stacks.svg) -- [サーバーサイドウェブフレームワーク - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks)