Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

F425aff2e1f934fc1e5fa95b1f933068?s=47 boiyama
October 25, 2019

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

We Are JavaScripters! @37th
https://wajs.connpass.com/event/150356/
の発表資料

F425aff2e1f934fc1e5fa95b1f933068?s=128

boiyama

October 25, 2019
Tweet

Transcript

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

  2. Hilo Yamamoto (@boiyama) Software Engineer, BizOps div., Repro inc. JS

    Background: Yoshimoto → jQuery → Backbone → React → GAS プロフィール
  3. フロントエンドエンジニアから コーポレートエンジニアになりました でも、JSやってます

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

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

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

  7. GASこと Google Apps Script は、 JSで G Suite を簡単に操作できるサービス で、そんな業務ハック界で大人気「GAS」

    スプシが大体の業務を運用できる汎用性の高い CRUD UI 付 DaaS って感じなので、 スプシにGAS載っけてビジネスロジックだけ書いてアプリケーションを 作る、 というのがてっとり早くて、定番の開発手法となっている
  8. 例えば、CS向けのツールを作る場合

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

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

  11. Redash

  12. Google Sheets

  13. Trello

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

  15. • tsconfig の module を es2015 にする • gas-webpack-plugin を使う

    • @types/google-apps-script を入れる • GASライブラリの型付け自分でやらないといけないので 極力使っていない TypeScript で書く
  16. // 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からスプシへのデータ出力は超簡単
  17. // 指定シートの値を全取得 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 ); シートのデータはキーと値でマッピングしてる
  18. • もう一個スプシ作るだけ • claspを使ってデプロイしわけている • clasp setting scriptId [スクリプトID] &&

    clasp push テスト環境は作りやすい
  19. こんなもんかな・・

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

    コーポレートエンジニアになってみて
  21. We are hiring! DM開放中! https://twitter.com/boiyamamoto