【OSC2024 Online/Spring】とらのあなラボの Deno イベント開催の取り組み

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. とらのあなラボの
Deno イベント開催の取り組み虎の穴ラボ株式会社藤原佳顕 OSC2024 Online/Spring 1

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. 目次
1. 概要 • 自己紹介 • 今回の発表について • 虎の穴ラボの紹介 • 虎の穴ラボとDeno 2. Denoの概要 • Denoとは何か？ • Denoの主要な機能と利点 3. toranoana.denoについて • 概要 • 開催経緯 • 開催内容の紹介 • 結果 2 4. Deno Festについて • 開催経緯 • 開催内容 5. まとめ

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. 概要
3

- 自己紹介藤原佳顕（ふじわらよしあき）: yoshiaki fujiwara • Webエンジニア • 新規事業担当（Fantia、Creatia）、アーキテクトチーム • 前職：独立系ソフトウェア会社、主にGISとWeb、ライブラリ開発 ◦ TypeScript、Ruby on Rails、C#、C++ ◦ React、Vue、Angular • 入社理由 • 自分がスキルアップできそうな場所に行きたい • オタク系の話ができるところに行きたい好きなモノ • シューティングゲーム、格闘ゲーム • SF小説 • プログラミング 4

- 今回の発表について • 虎の穴ラボでは、OSSであるDenoの勉強会を数年にわたり継続開催しています • どのように開催したか、実際にどのようなイベントか、それをどうやって継続してきたか、結果どうなったかなどについて話します • OSS関連のイベントや勉強会を開く際の参考になれば幸いです 5

- 虎の穴ラボの紹介虎の穴ラボとは？ • 主にとらのあな関連サービスのシステム開発を専門に担う、エンジニアの会社 ◦ 「とらのあな通信販売」、「Fantia(ファンティア) 」等 ◦ エンジニアが働きやすい制度・環境を整える為の分社 ▪ とらのあなが小売企業なので、そちらとの差別化 ◦ フルリモート / 地方勤務OK! • 主な利用技術 ◦ Java、Kotlin、Ruby on Rails、JavaScript(TypeScript)、Node.js、Go ◦ MySQL、Oracle、PostgreSQL ◦ AWS、GCP 6

- 虎の穴ラボの紹介 7 虎の穴ラボ積極採用中！公式サイトは↓ https://toranoana-lab.co.jp/

- 虎の穴ラボの紹介 • 過去いろいろなイベントを開催しています • 【とらのあな主催】オタクがKotlinを追うライトニングトークイベント ◦ https://yumenosora.connpass.com/event/120691/ • Webアプリケーション開発者のためのDockerハンズオン ◦ https://yumenosora.connpass.com/event/208070/ • とらのあなラボ Tech Conference ◦ https://yumenosora.connpass.com/event/219627/ • Denoハンズオン【とらのあなラボ】 ◦ https://yumenosora.connpass.com/event/227160/ 8

- 虎の穴ラボとDeno 虎の穴ラボとDeno • 2021/8からtoranoana.denoというイベントを不定期継続開催 ◦ 発表者(藤原)と奥谷という社員の二名で開催 ◦ 大体2ヶ月に一度程度 ◦ 過去イベントのレポートはブログになっているのでこちらをどうぞ ▪ https://toranoana-lab.hatenablog.com/search?q=toranoana.deno • 2023/10にDenoFestという大規模なイベントの協賛 ◦ 運営周りが虎の穴ラボ今日の発表では主にこれらのイベントをどうやって継続開催してきたかなどについて共有したいと思います 9

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Denoの概要
10

- Denoとは何か？ • Denoとはなにか？ ◦ https://deno.com/ ▪ Next-generation JavaScript Runtime ◦ Node.jsをはじめとするJavaScriptランタイムの一つ ◦ Node.jsの作者であるライアン・ダール氏が中心となって開発されているOSS ◦ 法人としてのDenoも存在する ▪ https://deno.com/company 11

