ガチスタートアップ1人目のバックエンドエンジニアのリアルな戦略と奮闘 #railsdm2019 #railsdm2019b @sinamon129

by sinamon129

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

⾃⼰紹介 RiLi, inc. 取締役 CTO RailsGirls Tokyo 5-11th coach 7th organizer ͠ͳ΋Μ(ยࢁ ைඒ) @sinamon129

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

RiLi,inc.について • 「⾃分らしいスタイルを叶える選択肢」を提案する、メディアおよびコミュニティを運営する会社です • 趣味・趣向が近いユーザーが集まるコミュニティをベースとすることで、最適なコンテンツを提供する、新しいメディアの形を⽬指しています

Slide 7

Slide 7 text

2018年7⽉⼊社

Slide 8

Slide 8 text

私が⼊った時の状態 • Super Crowds inc.（デザイン会社）から⽣まれた会社 • モノのデザイン・動くフロント強い • Wordpress・スプレッドシートでのシステム構築等はできる • バックエンドエンジニア不在 • クリエイター集団＋編集部メンバーで計8名程 • （ちなみに⼊った時は取締役じゃなかったよ！）

Slide 9

Slide 9 text

なんで⼊ったの？ • 社⻑といつか⼀緒に仕事がしたいと思っていた • 会社の⼈たちが作るものが好き！ • ビジョンへの共感 • ⼤学時代からファッションに近い領域のサービスを作りたかった • 「1通りどうにかなるかな」ぐらいは⾊々経験してきた

Slide 10

Slide 10 text

今⽇の話 • ガチスタートアップの技術選択の⼀例 • 同僚マジでありがたい • プログラミングから⼿を引くときの⼼境 • スタートアップ興味あるけど怖そうで踏み出せない⼈へ

Slide 11

Slide 11 text

作ってきたシステム

Slide 12

Slide 12 text

⼊社前〜 • SpreadSheetでステータス管理していたものをRailsで管理画⾯化 • 「仕事を⼀緒にやってみる」お試し • 働くことが想像つかなかったりする • まず副業とかでやってみるとお互い安⼼ • 0から作るリハビリ

Slide 13

Slide 13 text

既存のメディアのフルリニューアル • ⼊社直後からはじめたプロジェクト • WordPressで動いていたメディアサイト • メインはデザインリニューアル • 10⽉のポップアップストアを⾒据えて • （物販だけど）プロモーションもできるといいね • 将来的な機能追加を視野に⼊れて

Slide 14

Slide 14 text

フルリニューアルの技術選択と実装

Slide 15

Slide 15 text

ざっくりどう⾔うものを作ったか

Slide 16

Slide 16 text

主な構成 • Ruby • Ruby on Rails • ActiveStorageを利⽤ • webpack (not webpacker) / vue.js / sass / slim / browser-sync • GCP

Slide 17

Slide 17 text

Static Storage  Cloud Storage Database Server  Cloud SQL Kubernetes cluster -# *OHSFTT $POUSPMMFS .FEJB 4FSWJDF "ENJO 4FSWJDF 1PE 1PE 1PE 1PE -# *OHSFTT $POUSPMMFS $SPO+PC

Slide 18

Slide 18 text

縛り • 技術⾯での縛りは特になし • 「⾃由に決めて」と⾔われた • ⼀緒に作る⼈とお互い作りやすいようにしたい • 10⽉までにシステムの切り替えが完了している必要あり

Slide 19

Slide 19 text

考えていたこと • エンジニアを集めづらいサービスなので後のち登壇ネタに • 0から作るので⾃分がやったことないことにチャレンジしたい • スピードもいるので、やったことないことだらけにすると⾟そう • 「現実的な」構成

Slide 20

Slide 20 text

技術選択をする前に決めたこと • 開発のスコープ • 必要ページの内容とpath • 各ページの構成要素 • 上記を踏まえたワイヤー（プロトタイピングツールで画⾯遷移） • DBのテーブル設計（ER図ざっと引く）

