18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

社内でRust and WebAssemblyの勉強会をした話

Last updated at Posted at 2023-05-22

勉強会って難しい

社内で勉強会やっていますか?
勉強会っていいですよね。日々業務に追われがちで新しい技術に触れる機会が少ない時も定期的に勉強会があることで息抜き&ドメイン関係なく技術に向き合うことで知的好奇心が満たされます。

ですがテーマを選定するのはなかなか難しいです。
特にメンバー数が多くなってくるとそれぞれの技術的関心が一致しない&タスク状況によって参加しずらいケースが発生しやすくなるのでなかなか勉強会を継続して開催するのは難しくなってきます。

そこで今回はチーム内で

  • 事前準備不要
  • 隔週一時間で開催し一つのテーマを2ヶ月(計4回)かけて勉強する (結果的に内容が濃く5回になってしまいましたが)
  • テーマは多数決で決める

といった形式で勉強会を始めてみることにしました。
最終的に選ばれたテーマは「Rust+WebAssembly」です。こちらのチュートリアルを主に進めていくことになりました。

選ばれた理由としては「フロントエンドチーム、バックエンドチーム両方が関心のあるジャンル」、「大体4時間くらいで終わりそうな内容」という点で決まりました。

勉強会の流れ

形式としてはオンライン上でGoogle meetsを繋ぎながらチュートリアルを進めていきます。
4.1 ~ 4.10と10章ほどに分かれているので大体毎回3章ずつ進めることにしました。

第一回: 4.1 ~ 4.2章

この章では環境構築とRustでHello worldを実装しそれをwasmとしてbuildしブラウザ上に「Hello World!」を表示させるのが主な内容です。
環境構築でハマったメンバーも多く、localマシンの環境によってはなかなか解決できないエラーもあり辛かったです。

第二回: 4.3 ~ 4.4章

今回の勉強会で学んでいく「コンウェイのライフゲーム」というものの内容を学んでいきます。
以下のwikipediaがよくまとめられているということで公式にも引用されています。

4.4章の「implementing-conways-game-of-life」で実際にライフゲームのロジックを実装していくのですがRustをはじめて触れる人にとってはかなり難易度が高いように感じます。

Rustのコード自体の解説はそこまで多くないのでRustの基礎的な知識が求められます。
この4.4章の内容がかなりボリュームがあり想定より時間を割くことになりました。

第三回: 4.4 ~ 4.5章

4.5章ではRustで実装したコードのテストの書き方について解説しています。
この章はそこまでボリュームは少ないですが、4.4章で実装したプログラムを動かすと重すぎて画面が固まる、という問題が発生しました。

Rustは人類には早かったのでしょうか、というのは嘘でこのチュートリアルだとRustのloop処理を動かし画面を描画することになるのでブラウザに負荷がかかりマシンのCPUやメモリを大幅に消費してしまいます。
実際にwasmをサービスとして提供する際はあまりにも高負荷な画面描画処理を実行するのは避けたほうがよさそうです。

第四回: 4.5 ~ 4.7章

4.5, 4.6章ではdebuggerとconsoleを使ったブラウザでのデバッグ方法を紹介しております。
そこまで実装量としてはボリュームはないですがRustのテストの書き方をなんとなく触れることができ勉強になりました。

4.7章では実際にコンウェイのライフゲームをブラウザで遊べるようにクリックすることで初期パターンを作成できるようになりました。
自分でパターンを作成して実際にブラウザで動かすと達成感があります。ですが前述の通りブラウザが固まってしまう可能性があるので注意が必要です。

第五回: 4.8 ~ 4.10章

4.8章ではFPS(frame per second)と呼ばれる1秒間に画面が何回更新されるかを画面に表示しブラウザのPerformance測定機能を利用して描写速度を上げるためのチューニングをしていきます。
非常に興味深い章だったのですがブラウザが重すぎてchromeのPerformance測定ツールが固まってしまい、FPS表示だけやることにしました。

4.9章ではwasm-pack buildにて出力される.wasmファイルの圧縮をします。
LTO(Link Time Optimization)と呼ばれるオプションを使用し出力されるファイルサイズが減ることを確認できました。

4.10章ではnpmにアカウントを作成し実際にnpm packageとしてpublishしていきます!
私が実際にデプロイしてみたのはこちらになります。チュートリアルとはいえnpm packageとして公開できるとなんだか誇らしい気持ちになりますね。案外あっさりできて感動しました。

やってみた感想

  1. Rustの知識がないと辛い
    前述した内容ですがこのチュートリアルはRust×Web AssemblyにfocusしていてRustの知識がある前提で進められます。ですのでRustの知識がない場合は勉強会のテーマとしては難しいと感じました。

  2. 事前準備なしではキツい
    参加者が手を動かして進めていく形式の勉強会ではある程度事前に各々が環境構築や前回終わらなかった箇所を完了しておかないと挫折しやすいです。
    やはり勉強会ではある程度の準備をして開催した方が勉強会の時間を有意義に使えると感じました。

  3. ブラウザが固まるのがしんどい
    こちらも前述した内容ではありますがオンラインで画面を共有して開催する勉強会形式だと画面が固まってしまうと辛いです。
    wasmを実行するとmeetsが落ちてしまいパソコン自体も固まり再起動が必要なメンバーもいました。

  4. とはいえやってよかった
    上記ネガティブなことを書いてしまいましたが総じてやってよかったです!
    そもそもRustもWeb Assemblyも聞いたことはあるが実際に触ったことはないメンバーが多かったのでどのような技術か(パソコンがクラッシュする体験を通して)身をもって体験することができました。

今後に活かしたいこと

弊社では継続して勉強会を開催予定なので感想に書いた1~3のことを意識しつつ勉強会のテーマ&形式を決めていこうと思います。
やはり興味のある技術に触れ知的好奇心を満たしていくのが醍醐味ではあると思うので今後もアンテナを高くしてテーマ探しをしていこうかと思います!
(宣伝: 弊社では一緒に勉強会に参加してくれるエンジニアを募集しております)

18
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?