- Denoとは何か？ • 周辺サービスもかなりたくさんある(公式) ◦ Deno Deploy ▪ https://deno.com/deploy ▪ Deno向けのエッジコンピューティングサービス ◦ Deno Subhosting ▪ https://deno.com/subhosting ▪ ユーザーが提供した信頼できないJavaScriptを安全にエッジランタイムで動かせる仕組み ◦ Deno Kv ▪ https://deno.com/kv ▪ 名前の通りKey-Valueストア、Deno Deployから使える ◦ Deno Queue ▪ https://deno.com/blog/queues ▪ Deno Kvを基盤にしたメッセージキュー 12

- Denoの主要な機能と利点 • 特に設定不要でTypeScriptが動く ◦ 逆にルールを変えたければtsconﬁg等の利用も可能 13

- Denoの主要な機能と利点 • セキュアな実行 ◦ ファイルの読み書きや、通信を行う場合明示的に許可が必要 14 const text = await Deno.readTextFile("hello.txt"); console.log(text); const res = await fetch("https://example.com"); console.log(res); • 実行時聞かれるので許可するか、--allow-readのような形で直接指定

- Denoの主要な機能と利点 • パッケージ管理 ◦ 基本はURL経由でのimport ◦ npmの資産も利用可能 15 import * as o from 'https://deno.land/x/cowsay/mod.ts'; import express from "npm:[email protected]"; const m = o.say({ text: 'start Express!' }); console.log(m); const app = express(); app.get("/", (_req, res) => { res.send("Welcome to the Dinosaur API!"); }); app.listen(3000);

- Denoの主要な機能と利点 • Web標準APIに準拠したAPI郡 ◦ https://docs.deno.com/runtime/manual/runtime/web_platform_apis ◦ ブラウザのAPIと同じものがサーバーサイドでも動く ◦ Crypto APIを使っている例(特にimportなど不要で動く) 16 async function genKey() { return await crypto.subtle.generateKey( { name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"], ); } async function exportKey() { const key = await crypto.subtle.exportKey( "jwk", await genKey(), ); await Deno.writeTextFile("./secret.json", JSON.stringify(key)); console.log("generate secret.json. add to .gitignore"); } await exportKey();

- Denoの主要な機能と利点 • WebGPUを扱う ◦ 外部ライブラリ(SDL2など)を使うことでGUIでWebGPUを利用して描画ができる 17

- Denoの主要な機能と利点 18 const vertexShaderSource = ` struct Uniforms { modelViewProjectionMatrix : mat4x4<f32>, } @binding(0) @group(0) var<uniform> uniforms : Uniforms; struct VertexOutput { @builtin(position) Position : vec4<f32>, @location(0) fragUV : vec2<f32>, @location(1) fragPosition: vec4<f32>, } @vertex fn main( @location(0) position : vec4<f32>, @location(1) uv : vec2<f32> ) -> VertexOutput { var output : VertexOutput; output.Position = uniforms.modelViewProjectionMatrix * position; output.fragUV = uv; output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0)); return output; }`; const fragmentShaderSource = ` @fragment fn main( @location(0) fragUV: vec2<f32>, @location(1) fragPosition: vec4<f32> ) -> @location(0) vec4<f32> { return fragPosition; }`; // Create a vertex buffer from the cube data. const verticesBuffer = device.createBuffer({ size: cubeVertexArray.byteLength, usage: GPUBufferUsage.VERTEX, mappedAtCreation: true, }); new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray); verticesBuffer.unmap(); // シェーダーモジュールの作成 const vertexShaderModule = device.createShaderModule({ code: vertexShaderSource, }); const fragmentShaderModule = device.createShaderModule({ code: fragmentShaderSource, });

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて
19

20

- 概要 • toranoana.denoの概要 ◦ 虎の穴ラボが2021/8から不定期開催しているDenoに関する勉強会 ◦ 内容はDenoに関することなら何でもOK ◦ 現在16回開催済み(第0回~第15回) ◦ 基本はYouTubeでの配信によるオンライン開催 ◦ 主催発表1名で、3名を外部登壇として募集 21

- 概要 • toranoana.denoの各種リンクなど ◦ ハッシュタグ ▪ #toranoana_deno ◦ 配信場所 ▪ https://www.youtube.com/@toranoana_lab ◦ 募集ページ ▪ https://yumenosora.connpass.com/ ◦ 説明資料 ▪ https://speakerdeck.com/toranoana/toranoana-dot-denoshuo-ming-zi-liao 22 (虎の穴ラボYouTube)

