本記事では、2級実技試験は「5b」を選ぶべき理由について解説します。
結論、2級実技試験は、ほぼ決まった「2行コードを書くだけ」だからです。
順を追って説明します。
選択問題5bの回答方法は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験 作業5bの解説・回答
続きを見る
選択問題5bの過去に出題された問題は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験5bの過去問と回答一覧
続きを見る
選択問題5bの予想問題と演習は下記よりアクセスできます。
続きを見る
参考【ウェブデザイン技能検定】2級実技試験5bの予想問題演習
目次
①2級実技試験の選択問題の概要
2級の実技試験は、問題5で下記の2つの問題から選択します。
【選択問題5aの概要】
指定された内容のフォームを作成する問題。ほぼ、毎回同様の問題で、文字や表現が変更される程度。
HTMLとCSSのみの知識のみで回答できるのがメリット。
【選択問題5bの概要】
ある要素をクリックすると、要素内の文字を色変更や下線を加えるなどの装飾する問題。
JavaScriptを記述問題となる。
②選択問題5aについて
ここからは、選択問題について、深堀していきます。
選択問題の5aは、毎回「指定された内容のフォームを作成する問題」となります。毎回同様の問題で、文字や表現が変更される程度の違いがある程度で、ほぼ同一問題となっています。
例えば、令和5年度第3回は、下記のような問題となります。
フォルダ内のform.html を、「表 1 フォームの条件」と「表 2 HTTP リクエストインタフェース」に従って修正し、大会参加予約ページを作成する。修正後のファイルはデスクトップのフォルダに保存し、action 属性には仮のURLを指定する。
詳しい問題の文章や内容は、ウェブデザイン技能検定の過去問題の公表を参考ください。
ゼロからフォームを作成する問題となります。
メリットは、HTMLとCSSの知識のみで回答できるのことです。しかし、コードを記述する量が多量となるのが、最大のデメリットとなります。
選択問題5aは試験時間が限られている中で、本選択問題で時間がとられるのが最大のリスクとなります。
③選択問題5bについて
一方、選択問題5bは、毎回「ある要素をクリックすると、要素内の文字を色変更や下線を加えるなどの装飾する問題」となります。
毎回同様の問題で、装飾方法が異なるのが違う程度で、ほぼ同一問題となります。
例えば、令和5年度第3回は、下記のような問題になります。
フォルダ内のq5.js を編集し、index.html 内の id が change の要素がクリックされた際に、id が contents の要素内の文字に実線を付与する処理を実装する。
詳しい問題の文章や内容は、ウェブデザイン技能検定の過去問題の公表を参考ください。
一番のメリットは、記述量が少ないということです。
記述するコードはたったの2行の下記のコードとなります。（A、Bは装飾方法により異なる）
let obj = document.getElementById(‘contents’);
obj.style. A =“ B”;
デメリットは、5aにはないJavaScriptを記述問題となるということ。
④圧倒的に楽な選択問題5bを選ぶべき
選択問題5aと5bの簡単に比較と下記のようになります。
| 比較内容 | 選択問題5a | 選択問題5b |
| メリット | HTML、CSSの知識のみで回答可能 | 2行のみのコード記述でOK |
| デメリット | 回答時間が長くなる | JavaScriptの記述がある |
| 記述コードの量 | 50行程度（記載方法にもよる） | 2行 |
| 回答時間 | 20分 | 3分 |
| 勉強方法 | HTMLでフォームの作成方法を学習 | 2行のコードを丸暗記 |
上記の表より、5bの方が選択が圧倒的に楽になります。
しかし、5bはJavaScriptの記述があることがデメリットとなりますが、2行のコードを丸暗記することで、JavaScriptの知識を要せず回答ができます。
これらより、選択問題は5bを選ぶべきなのです。
⑤5bの丸暗記するコード
選択問題5bで丸暗記するコードは下記になります。
let obj = document.getElementById(‘contents’);
obj.style. A =“ B”;
毎回このコードだけ対応ができます。
ただし、A、Bの部分については、問題の内容により記述が異なります。
ただ、この記述方法は次に説明するVisual Studio Codeの補完機能で簡単に回答できるので心配はいりません。
⑥装飾方法はVisual Studio Codeが助けてくれる
let obj = document.getElementById(‘contents’);
obj.style. A = “ B ” ;
暗記する上記コードのA、BはVisual Studio Codeの補完機能が助けてくれます。
例えば、令和3年度の第3回を例に説明します。
【令和5年度第3回の問題】
フォル枝内のq5.js を編集し、index.html 内の id が change の要素がクリックされた際に、id が contents の要素内の文字に実線を付与する処理を実装する。
上記を例にすると、文字装飾はcssのプロパティのtext-decoreationっぽいのを使用しそうなのは分かる。
そこで、Aの部分に「te」まで記述するとVisual Studio Codeの補完機能でJavaScriptでの記述方法に変換してくれる。
Bには、CSSのプロパティの値と同一コードを記述します。
プロパティの値が分からなければ、これもVisual Studio Codeの補完機能で調べることができます。問題4で利用したCSSファイルなどで、「text-decoration」入力時の補完機能で、「unederline」を調べることができる。実際に、問題4でテストを行い回答の装飾の記述を導くこともできます。
以上より問題5bの回答は下記になります。
以上より、JavaScriptの知識がなくても、2行のコード暗記とVisual Studio Codeの補完機能だけで、あとは機能で回答できてしまう。
⑦選択問題5bの勉強方法
勉強方法は下記の2行のコードを丸暗記するだけになります。
let obj = document.getElementById(‘contents’);
obj.style. A = “ B ” ;
不安な人は、過去3回分の過去問を書き解き、文字の装飾方法（A、B）について傾向を掴むのがおすすめです。
ちなみに、令和5年度の第1、2回の問題と回答は下記の通りになります。
【令和5年第1回】
フォルダ内のq5.js を編集し、index.html 内の id が change の要素がクリックされた際に、id が contents の要素内の文字が太字(bold)にする処理を実装する。
【回答】
【令和5年第2回】
フォルダ内のq5.js を編集し、index.html 内の id が change の要素がクリックされた際に、id が contents の要素内の文字の背景色を#ffcc66にする処理を実装する。
【回答】
⑧まとめ
2級実技試験の選択問題は「5b」を選ぶべき理由についてしました。
理由は、2 行のコードを丸暗記するだけでOKだからです。あとは、Visual Studio Codeの補完機能が回答できます。
2級実技試験の選択問題は「5b」を迷わず選びましょう。