【勉強会メモ】関西Node学園 4時限目

nodejs.connpass.com

• 日時：2018/11/02(金) 18:40 〜 21:00
• 場所：さくらインターネット株式会社　大阪本社

気づけば4時限目を迎えた関西Node学園。Nodeに限らず広くJavaScriptに関する知見共有の場ということで最近はReactやVueの話題が多いですが、そのあたりから流行をうかがい知ることができます。直接関係ないですが、Node.jsのアドベントカレンダーも参加を募集しているようです。

qiita.com

React/js小ネタ集

YukimasaFunaokaさん @mochiya98

遅れて参加して聞き逃してしまったので資料のみ紹介します。

JS/React小ネタ集 - Google スライド

Firebase Cloud Functionsを使って頑張って歩いた人へ仮想通貨NEMを無料で贈る仕組みを作った話

shoheiさん @hobbydevelop

歩いたらブロックチェーントークンをプレゼントするアプリを作りました

NEM

• 2015年最初のブロックが生成されたブロックチェーン
• 単位はXEM
• NEMの機能をWeb APIとして提供されている
• NEMを管理するためにはウォレットが必要
  • 送金先アドレス：お金を受け取る
  • 公開鍵
  • 秘密鍵：バレると送金とかされてしまう

i-yusuke.com

Firebase

• Cloud Firestore
  • NoSQLデータベース
  • 高速
  • 様々な言語で利用可能
• Cloud Functions
  • バックエンド処理
  • Node.js
  • イベント駆動

アプリの流れ

1. 歩いたら歩数をFirestoreに登録
2. Firestoreの登録をFunctionへ通知
3. Functionから送金

nem Library

nemlibrary.com

アプリ

FiFiC

• Opening Line, Inc.
• Health & Fitness
• Free
• 

歩くことでトークンを発行できる

• Q) 歩数はどうやってカウント？
  • iOSやAndroidは標準で取得できる
  • そのデータをサーバへ送る
• Q) お金を受け取る？
  • 仮想通貨ではなくトークンを受け取る

Our Favorite DependencyUpdates Has Been Deprived

ttさん @tatsushitoji

speakerdeck.com

npmどうやってアップデート？

renovatebot.com

• 2018.3月 renovateリリース
• Automated Dependency Update

対応サービス

• Github
• GitLab
• VSTS
• BitBucket

動作環境

• Bazel
• Travis
• Docker
• Golang
• npm/yarn
• Python/PHP

良い点

• 自動でPRを作成
• config ファイルで柔軟にカスタマイズ
• OSS
• Auto merge

これまで

1. ブランチを作ってPush
2. PR作成
3. WebhookでCI実行
4. CIが通ったら手動マージ

renovateなら 2 以降自動化できる

• Onboading PRを作ってくれる

configファイル（renovate.json）

• メジャーアップデートはAuto merge
• タイトルを編集するとrebaseしてくれる

※参考

user-first.ikyu.co.jp

js vs gs 〜JavaScriptとは違うGoogleAppsScriptの勘所&オープンデータ生成のGAS活用事例〜

xinsuzukiさん @xinsuzuki

speakerdeck.com

GAS

• alertなどの関数が使えない
• ES2015非対応
• コード補完できない
• Github管理できない

解決できるスクリプト

• js->gs変換ライブラリやgas-clasp-starter

github.com

独学でVueを勉強した勢いで自社アプリをリプレイスした話

いずみんさん @is_ryo

独学でVueを勉強した勢いで 自社アプリをリプレイスした話_kng#4 from Ryosuke Izumi

www.slideshare.net

なぜVueなのか

• jQueryとかでアプリを作るの飽きてきた

自社アプリをリプレイス

IoT.kyoto VIS

iot.kyoto

• IoTデバイスデータの可視化アプリ

リプレイスした結果

• jQueryから卒業
  • DOM操作って複雑になりがち
  • めんどくさいDOM操作をVueが解決
  • DOM操作のストレスから開放
• アプリがServerlessになった
  • 副産物
  • VueをBuildしたらHTML/CSS/JS
  • S3でホスティングできる

最近のvue界隈

• VueにもCLIがある
• 生でJS書きたくないからTSで
  • 初期のビルドでTypeScriptを用意できる
• Pug/Sass/TypeScriptでVueを書いている
• Vue UIがいい感じ
  • beta版
• vuesax
  • UIコンポーネントのFw
  • ElementUIより良い感じ
  • TypeScriptに対して優しくない

Evan You来日記念オンライン質問コーナー

www.youtube.com

TypeORMを素振りした話

ゆずさん @yuzu_441

発表資料

TypeORMを素振りした

Node.jsでいい感じのORM知りませんか？

TypeORMとは

• TypeScriptのORM
• Node.js/Browser/ReactNative対応
• MySQL/MariaDB/Postgresなどに対応

github.com

ormconfig.json

• DBの設定
• Entityのパス

できること

• save でinsert
• findOne などで検索
• JOINもできる
• Transactionも書ける
• @BeforeInsert みたいなフックもある
• Loggerの設定もある
• RubyのActiveRecord風にも書ける

type safeに書けるのか？⇒今のところ書けない

プライベートでReactとTypescriptでアプリを作ったので知見を共有ししつつ、有識者にマサカリでズタズタにされたい

Nokogiriさん @nkgrnkgr

speakerdeck.com

React/TypeScriptでハマったことなど

作ったもの⇒expenses-automation

• Googleカレンダーで入れた訪問先のデータを経費精算の形式にしてCSVで出力する

コンポーネントとデータ構造はほぼ同じ構成

• サーバからは月単位のデータをfetchしStateにそのまま突っ込む

モジュールのディレクトリ構成

• コンポーネントとビジネスロジックは分離したい
• StateをDBと見立ててサーバサイドのMVCっぽい構成に

ネストの深いStateの更新

• Reactの setState はStateが持つ第一階層のオブジェクトしか更新できない
• 駅名を変更する場合でも月ごとのStateの更新が必要

Imuutable.js

• 普遍データ構造を扱うFacebook製ライブラリ

CSSはなるべく書きたくない

• CSSフレームワーク bulma を選択

bulma.io

TypeScriptの導入

• 開発規模が小さいと方安全の恩恵は感じない
• Interface定義によるVSCodeの入力補完の恩恵はすごい
• TypeScriptを使うと引数がどんな戻り値を期待しているかが一目瞭然

パフォーマンス・チューニング

• コンポーネントの再レンダリング問題
• 調査ツール：ReactDevToolsのProfiler

github.com

Redux

• 今回は導入なし
  • バケツリレーは苦にならないと判断
• 小さくてもバケツリレーになるので入れておけばよかった

FunctionalComponent

• Stateがないものだけ使用

VSCode拡張

• Debugger

code.visualstudio.com

---

PR告知

自社の宣伝で恐縮ですが、弊社でもNodeやVueを使っているチームがあって今回の勉強会にも参加していました（偶然会場で会った）。そんなチームのメンバー（今回の勉強会の参加者とは別の人ですが）も登壇する大阪オフィス初のMeetupが11/27に開催されますのでよろしければご参加ください。

rakus.connpass.com