- 開催経緯 23 ではDenoで決定で！ Deno話題になってるしDenoがいいかも流行り病で勉強会減ってるし何かやりたいので一緒にやらない？ DenoとかRustとかReactとか

- 開催経緯 • toranoana.denoの開催経緯 ◦ 発起人が自分 ▪ 奥谷と勉強会なにかしたいと話していてDenoに決めた ◦ 主催：藤原、奥谷 ▪ 藤原が日程候補出しやイベントページの準備、奥谷が社内外の調整 ▪ 司会と主催発表は交互に持ち回り ◦ ちょうど1.0が出て間もない時期で、かなり注目度が高かった ▪ まだ勉強会とかも多くなくファーストペンギンになれそう ◦ 社内でも触っている人が居て、面白そうだなと感じてる人も多かった ◦ コロナもあってちょうど定期開催していたイベントがなくなっていた ▪ 新しいイベントを開催したかった ◦ JavaScript/TypeScriptは現在のWebアプリを構成する上ではほぼ必須な言語なので、一緒に学べそう 24

- 開催経緯 • 開催前、開催中にやったこと ◦ deno-jaのSlackに入る ◦ 他のDenoイベントへの参加 ▪ https://deno-ja.connpass.com/ ◦ ブログでDeno記事を定期的に書く ▪ アップデートとか作ってみたとかやってみたとか ▪ ちょうどDenoの連載等もやった • https://toranoana-lab.hatenablog.com/archive/categ ory/Deno%E9%80%A3%E8%BC%89 25

- 開催内容の紹介 • 内容紹介 ◦ いくつかの会とセッションをピックアップして内容を紹介します ▪ 主催として発表したものを中心にしています 26

- 開催内容の紹介 • 第0回 ◦ 各種リンク ▪ https://yumenosora.connpass.com/event/220025/ ▪ https://toranoana-lab.hatenablog.com/entry/2021/08/18/184057 ◦ 記念すべき初回 ◦ 司会：藤原、主催発表：奥谷 ◦ 参加者36名、外部発表者4名 ▪ この手のイベントの傾向として初回が参加人数ピークになりがちなので多い ◦ 参加者も豪華 ▪ Denoの中の人とか、雑誌に記事書いた人とか ◦ 初回で様子見も兼ねてGoogle Meetでの開催 ▪ 配信に乗りたくない人がいる可能性を考慮 27

- 開催内容の紹介 28

- 開催内容の紹介 • 第0回の主催LT(発表者：奥谷) ◦ DenoからWASMを扱うことでライブラリを作る発表 ◦ DenoがWeb標準APIを実装しているため、フロントエンドとほぼ同じコードでサーバーサイドでも動く ◦ WASMもDeno用のJSを用意できればフロントエンドから読み出すように使える ▪ ビルドツールのwasm-bindgenがDenoターゲットでWASMビルドできる ◦ Web標準APIを実装していることの強力さが垣間見える発表だと思います 29

- 開催内容の紹介 • 第3回 ◦ 各種リンク ▪ https://yumenosora.connpass.com/event/230877/ ▪ https://toranoana-lab.hatenablog.com/entry/2021/12/03/165334 ◦ 第0回含めると実質4回目 ◦ 司会：奥谷、主催発表：藤原 ◦ 参加者19名、外部発表者1名 ◦ 今回は開催場所はYouTube(第1回から) ▪ 発表者はGoogle Meetに集合、視聴者はYouTubeへ ▪ この回はアーカイブなし 30

- 開催内容の紹介 • 第3回の主催LT(発表者：藤原) ◦ FFIを利用してDenoからdllやdylibを読み取るといった発表 ▪ 今回はlibmysqlclientを読み込み、Denoからクライアントライブラリ経由で MySQLに接続するといった具合 ◦ DenoやNodeのライブラリや、WASMなどに加えて外部のリソースを利用する手段の一つ ◦ インターフェースさえ作れればほぼどのようなdllなども呼べるはずなのでかなり強力な機能 ▪ 前述のWebGPUのコード例も内部はFFIでdllを読み込んでいる 32

