【勉強会メモ】関西Node学園 4時限目
- 日時:2018/11/02(金) 18:40 〜 21:00
- 場所:さくらインターネット株式会社 大阪本社
気づけば4時限目を迎えた関西Node学園。Nodeに限らず広くJavaScriptに関する知見共有の場ということで最近はReactやVueの話題が多いですが、そのあたりから流行をうかがい知ることができます。直接関係ないですが、Node.jsのアドベントカレンダーも参加を募集しているようです。
React/js小ネタ集
YukimasaFunaokaさん @mochiya98
遅れて参加して聞き逃してしまったので資料のみ紹介します。
Firebase Cloud Functionsを使って頑張って歩いた人へ仮想通貨NEMを無料で贈る仕組みを作った話
shoheiさん @hobbydevelop
歩いたらブロックチェーントークンをプレゼントするアプリを作りました
- 2015年最初のブロックが生成されたブロックチェーン
- 単位はXEM
- NEMの機能をWeb APIとして提供されている
- NEMを管理するためにはウォレットが必要
- 送金先アドレス:お金を受け取る
- 公開鍵
- 秘密鍵:バレると送金とかされてしまう
Firebase
- Cloud Firestore
- NoSQLデータベース
- 高速
- 様々な言語で利用可能
- Cloud Functions
- バックエンド処理
- Node.js
- イベント駆動
アプリの流れ
- 歩いたら歩数をFirestoreに登録
- Firestoreの登録をFunctionへ通知
- Functionから送金
nem Library
アプリ
歩くことでトークンを発行できる
Our Favorite DependencyUpdates Has Been Deprived
ttさん @tatsushitoji
npmどうやってアップデート?
- 2018.3月 renovateリリース
- Automated Dependency Update
対応サービス
動作環境
良い点
- 自動でPRを作成
- config ファイルで柔軟にカスタマイズ
- OSS
- Auto merge
これまで
- ブランチを作ってPush
- PR作成
- WebhookでCI実行
- CIが通ったら手動マージ
renovateなら 2 以降自動化できる
- Onboading PRを作ってくれる
configファイル(renovate.json)
- メジャーアップデートはAuto merge
- タイトルを編集するとrebaseしてくれる
※参考
js vs gs 〜JavaScriptとは違うGoogleAppsScriptの勘所&オープンデータ生成のGAS活用事例〜
xinsuzukiさん @xinsuzuki
GAS
- alertなどの関数が使えない
- ES2015非対応
- コード補完できない
- Github管理できない
解決できるスクリプト
- js->gs変換ライブラリやgas-clasp-starter
独学でVueを勉強した勢いで自社アプリをリプレイスした話
いずみんさん @is_ryo
www.slideshare.net
なぜVueなのか
- jQueryとかでアプリを作るの飽きてきた
自社アプリをリプレイス
IoT.kyoto VIS
- IoTデバイスデータの可視化アプリ
リプレイスした結果
- jQueryから卒業
- DOM操作って複雑になりがち
- めんどくさいDOM操作をVueが解決
- DOM操作のストレスから開放
- アプリがServerlessになった
最近のvue界隈
- VueにもCLIがある
- 生でJS書きたくないからTSで
- 初期のビルドでTypeScriptを用意できる
- Pug/Sass/TypeScriptでVueを書いている
- Vue UIがいい感じ
- beta版
- vuesax
- UIコンポーネントのFw
- ElementUIより良い感じ
- TypeScriptに対して優しくない
Evan You来日記念オンライン質問コーナー
TypeORMを素振りした話
ゆずさん @yuzu_441
発表資料
Node.jsでいい感じのORM知りませんか?
TypeORMとは
ormconfig.json
- DBの設定
- Entityのパス
できること
save
でinsertfindOne
などで検索- JOINもできる
- Transactionも書ける
@BeforeInsert
みたいなフックもある- Loggerの設定もある
- RubyのActiveRecord風にも書ける
type safeに書けるのか?⇒今のところ書けない
プライベートでReactとTypescriptでアプリを作ったので知見を共有ししつつ、有識者にマサカリでズタズタにされたい
Nokogiriさん @nkgrnkgr
React/TypeScriptでハマったことなど
作ったもの⇒expenses-automation
- Googleカレンダーで入れた訪問先のデータを経費精算の形式にしてCSVで出力する
コンポーネントとデータ構造はほぼ同じ構成
- サーバからは月単位のデータをfetchしStateにそのまま突っ込む
モジュールのディレクトリ構成
ネストの深いStateの更新
- Reactの
setState
はStateが持つ第一階層のオブジェクトしか更新できない - 駅名を変更する場合でも月ごとのStateの更新が必要
- 普遍データ構造を扱うFacebook製ライブラリ
CSSはなるべく書きたくない
TypeScriptの導入
- 開発規模が小さいと方安全の恩恵は感じない
- Interface定義によるVSCodeの入力補完の恩恵はすごい
- TypeScriptを使うと引数がどんな戻り値を期待しているかが一目瞭然
パフォーマンス・チューニング
Redux
- 今回は導入なし
- バケツリレーは苦にならないと判断
- 小さくてもバケツリレーになるので入れておけばよかった
FunctionalComponent
- Stateがないものだけ使用
VSCode拡張
- Debugger
PR告知
自社の宣伝で恐縮ですが、弊社でもNodeやVueを使っているチームがあって今回の勉強会にも参加していました(偶然会場で会った)。そんなチームのメンバー(今回の勉強会の参加者とは別の人ですが)も登壇する大阪オフィス初のMeetupが11/27に開催されますのでよろしければご参加ください。