サイボウズ大阪オフィスにて関西Node学園 9時限目を開催しました。
当日の様子はtogetterにてまとめています。
また後述のPutYourHandsUpにもたくさんの投稿をいただきました。
https://pyhu.nkgr.app/events/pOVUssmmI6LIB5bBhZej
登壇内容
PutYourHandsUp
@nkgrnkgrさんにPutYourHandsUpというサービスの紹介をしていただきました。
PutYourHandsUpは勉強会参加者が手を上げて発言し辛い問題を解決するグループチャットライクなサービスです。参加者同士で交流をしたり、気軽に感想を投稿したりできるのはとても良いです。また、匿名で投稿することもできるので投稿の敷居も下がります。
UIも以下のようにとても綺麗で使いやすかったです。
UI綺麗！ #kng9 pic.twitter.com/DcMdiW571n
— shisama / Masashi Hirano (@shisama_) 2020年2月12日
個人的に感じたのは登壇ごとに投稿がまとまっているので、あとから見返すときにどの投稿がどの登壇のことを指しているのかわかりやすくて良かったです。Twitterだとハッシュタグで検索して見返してもどの登壇のことについて言及しているのかわかりづらいというと感じていました。
最近バージョンアップしてTwitter連携機能が追加されました。PutYourHandsUpで投稿したときにTwitterにもその勉強会のハッシュタグ付きでツイートしてくれるというものです。 これはTwitterとPutYourHandsUpの二重投稿を一気にできるのですごく良い追加機能だと感じました。
今回の関西Node学園 9時限目のイベントが終わるまで、このPutYourHandsUpにたくさん投稿されていて参加者間の交流や登壇者への質問がされていて大変良かったです。
次回以降も使っていきたいと思います。
また、@nkgrnkgrさんのブログもあわせてお読みください。
PuppeteerとPlaywrightの15日間の演劇
sbntaminifさんにPuppeteerとPlaywrightについて話していただきました。
資料はまだ公開されていませんが、puppeteerでの知見やplaywrightができることなどについて話していただきました。
playwrightには「演劇」という意味があるのでこの登壇タイトルにしたとのことです。
puppeteerはデフォルトではChromiumを使って実行するのですが、インストール済のブラウザを選択することができます。executablePathというオプションにて選択することができます。ただし、vivaldiだとchromiumと挙動が違うことがあるそうです。
playwrightは先日公開されたばかり話題になりましたが、chromiumベース以外のブラウザ、例えばFirefoxでもE2Eのテストなどを行えるOSSです。puppeteerの代替というよりwebdriverに代わるものというふうに紹介されていました。これを使うことでクロスブラウザでのテストの自動化ができるようになります。APIはpuppeteerと似ており、使いやすく設計されています。
NestJS A progressive web framework
jiko_21さんにNestJSについて話していただきました。
最近、NestJSは急激に人気が高まっている気がします。2019年最もstarを獲得したNode.jsのフレームワークでもあります。
https://risingstars.js.org/2019/en/#section-nodejs-framework
NestJSについては以下の動画が詳しいとのことです。
私の周りからNestJSはSwaggerと親和性が高いなどという話をよく聞いていました。しかし、実際どんなものかあまり知らなかったので勉強になりました。
一言でいうとモダンな全部入りフレームワークと話を聞いて感じましたが、実際「NestJSはプラットフォームである」という思想があるとのことです。
様々な機能をNestJSが提供しておりNestJSのみでDIや単体テストなどをできるようになっています。
またCLIでひな形を作るジェネレーターも用意されており、TypeScriptベースのコードが生成されます。
moduleという単位でコードを分割しながら開発していくスタイルで再利用性の高いコードが書けるところも特徴です。
expressは薄いところが良くmiddlewareなどを自分で選定していくスタイルですが、その逆をいっていると感じました。
開発規模や開発者のレベル感に合わせて選択肢が増えたことはすごく良いことだと思います。キャッチアップしていきたいと考えています。
詳解CSSinJS
mochiya98さんにCSS in JSについて話していただきました。
Reactの開発ではCSS in JSを使うのが当たり前になってきていると思いますが、CSS in JSを使うために必要なcss-loaderやBabelのプラグインについて詳しく知っている人は少ないのではないかという話をしていただきました。
styled-componentsは仕事でも使っていますが、babel-plugin-styled-componentsを使うことで得られるメリットなどは知りませんでした。
babel-plugin-styled-componentsは無くても動くが使うことで以下のメリットがある
— shisama / Masashi Hirano (@shisama_) 2020年2月12日
・クラス名を固定化する
・コンポーネント名を付けてくれる（デバッグしやすくなる）
・CSSをminifyしてくれる。https://t.co/do9wtUfpSE#kng9
Emotionを使うときはbabel-preset-css-propを通すことでReact.createElementがすべてEmotionJSXに変換されてランタイムですべてのコンポーネントがEmotionJSXを通ることになるのも知りませんでした。
Zero-runtime CSS in JSについては全く知りませんでした。astroturfとlinariaというライブラリがあるとのことです。
ゼロランタイムというのは、先にCSSにプリコンパイルしてしまいJSでは実行されないようにすることができるようにする手法です。
それにより、JSのバンドルサイズはかなり小さくなります。
どちらのライブラリもstyled-componentsのようにstyled形式で書くことができますが、styled形式だとランタイムが発生してしまいます。
私も仕事でもZero-runtime CSS in JSが使いやすいか、パフォーマンスにどれくらい影響するのか探究してみたいと感じました。
紹介していただいたCSS in JSのコードの変換については以下のサイトでソースコードの変換前後を確認できるようにしていただいております。
上部のハンバーガーメニューから各ライブラリを選択して確認することができます。
github.m98.be
今回の発表に関しては以下にリンクをまとめてくださっています。
mochiya98さんは東京に就職されるため、今回が最後の登壇になりました。
初回からすべての回で登壇してくださり毎回おもしろい話でした。とても感謝しております。
毎回面白かったのですが、一つ決めていたことがあったそうです。
(実は一つコンセプトがありました。"ググっても出てこないことを話す"。)
— YukimasaFunaoka (@mochiya98) 2020年2月12日
あと、参加者に登壇するメリットについて話をしていただき登壇を促していただいたのは嬉しかったです。
本当に感謝しかないです。ありがとうございました。
LambdaのNodejsをアップデートしたら困った話
@is_ryoさんにAWS LambdaのNode.jsのバージョンアップ時につまづいたことについて話していただきました。
先日、Node.js v8がEOL(サポート終了)となりました。AWSはEOLが近づいてくるとメールでお知らせしてくれるとのことです。便利。
そこでLambdaのNode.jsのバージョンをv8からv10に上げたときにエラーを吐くようになったとのことです。原因としてはNODE_PATHの環境変数の設定が変わってしまい、モジュールが読み込めなくなったためでした。
Node.jsに限らず環境変数の取り扱いには気をつけなければいけないとのことです。そもそもLambdaはEC2の上で動いているということです。（知らなかった...）
私も個人開発でLambdaを使っていて確かNode.js v8だったのでアップデートをしなければと思い出させていただきました。その際、同じエラーになってもこの登壇があったからすぐ解決できそうです。
分報のTL、boltでつくってみたんご
https://speakerdeck.com/nasat75/fen-bao-falsetlwoslackboltframeworkdesakututozuo-tutemitaspeakerdeck.com
@nnnnnnn_goさんにSlack APIのフレームワークboltを使った分報の開発について話していただきました。
slackでtimesとかで分報を行う文化があることはよく知られていると思います。しかし、チャンネルが分散されていると追えなくなってきます。そこでTLを作ることで解決できると考え、bolt + Node.jsを使って開発したとのことです。
boltにはチュートリアルも用意されています。
ローカルでboltを開発するときはngrokを使うと快適に開発することができるとのことです。
発表中にもコーポレートエンジニアリング楽しいとおっしゃられていましたが、身近な人に喜んでもらえる開発はすぐフィードバックもらえるし楽しいと共感できました。
ちなみにこの日、裏ではヤフーさんがすぐ近くで「Slackアプリ開発入門ハンズオン」を開催していましたｗ
まとめ
2020年になって初回の開催となりましたが、コロナウィルスの影響もあり開催しようか悩みました。
ドタキャンも多く出るのでは？と懸念していましたが、多くの人に参加していただきました。
また、これまで関西Node学園に登壇し続けていただいたmochiya98さんとjiko_21さんが東京に就職し今回がラストの登壇でした。個人的にはどうしても開催したいという思いが強かったです。
お二方とも東京での活躍が楽しみです。
次回はNode.js v14がリリースされるであろう4月末あたりで開催したいと考えていますが、コロナウィルスの影響により開催できるか現在のところ不明です。
健康が一番大切です。様子を見て安心して参加できるように考えて運営していきたいと考えています。
