上海大会の課題の技術分析

第48回技能五輪国際大会 (2026年上海大会)、ウェブ技術 (17 Web Technologies) のモジュールB〜F

更新日時: 2026/11/5(木) 16:30
更新者: 大畑僚樹 (国際エキスパート)

1. 本資料の見方

この資料では、2028年愛知大会に向けた訓練で学ぶ技術の重要度を、上海大会のモジュールB〜Fの配点で示す。配点は採点表の評価項目181個 (合計82.50) に基づく。モジュールA (ミニプロジェクト、16.50) はシャッフル課題のため、G (チームプロジェクト、1.00) はチームで取り組む課題のため、含めていない。

技術要素は、課題が変わっても共通に使える技術の単位である (例: CSS Grid、ハッシュルーティング、サーバー側の入力検証)。比較の対象は65個で、技術を評価しない「その他」の要素は2個ある
技術要素の配点は、その技術を主に評価した評価項目の配点の合計である。1つの評価項目の配点は主な技術要素1つにだけ入れたため、副次的に使う技術の配点は入っていない
Gitの操作、フレームワークの使い方、開発環境の構築など、課題を進めるのに必要だがB〜Fの評価項目にない技術は含めていない
技術を特定できない見た目のジャッジメントは、デザイン実装の技術要素 (画面の見た目、デザインの再現) に入れている。その他 (提出物の文書 (expert_readme) と提出物の規則の遵守、評価項目6個、配点2.00) は2節と4.4にだけ載せ、技術要素の順位と比較には含めていない
カテゴリは技術の内容で分けた。HTMLとCSSで満たせるものはデザイン実装、JavaScriptが要るものはフロントエンド、サーバーで処理するものはバックエンドとした。この分け方は、一部の項目でWSOSの区分と異なる。ARIA属性は、状態の更新にJavaScriptが要る項目を含むが、デザイン実装に入れた
「リヨン大会にもある技術」はリヨン大会 (2024) のモジュールB〜Fで同じ技術が主に評価された技術、「リヨン大会にない技術」はそうでない技術である。上海大会にそろえて、リヨン大会のA (スピードテスト) とG (チームプロジェクト) は比較に含めていない。リヨン大会の1つの評価項目を複数の技術要素に入れた場合があるため、リヨン大会の配点は目安である

2. モジュール別の配点と特徴

モジュール	バックエンド	フロントエンド	デザイン実装	その他	合計	特徴
B モバイルカンファレンス	-	11.25	4.50	0.75	16.50	静的JSONだけで動く、カンファレンス用のモバイル向けSPA。下部ナビゲーションで4つのビュー (スケジュールと講演者、会場マップ、出席スタンプ、フォトブース) を切り替える。フォトブースでは、フレームや比率の切り替えと選択肢の無効化を実装する。5つのモジュールで最も多い21個の技術要素が評価される。UIの状態管理 (切り替え・無効化) (2.75) とJSONからの描画 (一覧と詳細) (2.00) の配点が大きい。会場マップとスタンプのCSS Grid (1.25)、Canvasによる画像の合成 (1.00)、Web Share APIと機能検出 (1.00) も評価される画面 (素材未配布のため参考)
C グローバルイベント	18.50	-	-	0.25	18.75	イベント運営スタッフが使う管理アプリと公開JSON API。社員番号だけでログインし、イベントの配下で部屋、セッション、チケット定員、予約を管理する。配点は14個の技術要素に分かれ、CRUD (サーバー側) (4.00) のほか、部屋や講演者の時間の重なりと定員の超過を拒否するデータの整合性の検証 (時間の重なり・上限) (3.00) と、多対多を含むDBスキーマの設計 (リレーション・外部キー・型) (2.75) が大きい。予約の変更履歴の記録 (監査ログ) (1.25) やタイムゾーンの変換 (UTC保存) (0.75) など、業務の規則をサーバーで守る実装が求められる画面 (素材未配布のため参考)
D CSSのみ	-	-	13.50	0.50	14.00	変更できないHTMLを使い、CSSだけで4つのテーマを作る。タブ、スライダー、ライトボックスなどの操作もCSSで実現する。配点は12個の技術要素に分かれ、テーマごとのレイアウトや部品をデザインに合わせるデザインの再現 (3.50、すべてジャッジメント) と、CSSのみの状態切り替え (:checked・:target) (2.00) が大きい。3つのテーマの特徴的な効果を作るトランジションとアニメーション (1.75) のほか、生成コンテンツ (attr()・疑似要素) (1.00) や項目数に応じたスタイル (数量クエリ) (0.25) など、セレクタと疑似要素の知識も問われる画面 (素材未配布のため参考)
E Resume Platform	15.00	3.75	0.25	0.25	19.25	既存のデータベースを使ってオンライン履歴書を作成するフルスタックのアプリ。テーブル構造を変えずにフレームワークやORMを対応付け、登録、オンボーディング、管理ビュー、公開ページを作る。配点は14個の技術要素に分かれ、公開ページのテンプレートエンジン (プレースホルダーの置換) (3.75) と、オンボーディングの多段階フォームと進行状態の保持 (2.50) が大きい。経歴を編集するクライアント側のリスト編集 (2.00) と、テーマ設定のライブプレビュー (入力の即時反映) (1.75) は、JavaScriptで実装するフロントエンドの技術要素である画面 (素材未配布のため参考)
F Study Buddy	-	8.00	5.75	0.25	14.00	クライアントだけで動く、AIチャット形式の学習アプリのプロトタイプ。ランディングページ、サインインページ、チャットの3ページを、キーボードとスクリーンリーダーだけで操作できるように作る。配点は16個の技術要素に分かれ、ARIA属性 (3.25) とUIの状態管理 (切り替え・無効化) (2.75) が大きい。ARIA属性、キーボード操作 (1.50)、セマンティックHTML (1.00)、フォーカスの表示 (:focus-visible) (0.50) などアクセシビリティに関わる技術要素が、配点の約半分 (7.25) を占める画面 (素材未配布のため参考)
合計	33.50	23.00	24.00	2.00	82.50