- 開催内容の紹介 • 第8回 ◦ 各種リンク ▪ https://yumenosora.connpass.com/event/255811/ ▪ https://toranoana-lab.hatenablog.com/entry/2022/09/01/123000 ▪ https://www.youtube.com/watch?v=9BPmg-bufrw ◦ 司会：藤原、主催発表：奥谷 ◦ 参加者13名、外部発表者1名 ◦ 奥谷が声掛けして外部の登壇者に参加してもらった回(Deno社の人) 33

- 開催内容の紹介 • 第8回の内容 ◦ 主催LTとして奥谷がDeno Deployの話、外部LTとしてDenoのWebフレームワークであるFreshの話がされた ▪ どちらもDenoの採用理由になりうる目玉ソフトウェア/サービス ◦ このあとの勉強会でも度々Deno DeployやFreshの発表は結構な頻度で見受けられるので注目度が高い 35

- 結果 36 開催回合計参加者内登壇者ラボ関連登壇者第0回 40 4 0 第1回 36 2 1 第2回 20 2 2 第3回 20 1 0 第4回 16 0 0 (主催枠で2名登壇) 第5回 14 1 1 第6回 13 1 1 奥谷x2 第7回 17 1 1 第8回 14 1 0 奥谷声がけ第9回 15 1 1 第10回 18 2 2 第11回 12 1 1 第12回 16 2 1 奥谷声がけ第13回 13 1 1 第14回 8 1 1 奥谷x2 第15回 21 3 0

- 結果 • 赤字→登壇者いなかったので社内メンバーでなんとかしている回 • なんでこの状況で続けたか(続けられたか) ◦ 視聴者(参加者)はそれなりにいる、そもそも好きで始めている(モチベーションの面) ◦ 元々どのような状況であっても継続するということを第一に考えていた ▪ そのために主催枠がある面もある(最低1枠は発表がある状態にする) ▪ 採用といったKPIを追いすぎない、あくまでエンジニア主導の技術イベントとして開催した ▪ 主催2名でかつオンライン開催という形で、お金等あまりかからない体制 • 積極的に声かけるの大事！ ◦ 関係者に声をかけれる状況作っておくの大事 ◦ 発表者(藤原)は得意じゃないので二人でやっていて良かった面継続した結果、次のDeno Festへ・・・ 37

Fest - 開催経緯 39

Fest - 開催経緯 • toranoana.deno継続開催し、関係者に登壇してもらった結果奥谷に声がかかる 40 Deno社のメンバーを集めてリアルイベントやりたいんですが虎の穴ラボで一緒にやりませんか？やります！

Fest - 開催経緯 • Deno Festについて ◦ Denoのお祭りイベント ◦ 主催：Deno Land Inc.、虎の穴ラボ ◦ 開催場所：秋葉原 ◦ 実施内容 ▪ 各スピーカーによる発表 ▪ ステッカー配布や、アクリルキーホルダーのガチャ(一人一回) ▪ 懇親会 41

