先日（2013年7月20日）、日本マイクロソフトの品川本社ビルの会議室で開催しました、第7回 Plus Programming .net 勉強会 【MCP試験 70-480 合格を目指そう！jQuery の使い方と試験対策 演習】の資料３つのうちの３つ目の資料を共有します。
と言っても、この資料は演習問題の取扱説明書なので、これだけでは意味がありません。今回は、どんな問題をどういう考えで作ったのか？少し書きたいと思います。
※また、演習問題６の訂正を掲載しています。
目次
演習問題は実際の受験対策用
まず、この演習問題は、コミュニティメンバ Mai の受験勉強に実際に使った問題で、私 SHIN-ICHI が実際に受験に合格した後に記録しておいたメモを元に作りました。
習うより慣れろ。開発者なら手を動かさないと覚えられない、という想いで問題をつくりました。なんとしても合格して欲しかったので、本気で問題を考えました。MCPの試験で問われている内容が、（試験画面の「選択肢」や「並び替え」でなくて）そのまま実際のコードで書かされるならどうだろうか？というのをイメージしました。
9つの演習のうち、演習5までがセレクタやイベント、メソッドの使い方について。演習6以降が Ajax やローカルストレージを使った高度な内容になりました。
予想では勉強会の時間中に演習 5 までしか進まないと思っていたのですが、参加者全員が 6まで進みました。参加者の全員が集中して演習問題に取り組んでいたので、問題の内容・質ともに適切だったのだと感じました。
私が問題を作った時は、exercise1.html から exercise1-AnswerExample.js を参照して動作が確認出来るようにしておいて、exercise1-AnswerExample.js をコメントアウトした状態で渡し、html ファイルの後半に解答を入力するという物でした。
第6回勉強会で、コミュニティメンバで検討した結果、「問題を解き始める時にすぐに期待されている動作が確認出来た方が良いよね」という話があがり、exercise1.Answer.html を別につけて、それぞれ 2ファイルセットで渡してみてもらえるようにしました。説明もしやすかったし、参加者もどんどん先に問題を解き進めて、集中力が切れない感じだったので、うまくいったなぁ、と感じました。
勉強会資料にも書きましたが、Visual Studio 用のプロジェクトファイルで渡しましたが、参加者が自分の好きなエディタで編集してもOKで、実際に参加者の数名は Mac でした。ただし、「ローカルストレージ」など、一部の html5 の機能はブラウザによって使えなかったりするので、そのあたりはもうちょっと事前に情報提供しておけば良かったと反省でした。（Windows であれば、IEとFirefoxがあればどちらかで動きます）
演習1 セレクタ・イベント・API利用
演習1は jQuery の基本で、前段の jQuery の解説で説明した、セレクタでHTML要素を探し、イベント処理を追加し、その中で CSS を変更する API を実行する、というものになっています。これが jQuery の全ての基本になっています。
解説で出てきた内容を使えば、必ず書けるようになっています。また、解答はさらに使い方を理解してもらえるように、jQuery の API をメソッドチェーンで実行するようにしました。その意図は、実際の演習の時にも解説しましたが、jQuery を使いこなすとこの書き方で連続して処理をさせるのが一般的だと思う反面、実際に教科書で解説されることは少なく、また、問題で問われることもないので、「お？」と思ってもらいたかった、というのがあります。気付けば使えるし、気付かなくても問題にならないので、解答に推奨の書き方として入れておくことにしました。
MCPの試験問題でも、この問題に近い問われ方をした内容があったと思います。
演習2 セレクタに慣れる
演習2では、演習1の問題とほぼ変わらないところで、1とは違って、「○○の中の○○」を探させるようになっています。CSSセレクタだけでも書けるし、APIを使って、子要素の中から探しても良いようになっています。
jQuery でアプリを作るときはいつもこの発想を使ってセレクタを組んでいくことになります。それを体験して欲しかったのです。
演習3 テキストボックスに値を入れる
値をテキストボックスに入れるには、jQuery ではどうするのか？
これは実際にMCPの問題でも問われました。また、引っかけとして、テキストボックス以外に入れるときに、何を使うか？も問われる問題が出たそうです。
演習3では非常に基本的ですが、input と textarea に値を入れる練習をします。また、セレクタを工夫すれば、これら全てにいっぺんに同じ値を入れることが出来ます。回答例はそういう書き方にしました。アプリ作りの時にも同じ発想で考えられるようになって欲しいなぁ、と。
演習4 フォームの値を操作する
実際の MCP の試験では、フォームの値を利用することについて触れた問題がありました。入力審査を HTML5 の機能や、JavaScript の正規表現でやらせる問題がありました。それ以外でも、フォームの値を Ajax の通信に使用する問題がありました。
この入力値を利用するというのは、アプリを作る上で表示に大事になるので、演習3ではその練習として、フォームの入力値をそのまま加工して別のテキストボックスに表示させる問題になっています。これが解けないと、後半の Ajax の問題に取り組む事が出来ないので、まずここまでやってみよう、という感じです。
演習5 イベント処理付きボタンを新たに作る
この問題は実践的で実際のアプリで必ず見かける内容なので、気持ち的にやる気が出るというか、取り組みやすいようになっていると思いますが、ここまででやった全ての技術を総動員しなければならないので、非常に難しい問題になっています。解答の JavaScript コードも3倍ぐらいに増えています。
Ajax などのより高度な操作に入らない、WebアプリケーションのUIを作ることに関しては、ここまで出来れば何でも出来るようになっています。つまり、何も無い HTML にいちからDOMを構築してアプリを作れる、ということです。
演習５の問題のなかで2段階に分かれていて、まずセレクタとイベント処理の練習。それを使って本当に作りたいボタンを作る、という内容になっています。セレクタも属性を指定しなければならず非常に難しい内容になっていますが、実際のアプリ構築時には必須の内容ですし、MCP試験でも同じ内容が問われていました。
参加者の多くがここに時間をかけていました。でも楽しんでもらえた様子だったのは、やっぱり自分が普段見かけるUIを作れるということで、イメージしやすかったのかな、と思いました。
演習６ Ajax 通信の認証
ゴメンナサイ。先に訂正があります。この問題のファイルに埋め込まれているパスワードは間違っていました。
私がレンタルサーバーに立てた基本認証は、exercise6.Answer.html に埋め込まれたパスワードで動作します。exercise6.html のはローカル環境で試したときの古い物で間違いです。申し訳ありませんでした。レンタルサーバーはしばらく動作させたままにしておくので、変更して試してみてください。
ということで、演習6は実際に MCP 試験問題で問われていた「認証」です。Ajax 通信の結果自体はほとんど使いませんが、まずは通信できるように、というのも兼ねています。これは jQuery 日本語リファレンスとかを読まないと解けない様になっていきます。実際の試験問題の難易度もそうなので、頑張ってもらうしか無い！です。スパルタですがどんどんいきます。
演習7 Ajax 通信
通信時のシリアル化はMCP試験に出ていました。実際に Ajax 通信にデータを渡して、返ってきた値を使うのも基本ですね。この問題では、JSON 形式で値をもらえるまでを練習します。これが出来れば、実際のアプリも作れるはず。もう、twitter や facebook のようなアプリだって作れますね（設計出来るか？は、また別ですが）。
この演習も私のレンタルサーバーに接続にいきます。
ところで、Visual Studio で提供したプロジェクトファイルには、このサーバー用のプロジェクトも含まれていて、実際に自分の好きなIISに発行することが出来るようになっています。もちろん、F5デバッグのローカル IIS Express でも動作します。演習6の方は基本認証を設定しないといけないので、F5では難しいはずです。
演習8 イベントの書き換えと this のスコープ
この演習はMCP試験で問われた2つの内容をひとつの演習で練習するようになっています。え～、試験問題をメモれたわけではなく、問われた内容だけメモったので、実際にどういう内容で問われたのか？忘れてしまったのですが、この問題の解答例を見て覚えれば、一応どちらも解けるようになっています。
演習8では、まずイベントを付けたり外したり出来るようになることを練習します。そこでは色んな書き方が出来ると思うのですが、出来るだけ短く書こうとすると回答例のような書き方になって、this をどうして良いか？困る事になるはずなのです。それが実際の問題でも問われていて、また、この書き方自体、アプリを作るときには非常によく使うので（変数まで同じです）、どうしても体験して欲しかった。これがわからないと、後々アプリの設計が苦しくなってきます。
演習9 ローカルストレージ
HTML5 の新機能を使う問題です。これは私は不勉強で、実際の試験では想像で解きました。自分の反省も含めてしっかり問題を作りました。
IEは10以上？（Windows 8 のIEとストアアプリでは使えるはずですが、html ファイルがローカルのファイルだと IEでは動かないかも）と最新のFirefox なら動くようです。
実際に仕事の案件でもローカルストレージを使う物が出始めていますね。昔ながらのクッキーを保存するものとあわせて、どちらも使えるようになっておきたいところです。
実際は試験対策よりも綺麗な書き方を身につけて欲しかった
最後まで問題を解くと、解答例が出来るだけシンプルに書かれていてギャップを感じたり、また、色んな書き方が出来る事に気付いたはずです。演習の合間にアドバイスとして解説しましたが、セレクタやAPIの使い方は色々工夫することが出来ます。
演習問題を作るときに、自分と一緒に仕事する人にはこう書いて欲しい、と言う想いや、そこに至るまでの試行錯誤を経験して欲しい、という点を意識しました。
MCP 40-780 は人気の試験なのか、試験問題が数ヶ月毎にどんどん変わるようです。jQuery の試験はこの内容から変わっていなかったようですが、今後はまた変わるかもしれません。それでも、この基本の考え方を身につけて試験に臨めば、試験のパターンが少し変わっても対応出来るはずです。もちろん、実際のアプリを作る場面でも。業務アプリかコンシューマ向けか？問わず、使える技術を身につける参考になれば、と思います。
コメント
