演習】の資料3つのうちの3つ目の資料を共有します。言っても、この資料は演習問題の取扱説明書なので、これだけでは意味がありません。今回は、どんな問題をどういう考えで作ったのか?少し書きたいと思います。※また、演習問題6の訂正を掲載しています。実際に受験に合格した後に記録しておいたメモを元に作りました。開発者なら手を動かさないと覚えられない、という想いで問題をつくりました。なんとしても合格して欲しかったので、本気で問題を考えました。MCPの試験で問われている内容が、(試験画面の「選択肢」や「並び替え」でなくて)そのまま実際のコードで書かされるならどうだろうか?というのをイメージしました。9つの演習のうち、演習5までがセレクタやイベント、メソッドの使い方について。ローカルストレージを使った高度な内容になりました。参加者の全員が集中して演習問題に取り組んでいたので、問題の内容・質ともに適切だったのだと感じました。ファイルの後半に解答を入力するという物でした。2ファイルセットで渡してみてもらえるようにしました。説明もしやすかったし、参加者もどんどん先に問題を解き進めて、集中力が切れない感じだったので、うまくいったなぁ、と感じました。機能はブラウザによって使えなかったりするので、そのあたりはもうちょっと事前に情報提供しておけば良かったと反省でした。実行する、というものになっています。全ての基本になっています。解説で出てきた内容を使えば、必ず書けるようになっています。メソッドチェーンで実行するようにしました。使いこなすとこの書き方で連続して処理をさせるのが一般的だと思う反面、実際に教科書で解説されることは少なく、また、問題で問われることもないので、「お?」と思ってもらいたかった、というのがあります。気付けば使えるし、気付かなくても問題にならないので、解答に推奨の書き方として入れておくことにしました。MCPの試験問題でも、この問題に近い問われ方をした内容があったと思います。セレクタに慣れる演習2では、演習1の問題とほぼ変わらないところで、1とは違って、「○○の中の○○」を探させるようになっています。CSSセレクタだけでも書けるし、APIを使って、子要素の中から探しても良いようになっています。アプリを作るときはいつもこの発想を使ってセレクタを組んでいくことになります。それを体験して欲しかったのです。するのか?これは実際にMCPの問題でも問われました。引っかけとして、テキストボックス以外に入れるときに、何を使うか?も問われる問題が出たそうです。値を入れる練習をします。セレクタを工夫すれば、これら全てにいっぺんに同じ値を入れることが出来ます。回答例はそういう書き方にしました。アプリ作りの時にも同じ発想で考えられるようになって欲しいなぁ、と。試験では、フォームの値を利用することについて触れた問題がありました。正規表現でやらせる問題がありました。通信に使用する問題がありました。この入力値を利用するというのは、アプリを作る上で表示に大事になるので、演習3ではその練習として、フォームの入力値をそのまま加工して別のテキストボックスに表示させる問題になっています。問題に取り組む事が出来ないので、まずここまでやってみよう、という感じです。イベント処理付きボタンを新たに作るこの問題は実践的で実際のアプリで必ず見かける内容なので、気持ち的にやる気が出るというか、取り組みやすいようになっていると思いますが、ここまででやった全ての技術を総動員しなければならないので、非常に難しい問題になっています。コードも3倍ぐらいに増えています。高度な操作に入らない、WebアプリケーションのUIを作ることに関しては、ここまで出来れば何でも出来るようになっています。いちからDOMを構築してアプリを作れる、ということです。演習5の問題のなかで2段階に分かれていて、まずセレクタとイベント処理の練習。それを使って本当に作りたいボタンを作る、という内容になっています。セレクタも属性を指定しなければならず非常に難しい内容になっていますが、実際のアプリ構築時には必須の内容ですし、MCP試験でも同じ内容が問われていました。参加者の多くがここに時間をかけていました。楽しんでもらえた様子だったのは、やっぱり自分が普段見かけるUIを作れるということで、イメージしやすかったのかな、と思いました。通信の認証ゴメンナサイ。この問題のファイルに埋め込まれているパスワードは間違っていました。埋め込まれたパスワードで動作します。ローカル環境で試したときの古い物で間違いです。申し訳ありませんでした。レンタルサーバーはしばらく動作させたままにしておくので、変更して試してみてください。試験問題で問われていた「認証」です。通信の結果自体はほとんど使いませんが、まずは通信できるように、というのも兼ねています。日本語リファレンスとかを読まないと解けない様になっていきます。実際の試験問題の難易度もそうなので、頑張ってもらうしか無い!です。スパルタですがどんどんいきます。通信時のシリアル化はMCP試験に出ていました。通信にデータを渡して、返ってきた値を使うのも基本ですね。形式で値をもらえるまでを練習します。これが出来れば、実際のアプリも作れるはず。ようなアプリだって作れますね(設計出来るか?は、また別ですが)。この演習も私のレンタルサーバーに接続にいきます。提供したプロジェクトファイルには、このサーバー用のプロジェクトも含まれていて、実際に自分の好きなIISに発行することが出来るようになっています。演習6の方は基本認証を設定しないといけないので、F5では難しいはずです。スコープこの演習はMCP試験で問われた2つの内容をひとつの演習で練習するようになっています。え~、試験問題をメモれたわけではなく、問われた内容だけメモったので、実際にどういう内容で問われたのか?忘れてしまったのですが、この問題の解答例を見て覚えれば、一応どちらも解けるようになっています。演習8では、まずイベントを付けたり外したり出来るようになることを練習します。して良いか?困る事になるはずなのです。それが実際の問題でも問われていて、また、この書き方自体、アプリを作るときには非常によく使うので(変数まで同じです)、どうしても体験して欲しかった。これがわからないと、後々アプリの設計が苦しくなってきます。新機能を使う問題です。これは私は不勉強で、実際の試験では想像で解きました。自分の反省も含めてしっかり問題を作りました。実際に仕事の案件でもローカルストレージを使う物が出始めていますね。昔ながらのクッキーを保存するものとあわせて、どちらも使えるようになっておきたいところです。実際は試験対策よりも綺麗な書き方を身につけて欲しかった最後まで問題を解くと、解答例が出来るだけシンプルに書かれていてギャップを感じたり、また、色んな書き方が出来る事に気付いたはずです。演習の合間にアドバイスとして解説しましたが、セレクタやAPIの使い方は色々工夫することが出来ます。演習問題を作るときに、自分と一緒に仕事する人にはこう書いて欲しい、と言う想いや、そこに至るまでの試行錯誤を経験して欲しい、という点を意識しました。人気の試験なのか、試験問題が数ヶ月毎にどんどん変わるようです。試験はこの内容から変わっていなかったようですが、今後はまた変わるかもしれません。それでも、この基本の考え方を身につけて試験に臨めば、試験のパターンが少し変わっても対応出来るはずです。実際のアプリを作る場面でも。業務アプリかコンシューマ向けか?問わず、使える技術を身につける参考になれば、と思います。Replyコメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目ですCommentName*Email*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。