朝の時間を使って週に3回WebGL勉強会を半年開いてみた結果www

こちらはTech KAYAC Advent Calendar 2022 12/4 の記事です。

ご覧いただきましてありがとうございます、カヤックでWEBフロントエンジニアをしています新卒3年目のbobと言います。

www.kayac.com

昨日は同期のフロントエンドエンジニアのmiyabinの記事でした。Svelteという新しいフレームワークを仕事に投入したという内容になっていますので、もしよろしければぜひこちらもご一読を！

techblog.kayac.com

今回の記事では、タイトルの通り半年間朝の時間を使って勉強会を開いてきて得られた知見や感想を書いていきます。

何か新しい知識を得たい・会社に普及させたい、会社で勉強会を開きたいといった方にとって少しでも参考になりましたら嬉しいです。

WebGLとは何ぞ？？

勉強会の話題に行く前に、まずWebGLという単語について説明します。

あまり聞き馴染みのない方もいらっしゃれば、知ってるよーという方もいるかと思いますが、WikipediaによるとWebGLとはブラウザ上でGPUを使用しコンピューターグラフィックスをレンダリングするJavaScript APIと説明されています。

このGPUでレンダリングできるというのがミソで、グラフィックスの処理をCPUで演算するよりも高速に行えるため、ユーザーの行動に合わせてリアルタイムにインタラクティブに動かしたいという時にはもってこいな技術と言えます。

ここ最近では、海外を中心にこのWebGLを活用したおしゃれでリッチなサイトが増加している傾向にあります。

