laco_sushiでJXA(JavaScript for Automation)の話をした
#laco_sushiに参加してきました。
JXA for TypeScript/Node.jsというタイトルで、JXAというAppleScriptのJavaScript版についての話しをしました。
JXA-userland/JXA: JavaScript for Automation(JXA) packages for TypeScript/Node.js.というリポジトリに作ったものをまとめています。
- JXAのTypeScript統合環境
- JXAをTypeScriptで書けるようにした
- Node.jsからJXAの実行ライブラリ
- TypeScript definition file(
.d.ts
)を使ってWebStormやVScodeでのJXAのコード補完の実装
などを作った話をしました。
#laco_sushi はい pic.twitter.com/qB5THJ8hO3
— lacolaco (@laco2net) June 27, 2018
AKITA
LTはメインから #laco_sushi
— azu (@azu_re) June 27, 2018
AKITAは犬が可愛い #laco_sushi
— azu (@azu_re) June 27, 2018
- 🚀 Introducing Akita: A New State Management Pattern for Angular Applications
- AKITAは
Query
というクラスを持っている - Read OnlyなStateを作れる
- ngrxはAngularでReduxしたみたいな感じ
Reactでよく聞かれること
ReactとかでよくききれるのはReduxでファイルいっぱい作るのつらいと聞かれる #laco_sushi
— azu (@azu_re) June 27, 2018
- 「Reduxで書くとやたらファイル数が多いのはどうすればいいですか」と聞かれる
- Reduxを使わないとか?
- Reduxを使わないときのステート管理は?
Vue + JXA
- Vueで大規模という話を昨日見た
- vuexは導入しないと爆発するという話だった
- Vue.js プロジェクトの爆発させかた #ichigayageek / How to explosion Vue.js project - Speaker Deck
- なにかしたらのステート管理する方法は必要
.vue
の型について
.vue
の型とか補完とかについて- VScode以外だと辛くない?(プラグインがある)
- JXAは?
- JXAはReact以外との組み合わせが悪い
- PreactとかもJSXは大丈夫だけど、TSXでの型が合わなくなるとか
大規模Angular
スライド: 大規模Angular in 現場 / Large scale Angular in real world - Speaker Deck
#laco_sushi 大規模Angularの話
— azu (@azu_re) June 27, 2018
- 16万行のAngularコードベース
- 結論として分けたほうがいいという話
- ビルドが数分とか遅い(差分ビルドも遅い)
- Reactで同じぐらい規模では数秒が差分ビルドができるけど?
- Angularのコンパイルパイプライン?
- ビルドが92%で止まる
#laco_sushi 92%で止まる = uglify
— azu (@azu_re) June 27, 2018
#laco_sushi uglify92%界隈
— azu (@azu_re) June 27, 2018
- devはuglifyを通さなくてもいいのでは
- テンプレートの数が多い?
- テンプレートのビルドが重たい
- Ivyで改善しそう
- 分けた方とかの話
- Viewで分けるとか
- あんまり細かく分けるとそれはそれで問題になる
- monorepoにする?
- yarn workspaceを使えばmonorepo自体は結構気軽になった
- 最初から大規模になるとわかっていたので設計はちゃんとした
- けど、大規模から分割は難しい
- なので最初から分け方もちゃんと考えないといけない
GAE/Go/Vue SSR
#laco_sushi GAE/goでSSRする
— azu (@azu_re) June 27, 2018
Vue.jsのサーバーサイドレンダリングをGAE/Goでやる #vuejs #golang - Qiita
- gojaでGAE/GoでSSRする
- gojaはGoでのES5.1実装
- fsとかそのへんがない
- 自分でじっそうしないとSSRできない => つらい
Vue.js サーバサイドレンダリング on Cloud Functions for Firebase - Qiita
- Cloud Functionsがでた
- Cloud FunctionsでSSRする
Compute Engine での Node.js の実行 | Node.js | Google Cloud
- GAEでNode.jsが使えるようになった
- GAEでSSRする
- Memcached Cloud が使えなくてSSRのキャッシュが持てない問題(インメモリ)
scala.js
「うちのscala.jsの進捗」「株主総会みたい」 #laco_sushi
— azu (@azu_re) June 27, 2018
- scala.jsを使ってる会社あるの?
- 3社プロダクションで使ってるのは知ってる
- 最近scala.jsで困ったこと
- レビュー
#laco_sushi ガチのscala勢がscala書いてきてレビューできない(scala.jsになるけど)
— azu (@azu_re) June 27, 2018
- VectorとList こっちのほうがパフォーマンスがいい
- ScalaだとそうかもしれないけどScala.jsだと… Scala.jsが独自に実装頑張っていてScala.jsでもパフォーマンスが違った
「自分がコード書かなくてよくしたい」「自分がレビューできないものがくるようになった」 #laco_sushi
— azu (@azu_re) June 27, 2018
- Scala 名古屋多いのなんで?
- 名古屋方面は昔から関数型とかの地盤がある
scala.jsで質問として多いのはファイルサイズとか。
— azu (@azu_re) June 27, 2018
scala自体の質問とかあんまりなかった #laco_sushi
- ファイルサイズの問題
scala.jsはDynamic Loadingできない。 #laco_sushi
— azu (@azu_re) June 27, 2018
- 分割はできないの?
- sbtレベルならできる
- JavaScript的な分割は難しい
sbtでパッケージを分けるとかはできる。
— azu (@azu_re) June 27, 2018
webpackとかnpmのエコシステムには乗れない #laco_sushi
2層式になった #laco_sushi
— azu (@azu_re) June 27, 2018
- Goでもwasmの対応が入った
- LLVMじゃないので、自前でwasm吐いてる
- Go言語でもscala.jsみたいなことできる?
- C#のBlazorに期待してる
- フレームワーク付きで珍しい
- クライアントサイドのやつはC#/.NETで見られるものが多い
LightHouseについて
Lighthouse metircsを調べた #laco_sushi
— azu (@azu_re) June 27, 2018
FMP芸人 #laco_sushi
— azu (@azu_re) June 27, 2018
- FMP、FCP、FCI、TTIなどの指標がある
- First Meaningful Paingってどういう意味?
- 調べた
FMPの定義を調べた。
— azu (@azu_re) June 27, 2018
意味のあるPaint = Pageのレイヤーの数、DOMの長さ、WebFontsがロードされてるか
とかヒューリスティックな感じで見る #laco_sushi
(おすすめ: Using WebPageTest - O’Reilly Media)
- TTIは?
TTI、5秒間待つ。
— azu (@azu_re) June 27, 2018
long task(50ms)があるかないかでTTIを切る。
long taskがなくなったらTTI #laco_sushi
- 5秒ぐらい待ってからレンダリング開始すれば最速になるのでは?
- Isucon対策だ
- パフォーマンスおじさんに怒られる
isucon対策講座 #laco_sushi
— azu (@azu_re) June 27, 2018
Realms API
tc39/proposal-realms: ECMAScript Proposal, specs, and reference implementation for Realms
- Stage 2になった話題のRealms API
- Sandboxとかができる
Use cases
- security isolation (with synchronous but coarse-grained communication channel)
- plugins (e.g., spreadsheet functions)
- in-browser code editors
- server-side rendering
- testing/mocking (e.g., jsdom)
- in-browser transpilation
クライアントサイドでSSRできるのでは
クライアントサイドだけでSSRする謎 #laco_sushi
— azu (@azu_re) June 27, 2018
- 引数をhookして変換できるparameterized evaluator
Realms Object、Parameterzed object #laco_sushi
— azu (@azu_re) June 27, 2018
- shim
- parameterized evaluatorは動かない
- Zoneに欲しいこれ
- moduleのreflectとかもあった
- domicがだめって言って落ちた
- そのごStage 2になった
最初はmoduleのrefrectの仕組みとか #laco_sushi
— azu (@azu_re) June 27, 2018
- MicroFrontend
「Micro FrontendがきたらRealmも必要だしZoneは必要」 #laco_sushi
— azu (@azu_re) June 27, 2018
JXA
JXA for TypeScript/Node.jsというタイトルで、JXAというAppleScriptのJavaScript版についての話しをしました。
JXA-userland/JXA: JavaScript for Automation(JXA) packages for TypeScript/Node.js.というリポジトリに作ったものをまとめています。
「AppleScriptは英語」 #laco_sushi
— Local Proxy (@kyo_ago) June 27, 2018
「英語かと思ったらAppleScriptだった」 #laco_sushi
— Local Proxy (@kyo_ago) June 27, 2018
「実行するまでシンタックスハイライトされない」 #laco_sushi
— Local Proxy (@kyo_ago) June 27, 2018
この辺をどうにかするために、リファレンス(.sdef
)からTypeScriptの型定義ファイルを作るパーサとかを作りました
- TypeScript definition file(
.d.ts
)を使ってWebStormやVScodeでのJXAのコード補完の実装- @jxa/types and [@jxa/global-type
「node.jsからjxaを呼び出せる」 #laco_sushi
— Local Proxy (@kyo_ago) June 27, 2018
今日直したバグの話
「今日直したバグの話」 #laco_sushi
— azu (@azu_re) June 27, 2018
ヘッダーからバルーン開く、バルーンが下に入って欲しいけど、上に入ってしまう。
— azu (@azu_re) June 27, 2018
バルーンはbody直下にある。どうやって治す? #laco_sushi
回答例
解「バルーンをCanvasで書き直す」 #laco_sushi
— azu (@azu_re) June 27, 2018
正解
解「バルーンをdivに囲んでz-index:0にすれば治る」 #laco_sushi
— azu (@azu_re) June 27, 2018
脆弱性情報の社内公開について
扱う人が限られているとスケールしなくなる。 #laco_sushi
— azu (@azu_re) June 27, 2018
- 扱う人が限られているとリソースの問題がでる
- また脆弱性についての知識が共有されない
- 重要な問題に対応できない場合がでてくる
「常にインシデントが発生し続けてる状態にしよう」 カオスエンジニアリング #laco_sushi
— azu (@azu_re) June 27, 2018
脆弱性の情報も社内で共有しないと理解が進まない。 #laco_sushi
— azu (@azu_re) June 27, 2018
- 第三者機関とバグバウンティプログラムの併用について
- バグバウンティは表からやっていることが見える
第三者期間とバグバウンティを併用するべきなのでは #laco_sushi
— azu (@azu_re) June 27, 2018
- バグバウンティのユーザー(企業側)の意見をあまり見かけない問題
- バグバウンティをもっと気軽にできる環境が必要
- BugBounty.jp - バグバウンティ・プラットフォーム
- バグバウンティでくる脆弱性は勉強になる
- バグバウンティ勉強会
「というわけバクバウンティやりたい方募集ですー」 #laco_sushi
— azu (@azu_re) June 27, 2018
お疲れ様でした。
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。