3. リヨン大会と上海大会で評価された技術の比較

その他を除く配点80.50点のうち、リヨン大会にもある技術は51.00点 (63%)、リヨン大会にない技術は29.50点 (37%) だった。リヨン大会にもある技術は2大会続けて評価された。この実績は、愛知大会に向けた訓練で学ぶ技術を決める材料になる。

カテゴリ	リヨン大会にもある技術要素の数	配点	リヨン大会にない技術要素の数	配点	合計の配点
バックエンド	11	19.00	10	14.50	33.50
フロントエンド	10	14.75	11	8.25	23.00
デザイン実装	13	17.25	10	6.75	24.00
合計	34	51.00	31	29.50	80.50

リヨン大会にもある技術34個のうち、リヨン大会と上海大会の配点の差が2.00以上の技術要素は6個ある。トランジションとアニメーション (7.25から2.50)、REST API (4.50から1.75)、ファイルのアップロードと検証 (2.75から0.50) は上海大会で小さくなり、UIの状態管理 (1.50から5.50)、ARIA属性 (0.25から3.25)、CSS Grid (0.50から2.50) は大きくなった (B〜Fの配点の合計はリヨン大会88.00、上海大会82.50)。

技術要素65個のうち上海大会の配点が1.25以上の22個とリヨン大会の配点 — 図3 技術要素65個のうち、上海大会の配点が1.25以上の22個とリヨン大会の配点

4. カテゴリ別の技術要素と学ぶべき要素

ジャッジメントを含む配点は、その下にメジャメント (M) とジャッジメント (J) の内訳を示した。学ぶべき要素は、上海大会とリヨン大会の評価項目で問われる知識を、課題が変わっても使える形で挙げたものである。

4.1 バックエンド