また海外に限らず、国内でもWebGLを駆使したレベルの高いサイトも増えつつあり、おしゃれでかっこいいサイトを見ると興奮と悔しさが入り混じったような感情に襲われます_:(´ཀ`」 ∠):

具体的な会社さんやクリエイターの方の名前は控えさせていただきますが、本当に日本のクリエイティブの高さには脱帽です、、、（普段からWebGLを追っかけている人であれば何となく想像はつくかと思います笑）

自分もいづれこんなおしゃれでかっこいいサイトをバリバリつくれるようになるたいです。

どんなサイトがあるんだろうと気になる方はぜひAwwwardsなどをご覧ください。

WebGLは難しい？！

カヤックでもWebGLを用いたサイトの制作例はいくつかあり、自分もWebGLを使ったサイトの制作を行なったこともあります。しかし、これが本当に難しい、、、

WebGLにはThree.jsという大御所ライブラリをはじめ、2Dに特化したPixiJSといったライブラリも存在しますが、ラップされ過ぎてしまっているため、WebGLの基礎的な事を理解していないと途端に応用が効かなくなったり、最適化できず重たいサイトが出来上がったり、複雑なことをしようとすると途端に歯が立たなくなってしまいがちです。

WebGLを勉強しようとした方は経験したことがあるかと思いますが、WebGLは独学で勉強しようとするとかなり難しい分野となっており、フロントエンドエンジニアが勉強してきたマークアップやWEBの知識とは全く異なる知識が必要となってきます。

特に、型付配列の理解は通常のJavaScriptを触っていると意識しないのでとっつきにくかったり、行列計算の話になると数学的な基礎知識が必要になったりと初学者にはかなり大変です、、、汗

WebGLといえば、doxasさんのこちらのサイトが本当に親切に丁寧に書かれていてとても参考になります。勉強会の資料作成時にも参考にさせていただいております🙇‍♂️

wgld.org

でしたが、やはり一人で全てを読み解いて理解するのはかなり大変です汗

このように独学でWebGLを勉強するのはハードルが高く、WebGLを勉強したいという同志を集めて、勉強会を開こうという経緯になりました。

勉強会について

構成メンバー・勉強会の形式

こうして自分がWebGLについてもっと勉強したいというモチベーションがきっかけで、他にもエンジニア、デザイナー含めて何人かの方に参加してもらっています。

特に、何か知識を勉強しようとしたときに、その分野のエキスパートの方に聞ける環境があると勉強会のクオリティも非常に高まります。今回は、意匠部（デザインチーム）の小原さんに師匠としてついていただきました！これは会社の得意分野や状況に大きく依存してしまいますが、どなたかに聞ける環境というのは本当に貴重です 🙏

www.kayac.com

進行や資料作成は基本すべて自分が行なっています。これが本当に大変なのですが、自分の成長がこの勉強会にとっての大目的なので、頑張りどころでもあります。

と、書くと「勉強会なのに、それが目標でいいのか！」という声が上がりそうでしたが、実際に勉強会を主催して一番恩恵を受けるのは開催している本人だなと感じました。

もちろん全員で学びたい事を持ち寄る形式の勉強会もありです。少しまとめると、

主催者・司会固定型：主催する人は準備などかなり大変。だが、主催している人にとってはものすごい学びになる。参加している人はもちろんその知識を得られるが、やはり手を動かすかどうかはその人次第なので、キャッチアップは大変かも。
持ち寄り型：全員で何かしら調べたり手を動かしたりして発表する形式。研究室でいえば輪読などもこれに当てはまりそう？全員が当事者意識を持って勉強できるが、責任が分散してしまうこともあるので、誰かが主催して上手くハンドリングする必要もあり。

の２パターンが主に勉強会の形式になるかと思います。

カヤックのフロントエンドの技術に関するもう一つの勉強会は隔週で持ち寄り型の形式で行っています。その勉強会で達成したい目標や勉強している内容、主催する人にとってどっちがハンドリングしやすいかという判断基準で勉強会の形式は決めていくといいのかなと思います！

勉強会の頻度と時間帯

タイトルの通り、今開いているWebGL勉強会は基本的に週3回、朝の8:30から9:30の1時間の頻度で行っています。IT・WEB系企業ではあるあるかと思いますが、カヤックも例にもれず会社としての定められた始業時間が遅めのため朝の時間を活用しています。

まず頻度についてですが、週に3回（月・水・金曜日）、1回1時間なので週に3時間とかなり高頻度で行っています。これはやはりWebGLという題材が難しく体系的に学習したい内容のため、週に一回のような頻度だとなかなか先に進まないと判断したためです。また頻度が少ないと、祝日が入ったり体調を崩したりすると期間が空き過ぎてしまって、理解が浅くなり頓挫してしまう可能性が高いです。

新しい内容でかつ題材が困難な場合であれば、勉強会の頻度を高めるのは効果的だと感じました。また、3ヶ月、6ヶ月間開催するなど、終わりを設定するというのも効果的かも知れません。参加している人が自走できる練度になれば、勉強会の形式を変えるのもありかと思います。

ちなみにこの勉強会は2022年の5月からスタートして、半年ほど経過していますが来年の3月ぐらいまではやりたいなと思っています！

次に時間帯についてです。前述の通り、WebGL勉強会は8:30スタートとかなり朝早い時間に設定をしています。これは参加者によってミーティングの時間が異なり調整が難しいため、裁量労働制を活用してこの時間に設定しています（ちゃんと労働時間に加算しています！）。

もう一つ理由があり、夕方よりも朝の時間の方が確実に体力があるという点です。実は、昨年にもWebGL勉強会が開かれていてその際には自分は参加者側だったのですが、やはり夕方・終業手前だと仕事の疲れが溜まったりミーティングが入ったりと参加しづらくなるという状況に陥りました汗

夜型の方ももちろんいますが、仕事で疲れた状態で新しい知識をインプットをするというの難しいので、振り返ると朝に勉強会を開くというのはかなり効果的だったと思います。勉強会を始める前は朝に勉強会を設定するのは勇気が要りましたが、結果的に朝に設定して正解だったと思います！あとはミーティングも基本的に発生しない時間のため、朝起きられなかった以外の言い訳ができないという効果もあります。

勉強会の頻度や時間帯は勉強会を継続させる上でもとても重要だと思っています。高頻度で行う勉強会であれば、少し大変ですが個人的には朝に勉強会を設定するというのはオススメしたいです。ですがこれはメンバーのスケジュールや生活スタイルに依存するので、慎重に話し合うことがとても大切かと思います！

資料の準備方法

勉強会において準備は本当に大切です。。基本的にはその日勉強したい内容を事前にコーディングしレビューしていただき、勉強会当日に自分がそのコードを上から順番になぞっていくという形式を取っています。やはり準備を怠っては勉強会のクオリティも上がりません。

Google Meetで録画を行ったり、座学的な知識については別途記事に溜めたりして見返しやすいような資料の作成を行なっています。

その日出られなかった！あとから入社した人で勉強会に追いつきたい！という人にとっても参加しやすいような資料の保存方法もとても大切になるかと思います。

案件優先【重要！】

できれば勉強会の頻度を落としたくないのですが、やはり案件の納期直前であったり、そちらにリソースを割く必要が出てきた場合には必ず案件を優先しましょう！

自分も案件で忙しい時には、勉強会はお休みにさせてもらって案件にフルコミットします。勉強会が軌道に乗っていくと楽しくなって優先する順番がごっちゃになってしまいがちですが、あくまで有志による勉強会であるという事を忘れず、案件を優先させる事を忘れないようにしましょう。

楽しむ【重要！】

ここまで読んでくださりありがとうございます。長く書いてしまいましたが、勉強会を続ける上で主催者も参加者にとって大事なことは勉強会を楽しむことだと思います。やっぱり楽しくないと続きません。参加してくれる人がいないと勉強会が成立しません（ライブの終わりみたいな一言）。

なので、楽しく和気藹々とした雰囲気作りも大切になると思います！

参加者の声

せっかくだったので、レギュラーで参加してもらっている３名にアンケートを取りましたので、そのアンケートの一部を抜粋させていただきます。

知らない知識（特に一人では触れにくい知識）に触れられて、かなり理解が深まっている。また、JavaScriptの知識に関する話に脱線することもあり、それも学びにつながっています。
案件の中でWebGLを使った実装をできないか試してみようと思えるようになりました！
朝はきついけど、夕方の方がやる気が出ないので朝の方がいいです。
朝起きないとという使命感があっていい
前回の内容を忘れずに済むので、週に3回という頻度でちょうど良い

改めてアンケートを取ったところ自分と同じ肌感で安心しました！参加してくださっている皆さんには感謝しかないです 🙇‍♂️