こんにちは、21B SysAd班のmehm8128です。
イベントやアナウンス以外でブログリレー期間外にブログを書くのは初めてかもしれません。
今回はプログラミング教室の資料を改善した話を書きます。

プログラミング教室

僕はtraPの役員会に所属していて、その中でも平役員という一番権威が低そうな名前の役職についています。平役員はさらにその中で合宿担当、コミケ担当、GAME^3担当、そしてプログラミング教室担当というように、担当を分けて主にイベントの運営を行っています。イベント期間外は仕事があまりない担当もあるので、イベント以外にも雑用を任されることもあります。
そして、僕はプログラミング教室担当をやっています。
プログラミング教室については以下の記事がまとまっているので、読んでみてください。

『中高生のためのプログラミング教室』でTAをしました

こんにちは、@d_etteiu8383です。この記事は夏のブログリレー 2022年 37日目の記事です。 本記事では『中高生のためのプログラミング教室』にTAとして参加した感想を述べます。過去4,5回ほどTAとして参加したことがあるのですが、その時の知見をあまり外部に向けて発信していなかったので今回改めて色々話します。 『中高生のためのプログラミング教室』とは 『中高生のためのプログラミング教室』は、弊サークルが毎年春と夏に開催しているプログラミング教室(体験会)です。 直近の開催報告記事も先日投稿されていますのでぜひご覧ください。 中高生のためのプログラミング教室を開催しました!(2…

東京工業大学デジタル創作同好会traPd_etteiu8383

また、前回の開催記事は以下から閲覧できます。

中高生のためのプログラミング教室を開催しました!(2023年春)

9/2に中高生のためのプログラミング教室を開催いたしました。 本教室も前回と同様、対面で実施しました。 TA1人に対して2人の生徒がつく形で説明を行いました。 本教室では、JavaScriptを用いてブラウザ上で動くインベーダーゲームを作成しました。 司会による概要説明・TAと生徒での自己紹介を行い、プログラミングを始めました。 以下は当日に使用した資料の一部です。 プログラミングとは何かの説明から始まり、四角形（プレイヤー）の描画・キー入力の受け取り・弾の当たり判定というように徐々にやれることを増やしていきます。 お昼休みにはドミノ・ピザさんのピザをいただきました。生徒やスタッフへの昼食・…

東京工業大学デジタル創作同好会traPs9

上記のブログ記事のこの部分で説明されているように、プログラミング教室ではtraP独自の資料を用いています。

しかし、資料の作成に用いられているツールやその周辺プラグインに色々と不都合が出てきたため、最近Webエンジニアになろう講習会の資料改修にも使われた、VitePressに移行しようという話になりました。

なろう講習会については以下のブログが参考になります。

2023年度Webエンジニアになろう講習会 講師ブログ

2023年度Webエンジニアになろう講習会 講師ブログ6 月、7 月に、毎年恒例の「Web エンジニアになろう講習会」（通称「なろう講習会」）を開催しました。このブログは講習会の講師による開催報告・振り返りブログです。 Web エンジニアになろう講習会とは「なろう講習会」は毎年 SysAd 班が主に新入部員に向けて行っている、Web 開発についての講習会です。初心者の状態から SysAd 班の活動に取り組むために必要な最低限の知識・能力を身に着けることを目的としています。過去の参加者の記録はこちらからご覧ください。 なろう講習会 - 東京工業大学デジタル創作同好会traP『デジタル創作同好会t…

東京工業大学デジタル創作同好会traPikura-hamu

今年の夏のプログラミング教室終了後に僕が手をつけていい感じにしていたのですが、先ほど一旦移行完了という感じになったため、ブログを書いています。

URL公開していいかちょっと不明なのでスクショだけ貼るのですが、こんな感じです。

やったこと

Giteaで管理しているためリポジトリの外部公開はしていないのですが、ディレクトリ構成などは基本的になろう講習会のものと同じです。分量がなろう講習会ほど多くないので簡潔にはなっています。

Markdownで管理されていたので、基本的にはそれをコピペするだけでした。
今までコードブロックはMarkdown内に直書きしていて、1箇所だけ変更して別の箇所で変更し忘れる、などということが発生していたのですが、今回VitePressに移行したことによってコードを別ファイルで管理しておいて、その何行目から何行目を引用する、ということが可能になりました(もしかしたらhonkitにもあるかも、確認してません)。
またそれに伴い、コードブロックの行数表示も何行目から開始というのを指定したかったのですが、当時のVitePressにはありませんでした。そこでissueを出してみたところ、スッと実装してくれる人がいて指定できるようになりました(行数指定して引用できること自体知らなかったのでそれも教えてもらえました。今見たら僕の説明のしかたがかなり悪いですね...)。
https://github.com/vuejs/vitepress/issues/2907
https://github.com/vuejs/vitepress/pull/2917

しかしこの実装だと、グローバルにlineNumbers(コードブロックで行数を表示する設定)をオンにした場合に上手く指定できなかったので、以下のPRを自分で出して解決しました(一発でマージされたけどこれでよかったのかな)。
https://github.com/vuejs/vitepress/pull/2941

これで無事、コードブロックをいい感じに表示できるようになりました。
また、honkitのときはデフォルトではコピーボタンがなくてプラグインを入れたけど上手く動かずという状態だったのですが、VitePressではデフォルトでコードブロックにコピーボタンがついているので、コピペも簡単にできます(プログラミング教室では、コードを書くことではなくてプログラミングを通してゲームを作ることを体験することを本質と考えているため、コピペは推奨しています)。

その他、なろう講習会のときに作ってもらったtraPっぽい色のテーマを取ってきてそのまま使い、見た目をいい感じにしました。

そして、NeoShowcaseを使ってデプロイまでしました。

今後

既にいくつかissueが立っていて、主な今後の改善点は以下の通りです。

• 差分表示をできるようにする
  • どこにコードを追加したのかが現状分かりにくいという話が毎回出ているので、VitePressの差分表示機能を使って分かりやすくしようと考えています
• 前のリポジトリの段階でissueが立っている、資料自体の内容の細かい調整
  • より分かりやすくするための、説明文の改良などです
• PDF化
  • 前のリポジトリのときはhonkitからPDF化ができてそれも配布していたのですが、VitePressになってからできなくなりました多分
  • https://github.com/vuejs/vitepress/issues/593 ここで挙げられているいくつかのライブラリでいいものがあればそれを使ってもいいと考えているのですが、そもそもPDFは紙に印刷して配布する用だったので、現在は不要かなと考えています(コピペ推奨ということもあり、数回前から配布しなくなりました。印刷代もかかるし...)

まとめ

次のプログラミング教室は3月なので、それまでにさらに改善していけたらなと思います。ただ、僕は12月で役員引退なので後輩たちへの引き継ぎもいい感じにできるように頑張ります。