LLM注意
Claude Opus 4.6のチャットさんとの勉強会まとめです。
大まかな枠組みの話
Webアプリとは
インストールするアプリとの比較。ブラウザで接続するだけで使えるアプリ。
Webサイトとの比較。閲覧者が何かしらの操作・入力を行うことで反応が返ってくるもの。
グラデーショナルに、Webサイト的（閲覧者の操作の余地少ない）←→Webアプリ的（閲覧者の操作が多い）、というイメージ。
静的・動的サイトとは
静的サイトでは閲覧者の手元のブラウザ（クライアント）に、サイトを置いてあるサーバーから「動きの定義すら含んだサイトの完成品一式」を配送する。
この場合、動きについて定義できるのは、JavaScriptくらいになる。
動的サイトでは、閲覧者の手元のブラウザ（クライアント）に届ける前に、サイトを置いてあるサーバーで「閲覧者の情報に応じたサイトの部品を組み立てる作業」が発生する。
こちらも組み立てた結果、Webサイトになったり、Webアプリになったりする。
こちらのサイトの部品を組み立てるための言語はJavaScriptに限らずいっぱいある。
フロントエンド・バックエンドとは
フロントエンドはクライアント側の話。
閲覧者が実際に目にする部分。Discord botとかなら多分、Discordに見えている応答とかなのだろう。
Webアプリであれば、CSSで修飾され、JavaScriptで動く、HTMLの世界。
今回のWebアプリ講座では、静的サイトのWebアプリに挑戦することが第一目標になるので、まさにフロントエンドの話となる。
バックエンドはサーバー側の話。
閲覧者からは見えない仕組みの部分。データベースとかもここ。
エンジニアの話
「フロントエンドエンジニア」、「バックエンドエンジニア」という職種があるくらい、それぞれ独立した専門領域として成立しているらしい。
両方やっちゃう凄い人は「フルスタックエンジニア」とのこと。
Webアプリのフロントエンドの仕組み
HTMLファイル
「ここに、こういうタグをつけた、こういう本文を置きます」
基本的に何でもかんでもタグで囲われている。
ここからここまで、このタグで定義した、こういう内容のものを配置しますよ、と書くための形式。
表示ではない。そこはCSSとJavaScriptで変化するので、表示ではない。
CSSもJavaScriptもタグを目印に仕事をするので、ここを如何に（構造的な意味で）しっかり作るかが全ての肝。
CSS
「このタグがついていたら、こんな見た目にします」
見た目の定義に必要。
<style> タグでHTMLファイルの中に入れ込むこともできるが、余りに長くなったり、複数のHTMLファイルで使い回すとなると、外部ファイルとして.css形式で放り出されがち。
JavaScript
「こういう操作をされたらこうします、という動きを指定します」
（タグを目印にすると範囲を限定しやすいです）
今回学ぼうとしている範囲。
<script>タグでHTMLファイルの中に入れ込むこともできるが、（中略）、外部ファイルとして.js形式で放り出されがち。
HTML5について
videoやcanvasタグが登場しているが、それは動画や描写領域を配置するという定義までで、細かい制御がしたければ結局のところJavaScriptが必要とのこと。
今後出てくるかもしれない複雑な話
フレームワーク
これを使うととっても便利らしいけれど、素のJavaScriptではないため、ビルドという翻訳作業が必要らしい。
ビルド不要な素のJavaScriptであれば、レンタルスペースレベルでも十分動く。
ビルドが必要になると、ビルドしてくれる何か（環境）が必要。
チャットさんとかなり頑張ってみたけれど、2026/04/01時点での理解はここまで。
↑何と、伺か知識が理解の役に立ちそうという（同日追記）
里々向けに書く全角のトーク→コンポーネント（フレームワークの部品で、開発者が書く部分）
里々→フレームワーク（開発者が書いたコンポーネントを処理する仕組み）、かつビルド（実際のプログラミング言語への変換）もしてくれている
さくらスクリプト→素のJavaScript
SSP→ブラウザ
……と、いうことらしいです。
ライブラリ
外から持ってこられる便利部品。
フレームワーク共々、package.jsonというファイルで定義するようだ。
Node.js
わーさんの偏見において、バージョン管理の大変さによりよく初心者鯖缶が泣かされることで有名（？）なNode.jsは、本来ブラウザでしか動かないJavaScriptをブラウザの外で動かすための仕組み。
Claude Codeさんがよく使ってるなぁと思ったら、ブラウザを開かなくてもJavaScriptの確認ができて、ビルドにも使われるからなんだとか。