技術要素	上海	リヨン	上海大会の小項目	リヨン大会の小項目	学ぶべき要素
リヨン大会にもある技術
CRUD (サーバー側)	5.25	6.75	C3 イベントと部屋の管理 C4 講演者とセッションの管理 C5 予約 E3 テーマ設定 E4 プロフィールと履歴書の内容管理	B3 企業 (管理者) B4 商品CRUD (管理者)	リソースごとのルートと処理フォームの送信とリダイレクト一覧と詳細の画面親のリソースの配下での管理状態による論理削除 (取り消し・非表示)
DBスキーマの設計 (リレーション・外部キー・型)	2.75 M 2.25 J 0.50	2.00 M 1.50 J 0.50	C1 DB作成	B2 データベース	マイグレーション外部キー制約カラム型インデックス ER図
セッション認証 (ログイン・アクセス制御)	2.25	1.50	C2 認証 E1 登録	B1 管理者 B4 商品CRUD (管理者)	ログインとログアウトミドルウェアでの保護 401とリダイレクト汎用のエラーメッセージ
サーバーのルーティング	2.00	3.00	C2 認証 C3 イベントと部屋の管理 E5 テンプレートエンジンと公開ビュー	B7 一般向け製品ページ C3 ファイルの読み込み	ネストしたルートルートパラメータ
REST API (JSONの応答)	1.75	4.50	C5 予約	B5 製品API	決められたJSONの形 Content-Type ステータスコードページネーション検索
サーバー側の入力検証	1.50	0.50	C4 講演者とセッションの管理 C5 予約 E3 テーマ設定	B4 商品CRUD (管理者)	検証の規則 422とエラーの表示値の正規化
サーバー側のHTML生成	1.00	1.50	E5 テンプレートエンジンと公開ビュー	C3 ファイルの読み込み	データからのHTMLの組み立てエスケープ
DBのダンプとシードデータ	0.75	0.75	C1 DB作成	B2 データベース	mysqldump シードデータの投入
DBの正規化	0.75 J 0.75	0.50 J 0.50	C1 DB作成	B2 データベース	第3正規形までの正規化
HTTPステータスとエラーページ	0.50	1.00	E5 テンプレートエンジンと公開ビュー	B5 製品API	404などのステータスと独自のエラーページ
ファイルのアップロードと検証	0.50	2.75	C4 講演者とセッションの管理	B4 商品CRUD (管理者)	multipart/form-data ファイルの保存 MIMEタイプとサイズの検証
リヨン大会にない技術
テンプレートエンジン (プレースホルダーの置換)	3.75	0.00	E5 テンプレートエンジンと公開ビュー	-	ファイルの読み込みと文字列の置換値のエスケープ
データの整合性の検証 (時間の重なり・上限)	3.00	0.00	C3 イベントと部屋の管理 C4 講演者とセッションの管理 C5 予約	-	時間帯の重なりの条件 (開始 < 相手の終了かつ終了 > 相手の開始) 集計による上限の確認残数の計算と売り切れの選択肢の無効化取り消した予約を戻さない制約トランザクションとロック
多段階フォームと進行状態の保持	2.50	0.00	E2 オンボーディングウィザード	-	ステップごとの保存進行状態の保持途中からの再開
変更履歴の記録 (監査ログ)	1.25	0.00	C6 監査ログ	-	作成・更新・取り消しのときの記録操作者と日時更新前と更新後の値
一意な値の生成と重複の解決	1.00	0.00	E2 オンボーディングウィザード	-	スラッグへの正規化重複の確認と連番ランダムな文字列
既存DBへのORMの対応付け	1.00	0.00	E1 登録	-	テーブル名主キー (UUID、自動増分でない主キー) タイムスタンプの列名外部キーの指定
タイムゾーンの変換 (UTC保存)	0.75	0.00	C4 講演者とセッションの管理	-	UTCでの保存 IANAのタイムゾーン入力と表示での変換
ユーザー登録とパスワードのハッシュ化	0.75	0.00	E1 登録	-	パスワードのハッシュ化 (bcryptなど) 登録とログイン
外部キーの参照動作 (ON DELETE)	0.25	0.00	C3 イベントと部屋の管理	-	ON DELETE SET NULLとCASCADE
多対多の関連 (中間テーブル)	0.25	0.00	C4 講演者とセッションの管理	-	中間テーブルの設計と保存削除のときの関連の解除

4.2 フロントエンド

