最初に知りたい「 Web アプリの仕組み」

Transcript

1. プログラミング学習を始める前に 読みたい「Webアプリの仕組み」
2. Web application / 2026 ブラウザを開いて URL を入力してから 画面が表示されるまでの流れを 説明できますか？
3. Web application / 2026 ヒント クライアント HTML JavaScript アプリケーション OS（Linux） サーバー CSS HTTP / HTTPS データベース URL
4. Web application / 2026 Webアプリは、通信の往復でできている ブラウザは依頼を送り、サーバー側が必要なデータを集め、結果を返す。 クライアント HTTPSリクエスト ブラウザの表示・操作 要求を処理する 応答 出典: MDN: Client-server overview サーバー
5. Web application / 2026 URLの各部分を切り分けて、それぞれの名前 や役割を説明できますか？ https://example.com/tasks?done=true#today
6. Web application / 2026 URLは、依頼の手がかりを並べたもの どこへ、何を、どの条件で表示するかを分けて書く。 https:// example.com /tasks ?done=true #today スキーム 通信方式 ホスト 相手の名前 パス 資源の経路 クエリ 条件 フラグメント ページ内の位置 出典: MDN: URL
7. Web application / 2026 ホスト名とパスは、送り先と依頼内容を分ける https://example.com/tasks の example.com は送り先の名前、/tasks は同じ 送り先で求める資源や処理の経路です。 ブラウザ https://example.com example.com サーバー（送り先） /tasks 同じサーバー内の経路 /profile ホスト名（ここではドメイン名）: どのWebサーバーへ依頼するか パス: /tasks や /profile のように要求先を選ぶ。物理ファイルとは限らない 出典: MDN: What is a URL?
8. Web application / 2026 そういえば、DBはどこで登場する？
9. Web application / 2026 もう一つ知っておきたい、三層アーキテクチャ 画面の向こうには、三つの役割がある。 クライアント サーバー 例：Google Chrome 例：Node.js DB 例：PostgreSQL
10. Web application / 2026 Webアプリを開発し、ユーザの問 題を解決する ユーザが何に困っているかを知る Webアプリを開発する ユーザ（顧客）の問題を解決する AIの台頭で、Webアプリを理解・開発するスキルはコモディティ化していく。だから こそ、ユーザ（顧客）の問題を解決する技能が、より強く求められる。
11. Web application / 2026 Webアプリとは何か、 説明できますか？ Webアプリエンジニアを目指すなら、まずは自分の言葉で説明できること。 何を学ぶのか分からなければ、 学び方も分からない。 Webアプリを理解することが、勉強と仕事の出発点になる。
12. Web application / 2026 あともう一個
13. Web application / 2026 クライアントもサーバも、 コンピュータでできている アプリケーションはOSの上で動き、OSがハードウェアとの橋渡しをする。 クライアント アプリケーション Google Chrome OS macOS・Windows・Linux ハードウェア CPU・メモリ HTTPリクエスト HTTP応答 サーバー アプリケーション Node.js OS Linux ハードウェア CPU・メモリ
14. OS（Linux）も知っておきたい Web application / 2026 Unixコマンド ファイルとプロセスを扱う基礎。 pwd # 現在の場所 ls # 一覧を見る cd # 移動する mkdir # ディレクトリを作る cp # コピーする mv # 移動・名前変更 cat # 内容を表示する grep # 文字列を探す ps # プロセスを見る rm # ファイルを削除 サーバー作業と環境構築も学んでおきたい。 出典: OpenSSH SSH 遠隔のサーバーへログインして操作する。 $ ssh user@example.com # 接続先のサーバーで操作 $ pwd /home/user
15. Web application / 2026 まとめ
16. Web application / 2026 まとめ: 学ぶべきWeb技術キーワード 分野 フロントエンド 技術キーワード HTML / CSS React HTTP通信（Fetch API・Axios） JavaScript・TypeScript Next.js バックエンド サーバサイド言語 （Node.js・Go・Python・Ruby・ PHPのいずれか） REST API データベース （MySQL・PostgreSQLのどちらか） クラウド・インフラ AWS（EC2 / ECS・S3・RDS） CI/CD（GitHub Actions） Docker Terraform 開発ツール Git / GitHub Codex / Claude Code
17. Web application / 2026 できることが増えるのを、楽しもう。 学ぶことはたくさん。 でも、AIも一緒に学ぶ力になってくれる。 楽しみながら、一緒に学びましょう。