はじめに
プログラミングの楽しさを知ってもらいたく、
社内にて未経験者でも楽しめるプログラミングのワークショップを開催しました。
ご参加、ご協力頂いた皆様、ありがとうございました。
今後のために運用の流れなど、ナレッジとして残しておこうと思います。
同じようなことを考えている方が、もしいらっしゃいましたら、タイムテーブルや準備物など少しでも参考になれば幸いです。
※写真掲載の許可も皆様ありがとうございます。
想定
・時間：約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セット内で全体の進み具合を確認ながら進めていく。
STEP1 ：
1セット 20分
HTMLにタイトルを追加して中央に寄せてみよう。※h1タグ
HTMLにモグラが隠れている画像の複数表示してみよう。※tableの説明
JavaScriptでHTMLからモグラ要素を取得しよう。※document.getElementById
STEP2：
1セット 20分
モグラが現れる処理を実装してみよう。※パスを指定して画像を取得する。
休憩：10分
STEP3 ：
1セット 20分
現在はモグラが表示されるだけになっていますので、
モグラが隠れる処理を実装してみよう。
※setTimeoutでhiddenMogutan関数を呼びだし、hiddenMogutan関数で現れる処理と同じことをする。
STEP4 ：
1セット 20分
最後にモグラを叩く処理を実装してみよう。※//onMogutanのコメントアウトを外す
JavaScriptでモグラが出ている状態だったら、叩かれたモグラの画像に差し替える
カウント機能を動くようにして表示してみよう。
残り時間に関して
全ての工程が完了し、残った時間に関しては、
応用として、自分の考えた機能を追加してみよう。
・画像を別のキャラクターに差し替えて、それが叩かれたときに特典が10倍になる。
・モグラの表示数を倍にする。
などなど、色々な応用が出てきて面白かったです。