Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reproのビジネスサイドを支えるJS
Search
boiyama
October 25, 2019
Programming
0
170
Reproのビジネスサイドを支えるJS
We Are JavaScripters! @37th
https://wajs.connpass.com/event/150356/
の発表資料
boiyama
October 25, 2019
Tweet
Share
More Decks by boiyama
See All by boiyama
バックオフィスに行ったソフトウェアエンジニアの業務効率化事例
boiyama
1
260
2018年、IE6対応サイトを作る
boiyama
4
980
ヤバいESLint/TSLintルール作っちゃったかもしれない
boiyama
0
1.5k
チームをCQRS
boiyama
1
1.5k
フロントエンドのサーバーレス SSR編
boiyama
0
690
Serverless for Front-end Server-Side Rendering
boiyama
1
100
Learning Elm in JS
boiyama
1
540
JSでElmを学ぶ
boiyama
0
94
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.6k
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
GraphRAGの仕組みまるわかり
tosuri13
8
490
WindowInsetsだってテストしたい
ryunen344
1
200
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
330
Benchmark
sysong
0
270
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
830
Gleamという選択肢
comamoca
6
760
ReadMoreTextView
fornewid
1
480
CursorはMCPを使った方が良いぞ
taigakono
1
180
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Speed Design
sergeychernyshev
32
1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Reviewing Like a Champion
maltzj
524
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
Reproのビジネスサイドを支えるJS Hilo Yamamoto 2019-10-25 We Are JavaScripters! @37th
Hilo Yamamoto (@boiyama) Software Engineer, BizOps div., Repro inc. JS
Background: Yoshimoto → jQuery → Backbone → React → GAS プロフィール
フロントエンドエンジニアから コーポレートエンジニアになりました でも、JSやってます
AWS IoT ボタンと Amazon Connect でトイレが詰まったら管理事務 所に自動で電話する https://qiita.com/boiyama/items/cb0594defa3b554d8086 Lambda /
Node.js を間で使用 トイレを支えるJS
• ビジネスプロセスの理解と整理 • 運用効率化・指標可視化のためのシステム構築 簡単に言うとじゃんじゃん売れる基盤作り 業務ハックと呼ばれてたりする領域 BizOpsチームのエンジニアがやっていること
• 実装難易度でいうと低いものが多い • 早く実現すればするほど事業インパクトがある プロダクト開発とは技術選定の観点が変わってくる 業務ハックのポイント
GASこと Google Apps Script は、 JSで G Suite を簡単に操作できるサービス で、そんな業務ハック界で大人気「GAS」
スプシが大体の業務を運用できる汎用性の高い CRUD UI 付 DaaS って感じなので、 スプシにGAS載っけてビジネスロジックだけ書いてアプリケーションを 作る、 というのがてっとり早くて、定番の開発手法となっている
例えば、CS向けのツールを作る場合
• Salesforceに営業活動データがあって、Auroraにツー ル利用データがある • 顧客毎のツール利用状況の一覧 • 利用状況から対応の必要な顧客を抽出して対応管理 • 非機能要件無し •
デザイン指定無し 要件
今こんな作り データはRedashに持ってきて結合させる ビジネスロジックだけGASで実装して、 一覧機能はスプシ、 対応管理機能はTrelloに任せる
Redash
Google Sheets
Trello
GAS Knowledge (あまりないけど・・)
• tsconfig の module を es2015 にする • gas-webpack-plugin を使う
• @types/google-apps-script を入れる • GASライブラリの型付け自分でやらないといけないので 極力使っていない TypeScript で書く
// 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からスプシへのデータ出力は超簡単
// 指定シートの値を全取得 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 ); シートのデータはキーと値でマッピングしてる
• もう一個スプシ作るだけ • claspを使ってデプロイしわけている • clasp setting scriptId [スクリプトID] &&
clasp push テスト環境は作りやすい
こんなもんかな・・
• 使う技術が変わり、JS実装量が減っちゃった(WeJS登壇させてもら えなくなっちゃうかな・・) • 今日の話は(開発)要件が決まった後の話で、要件決まる前の仕事 がプロダクト開発エンジニアより多い • 業務要件があって、運用設計調整して、開発要件決まる • 自社のビジネスのことがわかって面白い
コーポレートエンジニアになってみて
We are hiring! DM開放中! https://twitter.com/boiyamamoto