tuqulore/vue-3-practices

Nuxt 3の課題の準備

Closed this issue · 18 comments

knokmki612 commented
  1. ひでさん: 15:30～17:00 Nuxt 3 のハンズオン（未定）

3.で各受講者のレベルに応じて3つの課題を選んでつくってもらう

Originally posted by @Hidetaro7 in #108 (comment)

Hidetaro7 commented

レベル2 or 3の課題検討。

「ツリー表示」サンプルのカスタマイズ

https://v3.ja.vuejs.org/examples/tree-view.html
のサンプルをComposition APIに移植した。

https://stackblitz.com/edit/nuxt-starter-ctcbe2

これをもとに、

  1. new stuff ではなく、入力した名前で登録されるしくみをつくってください。
  2. サーバーにJSONファイルが保存されるしくみをつくってください。

という課題を与える。

Hidetaro7 commented

1.だけでもかなり手がかかる
https://stackblitz.com/edit/nuxt-starter-36e6fu

Hidetaro7 commented

レベル2の課題

キーワードで絞り込んだらその詳細が表示される
https://stackblitz.com/edit/github-siucq8-fmtxnf?file=app.vue

Hidetaro7 commented

もう一つ、中間の課題をつくる。
ツリー表示の課題はハードル高いので穴埋めでもいいのでは？

Hidetaro7 commented

すでにやったことがありそうな処理を復習的にやってみるのもいいかも。
https://stackblitz.com/edit/github-siucq8-bh6kxh?file=app.vue

knokmki612 commented

@knokmki612 が問題と完成をみてみて問題の趣旨がわかるかどうかなどレビューしてみる

できればスライドに @knokmki612 が課題の動線を用意する

knokmki612 commented

伝えること

  • 課題123のそれぞれの説明
  • 16時に答え合わせする
knokmki612 commented

@Hidetaro7

レベル2

問題 https://stackblitz.com/edit/github-siucq8-ews4bu?file=app.vue
完成 https://stackblitz.com/edit/github-siucq8-fmtxnf?file=app.vue

この問題ですが、初期状態だと500が返ってくるのは混乱しそうな気がしました。

 <option :value="item.name">
    <!-- mustache記法でnameの値を表示してください -->
  </option>

ここのバインディングを取り除くかコメントアウトするなどできるといいのかなと思いました。

しかしたしかにノーヒントでoption要素にvalue属性が必要であることに気づくことは難しそうなので、代わりになんらかのヒントが必要という気もしました。以下のurlをコメントに含めたりするといいんですかね…？

https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist

単純にバインディングを取り除くと以下のようにはなります

 <option :value="item.name">
    <!-- mustache記法でnameの値を表示してください -->
  </option>
knokmki612 commented

レベル1

問題 https://stackblitz.com/edit/github-siucq8-4tkquf?file=app.vue
完成 https://stackblitz.com/edit/github-siucq8-bh6kxh?file=app.vue

こちらは問題が完成と同じ状態なので、問題の状態を用意する必要がありますね

たとえば以下のような設問にするのはいかがでしょう？ @Hidetaro7

  1. useFetchを使って http://localhost:3000/data.json から果物のリストを取得してください
  2. 果物を順序なしリストで表示してください https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul
knokmki612 commented

ここのバインディングを取り除くかコメントアウトするなどできるといいのかなと思いました。

口頭で事前に案内することで対処した

knokmki612 commented

レベル2

問題 https://stackblitz.com/edit/github-siucq8-ews4bu?file=app.vue
完成 https://stackblitz.com/edit/github-siucq8-fmtxnf?file=app.vue

これ実質的にリストレンダリング書くだけでほぼほぼ完成ですかね…？

Hidetaro7 commented

これ実質的にリストレンダリング書くだけでほぼほぼ完成ですかね…？

はい、あまり問題を複雑にするより、出来た実感を味わっていただくことも大事かと思うので、応用にとどめておいた感じです。

  • 👍1
knokmki612 commented

意図通りということで了解です

knokmki612 commented

課題については次回も使えるように整備していく方針であっていますか？それともまた次回なにか考えるということで（一旦完了として）いいですかね？

Hidetaro7 commented

課題については次回も使えるように整備していく方針であっていますか？それともまた次回なにか考えるということで（一旦完了として）いいですかね？

もう少しわかりやすいサンプルのほうが良かったという印象を個人的に持っています。
次回また考えることで一旦完了ということでよいです

knokmki612 commented

了解です