Green-light Robo Challenge で ロボット作成のハンズオンはいかが？

## はじめに

非公式コンテンツですが、自社内部のメンバーに向けて作成したハンズオン用コンテンツを共有します。年末年始でお時間ある方はチャレンジしていただけると幸いです。

あくまで「アフター５クオリティー」なので、解説動画は途中で画面が動かなくなったりしますが :sweat_smile: それもご愛敬ということでご容赦いただければと思います。

作成の目的としては `ガードチョイスは難しくない。しかし 型はある` ことを伝えるため。体系的ではなくボトムアップで事例を積み上げました。

基本的に以下14題のパターンを理解してしまえば、緑のロボットを恐れることはなく、あなたの頭の中から「DASロボットって安定しないんだよなぁ～」という不安は雲散霧消することでしょう。

単に解法だけでなく、考え方（あるのか？）についても馴染んでいただければ幸いです。

## ハンズオンの構成

- 全3部構成　14問
- 課題：ハンズオンに使用する実際のページ。Chromiumエンジンで読み込みます
- 実装ガイド：ロボット実装の流れ、全体像を簡潔に図示したガイド
- 解説動画：動画で説明しながら実際のロボットを作っていく様子を撮ったもの



## マスタリング・ガードチョイス					

#### Location Found / ロケーションが見つかった場合
| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|Ga1|[テーブルに追加された行を追尾する](https://codepen.io/glrchallenge/full/WNJpNJa)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563500594342&cot=14)| [🎥](https://youtu.be/Y0kbIy0zXGg?si=ywVghGjl1yi5CKf5)  |
| Ga2 |[子画面入力情報の親画面への反映をチェックする](https://codepen.io/glrchallenge/full/eYKyKWz)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563501479532&cot=14) |[🎥](https://youtu.be/N8zphtR7XuA)|
| Ga3 |[ランダムな順番で表示される複数のウィンドウから適切なものを絞り込む](https://codepen.io/dachallenge/full/jOQJday)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563503246490&cot=14) |[🎥](https://youtu.be/Kp9tdLki1rA)|

#### Location Not Found / ロケーションが見つからなかった場合
| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|Gb1|[ボタンが有効になるタイミングを同期する](https://codepen.io/dachallenge/full/YzLLGwe)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563505584570&cot=10)|[🎥](https://youtu.be/6-yt0ZGnkyE)|

#### Location Removed / ロケーションガ削除されました
| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|Gc1|[ロケーションガードを使ってモーダルを同期する](https://codepen.io/dachallenge/full/dyeZXwa)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563505584707&cot=14)|[🎥](https://youtu.be/srxmkreE7is)|

#### Tree Stop Changing / ツリーの変更停止
| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|Gd1|[画面の描画が停止し一定時間経過したタイミングをキャッチ](https://codepen.io/dachallenge/full/KKeRWoy)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563506631070&cot=14)|[🎥](https://youtu.be/0dlzsh7jwZE)|

#### Application Found / アプリケーションが見つかった場合
| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|Ge1|[ランダムに表示されるお知らせウィンドウの処理](https://codepen.io/dachallenge/full/rNQbxoW)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563507570417&cot=14)|[🎥](https://youtu.be/xzwRiMcUcZ8)|

## マスタリング・ループアクション

#### For Each Loop / 繰り返しループ
| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|La1|[表示されているカードの出典をループで集計する](https://codepen.io/dachallenge/full/abQjaed)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563508441474&cot=14)|[🎥](https://youtu.be/F91MazMUhvM)|
|La2|[複数の領域に配置された要素を1つのループ内で操作する](https://codepen.io/dachallenge/full/BaGGGjO)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563534346069&cot=14)|[🎥](https://youtu.be/3qkoB-3HEyY)|
|La3|[動的に生成されるリストをアイテム数分繰り返す #1](https://codepen.io/dachallenge/full/yLQQRjG)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563534541841&cot=14)|[🎥](https://youtu.be/YiOLPi4PxJg)|
|La4|[動的に生成されるリストをアイテム数分繰り返す #2](https://codepen.io/dachallenge/full/abQaaXo)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563535398933&cot=14)|[🎥](https://youtu.be/tFsWcAr1Vwc)|

## マスタリング・ファインダー

| ID| 課題|実装ガイド |  解説動画| 
|:-:|:-|:-:|:-:|
|Fa1|[動的にレイアウトが変わる表から常に特定のエリアを特定する](https://codepen.io/dachallenge/full/ZEmdPzL)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563535968882&cot=14)|[🎥](https://youtu.be/gBl3h4f2cJw)|
|Fa2|[周辺のタグ情報を連結条件にして特定のタグを追跡する](https://codepen.io/dachallenge/full/dyQxyzw)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563537573832&cot=14)|[🎥](https://youtu.be/i_itVKQ6T3E)|
|Fa3|[画面領域よりも大きいセレクトボックスを操作する](https://codepen.io/dachallenge/full/NWeqrGz)|[📝](https://miro.com/app/board/uXjVMmnlFgA=/?moveToWidget=3458764563540390015&cot=10)|[🎥](https://youtu.be/oN4qI59I4mM)|

## まとめ

つかみどころがないものはどこか怖い。というか不安に感じますが、「なんだ、大体こんな感じか。」と分かってしまえば景色が変わってきます。

それでは、よいお年を。