月 の 上

ToKyoto.js(Kyoto.jsの出張版)を開催しました

こんにちは! Kyoto.js主催の id:amagitakayosi です。
先日開催した ToKyoto.js のレポートをお送りします。

kyotojs.connpass.com

ToKyoto.jsはKyoto.jsの特別編として、メンバーが東京にあつまって開催したイベントです。
アウェイでの開催ということで人が集まるか心配でしたが、蓋を開けてみれば70人を超える方々にご応募いただき、当日は12人が発表を行なうなど、予想外の大盛況となりました!!🎉🎉🎉

会場は白金高輪のKaizen Platformさんのオフィスをお借りしました。
会場設営や入り口での案内など、何から何までお世話になりました、ありがとうございました!🙇🙇🙇

当日の様子はTwitterハッシュタグ #kyotojsでご覧になれます。

contents

一般発表

ToKyoto.jsのタイムテーブルは、Kyoto.jsメンバーと関東の発表者で 3 on 3 トークバトルという体で組みました。
当日は id:hiroqn が事情により欠席しましたが、なかなかマニアックな発表があつまったのではないかと思います!

「Tasks to release Extension for Edge」pastak

scrapbox.io

トップバッターは京都から参戦の id:Pasta-K です。
ブラウザ拡張をEdgeに対応しリリースするまでの道のりを紹介してくれました。
Edge向けの拡張機能はまだ64個しか存在しないそうなので、貴重な知見ですね……!

「Vue.js Extend with Compiler」kazupon

speakerdeck.com

2人目は kazupon さんです。
Vue.jsのテンプレートコンパイルの各段階をフックし、様々な拡張を行なう方法を紹介していました。
コンパイラーのフックはvue-loader等で利用されているようですが、他にも色々マジカルな事ができそうですね!

「TypeScript Transformerについてのお話」Quramy

qiita.com

3人目の発表は id:Quramy さん。
TypeScriptのASTを操作してコードをゴニョゴニョできるCustom Transformerについての発表です。
estreeとの互換性が無くて難しいという話ですが、estree周りのツールでもっとTypeScript対応が進むと良いですね……!

「APIs for VJ-ing」amagitakayosi

speakerdeck.com

4人目の発表は僕 id:amagitakayosi です。
最近はAtomでVJできるパッケージを作っているのですが、このパッケージで使っている各種ブラウザAPIを紹介しました。
9/17には実際にこれを使ってVJしたので、またレポート記事を書こうと思います!

「今、我々は、 GUI の設計について 何を考えるべきか」mizchi

speakerdeck.com

発表ラストは id:mizchi さん。
古典的なWebアプリからMVC、Fluxと、フロントエンド開発がGUI開発に近づいていく中で、設計がどう変わってきたかをまとめていました。
最近はNext.jsのようなフレームワークも増えてきたので、SSRやIsomorphicアプリの作成がめっきり簡単になったりと、時代の流れを感じますね……。

LT資料

今回のLTはなんと7人の方が参加くださり、GraphQLからWebVRまで盛りだくさんでした。
LTの順番は忘れてしまったので、順不同で紹介します。

「Data feching and caching on Apollo Client 」joe_re

speakerdeck.com

id:joe-re さんの発表は、GraphQLクライアント実装であるApollo Clientの紹介でした。
Relayとは違い、Apollo Clientは様々なフレームワークや環境から利用できるようです。
fetch, updateといった基本的な操作やページネーションの方法などを、コード例を交えて紹介していました。

「WebVR with Windows Mixed Reality」ikkou

speakerdeck.com

id:ikkou さんは、WebVRの開発方法や、WebVRでどういうことができるのかを紹介していました。
この発表はなんとVRヘッドセットを装着した状態で行われました。
WebVR APIはまだEdgeとFirefoxでしか利用できないようですが、これからの発展が楽しみです!

「IntersectionObserverはいいぞ」Leko

speakerdeck.com

id:leko さんの発表では、DOM要素が画面内にあるかどうかを取得できるIntersectionObserverについて紹介されました。
IntersectionObserverは現在、IE/Safari以外の主要ブラウザですでに利用できるようですね。
スクロールすると固定されるヘッダなど、活用出来る場所を見ない日はないので、早くpolyfillなしで使えるようになりたいものです。

Ecmascript proposal-realms」brn

speakerdeck.com

brnさんの発表はRealm proposalについての紹介です。
RealmはNode.jsのvmモジュールのように、JSのコードを安全に実行するための仕組みです。
まだあまり知られていないプロポーザルですが、必要とされる業界は多いんでしょうね〜。

「console.animate」katashin

speakerdeck.com

katashinさんの発表では、ブラウザの開発者ツールのコンソールにアニメーションを表示する方法を紹介していました。
Firefoxの開発者ツールのパフォーマンスが良いとのことですが、Firefoxの開発者ツールは他にもDOMの重なりを3Dで見れたり、Web Audio APIのノードの図が見れたりと謎に豪華ですよね……😅

「What I did to improve performance score on Lighthouse」yayoc

speakerdeck.com

yayocさんの発表は、Google製のパフォーマンス測定ツールLighthouseを利用しつつ、アプリケーションのパフォーマンスを改善した話でした。
HTTP/2採用やCode Splitting, IntersectionObserverを利用した遅延ロードなど、色々な施策についてものすごい早足で紹介されていました。
細かい話もじっくり聞いてみたい気がします!

「Nekogata Drum Sequencer written in Scala.js」nkgt_chkonk

speakerdeck.com

LT最後は id:nkgt_chkonk さんでした。
Scala.jsにまつわる様々な困難に直面しながらもScalaを貫き通す姿勢は圧巻でした……。
Scala.jsを試してみてハマった時は、今回の資料をみてみると参考になるのではないでしょうか。

感想 & まとめ

平日の夜開催だったため、懇親会でしっかり会話できるか心配していましたが、Kaizenさんのご厚意により23:30頃までたっぷり議論できました。
(ありがとうございました! > id:axross id:lacolaco id:jmblog

2次会でもまだまだ盛り上がり、なぜかAM 2:20からLTが行われたりしました。
さすが眠らない街東京……。

今回は、普段のKyoto.jsとはまた違った、色々なコミュニティの話が聞けて最高でした!
ふだん勉強会などに来ないという人も何人かいらしたようで、とても嬉しかったです。

参加者の皆さま、発表者の皆さま、ありがとうございました!!
京都観光の際には、是非Kyoto.jsにいらしてください!

もしまた東京で開催することがあれば……よろしくお願いします🙏🙏