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
97
フロントエンドのサーバーレス SPA編
boiyama
1
1.1k
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
ニーリーにおけるプロダクトエンジニア
nealle
0
830
VS Code Update for GitHub Copilot
74th
2
640
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
It's Worth the Effort
3n
185
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
A Tale of Four Properties
chriscoyier
160
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
How STYLIGHT went responsive
nonsquared
100
5.6k
The Invisible Side of Design
smashingmag
301
51k
Become a Pro
speakerdeck
PRO
29
5.4k
Thoughts on Productivity
jonyablonski
69
4.7k
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