技術要素	上海	リヨン	上海大会の小項目	リヨン大会の小項目	学ぶべき要素
リヨン大会にもある技術
UIの状態管理 (切り替え・無効化)	5.50	1.50	B2 ビュー B4 出席スタンプ B5 フォトブース F2 静的ページ F3 チャット	D2 駐車場 E3 スライド操作 E4 テーマ F6 タブ	状態を1つのオブジェクトに持って描画し直す方法 disabled属性選択肢の連動
JSONからの描画 (一覧と詳細)	2.00	1.25	B2 ビュー	D2 駐車場 D3 イベント D4 天気	データからのDOMの組み立て (createElement、template要素) 一覧から詳細への遷移データと色などの対応付け
クライアント側のリスト編集	2.00	1.50	E4 プロフィールと履歴書の内容管理	E2 写真の注文	配列の追加・削除・入れ替えと再描画ドラッグアンドドロップ編集した一覧の一括送信
キーボード操作	1.50	3.25	F6 キーボードショートカット	E3 スライド操作 E5 コマンドバー F5 アクセシビリティ F6 タブ	keydownとkeyの判定修飾キー入力欄でのショートカットの抑止矢印キーでの選択 Tabの順序
ブラウザストレージ	1.00	0.25	B4 出席スタンプ F1 ページ F2 静的ページ	D2 駐車場	localStorageとJSONの変換起動時の復元 IndexedDBの基本
タイマーによる非同期処理	0.75	0.75	F4 チャット体験	D2 駐車場 E3 スライド操作	setTimeoutとclearTimeout setInterval 処理の取り消し
モーダルの開閉	0.75	2.00	B3 会場	C4 レイアウト E5 コマンドバー	dialog要素 (showModal、close) 背景のクリックとEscキーで閉じる処理
SPAのビュー切り替え	0.50	0.50	B1 SPA B2 ビュー	D1 モバイル・ウェブ全般	1つのHTMLでのビューの出し分け URLとの連携戻る操作
一覧の並べ替え	0.50	0.75	F3 チャット	D2 駐車場	sortの比較関数複数の条件での並べ替え
静的JSONの読み込み (fetch)	0.25	1.25	B1 SPA	D2 駐車場 D3 イベント D4 天気	fetchとresponse.json 相対パス async/await
リヨン大会にない技術
ライブプレビュー (入力の即時反映)	1.75	0.00	E3 テーマ設定	-	inputイベント CSS変数の書き換え保存前の値と保存済みの値の区別
フォームの入力と検証	1.25	0.00	B4 出席スタンプ F2 静的ページ	-	submitイベント入力値の検証とエラーメッセージ重複の判定
Canvasによる画像の合成	1.00	0.00	B5 フォトブース	-	drawImage coverの拡大縮小の計算内部サイズと表示サイズ画像の読み込み (Image、URL.createObjectURL)
Web Share APIと機能検出	1.00	0.00	B5 フォトブース	-	navigator.shareとcanShare Fileを含むペイロード非対応のときの代わりの処理
ハッシュルーティング	1.00	0.00	B1 SPA	-	location.hashとhashchange 初期表示でのルートの解決 (ディープリンク) 現在のルートの強調
テキストのそのままの表示	0.50	0.00	F3 チャット	-	textContentとinnerHTMLの違い
画像のダウンロード	0.50	0.00	B5 フォトブース	-	canvas.toBlob a要素のdownload属性日時からのファイル名
読み込みエラーの表示	0.50	0.00	B3 会場	-	response.okの確認 try/catch 利用者向けのメッセージ
フォーカスの管理	0.25	0.00	F4 チャット体験	-	focus()によるフォーカスの移動送信後や画面の切り替え後の移動先
ページとビューの構成	0.25	0.00	F1 ページ	-	複数のHTMLかSPAかの選び方ページ間での状態の受け渡し
日時の書式	0.25	0.00	F3 チャット	-	Date padStart Intl.DateTimeFormat

4.3 デザイン実装