Slide 21

Slide 21 text

⾃分の状態 • Rails Application 4年弱やってた • すでにあるアプリケーションを機能追加・運⽤が多め • Rails newからインフラ設定までやったのは2016年が最後…？ • 興味の強さ度合い • サービスや組織を作る・運⽤する >> 新しい技術とか

Slide 22

Slide 22 text

どう⾔う順番で決めていったか？ • ⾔語・フレームワーク • Ruby, Ruby on Railsが⼀番好き（なのでそれ以外考えず） • 開発環境の構築（docker-compose でmysql・本番と同⼀imageのweb） • フロントエンド周りの整備 • 管理画⾯どうするか • インフラ

Slide 23

Slide 23 text

⼀緒に開発したメンバー • フロントエンドエンジニア（1⼈） • ワイヤー引く / 全般のHTML・CSS・JS周りの実装 • デザインはデザイナーが作ってくれる • Vue.jsを別件で使った経験あり • Railsプロジェクト経験もある（頻繁ではない）

Slide 24

Slide 24 text

⼀緒に作る上で話し合ったこと • 開発する上で欲しいと⾔われたもの • ES6 buildできる/SASS/Jadeもしくはそれに類するもの/ライブリロード • SPAはお互いやったことがないのでMPAで⾏こう • スピード重視・01フェーズなのでまだ旨みがなさそう？ • VueはいけるとのことだったのでReactじゃなくてVueで進める

Slide 25

Slide 25 text

webpack(not webpacker) (1) • 初めてのモダンフロントエンド • 調査・噂を聞くにwebpackerは⼀癖ありそう • webpackも初だったので世に多く知⾒があるwebpackから • webpack -> webpackerは後でいけそう • ⼀旦sprocketsと共存しておく

Slide 26

Slide 26 text

webpack(not webpacker) (2) • js,css • /frontend/src以下に置く • webpackでjsはES6 build・SASSをcssにコンパイルしてそれぞれ別ファイルでapp/assets以下に • image, font • app/asset以下に配置（js,cssでのpath指定はasset_pathで指定） • ↑でbuildされてassets以下に配置されたファイルをasset compileする

Slide 27

Slide 27 text

みてください、この画像の枚数〜〜 • 画像がもりもりしている • 1ページ80枚以上ある • ぜんぶめっちゃかわいいので、動作検証で開くとうっかり⾒すぎて時間を吸われる

Slide 28

Slide 28 text

ActiveStorage • 昔、画像系gemはpaper clipを愛⽤していたが… • deplicateになってActive Storageを使えと書いてあった • 素直にActiveStorageを使うのかー！と思う（素直すぎる） • 導⼊はめちゃくちゃ簡単だった • しかし…

Slide 29

Slide 29 text

ざっくりActiveStorageの仕組み • viewで⽣成されたURLは画像のある場所ではない • RepresentationsController#show • ここで指定したストレージの画像URLにredirect • variantの指定で動的にリサイズできるが、そのタイミングで画像のアップロードが⾛る

Slide 30

Slide 30 text

問題 • 画像のアクセス時に絶対にRails層を通る • 画像数が多いので、アクセスが同時に来ると詰まりがち • variantを指定した場合、Rails層で動的にリサイズが⾛るので、新規画像が追加された後のアクセスで詰まりがち • CDNをはさみづらい仕組み • 公式でない（はず）

Slide 31

Slide 31 text

ちょっと遅い後々やばそう

Slide 32

Slide 32 text

解決策 • のちに⼊社した同僚⽒がやってくれた • アップロード・モデルに紐づける部分 • ActiveStorageをそのまま使う • 画像加⼯・表⽰ • CDN(Imgix)を利⽤

Slide 33

Slide 33 text

具体的にいうと • ApplicationhelperにCDNのパスを返すhelperを追加（production時            画像のpath指定をurl_for(variant)からservice_url_for(variant)に

