2019年3月24日に開催されたvvvvオフ会で利用した資料です

1. vvvv.jsと
フロントエンド
開発と
その未来
@reiji1020

2. だれ
● れいじ
● Twitter：@reiji1020
● ブログ：モノクロタイム（http://reiji1020.hatenablog.com/）
● 本業：フロントエンドエンジニア
○ React, Node.js, 一部PHP…
技術書典という同人技術書の即売会でvvvvの本を書いて頒布しています

3. vvvv.jsー2017年辺りに存在を知るー
● vvvv.js Labs(デモページ)で使える機能少なくない？
○ 2019年、CanvasとかWebGLで実装可能なノードしか
ないことに気づく
● えっWindowsPC持ってるし、ネイティブvvvvの方が楽し
いし。。。

6. vvvv.js盛り上がってきてる？

7. vvvv.jsー2019年、再入門するー
● vvvv.js Labと自前環境にはバージョンの差
がある
○ 見た目もちょっと違う
○ 使えるノードの数は自前で作った環境の方
が少し多い
● ネイティブvvvvとの互換性はない
○ ちょっとだけある
○ vvvv->vvvv.jsに持っていくには、vvvv.js側
で対応するノードが用意されている必要が
ある
● 自前環境を用意するのがそこそこ面倒
○ 一回作っちゃえば後は必要ないけど。。。
○ 人によってはyarn(npm)で詰みそうな気が
する
● モダンなフロントエンド開発に組み込む
にはいろいろ壁がありそう
○ 現在「ES6？何それ美味しいの？」状態で
管理されている
○ npmモジュール化されてないので
npm/yarnで管理できない
● 細かいTipsいっぱいある
○ READMEに書いて・・・
誤解していたこと 想定通りだったこと

8. ここがすごいぞvvvv.js

9. ここがすごいぞvvvv.js
そもそもWebブラウザでCG作るのがかなり高度な技術
● p5.js
● d3.js
● WebGL
色々あるけど、ゴリゴリ書くのはすごく大変

10. ここがすごいぞvvvv.js
そもそもWebブラウザでCG作るのがかなり高度な技術
● p5.js
● d3.js
● WebGL
色々あるけど、ゴリゴリ書くのはすごく大変

11. ここがすごいぞvvvv.js
そもそもWebブラウザでCG作るのがかなり高度な技術
● p5.js
● d3.js
● WebGL
色々あるけど、ゴリゴリ書くのはすごく大変

12. ここがすごいぞvvvv.js
そもそもWebブラウザでCG作るのがかなり高度な技術
● p5.js
● d3.js
● WebGL
色々あるけど、ゴリゴリ書くのはすごく大変

13. ここがすごいぞvvvv.js
そもそもWebブラウザでCG作るのがかなり高度な技術
● p5.js
● d3.js
● WebGL
色々あるけど、ゴリゴリ書くのはすごく大変
vvvvプログラミングの知識を生かしながら、
動くものをサクサク作れること自体がすでに革命

14. ここがすごいぞvvvv.js
vvvv.jsのRendererは(プログラム読み込み後)canvasタグ1つで構成されるため、
既存Webページへ埋め込みやすい

15. ここがすごいぞvvvv.js
ReactやVue.jsなど、SPA(シングルページアプリケーション)向けのUI開発ライブ
ラリとの併用も可能
※ただしRedux(UIの状態管理フレームワーク)と相性はよくない…かもしれない。
これはvvvv.jsではなくcanvasとの相性によるもの。

16. ここがすごいぞvvvv.js
Reactで作成した
Cardコンポーネント
Thumbnail部分は
vvvv.jsで作成された
Canvas要素
＝CGアニメーション

17. ここがすごいぞvvvv.js
Reactで作成した
Cardコンポーネント
Thumbnail部分は
vvvv.jsで作成された
Canvas要素
＝CGアニメーション
vvvvjs-for-reactとして
誠意モジュール開発中🤘

18. ここがつらいよvvvv.js

19. Tipsその①-Rendererサイズの調整-
描画領域は
どうすれば
大きさを変えられるの？

20. Tipsその①-Rendererサイズの調整-
Renderer(描画領域)がデフォで512px×512px
-> Backbuffer Width/Heightで変更可能、
0px × 0px で指定した時のみ512px × 512pxに整形される
vvvv.js/nodes/vvvv.nodes.canvas.jsより抜粋

21. Tipsその①-Rendererサイズの調整-
Renderer(描画領域)がデフォで512px×512px
-> Backbuffer Width/Heightで変更可能、
0px × 0px で指定した時のみ512px × 512pxに整形される
vvvv.js/nodes/vvvv.nodes.canvas.jsより抜粋
Documentに書いて😭

22. Tipsその②-Production Build-
Webページに組み込みたいけど、
↓みたいなデバッグログは出したくない。。。

23. Tipsその②-Production Build-
ビルドタイプ(ENV)をvvvv.jsコード内で変更できる
デバッグログ出力部分
(vvvv.core.js)
ビルドタイプ定義部分(vvvv.js)

24. つらいところは
自分で直していこう

25. コミッタ―になってvvvv.jsの開発に貢献する
現状vvvv.jsのリポジトリを見て手っ取り早く修正できそうなところ
1. ドキュメント周りの整備(まずは日本語README追加とかでもいいかも)
2. ビルドタイプ環境変数のより分かりやすい指定・設定ファイルの切り出し
3. npmパッケージ化(これは手元で改修済なので、すぐ出せる)
4. ES6化
→vvvv.jsをガンガン使いたくても使いにくい障壁がそれなりにある
リポジトリにPull Requestを出して
より便利にしていきたい

26. コミッタ―になってvvvv.jsの開発に貢献する
とはいえ最後にPRがOpenされたのは2017
年で、以来ずっと放置されてそう。。。

27. コミッタ―になってvvvv.jsの開発に貢献する
🤘
リポジトリを
forkして、
手元で改修する？
できればリポジトリは
離したくない…
でも日本のvvvv勢で
改修していくのも楽し
そう。。。
いい知恵お待ちしております😇

28. 可能性ありまくりな
モジュールなのでガンガン使
っていきましょう💪

29. EOP