技術要素	上海	リヨン	上海大会の小項目	リヨン大会の小項目	学ぶべき要素
リヨン大会にもある技術
デザインの再現	3.50 J 3.50	3.75 M 2.75 J 1.00	D1 機能 D2 テーマA Simple D3 テーマB Elegant D4 テーマC Cyber D5 テーマD Colorful	C4 レイアウト E4 テーマ F3 デザインとレイアウト	デザイン画像との比較 (重ね合わせ、寸法と余白の確認) レイアウト全体の再現
ARIA属性	3.25	0.25	F5 アクセシビリティ F6 キーボードショートカット	F6 タブ	aria-expanded aria-controls aria-labelledby aria-describedby aria-label aria-live aria-selected role (log、status、region、article) WAI-ARIA APGのパターン
CSS Grid	2.50 M 1.25 J 1.25	0.50	B3 会場 B4 出席スタンプ D2 テーマA Simple D3 テーマB Elegant D4 テーマC Cyber D5 テーマD Colorful	F3 デザインとレイアウト	grid-template-areas grid-template-columns spanによる結合メディアクエリでの列数の切り替え
トランジションとアニメーション	2.50 M 0.25 J 2.25	7.25 M 5.25 J 2.00	B3 会場 B4 出席スタンプ D2 テーマA Simple D4 テーマC Cyber D5 テーマD Colorful	C4 レイアウト D4 天気 E4 テーマ F4 効果	transition @keyframes steps() 遅延による順番の動き
セマンティックHTML	1.25	3.00	B4 出席スタンプ F5 アクセシビリティ	C4 レイアウト D5 設定と一般 F5 アクセシビリティ	ランドマークの要素見出しの階層 progressなどの意味を持つ要素 axeとLighthouseでの点検
scroll-snap	1.00	0.50	D5 テーマD Colorful	D4 天気	scroll-snap-typeとscroll-snap-align
prefers-color-scheme (ダークモード)	0.75	0.50	D4 テーマC Cyber	D5 設定と一般	メディアクエリとCSS変数でのテーマの切り替え
固定配置 (fixed/sticky)	0.75	0.75	B1 SPA B2 ビュー B4 出席スタンプ	C4 レイアウト D1 モバイル・ウェブ全般	position: fixedとsticky スクロールする領域の決め方
タイポグラフィの指定	0.50	0.25	D3 テーマB Elegant D4 テーマC Cyber	C4 レイアウト	font-family font-size line-height letter-spacing font-feature-settings
段組みのレイアウト (Flexbox・Grid)	0.50	0.50	E3 テーマ設定 F3 チャット	F3 デザインとレイアウト	2列のレイアウト Flexboxの伸縮
ファイル入力 (accept)	0.25	0.50	B5 フォトブース	E1 画像ファイルの読み込み	input type="file" accept属性 capture属性
レスポンシブ (はみ出し防止)	0.25	1.00	B5 フォトブース	B7 一般向け製品ページ D1 モバイル・ウェブ全般	max-width: 100% object-fit 横スクロールの確認 viewportの指定
画面の見た目	0.25 J 0.25	2.00 J 2.00	B2 ビュー	E4 テーマ	情報の階層余白と整列配色とタイポグラフィの一貫性
リヨン大会にない技術
CSSのみの状態切り替え (:checked・:target)	2.00	0.00	D1 機能	-	:checkedと兄弟セレクタ :target :has() 操作できるまま隠すラジオ
生成コンテンツ (attr()・疑似要素)	1.00	0.00	D1 機能	-	::beforeと::after content: attr() CSSカウンター
配色の指定	1.00	0.00	B3 会場 D5 テーマD Colorful	-	CSS変数 color-mix() グラデーション
アコーディオン (details/summary)	0.50	0.00	D1 機能	-	detailsとsummary [open]のスタイル
フォーカスの表示 (:focus-visible)	0.50	0.00	F5 アクセシビリティ	-	:focus-visible outline 3:1のコントラスト比
フォームのラベル付け (label・fieldset)	0.50	0.00	F5 アクセシビリティ	-	labelのforとid fieldsetとlegend
フォームの検証状態のスタイル	0.50	0.00	D1 機能	-	:user-invalid :invalid :placeholder-shown
prefers-reduced-motion	0.25	0.00	B3 会場	-	メディアクエリでの動きの停止や短縮
スキップリンク	0.25	0.00	F2 静的ページ	-	最初のフォーカス先にするリンクフォーカス時だけ表示するCSS
項目数に応じたスタイル (数量クエリ)	0.25	0.00	D1 機能	-	:has()と:nth-child()による項目数の判定

4.4 その他

要素	上海	リヨン	上海大会の小項目	リヨン大会の小項目	学ぶべき要素
提出物の文書 (expert_readme)	1.50 M 0.50 J 1.00	0.25	B1 SPA C1 DB作成 E1 登録 F1 ページ	B1 管理者	指定されたファイル名起動の手順とアクセス先の書き方
提出物の規則の遵守	0.50	1.25	D1 機能	B1 管理者 C1 ファイルとリスト D1 モバイル・ウェブ全般 E1 画像ファイルの読み込み F1 レスポンシブ・ローディング	指定されたパスとフォルダへの配置配布されたファイルを変えないこと必要なファイルをそろえて余分なファイルを出さないこと