実際に役立った教材について
早速、本題ですが私が実際に勉強して役立った教材は「ウェブデザイン技能検定2級ガイドブック」です。
過去問題は公式サイトにもありますが、教材としては少ない中で、内容がわかりやすく実用的でした。
値段が比較的高値なので、手が出しにくいかもしれないですが、ネット等で自分で１から調べてやるよりも断然に効率的に勉強ができるのでオススメです。
重要な事は「暗記」をひたすらする事です。
暗記の方法として、上記の参考書で読み覚える他に、Youtubeで「webデザイン技能検定2級 聞き流し」と調べると作成された動画がいくつかヒットするので、それらを隙間時間に聞きまくります。
その他、暗記に有効な方法として以下にもがありますが、有志の方が制作したサイトで小テストをする方法があります。
間違った勉強法として紹介しますが、ツール自体は暗記に有効なので、是非試してください。
【試験1回目は不合格】筆者が最初にやっていた間違った勉強法
表題にある通り、実際に筆者が1回目を受験した際には、ボロボロに不合格でした。
学科試験は40問あるうちにの約27問以上が正解(公言はされていないですが7割の正解が求められます)が必要です。
そんな中、勉強期間は役2ヶ月間です。
ですが、やっていた勉強方法があまり良くなかったと反省しています。
内容としては、
- 有志が作成した過去問の1問1答サイト」これを出勤の行きと帰りに、10問ずつやり続ける
- 試験20日前に過去問に取り組む
この2点の方法のみで挑みました。
結果として、狭い範囲を問題を暗記しただけで当日は、自分が網羅していなかった部分の問題が出た際に対処できませんでした…
以上のツールは、使用することで合格により近づけるものにはなりますが、今回落ちてしまった要因としては、勉強不足が挙げられるので、上記のツールが悪いというわけではなく、寧ろ補助としてとても優秀なものとなっているので、どのように使用していたのかを以下で紹介します。
まず、❶の方法はネットで「webデザイン技能検定2級 過去問 サイト」と調べる事でヒットするサイトを片っ端からやっていた形になります。
ここでの注意点が、そのサイトが古い情報を掲載している場合があるというケースです。掲載日時が確認できるものがあれば確認しましょう。
次に、❷の方法ですが、「公式サイト」にて、最新の過去問題が掲載しているので、それをプリントアウトし問題を解くという方法になります。
過去問題に関しても、よくあるのが書籍なのですが、こちらも情報が古い場合新しく改正されたものがあるとミスリードにつながるので、しっかりと最新のものを追うことをオススメします。
【WEBデザイン技能検定の実技】で役立ったコマンド｜問5aの時短術
webデザイン技能検定は学科だけではなく、実技もありますが、その作業は過去の問題からも分かるように、殆ど変わりません。その中でも、最後の問題は選択問題となっており、私はJavaScriptを全然自信が無いのでコンタクトフォームの選択をしていました。
その中で、厄介となるのがデータの整理です。
データの整理とは？となりますが、例えば令和6年度第4回に出題された問題に
「*1 出発予定日は、date[0]年、date[1]月、date[2]日とし、2025〜2026、date[1]は1〜12、date[2]は1〜31を選択できるようにすること」
と備考があり、これは簡単に言うとselect要素とoption要素を使って、年・月・日をセレクトボタンにしてください、という事なのですが、この数値をいちいちダブルクリックか何かで修正しながら手入力するのはとても手間です。
ですので、これを一瞬に効率的に出力する方法として、VSCodeの機能にある「置換機能」を使用することで圧倒的に時短が可能となります。
方法は、以下になります。あまり深く考えずに、コードと仕組みを覚えれば誰でも簡単に出来ます。
- まずVSCodeを立ち上げます。
- 数字を手入力します。(VSCodeに計算機能は無い為、ここは手打ちしてください)
(例：1→Enter→2→Enter→3→Enter…..) - 次に「Ctrl+F」(Command+F)で検索機能を表示させます。
- 検索窓の右にある「.*」のようなボタンを押し、「正規表現を使用」有効にします。
- 検索窓左にある「＞」のボタンをクリックし、置換と検索の窓を開きます。
- 検索の欄に(上の検索窓)置換するタグに入れ込む情報を指示します。
(例：「^(*+)$」) - 次に置換の欄(下の検索窓)に出力したい文字列を入力します
(例：「<option value=”$1″>$1</option>」) - Ctrl+Enter(Commnd+Enter)で全て置換をします。
これにより、セレクトボタンの選択肢部品が一瞬で生成されます。
簡単に説明しますと、検索窓に入力した「^(*+)$」は
これが、結果として「＄１」の塊になるイメージです。
この＄１を置換したい文字列に代入させる方法となっています。
深くは考えずに覚えればOKです。
実際にVSCodeを用いて実践してみると良いと思います。
また、入力する記述コードは、出題される内容によって変える必要があります。
例えば、令和6年度第4回に出題された問題の
「*3 出発および到着空港はairports.txtを元に、表示は空港名、送信は3レターコードにすること」
とあり、一見『？？？』なのですが、実際の試験ではフォルダの中にairports.txtがあり、開くと3桁のレターコードと空港名が50以上羅列されているデータがあります。
これを手入力すると気が狂いそうになるのと、確実にミスタイピングや誤操作が起こることが想定されるので置換機能を使用することで防ぐことが出来ます。
例えば、「HND 羽田空港」と情報があるとします。それを一旦VSCodeにコピペし、置換機能を使っていきます。
さっきの記述から、何処を変更すれば良いのかというと、
簡単に説明しますと、検索窓に入力した「^(\w+)\s(*+)$」は
これが、結果として「＄１」と「＄２」の塊になります。
それらを、表示は空港名、送信は3レターコードであるコードに変換します。
先ほどの工程にある、
という、この行程で、「<option value=”$1″>$2</option>」と記述すれば上手く変換されます。
是非、実際にやってみてください。
