Reproのビジネスサイドを支えるJS

Slide 1

Slide 1 text

Reproのビジネスサイドを支えるJS Hilo Yamamoto 2019-10-25 We Are JavaScripters! @37th

Slide 2

Slide 2 text

Hilo Yamamoto (@boiyama) Software Engineer, BizOps div., Repro inc. JS Background: Yoshimoto → jQuery → Backbone → React → GAS プロフィール

Slide 3

Slide 3 text

フロントエンドエンジニアからコーポレートエンジニアになりましたでも、JSやってます

Slide 4

Slide 4 text

AWS IoT ボタンと Amazon Connect でトイレが詰まったら管理事務所に自動で電話する https://qiita.com/boiyama/items/cb0594defa3b554d8086 Lambda / Node.js を間で使用トイレを支えるJS

Slide 5

Slide 5 text

• ビジネスプロセスの理解と整理 • 運用効率化・指標可視化のためのシステム構築簡単に言うとじゃんじゃん売れる基盤作り業務ハックと呼ばれてたりする領域 BizOpsチームのエンジニアがやっていること

Slide 6

Slide 6 text

• 実装難易度でいうと低いものが多い • 早く実現すればするほど事業インパクトがあるプロダクト開発とは技術選定の観点が変わってくる業務ハックのポイント

Slide 7

Slide 7 text

GASこと Google Apps Script は、 JSで G Suite を簡単に操作できるサービスで、そんな業務ハック界で大人気「GAS」スプシが大体の業務を運用できる汎用性の高い CRUD UI 付 DaaS って感じなので、スプシにGAS載っけてビジネスロジックだけ書いてアプリケーションを作る、というのがてっとり早くて、定番の開発手法となっている

Slide 8

Slide 8 text

例えば、CS向けのツールを作る場合

Slide 9

Slide 9 text

• Salesforceに営業活動データがあって、Auroraにツール利用データがある • 顧客毎のツール利用状況の一覧 • 利用状況から対応の必要な顧客を抽出して対応管理 • 非機能要件無し • デザイン指定無し要件

Slide 10

Slide 10 text

今こんな作りデータはRedashに持ってきて結合させるビジネスロジックだけGASで実装して、一覧機能はスプシ、対応管理機能はTrelloに任せる

Slide 11

Slide 11 text

Redash

Slide 12

Slide 12 text

Google Sheets

Slide 13

Slide 13 text

Trello

Slide 14

Slide 14 text

GAS Knowledge (あまりないけど・・)

Slide 15

Slide 15 text

• tsconfig の module を es2015 にする • gas-webpack-plugin を使う • @types/google-apps-script を入れる • GASライブラリの型付け自分でやらないといけないので極力使っていない TypeScript で書く

Slide 16

Slide 16 text

// Redash の query result の CSV を取得 const values = Utilities.parseCsv(UrlFetchApp.fetch([RedashクエリAPIの CSV]).getContentText("UTF-8")); // CSVをパースした配列構造だとスプシにそのまま貼り付けられる SpreadsheetApp.getActiveSpreadsheet() .getSheets() .filter(sheet => sheet.getSheetId() === [シートID])[0] .getRange(1, 1, values.length, values[0].length) .setValues(values); Redashからスプシへのデータ出力は超簡単

Slide 17

Slide 17 text

// 指定シートの値を全取得 const values = SpreadsheetApp.getActiveSpreadsheet() .getSheets() .filter(sheet => sheet.getSheetId() === [シートID])[0] .getDataRange() .getValues(); // 1行目にキー、2行目以降に値が入ってる使い方の場合 const items = values .slice(1) .map( value => (value.reduce((previousValue, currentValue, currentIndex) => ({ ...previousValue, [values[0][currentIndex]]: currentValue }), {}) as unknown) as Item ); シートのデータはキーと値でマッピングしてる

Slide 18

Slide 18 text

• もう一個スプシ作るだけ • claspを使ってデプロイしわけている • clasp setting scriptId [スクリプトID] && clasp push テスト環境は作りやすい

Slide 19

Slide 19 text

こんなもんかな・・

Slide 20

Slide 20 text

• 使う技術が変わり、JS実装量が減っちゃった(WeJS登壇させてもらえなくなっちゃうかな・・) • 今日の話は(開発)要件が決まった後の話で、要件決まる前の仕事がプロダクト開発エンジニアより多い • 業務要件があって、運用設計調整して、開発要件決まる • 自社のビジネスのことがわかって面白いコーポレートエンジニアになってみて

Slide 21

Slide 21 text

We are hiring! DM開放中！ https://twitter.com/boiyamamoto