Slide 34

Slide 34 text

よかった・うまくいったこと • フロントエンドエンジニアとの協業 • 開発着⼿できる状態を整えるのを第⼀優先で進めた • 開発環境構築にほぼ詰まらず • 開発⽤データ投⼊バッチ • Kubernetes • スケールしやすい状態に作れた

Slide 35

Slide 35 text

うまくいかなかったところ • ActiveStorageに⼤分悩まされた • おかげでめっちゃRailsのissueやPR・コードを読むことになった（から勉強になった） • ちゃんと調べてから使おう • 初GKE（初Kubernetes）だったので、試⾏錯誤に時間かかった • いい学習コストだった思おう…

Slide 36

Slide 36 text

2018年11⽉エンジニアjoin! (@gomachan)

Slide 37

Slide 37 text

よかったこと(1) • ⾃分よりレベルが⾼くて尊敬できる⼈だから安⼼して背中を任せられる • 隣で相談できるって素晴らしい！ • 1⼈で考えて⾎迷った選択をしなくなった • 「属⼈化」からの早期脱出できた…！

Slide 38

Slide 38 text

よかったこと(2) • ⼊社前に現状の事業周りを取り巻く情報と相談事項をまとめた • 「コードを読んでもわからないこと」をメインに • システム周りでいうと、「これは上⼿に実装できなくてこうなってる」を⼀緒に考えて解決できた • 遠慮したりカッコつけないで相談しまくる

Slide 39

Slide 39 text

⼊社してすぐやってくれてよかったこと • 定期⾃動gem updatePR⽣成 • rubocop/onkcopの導⼊ • CircleCIの整備 • ActiveStorageのCDN対応 • 頻出コマンドをmakeファイルにまとめて、`make`って打ったらhelpが出る • めっちゃドキュメントレスになる・迷わない・最⾼ • その他私が志半ば・トチ狂って実装してたものをキレイキレイ

Slide 40

Slide 40 text

よかったこと(3) • 私がエンジニアリングからある程度⼿を離す選択肢が取れた • 同僚⽒：エンジニアリング全般ゴリゴリやりたいマン • 私：開発が関係する仕様周り・組織的に回ってないところやるマン

Slide 41

Slide 41 text

プログラミングするの減ったの⾟くないの？

Slide 42

Slide 42 text

⼿を離せるようになったので • とりあえず回ってない・⾜りてない部分を補うように動き出した • 会社を整えていく部分 • 今後やりたいことをできるようにするための意思決定を進める • 社⻑に「キャリアとしてエンジニア極めたいとかあれば無理にとはいわないけど、⼀緒に経営やらない？」って⾔われる

Slide 43

Slide 43 text

是⾮と返事したが、同時に考え始めた • 現状、⾃分が職域を超えて動く⽅が将来的にいいものが作れる会社を作れそうだからやりたい • エンジニアリング以外の仕事は過去に同僚がやっているのを⾒たことがあることも多いけど、やったことはほぼない • 経営するとはなんだ • 「組織最適化」を極めて動いた先に私はどうするんだ

Slide 44

Slide 44 text

プログラマとしての葛藤・不安 • コードを書くことにこだわりが無いと思っていだけども • プログラム書かない仕事はしたくないとかはないが • システム設計・実装・システムと⼀緒の時は楽しい • たとえバグが出ようが障害が起きようが • 技術的に置いていかれてる感

Slide 45

Slide 45 text

なんか漠然と不安に襲われたので • いろんな⼈に相談してみる • なんで不安なのか考えてみる • そもそも何がやりたかったんだっけ？

Slide 46

Slide 46 text

相談してみる • 例えば • 今後やるであろう仕事をやってる⼈ • エンジニアだけど⼀時的に職域外の仕事をしてた⼈ • 同じような境遇にいそうな⼈ • （余談）⾎迷ってると「⾃分どうしたらいいんですかね？」とか相談してしまって、「何がしたいの？」って聞かれたりするw

