2級ウェブデザイン技能士 対策[JS] (1)

ウェブデザイン技能士とは?

ウェブデザイン技能士(ウェブデザインぎのうし)とは、国家資格である技能検定制度の一種で、職業能力開発促進法第47条第1項による指定試験機関である特定非営利活動法人インターネットスキル認定普及協会 が実施するウェブデザインに関する学科及び実技試験 (ウェブデザイン技能検定) に合格した者をいう。
wikipediaより

ウェブ系の資格は山ほど存在しますが、これはその中でも業界唯一の国家検定です。
現在はまだ認知度は低いですが、国が実施している試験とだけあって、民間の資格よりもとる価値があるのは確かです。

ちなみにデザインと名称にありますが、試験の内容はwebシステムについてが主なので、色彩感覚やレイアウトの知識はあまり重要ではありません。

webを勉強している学生なら就職のためにもぜひ取っておきたい資格です。
3級から1級まであり、自分のレベルにあったものを受験することができます。

まだ初心者の方でも、3級なら少しの勉強で取れるかと思います。
そして、今回の記事ではそこから2級へとステップアップしたいと思う人に向けて、過去問を通して対策を行っていきたいと思います。

過去問題

次のコードのh1要素(class属性”main-title”)に、JavaScriptコードで例のように文字列を加えたい。
その場合、コードのA,B,Cのいずれにも使われないキーワードを、以下より1つ選択しなさい。

  1. querySelector
  2. createTextNode
  3. appendChild
  4. innerHTML

解説

コードを見てみると、どうやらAはクラスの取得、Bはテキストの作成、Cはその追加を行なっているようです。
それを踏まえた上で、使わないものを見つければいいわけですね

それでは選択肢をそれぞれ確認してみましょう。

1のquerySelectorはdocument.querySelector("要素")のようにしてセレクタを指定することで、
文書の最初の要素を持ってくることができます。
ちなみにこの記事でdocument.querySelector("h2")を実行してみると以下が取得できます
<h2><span id="ウェブデザイン技能士とは">ウェブデザイン技能士とは?</span></h2>

2のcreateTextNodeは名前の通り、テキストノードを作成するメソッドです。
document.createTextNode('text')のようにしてテキストを挿入することができます。
そして追加するために、appendChildがよく一緒に使われます。

3のappendChildは、先ほど述べたとおりです。以下のように使います。
var text = document.createTextNode('hello world'); //テキストノードを作成
body.document.appendChild(text); //テキストノードを追加

4のinnerHTMLは指定した要素に読み込むと書き込むをすることができます。
var 変数 = 要素.innerHTML; //読み込み
要素.innerHTML = 内容; //書き込み

解答

以上のことから
A:querySelector(クラスの取得)   B:createTextNode(テキストの作成)   C:appendChild(テキストの追加)
となり、使われないものは4.innerHTMLです。

4はCでテキストを書き換えるのに使えそうですが、その場合書き方がいまいち合わず、以下でなければなりません。
head.innerHTML = "<h1>メインタイトル</h1>";


取り上げた問題は以下のウェブデザイン技能士検定公式サイトで公開されているものから抜粋しました
ウェブデザイン技能士検定 過去問大の公表

最後まで読んでいただきありがとうございました。

web