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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. 概要 - 虎の穴ラボの紹介 ● 過去いろいろなイベントを開催しています ● 【とらのあな主催】オタクが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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Denoの概要 - Denoとは何か？ ● Denoとはなにか？ ○ https://deno.com/ ■ Next-generation JavaScript Runtime ○ Node.jsをはじめとするJavaScriptランタイムの一つ ○ Node.jsの作者であるライアン・ダール氏が中心となって開発されているOSS ○ 法人としてのDenoも存在する ■ https://deno.com/company 11

Slide 12

Slide 12 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Denoの概要 - 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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Denoの概要 - 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);

Slide 16

Slide 16 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Denoの概要 - 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();

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Denoの概要 - Denoの主要な機能と利点 18 const vertexShaderSource = ` struct Uniforms { modelViewProjectionMatrix : mat4x4, } @binding(0) @group(0) var uniforms : Uniforms; struct VertexOutput { @builtin(position) Position : vec4, @location(0) fragUV : vec2, @location(1) fragPosition: vec4, } @vertex fn main( @location(0) position : vec4, @location(1) uv : vec2 ) -> 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, @location(1) fragPosition: vec4 ) -> @location(0) vec4 { 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, });

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて - 概要 ● 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)

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて - 開催経緯 ● 開催前、開催中にやったこと ○ 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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて - 開催内容の紹介 ● 第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

Slide 31

Slide 31 text

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて - 開催内容の紹介 ● 第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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて - 開催内容の紹介 ● 第8回の内容 ○ 主催LTとして奥谷がDeno Deployの話、外部LTとしてDenoのWebフレームワークであるFreshの話がされた ■ どちらもDenoの採用理由になりうる目玉ソフトウェア/サービス ○ このあとの勉強会でも度々Deno DeployやFreshの発表は結構な頻度で見受けられるので注目度が高い 35

Slide 36

Slide 36 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. toranoana.denoについて - 結果 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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Deno 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 本番ランチ紹介ブログ公開会場案内ブログ公開開催しましたブログ公開（事後）

Slide 44

Slide 44 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Deno 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

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Copyright (C) 2024 Toranoana Lab Inc. All Rights Reserved. Deno 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 (配信アーカイブ)

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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