Fest - 事前準備 • 虎の穴ラボ側として実施したこと ◦ 関係者人数 ▪ 事前準備：主に3名(初動は1名) ▪ 当日：11名(事前準備の3名を含む) ◦ 会場関連(場所の選定、当日の受付や設営など） ◦ コラボステッカーの準備、作成 ◦ 特設ページの作成(Deno Deploy + Fresh) ▪ https://deno-fest-2023.deno.dev/ ◦ スポンサー枠の登壇(藤原) • Deno社側が実施したこと ◦ Deno社社内での登壇者集め ◦ 懇親会の準備(発注と支払い) ◦ ノベルティ関連の準備(ステッカー、ガチャ) 42 (Deno Fest公式サイト)

Fest - 事前準備 43 時期スタッフ数内容対外的な告知 5月 1名準備開始 6月 3名週2程度でDeno社とMTG 会場選定特設サイト制作開始（方針決めから）登壇者選定と依頼開始 7月 3名週1程度でDeno社とMTG イベントタイトル確定タイムテーブル、コーナーの内容配信方法の検討懇親会の方針検討（飲食物など） 8月 3名各種ノベルティについて検討会場契約イベント開催告知を toranoana.deno#13内で実施特設サイト公開開催告知ブログ公開 9月 3名登壇者向けSlackチャンネルを作成本番準備（幕間動画、タイムテーブル、会場設計、スタッフ配置など） SoftwareDesign 10月号に広告掲載最新情報ブログ公開（登壇者情報の更新など） 10月 11名 10/20 本番ランチ紹介ブログ公開会場案内ブログ公開開催しましたブログ公開（事後）

Fest - 事前準備 • 事前のブログなど ◦ 情報解禁 ▪ toranoana.deno#13開催時 • https://toranoana-lab.hatenablog.com/entry/2023/08/08/100000 ◦ 事前告知 ▪ https://toranoana-lab.hatenablog.com/entry/2023/08/24/120000 ◦ ランチ ▪ https://toranoana-lab.hatenablog.com/entry/2023/10/10/120000 ▪ 秋葉原の会社なので ◦ 道案内 ▪ https://toranoana-lab.hatenablog.com/entry/deno_fest_access ▪ https://www.youtube.com/watch?v=bozfqMH6cmo 44

Fest - 事前準備 • ラボ社員の役割分担 45

Fest - 開催内容 • 開催場所：オンラインと秋葉原でのハイブリッド開催 • connpass上の参加者 ◦ 現地：合計100名程度 ◦ オンライン：423名 • 配信先： https://www.youtube.com/watch?v=dAt-r7-Imgk • 公演内容がかなり豪華(具体的なところは先の公式サイト参照) ◦ Node.js/Denoの作者の発表 ◦ Freshの作者の発表 ◦ Honoの作者の発表 ◦ Japan Node.js Association 代表理事の発表 ◦ Deno開発メンバーへ直接質問できるコーナーx2 ◦ 他作ってみたとか、こういうことに使ってますなど etc… 46 (配信アーカイブ)

Fest - 開催内容 47

Fest - 開催内容 50 Deno単独のステッカーとガチャはDeno 社デザイナーのhashrock様、コラボステッカーはとらのあなラボのデザイナーとの共作です。(次ページ)

Fest - 開催内容困ったこと • 会場選定 ◦ 話が最初に出たときから準備期間約5ヶ月での準備だったので場所の確保から難航 ◦ ある程度の規模感の会場はもっと早くに押さえられていた • リアルイベント開催にあたって ◦ 流行り病により、数年間ラボで開催していたリアルイベントがなくなったことで、ノウハウや備品(上りとか)が一部失われていた ◦ 飲食はどの程度出していいのか、読めない ◦ そもそも過去見ても最大規模で、既存のノウハウでは対応範囲を超えていた • 上記の状態ではあったものの、当日はほぼ遅延なしで開催できた ◦ オンラインイベントの感覚で登壇者の入換時間の考慮は甘かった 53

Fest - 開催内容やってみてどうだったか • 準備期間が5ヶ月と短かったが、間に合わせることができた ◦ 会場の準備が最も大変だった ◦ 会場を押さえる以外の準備は結果的になんとかなる範囲だった • 結果としてかなりの規模と内容で開催できた • 久しぶりのリアルイベントなのもあり、コミュニティでアイコンだけ知っている人と実際に会えた ◦ プルリクのやり取りしかしていなかった海外のDeno 開発チームと直接話したりできた • 当日情報解禁したステッカーなど、シークレット企画が楽しかったの • 文化祭の準備していて楽しいという意味を10年以上経ってから理解した 54

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. まとめ
• 虎の穴ラボがどのようにOSSであるDenoのイベントを開催してきて、結果どのようなことにつながったかについて発表しました • イベントは継続開催が最も大事 ◦ なにかにつながることもあるし、自分自身のモチベーションにもなる ◦ 継続するのにどうしたかなどについても触れました • toranoana.deno今後もずっとやるので登壇者お待ちしてます！ • 勉強会開催方法の一助になれば幸いです ◦ ぜひ皆さんも勉強会開いてみてはいかがでしょうか？ 56

【OSC2024 Online/Spring】とらのあなラボの Deno イベント開催の取り組み

【OSC2024 Online/Spring】とらのあなラボの Deno イベント開催の取り組み

More Decks by 虎の穴ラボ株式会社

Other Decks in Technology

Featured

Transcript