Node学園祭 1日目 参加メモ

はるか昔11月のこと、Node学園祭の1日目に遊びにいってました。
その時のメモを残してたのにあげるとこがずっとなかったので、今更ですがまとめなおしました。

日時・場所

  • 2019/11/23(金)
  • ヤフー株式会社

keynote

  • ロゴが新しくなったらしい

    • 新ロゴのTシャツもらいました(この手のどこで使えばいいのかいまだわからん)

  • 翻訳ツールを自作したらしい！

    • 英語音声を一度テキスト化したものを翻訳してスクリーンに表示
    • Twitterで反応見てた限りおもしろ翻訳が飛び出したり、制度はあんまりだったみたい……

  • Node.jsとjsのファウンデーションが1つに！

    • 来年はnodeFesじゃなくてjsconfにしたいとのこと

How I made some critical code much faster

https://bit.ly/2BrhlMj

  • 自動翻訳と聞いてウキウキで英語の部屋にいったらどうやら自動翻訳はメイン部屋のみだったらしく絶望
  • 雰囲気で聞いてたけどとにかくパフォーマンスを突き詰めてることとSQLを解釈する箇所がボトルネックだった、程度の話しか理解できず

11:15 B Nodeで作るインタープリター

https://twitter.com/massie_g/status/1065791331362992128

  • RubyでつくるRubyに感銘を受けて自分でも作ってみた方の話
  • 発表内で紹介されていた記事がとても細かくまとまってたので、長編なもののいつか読んでみたい
  • 本を読んで受けた感覚以上に難しかったとのこと

13:00 B Diagnose your Node.js app

https://darai0512.github.io/nodefest2018/index.html#/

  • Node.js自体の特性についての話
  • 非同期処理の処理順序がバージョンや環境によって異なるので注意！
    • 当たり前といえば当たり前ですがasync/awaitとかをちゃんと使えば大丈夫そう？
    • テストツールについても紹介されてたので要確認
  • サードパーティを調べ始める前にNode.jsコアAPIをちゃんと調べること
    • コアAPIだけでもできることは結構多いみたい
  • デバッグ方法についても多々紹介されてたのでNode.jsで開発する前には一通り確認しておきたい情報が多かった

13:30 B State of SEO for SPA

https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b

  • SEOについての話

    • 部屋から人が溢れるレベルで大人気のセッションだった

  • 最近はちゃんとjsでのレンダリングも見てくれる

    • ただし、bot内部のChromeバージョンは41(2015/03くらいのバージョン)なため、アロー関数が使えなかったり色々制約はあるとのこと
    • 一応もっと新しいChromeでって話は公式でも上がってるらしい？
    • babelなんかを使ってChrome41対応すれば問題ないとのこと

  • メタ情報だけSSRする方法はアリ

    • Nuxt.jsとかはSPAにしててもメタ情報はSSRしてくれてるらしい

  • Dynamic renderingという手法をgoogleが推してるらしいので要チェック

14:15 Node.jsアプリの開発をモダン化するために取り組んできたこと

https://www.slideshare.net/bitbankink/nodejs-124129219

  • タイトル通りの内容
    • これまた大人気のセッションだった
  • 人数が多くなっていくにつれてモダン化させないことにはどうしようもなくなったとのこと
  • アプリケーションフレームワーク”Nest”
    • githubスターも1万超えで最近はだいぶ使えるようになってきてるらしい
    • デコレータを使用してのControllerを作っておけばSwaggerのドキュメントを生成してくれる
      • ソースからAPIドキュメント生成できるので便利そう
  • TypeScript + Nest + TypeORMの構成
  • ユニットテストに必要なものをdockerのコンテナ上に配置して再現性を保証
    • dockerに馴染みがない人もdocker-compose.ymlを置いておくと自由にカスタムして使ってくれたりして馴染んでくれたとのこと
  • Infrastructure as Codeの実践についてもTipsが色々あったので資料チェック

14:45　B WebアプリをNativeアプリにする Capacitor が広げるWebの可能性

https://speakerdeck.com/rdlabo/capacitor-web

  • WebアプリをネイティブアプリにしてくれるCapacitorについての話
  • HTML5アプリをネイティブアプリに変換するツール
  • “Apache Cordova”というメジャーなツールの後継プロジェクトらしい
  • デザインガイドラインが存在し、それに則ってアプリを作ることでネイティブアプリっぽい見た目になるらしい
  • Core pluginがあり、ちょっとしたネイティブのAPI叩くくらいならこれでカバーできるとのこと

  • PWA Elementsがあるので、それっぽいアラートやそれっぽいカメラ画面を出してくれる？

  • そもそもネイティブアプリは必要？

    • パフォーマンスはそんなに変わらない
      • HTML5アプリが遅い場合は実装が悪いだけのパターンもある
    • モバイルアプリはなかなか新規で落としてもらえない
      • アプリをインストールすること自体が手間
      • 単純に多くの人に見てもらいたいのならWebアプリの方が良いのでは？という話

16:00 B Service Workerを用いたキャッシング戦略 〜Wikiアプリケーションを例に〜

https://scrapbox.io/daiiz/ServiceWorker%E3%82%92%E7%94%A8%E3%81%84%E3%81%9F%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0%E6%88%A6%E7%95%A5_~Wiki%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E4%BE%8B%E3%81%AB~

  • 実装周りの話が多く、そもそもService Workerを把握できてないレベルでは話に追いつけませんでした……
    • 資料が細かかったので、ちゃんと勉強してからまた資料を読み直したい

16:45 B 貢献できるOSSの見つけ方 -完結編-

https://speakerdeck.com/ohbarye/how-to-find-good-first-issues-final

  • OSS貢献したいけどしたことない人向けの話

  • 最初にプロジェクトを選んで課題を見つける部分が難しい

    • 実際プロジェクトを決めてしまえばそこからプルリク送るまではできる人が多いらしい
    • good first issueというラベルの存在
      • 文字通り初めてコントリビュートしたいという人向けのissue
  • 簡単なIssueは新規コントリビュータ向けにあえて直さず置いておくみたいな文化もあるらしい

17:15 B Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ

https://riotz.works/slides/?2018-nodefest#1

  • フロントはNuxt.jsを使用
    • 発表時点ではまだ型定義が提供されていないが、マージ済みなのでそのうちリリースされるはず
  • FirebaseのRealtime Databaseが便利
    • スピード第一ならモバイルベースかつ分かりやすくて良かったとのこと
  • TypeScriptがAWS Lambdaのコールドスタートに強いらしい

終了後LT

https://speakerdeck.com/shimataro/remember-to-close-resources
https://speakerdeck.com/sota1235/how-to-choose-the-best-npm-module-for-your-team

個人的感想

  • 英語がちゃんと読み聞きできればもっと色々聞けたのかもしれない
  • SPAのSEO対策は最近ちょっと調べて、どれが正しい情報なのか混乱してるとこだったので整理できてよかった
  • Nest, Capacitor辺りは実際に触ってみたい
  • OSSへのコントリビュートはやったことないので、今個人的に作りたいものが落ち着いたらやってみたい
    • good first issueタグを頼る