APG4bとSiv3Dを利用して勉強会を開催した
はじめに
今年度，サークル内で，APG4bとSiv3Dを利用して2つのプログラミング勉強会をオンラインで開催しました． APG4bは，AtCoderのC++学習用の資料です．
Siv3Dは，可視化やインタラクションに関わるプログラムを作成するためのフレームワークです．
本記事では，開催したプログラミング勉強会について，それぞれその目的や内容などについてまとめます． その上で，APG4bとSiv3Dを利用して良かったと感じたことや勉強会の反省などについてそれぞれまとめます．
本記事はSiv3D Advent Calendar 2021の12月19日の記事です．
APG4bを利用したプログラミング勉強会
APG4bを利用して以下のようにプログラミング勉強会を開催しました．
目的
この勉強会の目的は以下の3つでした．
- 参加者にプログラミングの楽しさを知ってもらうこと
- 参加者にプログラミングに興味を持つ人と交流してもらうこと
- 参加者にプログラミングの基礎知識を身につけてもらうこと
期間
2021年5月12日から2021年7月2日まで間，毎週1回1.5時間程度の勉強会を開催しました．
対象者
この勉強会の対象者は，私の所属サークル内で，初心者を含む全ての部員でした．
講師陣
この勉強会には，私を含めて8名が講師として参加しました． それぞれの講師は，最大で2回の勉強会を担当し，司会と解説を行いました．
内容
| 回 | 内容 |
|---|---|
| 1回目 | 1.00.はじめに，1.01.出力とコメント，1.02.プログラムの書き方とエラー，1.03.四則演算と優先順位 |
| 2回目 | 1.04.変数と型，1.05.プログラムの実行順序と入力 |
| 3回目 | 1.06.if文・比較演算子・論理演算子，1.07.条件式の結果とbool型，1.08.変数のスコープ |
| 4回目 | 1.09.複合代入演算子，1.10.while文，1.11.for文・break・continue |
| 5回目 | 1.12.文字列と文字，演習 |
| 6回目 | 1.13.配列，演習 |
| 7回目 | 1.14.STLの関数，1.15.関数 |
| 8回目 | 2.01.ループの書き方と範囲for文，2.02.多重ループ，2.03.多次元配列 |
| 9回目 | 2.05.再帰関数 |
| 10回目 | 3.04.構造体 |
| 11回目 | 3.05.ビット演算 |
APG4bを利用することにした理由
資料がそれ自体で完結している
自分で資料を探して調べながらプログラミングを勉強することは，プログラミングに初めて触れる初心者の多くにとっては難しいことだと考えています． 実際，私も最初は一通りのC言語を先輩から教えてもらうことでプログラミングを勉強しました．
APG4bは，資料がそれ自体で完結しており，後ろで述べるようなプログラミングの基本知識がこの資料だけで学べるようになっていると思いました． ここには，演習問題も含まれており，このおかげで，講師達がオリジナルの資料や演習問題を用意する手間を省くことができると考えました．
また，資料がそれ自体で完結していることにより，参加者が講師の解説を聞かないで自分のペースで進めることも可能となっていると思いました．
プログラミングの基本知識が網羅されている
私は，型，配列，構造体，変数，四則演算，繰り返し，条件分岐，関数のように多くのプログラミング言語で共通して存在するような概念をプログラミングの基本知識だと考えています． APG4bはこれらの基本知識を網羅しており，プログラミングに初めて触れる人が，自分で調べて勉強できるようになるために必要なキーワードを把握できるものとなっていると思いました．
Web上に実行環境が用意されている
プログラミングに初めて触れる人にとって実行環境を構築することは簡単なことではなく，ここで挫折してしまうのは悲しいと思います． APG4bには，コードを書いてプログラムを実行できるコードテスト機能が備わっており，環境構築に手間をかけなくてもプログラミングの勉強を始められるようになっていると考えました．
ここで勉強したC++をSiv3Dによる開発に応用できる
APG4bで学べるC++は，Siv3Dを使った開発にそのまま生かすことができ，相性が良いと考えました．
その他工夫したこと
この勉強会では，APG4bを利用して準備の手間を省いたことの他にも，交流の時間を設けるという工夫をしました． 交流の時間とは，勉強会の後に，AmongUs，麻雀といったゲームで遊んだり勉強会の復習をしたりする時間です． これを設けることによって部員同士が仲良くなれば，部員の幽霊化を抑えることができると考えました．
振り返り
APG4bの資料をそのまま使ったため，準備に手間をかけずにプログラミング勉強会を開催できたと思います． また，元の資料がそれ自体で完結しているため，講師の力量や相性によらず，最低限の質は保たれていたと思います．
交流の時間を設けたことで，部員の幽霊化を抑えることができたと考えています． 昨年度，似たような形式で勉強会を開催したときは，最初10人程度いた参加者が最後には2人まで減ってしまいました． 交流の時間を設けるというアイデアは，ここでのの反省の結果として生まれたものでした． 実際，今年度の参加者は，最初20人くらいで最後は15人くらいだったと記憶していますが，昨年度ほど大きく参加者が減ることは無かったのは，交流の時間を設けた効果が少なからずあっただろうと考えています．
また，AtCoderのコンテンツを利用した勉強会だったため，そのままAtCoderのコンテストに参加する部員も多く，競技プログラミング勢が増えました．
改善すべき点として，参加者の理解度をもっと把握できるようにすることが挙げられると考えています． AtCoderの提出一覧から提出されたコードを確認できるため，これを利用すれば参加者ごとにアドバイスをしたり，参加者がどこで躓いているか把握することができたと思います． そのために，可能なら事前にユーザ名を教えてもらったり，解けない場合にも提出してもらうように言っておけば良かったと考えています．
Siv3Dを利用したゲーム開発勉強会
OpenSiv3D v0.4.3の資料を利用してゲーム開発勉強会を以下のように開催しました．
目的
この勉強会の目的は，参加者に，ゲーム開発など，AtCoder以外のプログラミングにも興味を持ってもらうことでした．
期間
2021年8月27日から2021年8月30日まで間，毎日午前中に2時間，午後に2時間の勉強会を開催しました．
対象者
この勉強会の対象者は，私の所属サークル内で，ゲーム開発などグラフィカルなアプリの開発に興味がある部員でした．
講師陣
この勉強会には，私を含めて3名が講師として参加しました．
内容
| 回 | 内容 |
|---|---|
| 1日目午前 | 構造体と関数についての復習 |
| 1日目午後 | Visual Studioの使い方，追加の演習問題 |
| 2日目午前 | Siv3Dのインストール，1. Siv3D の基本 |
| 2日目午後 | 2. 図形を描く(2.1 円を描く，2.2 色を付ける，2.3 背景の色を変える，2.4 長方形を描く，2.5 枠を描く) |
| 3日目午前 | 3. 動きを作る(3.1 経過時間を使ったアニメーション(Scene::Time()，Scene::Center()，Scene::DeltaTime())，3.2 ストップウォッチ) |
| 3日目午後 | 4. あたり判定 |
| 4日目午前 | 5. 画像を描く(5.1 絵文字を描画する，5.5 アイコンを描画する，5.6 画像ファイルを読み込んで描画する) |
| 4日目午後 | 8. フォントを使う(8.1 Font，8.8 フォントのスタイルを変える，8.13 縦書きでテキストを描画する，8.14 指定した長方形の中にテキストを描く，8.15 テキストを 1 文字ずつ表示する) |
Siv3Dを利用することにした理由
日本語の公式資料が充実している
Siv3Dの公式資料では，環境構築からライブラリの使い方までが日本語で示されています． 以前にDXライブラリというものを使用した時には，新しいプロジェクトを作成した後に必要な設定の手順が多くて大変だった思い出があります． これに対して，Siv3Dでは環境構築自体もVisual Studioのインストールと，Siv3Dのインストーラを起動することだけで難易度が低めだと感じています． また，Siv3Dの公式資料は，単なるリファレンスではなく，機能の解説がコピペで動作確認できる短いサンプルコードとともに示されており，動かしたり改造しながら勉強できると思いました．
APG4bで勉強したC++を使用できる
Siv3Dを利用すると，APG4bで勉強したC++によるプログラミングの延長として，アプリケーション開発を行えると考えています． そういう点でSiv3DはAPG4bと相性が良いと思いました． これに対し，例えばUnityでは，エディタとフレームワークを利用する中の一部にプログラミングがあるという感じがしますし，また，使用できるプログラミング言語がC++ではなくC#です．
その他工夫したこと
この勉強会では，Siv3Dを利用して準備の手間を省いたことの他にも，以下の工夫をしました．
- 構造体の復習を設けた．
- 独自のSiv3D演習問題を設けた．
構造体の復習
Siv3Dはクラスベースのフレームワークであるため，構造体への理解が重要であると考えました． そこで，APG4bで学んだ構造体を復習する時間を最初に設けました． 具体的には，APG4bの3.04構造体のキーポイント，細かい話（コンストラクタ）について解説し，演習として，EX24 - 時計の実装に取り組みました．
また，独自の演習問題として以下を解きました．
- 構造体に関する追加の演習問題
構造体の練習として、和とスカラー倍の定義されたベクトル表す構造体を実装してみましょう。 以下のプログラムの雛形のコメントに従って構造体を実装してください。 github.com
この演習問題は，Visual Studioの使い方に慣れるためにも，APG4bのコードテストではなく以下を参考にしてVisual Studioで解くこととしました．
独自のSiv3D演習問題
2日目以降は，Siv3Dの演習問題を以下のように準備しました．
| 回 | 演習問題 |
|---|---|
| 2日目午前 | Siv3Dのサンプルを5個選びそれぞれコピペして実行してみる． |
| 2日目午後 | 5種類の図形を別の色で描画してみる． |
| 3日目午前 | マウスカーソルがウィンドウの左側にある間は円を左に動かし，右側にある間は円を右に等速度で動かしてみる． |
| 3日目午後 | クリックした円を分裂させる（元の円を消し，少しずらした位置に二つの円を描画する．）． |
| 4日目午前 | アイコン，画像を拡大縮小，回転させてみる（5.2 テクスチャを拡大縮小して描画する，5.3 テクスチャを回転して描画するを参考にする．）． |
| 4日目午後 | 3人のキャラクタを表示し，クリックされたキャラクタに何か喋らせる． |
難易度としては，サンプルコードを組み合わせたり，少し改造することで解けるものを設定しました． 解答例は以下のリポジトリにあります．
振り返り
Siv3D（Open Siv3D v0.4.3）の資料をそのまま利用したため，演習問題以外の多くの準備の手間を省くことができたと考えています． また，少なくともゲーム開発勉強会を通して，参加者が今後アプリケーションなどを作りたいと思った時にSiv3Dのことを思い出してもらえるようになったかなと思っています．
しかしながら，改善すべき点として，勉強会中に参加者が演習問題をどの程度解けているのか把握できなかったことが挙げられると考えています． 実際，サンプルコードの実行ができていない参加者が何人かいたようだったのですが，勉強会中には把握できませんでした． 勉強会はオンラインで開催されたため，参加者から声がかからない限り講師が参加者の様子を把握することはできません． これに対する解決案として，勉強会中に参加者が質問をしたりヘルプを求めたりしやすいようにするために，演習ではグループに分かれてそれぞれのグループに講師がつくことなどが挙げられるのかなと考えました．
APG4bを利用したC++勉強会で触れることのできなかったC++文法がSiv3Dのサンプルで使用されていることも多いので，これに対するフォローをもっと手厚くするべきだったと思いました．
また，この勉強会は夏休み中に集中して開催されたのですが，せっかくなら合宿らしく，夜にはオンラインでできるゲームをして盛り上がればもっと楽しくなったかもしれないと思いました．
勉強会を開催する中で，私と他の講師の一人がそれぞれ資料中に誤植を発見し，これを修正するプルリクエストを送ってマージされるということもありました．
MacBook Air (M1, 2020)で環境を構築するためには，以下の記事を参考に設定を修正する必要がありました．
まとめ
- 今年度，サークル内で，以下のプログラミング勉強会を開催した．
- APG4bを利用したプログラミング勉強会
- Siv3Dを利用したゲーム開発勉強会
- 勉強会の資料としてAPG4bやSiv3Dを利用することには，以下のような多くのメリットがあった．
- 資料が網羅的であり，それ自体で内容が完結している．
- 資料をそのまま利用することで講師陣の負担を減らすことができる．
- 環境構築の難易度が高くない．
- APG4bやSiv3Dの相性が良い．
- これらのコンテンツを活用するために以下の工夫をした．
- APG4bを利用したプログラミング勉強会では，交流の時間を設けた．
- Siv3Dを利用したゲーム開発勉強会では，構造体の復習の時間と独自の演習問題を設けた．
- 個人的に反省した結果，これらのコンテンツをオンライン勉強会で最大限活用するための工夫として以下のものが考えられた．
- AtCoderの提出一覧を意識的に活用できるようにする．
- 演習では小グループに分かれてそれぞれにコーチがつくようにする．
