はじめに

プログラミングの楽しさを知ってもらいたく、
社内にて未経験者でも楽しめるプログラミングのワークショップを開催しました。
ご参加、ご協力頂いた皆様、ありがとうございました。

今後のために運用の流れなど、ナレッジとして残しておこうと思います。

同じようなことを考えている方が、もしいらっしゃいましたら、タイムテーブルや準備物など少しでも参考になれば幸いです。

※写真掲載の許可も皆様ありがとうございます。

想定

・時間：約1時間半
・受講者の人数：3~5人
・受講者のレベル：0~1年目のエンジニア & 非エンジニア(他部署)
・講師の人数：2~3人
・講師のレベル：4~6年目のエンジニア
・場所：10人程度が入れる会議室

※講師の配置は、
メインが前、サブが後ろに座り、サブはタイムキーパーを兼ねる
参加者はある程度スペース空けて座ってもらう。

完成形はこちらです。

※index.htmlとsample.jsを見本にmogu_tan.htmlとmogu_tan.jsを実装していきます。

上記のサイトのcodeを押下して、「Download zip」からソースコードをダウンロードして、
好きなフォルダ(ディレクトリ)に配置して解凍してください。

作業自体はメモ帳でも可能です。
Visual Studio Codeがあると作業しやすいです。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

・大きめのモニター × 1（もしくはプロジェクター）
・HDMIケーブル × 1
・イス × 参加人数分 (講師 + 受講者)
・電源タップ × 2 (5本くらい挿せるやつ)
・アルコール消毒 × 1

必ずコロナ対策で事前に体温チェックと、会場の換気は行うこと！
※換気できない場合は空気清浄機 × 1

無くても可！
・お菓子(甘いやつ)
・飲み物(お茶)

・あいさつ＆内容説明 5~10分
今日やることの流れを簡潔に説明する

・必要であれば環境構築 ~15分程度で出来るもの
※複雑なものは事前におこなってもらうほうが良いかも

・実施
説明 5分と実施 15分の合計、
20分を1セットとする。
1セット内で全体の進み具合を確認ながら進めていく。

1セット 20分

HTMLにタイトルを追加して中央に寄せてみよう。※h1タグ
HTMLにモグラが隠れている画像の複数表示してみよう。※tableの説明
JavaScriptでHTMLからモグラ要素を取得しよう。※document.getElementById

1セット 20分

モグラが現れる処理を実装してみよう。※パスを指定して画像を取得する。

休憩：10分

1セット 20分

現在はモグラが表示されるだけになっていますので、
モグラが隠れる処理を実装してみよう。
※setTimeoutでhiddenMogutan関数を呼びだし、hiddenMogutan関数で現れる処理と同じことをする。

1セット 20分

最後にモグラを叩く処理を実装してみよう。※//onMogutanのコメントアウトを外す
JavaScriptでモグラが出ている状態だったら、叩かれたモグラの画像に差し替える
カウント機能を動くようにして表示してみよう。

全ての工程が完了し、残った時間に関しては、
応用として、自分の考えた機能を追加してみよう。

・画像を別のキャラクターに差し替えて、それが叩かれたときに特典が10倍になる。
・モグラの表示数を倍にする。

などなど、色々な応用が出てきて面白かったです。