README.md

ウェブコンポーネントを利用したSPAの開発手法

この資料は、2025年4月に行う福井高専での出前授業に向けて作成されたものです。
所要時間目安: 360分
筆者: @haruyuki-16278

目的

この資料ではまず、HTML、CSS、JavaScriptの3つの言語について学習します。 その後、まとめて「ウェブコンポーネント」と呼ばれる一連の技術を学習し、これを利用したシングルページアプリケーション(SPAと略します)の開発手法を体験することを目的とします。

準備

この資料は以下の環境が準備されていることを前提に作成されています。
資料中のスクリーンショットなども以下に示す環境で用意されるため、これ以外の環境で資料の学習を進める場合は自力で読み替えてください。

• Chromiumベースのブラウザのうち、以下のいずれか
  • Google Chrome
  • Microsoft Edge
• Visual Studio Code

資料を読む前に

この資料中のコードブロックには、<〜〜〜の名前> のように、山括弧（< と >）で囲まれた部分があります。（HTMLのタグではありません）
これは、本来のコードで該当箇所にあるべき値や文字列を置き換えたプレースホルダーです。
実際にコードを書く際には、山括弧を含む文字列全体を、その内容に合わせた値に置き換えてください。

困ったときは

• 質問がある場合、章節項に割り振られた通し番号といっしょに質問してもらえると対応しやすいです。
• もしほかの受講者が自分よりもうまく進められていれば、その人に質問するのも良いでしょう。ただし、質問された方は安易に答えを教えるのではなく、正しい道に誘導してあげるイメージで回答できると良いですね。
• 資料に誤字脱字や理論的な欠陥にお気づきなら、リポジトリにIssueを作成してContributerに知らせてください。確認して対応します。

本編

資料本編はこちら ./DOCS.md