Slide 47

Slide 47 text

そもそもなぜ不安になるのか考えた • キャリアとして、これまで想像の範囲内だったところから完全に外れた • 「これまで解決してきた問題」の派⽣から外れている • 意思決定のスコープが広がった • 「終わりが分かりやすい仕事」ではないことが多い • -> 想像できない・わからない・進んでない感が不安材料

Slide 48

Slide 48 text

私結局何がやりたかったんだっけ…？ • 「素敵だな」って思えるものにみんなが出会える世界にしたい • 私の個⼈的欲望としては「（⾃分が）かわいいと思うもの」の情報に溺れながら、これだ！っていうものを⾃分の周りに置きたい • IT系からもファッション系からも納得できるものを作りたい • ファッションに関するデータがもっと活⽤できるような基盤を作りたい

Slide 49

Slide 49 text

考えた結果 • まずは会社を整えていくところに全⼒投⼊する • 「全体が⼀歩前進」を意識して⾏動する（迷いは⽌まる） • 「進んでるぞ！」って思えるように分解作業をする • 全員が「得意・やりたいこと」に専念できる組織を⽬指す • 整えて強み・やりたいことに戻る！

Slide 50

Slide 50 text

（余談）最近の私 • 経営周り • 採⽤・広報（5⽉から引き継げる！） • 労務・情シス周り⼀部 • （コンテンツ周り以外の）プロダクトオーナー • 社外連絡担当 • （たまに）gem update・bug ﬁx・ちょっとだけ開発

Slide 51

Slide 51 text

スタートアップ興味あるけど怖そうで踏み出せない⼈へ

Slide 52

Slide 52 text

（多分⼀般的な）⾒え⽅ • 出来上がっている会社 • すでに整っている • （割と）安定している • ⼩規模スタートアップ • 整ってない • 何が起こるかわからない

Slide 53

Slide 53 text

整っていないといいこと • ⾃分が⼊ることにより何か変わるのが「わかりやすい」 • ふつうのことがふつうにできることが重宝される • 超スーパーすごいエキスパートにならなくても • ちょっとの頑張りで⼤分変わる • ⾃分の本当にできること・できないことが⾒えやすい

Slide 54

Slide 54 text

整っていないといいこと • 意思決定の当事者になりやすい • これまでこうだといいと思っていたことを反映できる • 整っていることへの尊敬の念で溢れる • 制度等がなんのためにあるのか理解できる • それを実現するまでの道のりが当事者になって⼤変さに気づく

Slide 55

Slide 55 text

検討材料として⼤事そうなこと • 純粋に⼈として合いそうかどうか • メンバーの得意分野・不得意分野の把握 • パズルがいい感じにハマると気持ちいい • ⽬指している世界に対して共感ができるか • 今あるプロダクトがというより、どうしていきたいか

Slide 56

Slide 56 text

気をつけてること • ⾃分のモチベーションとメンタルは⾃分でコントロール • 他⼈の問題を解決している余裕がある⼈がいるとは限らない • 精神的に⼤丈夫な状態をできるだけ作る • （⾃⼰肯定感と健康のため）パーソナルトレーニングに通い始めました • 健康 • 死んだら終わるので、休める⽇は休む

Slide 57

Slide 57 text

スタートアップは楽しいぞ！ • 素敵な世界を作ろうとしている会社は沢⼭ある • これまでのいろんな知⾒を注⼊するチャンス • 新しい⽂化が⽣まれる瞬間に作り⼿として⽴ち会えるかも • （やらざるを得ないから）できることが増える • 毎⽇が⽂化祭前 • うまくいかなくてもそれは⼀つの貴重な経験

Slide 58

Slide 58 text

まとめ

Slide 59

Slide 59 text

今⽇話した話のまとめ • スタートアップの技術選択 • 同僚マジでありがたい • プログラミングから⼿を引くときの思考 • スタートアップはいいぞ！