React Native Tech Blog

supported by maricuru (旧maricuru tech blogです)

非エンジニア向けにSQL社内勉強会を開催しました

先日SQLの社内勉強会を開催しました。

今回は特に「非エンジニア」に向けて、SQLの初歩〜社内分析環境(Redash)の使い方までを勉強しました。

f:id:wasan:20190919181959j:plain

非エンジニアがSQLを書けるメリットとしては

  • 自分でスピーディーに仮説を検証できる
  • エンジニアのプロダクト開発工数を奪わない

などのメリットがあるかと思います。

SQLを叩くのはエンジニアの担当、ってことが多いかと思いますが、最近はプロデューサーやマーケターもSQLを書けるようにトレーニングしている会社が多いようです。
僕の以前勤めていたDeNAでも、イケてるプロデューサーは自分でSQLを書いて仮説を確かめていた気がします。

maricuruの分析環境

maricuruではメインの分析環境にAmplitudeを使用していました。
というか今も使っています。

Amplitudeは特にExpoを使っていると導入が簡単で、またローンチ初期は非常にスピーディーに基本的な分析ができる印象です。
ブラウザ上でSQLっぽい抽出条件をポチポチと選ぶと、グラフや表を出力できます。

ただサービスが成長してきて、より細かい分析をしたくなると生SQLを叩きたくなります。
(Amplitudeではこれが有料版でないとできず、有料版は半端なく高価)

そこでmaricuruではAmplitudeのデータをBigQueryに流し込む基盤を開発し、BiqQuery + Redashで分析できるようにしました。

f:id:wasan:20190919134707p:plain

構成はこんな感じです。
AmplitudeのExportデータだけでなく、RDBのスナップショットもBiqQueryに格納しています。

勉強会 〜基礎編〜

まずは基礎からです。

教材はこちら。
みんな大好き、新日本プロレスのIWGPチャンピオンを題材にしています。

qiita.com

参加者の中にはSQLってもの自体が初めてのメンバーも多いので

  • テーブル
  • カラム
  • レコード
    などの概念からはじめました。

続いて実際にSQLを書きながら体験してみます。
SQLを実行するにあたりプレイグラウンド的なサービスの SQL Fiddle を利用しました。

SQLを書いて実行結果を確かめるまでをブラウザ上で体験できるので、勉強にはちょうどよかったです。

f:id:wasan:20190919182427j:plain
SQL Fiddle - SQLを書くと下に実行結果が表示される

まずはSELECTWHERE などのSQLコマンドです。
今回の目的は「分析」だったので、UPDATEDELETE などのデータ操作する系は割愛しました。

あとは JOIN です。
多くのテーブルを横断して分析することになるので、JOIN の理解は必須ですね。
この辺が割と難しそうな印象でした。
が、なんとか参加者全員が課題をクリアすることができました。

実践編 〜ReDash〜

続いて実践編として、本番のデータをReDashで抽出してみました。

が、これはだいぶハードルが高かったようです。。

  • テーブルの種類が膨大でどこに欲しいデータがあるかわからない
  • WITHJOINを多用する必要がある

などが難しいポイントだったようです。

エンジニア側で

  • どのデータがどのテーブルにあるかの資料を用意する
  • コピペで使える便利なSQLを予めいくつか用意しておく

などできるともう少しスムーズに進みそうです。

イベント開催しました!〜 第2回 ReactNativeにゆかりのあるスタートアップが集う会

先月2月21日に「ReactNativeにゆかりのあるスタートアップが集う会」の第2回目をmaricuruオフィスにて開催しました。

r-n.connpass.com

前回より多めのご来場で、30人を超すReact Nativeエンジニア、またReact Nativeに興味のある方々が集いました。

今回もLT+パネルディスカッションという構成です。

LT

f:id:wasan:20190303233608j:plain

LTは10分枠+5分枠を設け、こちらもマニアックな内容から明日にでも使えそうなネタまで幅広い発表がありました。
覚えている限り、、各LTを振り返ってみます!

React Nativeで位置情報アプリをつくった話 by @tyshgc

speakerdeck.com

KiiiNという位置情報を活用したアプリを、React Nativeに置き換えた際のお話でした。
特にMapを駆使したアプリなので、Map上に大量のマーカーを置いたときなど、Mapに関するノウハウを共有いただきました。

ところで、このKiiNというアプリはゲーミフィケーションを利用した”ゲームっぽい”アプリなのですが、こういうゲーム系アプリってReact Nativeでは珍しい気がして新鮮に感じました。

React Native WebとStorybookによるアプリケーション開発の効率化 by @natural_clar

www.slideshare.net

チーム内でコンポーネントのUIを共有する際に便利なstorybook。
React Nativeの場合は普通シミュレーターや実機で立ち上げますが、今回はそれをウェブブラウザで立ち上げる方法をご紹介いただきました。

サクッと見れるし、特に非エンジニアに共有する場合はシミュレーターも要らないので便利そうですね。

仕組み的にはReact Native for Webを使うなど、なかなかマニアックな技を使われているようです。

React Nativeで課金処理したら大変だった by @mediaboxes

speakerdeck.com

課金はなにかと実装が大変ですよね。。。
今回の発表ではReact Nativeでの課金処理をトランザクションのあたりなど詳しくご紹介いただきました。
課金を実装する際には参考にしたい!(ただ資料が見当たらず、、、)

(2018/3/14 資料追記しました)

Bitriseでビルドするアプリのcode signing by @nacam403

speakerdeck.com

Bitriseとはモバイルに特化したCIツール。
モバイルに特化しているので、iOS/Androidストア申請の自動化などが、だいぶ簡単にできるとのこと。

特にiOSのプロビジョニング管理とかはややこしいので自動化すると便利そうです!

Metro Bundler in Web @sasurau4

speakerdeck.com

ご本人曰くだいぶ趣味に走ったネタとのことw
Metro Bundler、、React Nativeを触ってたら裏ではガンガン働いているはずだけど、普段あまり意識して見ないので、こういったLTで触れてみるのはよい機会でした。

react-native-navigation 1年使ってみた @masaichi

www.slideshare.net

メジャーなナビゲーションライブラリ"react-native-navigation"を1年使ってみたお話でした。

ちなみに会場で来場者に、どのナビゲーションライブラリを使っているか聞いてみた所、react-navigationが多数、react-native-navigationがポツポツという感じでした。

細かすぎるけど 伝わってほしい Android開発の話 @shiba_hiro0804

www.slideshare.net

iOSに比べて、Androidには数々のツラミがあるそう。
ときにはiOSにしかない機能とかも。。
けどよく調べるとAndroidでも解決する方法があるよ、というお話でした!

アプリリリースまでのつらみあれこれ @nitaking_

www.slideshare.net

React Nativeアプリをリリースするまでに遭遇したつらみについて、主にWebView中心に紹介いただきました。

ところで、Air Closetさんではswiftで書かれていたiOSアプリをReact Nativeにリプレイスされたとのこと。
Webエンジニア中心のチームの場合、そのほうが開発効率がよいこともありそうですね。

(2018/3/14追記)

パネルディスカッション

f:id:wasan:20190303233505j:plain

パネルディスカッションでは日頃からReact Nativeをガリガリ使ってるエンジニアの皆さんにパネラーになっていただき、来場者からの質問にお答えいただきました。
今回は sli.do を使ってリアルタイムに質問を募集しながら進めました。

そのときの質問のログはこちら↓
https://app2.sli.do/event/nzgiujue/live

覚えている範囲でピックアップすると、、

RectNative のバージョンアップ対応ってリリースしたアプリでも頑張って上げてますか?

結構、みなさん色々でした。
頑張ってあげてる人もいるけど、しばらく上げられてない〜って人もいました。
それが現実ですよね〜w

皆さん状態管理はどうやってますか? redux, mobx, react-context, なんか独自 等々

Reduxが多かったですね。
けどアプリによっては特に状態管理ライブラリを使ってないケースも。
作るアプリ次第ではReduxだとオーバースペックになることもありそうですね。

所感

f:id:wasan:20190303233630j:plain

今回のイベントで素晴らしい!と思ったことは、
登壇者はもちろん、来場者もReact Nativeに精通した人が多かったため、発表中、懇親会中を通して多くの情報交換がされていたことです。

  • 発表中に「XXXってオプション入れると、それ解決しますよ!」というアドバイスが会場から上がったり
  • 懇親会中にmacを広げてコードを見せながら、お悩み解決したり
  • 「RNでカメラ使いたいんです」→「カメラならこの人!」、「bluetoothを使いたい」→「bluetoothならこの人!」って繋がったり

次回は3/28に第3回を開催します!
参加枠はなんと1日で埋まったけど、LT枠はまだ空いているので是非!

r-n.connpass.com

イベント開催しました!〜 ReactNativeにゆかりのあるスタートアップが集う会

先日、1月17日に、React Nativeのイベント「ReactNativeにゆかりのあるスタートアップが集う会」を開催しました!
初の試みでドキドキでしたが、当日は約30名の来場があり盛況に終えることが出来ました。

今回は@kangyoosamさんと共同で、弊社maricuruのイベントスペースで開催しました。

f:id:wasan:20190202072133j:plain

LT発表

今回はLT発表への応募が多く(参加者よりも集まりが早かった)怒涛の8件のLT発表でした。

(資料はコチラにアップされております) r-n.connpass.com

AnimatedでModalのAnimationを変えてみた by 14__oz

Modalの fade+slideを組み合わせた独特な出現方法を実現されたお話です。
実際に動画メディア「ルトロン」で使用されているようです。見てみよう♪

monorepoによるアプリの複数管理とrn-cli.config by Jesse Katsumata

monorepoとは

npmで管理する複数のpackageを、まとめて一つのgitリポジトリで管理すること。

ふむふむ。
ただこれを実際に使うとエラーの嵐、、それを解決する救世主「rn-cli.config」について紹介いただきました。

Animated APIを使ってスクロールで隠れる"あのバー"を作る by misoton

"あのバー"とは、言葉で説明しにくいのですが、、、ヘッダーのバーで、下にスクロールすると消えるけど、上にスクロールすると出現するやつです。
FacebookとかTwitterのアプリでも見られますね。
限られた画面スペースを有効に使えて便利なコンポーネントだと思います。

今回の発表ではAnimated APIを使って”あのバー”を作ったお話でした。
是非参考にしたいですね!

React NativeのコードをWebアプリに再利用するための考察 by tkow

Web管理画面を作るにあたり、ロジックやデータ構造を使いまわしたいため、React Nativeのコードを再利用したというお話。
たしかに管理画面用に再利用したいというケースはありそうですね。
Reduxやfirestoreのデータ構造などを再利用できたとのことでした。

expo ejectしてみた by TomohiroTsukui

なるべくejectしたくないものですが、実現したい仕様によってはejectせざるを得ないシーンも出てきます。
今回の場合、広告SDKを導入するためにejectしたとのことでした。 事業成長の過程でこれはありそうですね。。

意外だったのがejectしてもOTA(審査なしで更新できるやつ)はできるということ。
全体的に、想像していたよりはeject後もExpoの恩恵はあるようでした。

2018年を振り返って~アプリ開発を始めて業務委託するまで~ by Yuki

フロントエンドエンジニアからReact Nativeへキャリア移行していった2018年を振り返っていただきました。
ネイティブアプリを作りたい、と思った時にフロントエンドのスキルと親和性が高いのもReact Nativeのメリットですよね。

Firebaseとalgoliaで自由度の高い音声検索アプリ作った by YuriHotate

冬休みに個人的に開発されたアプリのご紹介。
飲んだお酒を、音声入力して記録するアプリです。
バックエンドがfirebase。そしてfirebaseが苦手な全文検索にはalgoliaを使われています。
React Native + firebaseって組み合わせ、中〜小規模なアプリを作るには最強な組み合わせな気がしますね。
あとUIがとてもキレイなのが印象的でした。

react-navigation v2 to v3 by わたなべゆう

switchNavigatorという機能が便利そうでした。
SNSの認証フローなどだと、認証後にresetでがさっと再描画することが多かった気がしますが、その辺がもっとスマートに実装できるようです。
v1からv2へのアップデートでしんどかった記憶があるのですが、v2からv3はそこまで辛くないとのことで安心しましたw

パネルディスカッション

実際の現場でReact Nativeをバリバリ活用しているエンジニアさんを迎えて、パネルディスカッション形式のトークを開催しました。

パネラー 開発してるサービス
TomohiroTsukui (@two2q) ecbo cloak ( https://cloak.ecbo.io/ja )
YuriHotate (@yuri_htt) TeamHub ( https://tmhub.jp/ )
わたなべゆう (@hmktsu) Weddy Weddy ( https://www.weddyweddy.net/ )
ワダタカヒコ (@takahi5) maricuru ( https://maricuru.com )

事前に参加者から質問を集めて、それを聞いていくスタイル。

  • React Nativeかflutterか?
  • React Nativeでどこまで作れる?例えばTicTokみたいなのは可能?
  • 最新バージョンの追従はちゃんとしてる?
  • Expo使う?使わない?
    などなど、、、

参加者も交えてアットホームな感じで日頃の疑問についてトークが盛り上がりました。

懇親会

お酒とピザを片手にこんな感じで🍕🍺

f:id:wasan:20190202072108p:plain

次回

2/21(木)に開催します!

今回の反省点を活かしつつ、より有意義なイベントにしたいと思います。

現時点で満席のようですが、空き、増枠もありえるので是非♪

r-n.connpass.com

リモートワーク推進!ということでセブ島でリモートワークしてきました

こんにちは、maricuruのワダです。

弊社はリモートワークを推進しており、ここ最近はリモートで働く仕組みを整えていました。
副業や業務委託という形でとても優秀なエンジニアがジョインしてくれて、主にリモートで働いています。

その結果、僕もオフィス行かなくてよくね?と錯覚してw、冬が到来し気温が下がってきたのを機に、寒いのが嫌いなのでセブ島へやってきました(笑)

1週間、セブのITパークを拠点にコワーキングスペースなどを利用しながらリモートワークをしたのですが、結果的には全然アリでした👍
むしろかなり最高だったので、今回得たノウハウを共有したいと思います!

エンジニアなんてmacとネット環境さえあれば、どこでも働けますからね❢

ちなみに、今回は10日間の日程で、前半はリモートワーク、後半は家族で休暇という形だったのですが、このように仕事と休暇をマージしたリモートワークのスタイルは、ワーケーション(work + vacation)と呼ばれるようです。

ワーケーションとは?

work(仕事)とvacation(休暇)を合体させた造語で、旅行先などでのリモートワークを認めるというワークスタイルとのことです。
欧米では普及しつつあり、日本でもJALなどが導入しています。

そのメリットとしては以下のような点があります。

働きながらリフレッシュ

リゾート地のホテルやコワーキングスペースを利用して仕事ができれば、昼休みはプールで休憩したり、晩ごはんは現地の美味しいものを食べたり、と普段のオフィス勤務ではできないようなリフレッシュができます。

ゆっくりした滞在が可能に

連休などを利用して旅行に行く場合どうしてもタイトな日程になりがちです。

「この打ち合わせは外せない!」という場合に旅程の短縮を余儀されない場合もありますが、もしリモートで滞在先から打ち合わせに参加することができれば長期の旅程を組むことができます。

家族の満足度アップ

旦那がリモートで働いている間も家族は滞在先で観光やアクティビティを楽しむことができます。
僕の今回の滞在でも、息子はプールやショッピングモールのプレイエリアへ、妻はマッサージに行くなど、それぞれでセブを楽しんでいたようでした笑

なぜセブ島か?

セブを選んだ理由としては...

時差が少ない

時差が1時間なので日本とのミーティングにも支障がないです。
時差ボケもありません。

暖かい

僕は寒いのが嫌いなで、冬になると気分も陰鬱になりアウトプットの質さえ下がるのではと懸念しています(笑)
フィリピンは12月〜5月が乾季で過ごしやすく、これは日本の寒い時期と逆パターンなので、もう冬はフィリピンでいいんじゃないかと!?

近い

今回は家族旅行とマージしての滞在です。
息子が3歳と小さいためロングフライトは避けたく、直行便で5時間で行けるのは◎です。

宿泊について

おすすめエリアはITパーク

今回僕はITパークという地域にairbnbでコンドミニアムを借りました。

ITパークとは、IT企業が集積する経済特区で

  • 治安がよい
  • 街並みがきれい
  • レストラン、コンビニも多い

など特徴から、日本人にとっては間違いなく過ごしやすいエリアです。

現地の日本人曰く「ITパークは進撃の巨人の壁の中」とのことでしたが、まさにその通りで、そのエリアだけ明らかに安心空間が構築されています。

近代的ビルが並ぶITパーク(左) だが一歩出るとローカルな街並み(右)

部屋について

部屋はairbnbで「AVIDA TOWER」という高層コンドミニアムの一室を借りました。
airbnbでITパークの部屋を探すと大半はAVIDA TOWERです(笑)

入り口には24時間警備員がいるので安心感があります。

部屋のタイプは色々ありますが、家族で行く場合はベッドルームと別に作業部屋があるのが良いでしょう。
家族が寝静まってからも作業ができるので。

2LDKの部屋を借りて、1泊5000円くらいでした。
実際5000円くらい出すと普通にビジネスホテルも借りられるので、めちゃ安ではないですが、複数の部屋があるのは家族連れにとっては使いやすかったと思います。

f:id:wasan:20181230025053j:plainf:id:wasan:20181230025107j:plainf:id:wasan:20181230025119j:plain

居住者が無料で使えるプールもあるのでリフレッシュにもなるでしょう。
僕の場合は家族も一緒に行ったので、3歳の息子は特に喜んでいました(笑)

子供が大喜び!

ネット環境について

ITエンジニアとして一番気になるところです。
僕も行くまではここが一番不安で、しっかり調べてこようと思っていました。

一般的にセブのネットインフラはイマイチと言われますが、結果的には問題なく仕事ができました。

ただ現地の人曰く、天候次第で(?) でネット環境が悪くなったりするらしいので、常にこの状況ではないかもしれないです。

Wi-Fi環境は?

主にPC作業のためにWi-Fiを利用しました。宿泊してるコンドミニアム、また外ではコワーキングスペースや公衆Wi-Fiも使えます。

コンドミニアム@ITパーク

部屋にもよるかもしれませんが、宿泊した部屋では6〜7Mbps出ていました。

大容量のデータをやりとりするには不便があるかもしれませんが、普通の作業では支障はなかったです。
zoomを使ってオンラインでミーティングもしましたが、全然問題なかったですね!

ちなみにこの部屋の回線はケーブルTVを使っているようでした。

コワーキングスペース

後に書くThe Companyさんでは170Mbpsの爆速が出ていました。
これなら日本にいるときと変わらず作業できますね。

またLIGさんの運営する、ii-office cebuさんでは 35Mbps出ていました。
これも普通に使う分には十分でしょう。

公衆Wi-Fi

大抵のモールやカフェで公衆Wi-Fiが飛んでいます。

ただモールで繋ごうとしたときは、認証にフィリピンの電話番号が必要で、SIMが電話番号なしのタイプだったので接続できませんでした。。。

カフェではBo's coffee(フィリピン版スタバ)だと、コーヒー注文時に2時間有効のWi-Fiパスワードを渡してくれました。

モバイル通信(SIM)は?

今どきスマホでネットが使えなかったら死にます。

そのためのSIMをゲットする方法は主に

  • 現地の空港で買う
  • 予めamazonで買う

がありますが、個人的には予めamazonで買うのをおすすめします。

理由としては以下の3点です。

  • 現地到着後の時間が節約できる
  • 値段も現地で買うのと変わらない
  • 出国前に設定できるので安心(設定は超簡単ですが..)

僕の場合はCHINA UNICOMの東南アジア向けグローバルSIMを買いました。

12日間で4GBまでLTEが使えるので十分でしょう。
最悪4GBを使い果たしても、3Gで接続できるのでLINE程度なら大丈夫ぽいです。

日本ではsoftbank回線に繋がるので、出国前に設定できます。

現地でも到着したら速攻で繋がりました。
またテザリングも使えました。

コワーキングスペースについて

おすすめはThe Companyさんです。
ITパークからはタクシーで10分くらいで着きます。

なんと言っても、ネットが速いです!
170Mbpsとか出てました。

あとは、水、コーヒーが飲み放題で、
テレフォンブースもあり、滞在中は日本メンバーとのオンラインミーティングに利用しました。

またこちらで働くスタッフの方も親切で、今回は現地のエンジニアやReact Nativeのオフショア開発をされている方をご紹介いただきました。
お陰様で充実した滞在になりました。

ちなみにThe Companyさんは2019年2月にITパークにもコワーキングスペースをオープンするとのことで、これはますます使い勝手がよくなりそうです!

www.cebupot.com

The Company フリースペース

移動手段について

Grab(東南アジア版UBER)を圧倒的におすすめします。

  • 現金のやりとりが不要(クレカ決済)
  • 行き先の会話が不要

なのがセブ初心者にとっては助かります。

nonki-mom.com

Grabの使い方は多くのサイトで語られているので割愛するとして、注意点としては

  • アカウント登録は日本で(電話番号認証が必要)
  • クレカ登録は現地で(Grab非対応エリアだとできない)

ってことぐらいです。

ちなみに僕は、普通のタクシーで軽くボラれました(笑)

この一件依頼、Grabしか使わないと心に誓いました。
こういう謎の交渉を避けられる時点でもうGrab使うしかないです。

食事について

ITパークやショッピングモールには、日本人でも安心できるクオリティの高いお店がたくさんあります。
そして値段も安いです。

1日の食事サイクルは大体こんな感じでした。

  • 朝: ITパーク内のカフェやファストフード店へ
  • 昼: コワーキングスペース周辺で
  • 夜: 家族でITパーク内orモールのレストランへ

ITパーク内には、スターバックス、マクドナルド、KFCなど馴染みのある店舗も多くあります。
その他のファストフード店やカフェも、清潔で安心クオリティです。

総じて食事は口に合うし、安いし、事前の想定以上の満足度でした。

宿泊したAVIDAタワー周辺だと、chow king(中華ファストフード)、Yelllow Cab(ピザ)が美味しかったです。
夜ご飯ではKUYA Jというフィリピン料理チェーンがかなりよかったです。

ローカルの食堂は難易度高いですが、現地スタッフの方に連れて行っていただき、これも意外と美味しかったです。
初めに好きなものを注文して、出る時に自己申告で支払うという、性善説システムです(笑)

ITパークの店舗(左) 、ローカルの食堂(右)

洗濯について

なぜこんなことをわざわざ書くかというと、フィリピンの多くの家では洗濯機がないことが一般的で、今回宿泊したコンドミニアムにも洗濯機はありませんでした。

じゃ、どうするの?というと、町の「洗濯屋さん」を使います。

各種サイトを参考にしたところWash n Dryというお店が安心クオリティらしいです。

www.dubiansi.tokyo

ITパーク近くにもあり、AVIDAタワーからは徒歩10分くらいだったので、2日に1度ほどの頻度で利用しました。
Rushコースだと当日に仕上がります。
のはずなのですが、時間通りに仕上がってないこともありました(笑)

運動について

不満があったことといえば、運動のことです。

ジョギングしようと思っても、路面状況が悪く、交通量も多いため難しそうでした。
車やバイクが走り交う中を信号無しで謎の秩序で横断する、という状況なので落ち着いてジョギングなんかできません!てかしてる人、見かけませんでした(笑)

また、コンドミニアムに「ジム完備!!」と書いてあったので行ってみた結果は...コレ↓で残念な感じでした(笑)

ジム完備!!!

ホテル滞在や、長期滞在ならスポーツジムに行くなどの手段もあるかもしれません。

バケーションについて

さて、いよいよワーケーションの”バケーション”のほうです!

セブ島で仕事をするには市街地であるセブ市が中心になりますが、バケーションを過ごすなら隣接するマクタン島になると思います。

マクタン島には多くのリゾートホテルが点在し、ボートで少し沖の方に出ると澄んだ海でシュノーケリングやダイビングを楽しむことができます。
市街から30分ほど、ちょっと足を伸ばせば世界有数のリゾート地へいけるのは素晴らしいですね!

僕の場合はマクタン島に2日間、市街のホテルに2日間でバケーションを過ごしてきました。

ちなみにマクタン島のホテルのWi-Fiは1Mbpsと厳しいものでした..
マクタン島では仕事を忘れてバケーションを過ごしましょう笑

f:id:wasan:20190105104849j:plainf:id:wasan:20190105104840j:plainf:id:wasan:20190105112212j:plain

まとめ

ここ数年、各社で柔軟な働き方が推奨されるようになり、リモートワークを許可する動きも進んできています。

特にエンジニアのような職種は、macとネット環境があれば開発はできるし、またアウトプットがコードで測りやすい点から、リモートワークに適した職種だと思います。

仕事の活力をつけるため、また家族との時間を大切にするため、ワーケーションのようなスタイルが普及していくといいですね!
そして、セブ島はワーケーション先として十分にアリだと思います。

【GO GLOBAL #1 レポ】 ベイエリアで主流になっているコーディング試験の実態と攻略Tips

こんにちは、maricuruのワダ(@takahi5)です。

先日、"GO GLOBAL" meetup #1 に参加してきました。
GO GLOBALという海外で活動に興味があるエンジニアコミュニティのイベントに参加してきました。

go-global.connpass.com

今回はとくに「コーディング試験」をテーマに、海外での勤務経験のあるエンジニアの方々を中心に発表がありました。
発表の質、量ともにかなり充実してものでした。

f:id:wasan:20181130213402j:plain

コーディング試験とは

採用の際にエンジニアの開発力を測る試験です。

方法にはいくつかあるようで

  • CodilityやHackerRankのようなクラウドサービスを使う
  • その場でホワイトボードにコードを書かせる
  • XXを作って下さい、などの課題が出され数日間で作ってる宿題型

のようなケースがあるようです。

ベイエリア(*注1)ではコーディング試験は必須になってきており、また日本でも採用する企業が増えているようです。

今回のMeetUpでは、このコーディングテストについて採用側、また候補者側の両面から実例やアドバイスが語られました。

では、印象に残ったフレーズを中心に振り返ります!

*注1: ベイアリアはサンフランシスコやシリコンバレー一帯を指し、ベイエリアって言うとコイツ知ってるな感が出るようです。なので使ってみましたw

コーディング試験は受験

これは@daigoさんがおっしゃってたのですが 、コーディングテストは受験だと感じました。

バイナリツリーやらソートロジックやら、普段の業務で求められないスキルが要求され、 傾向と対策が重要になってきます。

センター試験とかTOEICの試験に似てる気がしました。
もちろんベースのスキルは必要ですが、この手の試験で高得点を取るには、その試験に特化した慣れが必要だなと...

競プロとか好きな人だと得意かもしれません。

逆に、動けばいいや派にはキツそうです。

ベイアリアのコーディング試験を受けるなら必須と言われるサービスで LeetCodeというサイトが紹介されました。

leetcode.com

これは受験で言う「赤本」みたいなもので、なんと有名企業のコーディング面接の過去問が掲載されています...!

本気で面接望む際は、有料プランにはいることがオススメとのことでした。
またベイアリアではLeetCodeのもくもく会なども開かれているとのことでした。

コーディングテストだけで実力は測れない

こちらは採用側の視点で...

スマートニュースの@k0000iさん、リクルートテクノロジーズの@yosuke_furukawa さん共におっしゃってましたが、コーディング試験の点数だけで実力を測ることは難しいとのことでした。

コーディング試験での回答を面接時のネタにして、面接で深掘りするようでした。

また、リクルートの場合インターンの採用に使っているという背景もありやる気のフィルタに使う側面もあるようでした。
たしかにこれはアリな気がしました。
逆のパターンで考えると、志願度が高くないとわざわざ面倒なコーディングテストとかやりたくないですからね。
本当に志願度の高い候補者に絞るフィルタとして役に立ちそうです。

コーディング試験のTips

候補者側の視点では、たくさんのTipsも紹介されました。

ホワイトボード面接では型がない言語で

単純に書く量が減るから。
たしかにそうですよね(笑)
Javaとかきつそう〜

にしても、IDEの補完なかったらキツそうだなー。

メソッドで分割する

適切なメソッドに分割して書くことで、たとえ全部解けきれなかったとしても、ある処理をしてくれるメソッドがある前提で書けるので部分点が狙えます。

あとホワイトボードの場合、消して書き直す作業が効率的なるとのこと。

ブツブツ言いながら書く

これもホワイトボードテストの場合ですが、考えてることを口にだすことでアピールできます。

また、イケてる面接官の場合助け舟を出してくれるみたいです(笑)

まとめ

採用側としてコーディング試験の使い所の勉強になりました。
やる気のフィルタっていうのはアリだなと思います。

一方、候補者視点ではホント受験だな...と。
できれば避けて通りたいです(笑)

React Native+Expoなアプリのリリースから1年たって - つらみ編

(本ブログポストは React Native Advent Calendar 2018 の4日目の記事になります。)

弊社ではmaricuruという花嫁さん向けのコミュニティアプリをReact Native + Expoな環境で開発しています。

昨年の12/20にβリリースとしてiOSストア公開したので、もうすぐ1周年ということになります。

1年前はmaricuruというものがこの世に存在しないところから、この1年で多くの花嫁さんに利用いただき、また投資家からもmaricuruを評価いただき春には資金調達に成功しました。
現在は、社名も株式会社maricuruに変更しオフィスも移転するなど、1年前には想像できなかったほどの変化がありました。


そんなmaricuruアプリはReact Native + Expoで開発しており、基本的には
React Nativeはいいぞ、Expoはいいぞ
と言い続けていますが、 良い点については今まで色んな所で書いてきてるので、今回は苦労した点や注意点なつらみを中心に振り返ってみたいと思います。


参考:良い点について過去記事

ExpoでReact Nativeアプリを開発するメリット5選 - maricuru tech blog

React Native + Expoなアプリを リリースして1年を”5分”で振り返る - Speaker Deck

アナリティクス系のSDK

ExpoだとネイティブSDKを自由に組み込めないのは最大のネックですが、中でもアナリティクス系は「これ使えたらいいのにな〜」ってのが結構あります。

例えばFirebase Analytics(今はFirebase向けGoogle Analyticsっていうのかな?)が使えません。

ExpoでFirebase自体は使えますが、Firebase Web SDKを利用する形なので、Web SDKにない機能は使えません。
その使えない機能の一つがAnalyticsということです...

フォーラムでもリクエストが多そうなので、そのうち導入されることを期待しましょう。

Adding react-native-firebase to Expo | Feature Requests | Expo



あとはReproとか。

PMFからグロースまで、かなり使えそうな印象です。
なかでもユーザーのアプリ操作が動画で確認できるのは面白そう。UX改善に役立ちそうです。

先日React Native用のSDKがリリースされたのですが、冒頭で...

react-native init コマンドにより作成されたプロジェクトのみ対応しています。

https://docs.repro.io/ja/dev/sdk/getstarted/react-native.html

とのことでExpoで作ってるアプリには対応してないようでした... 



というツラミはあるものの、maricuruではAmplitudeを使っており、だいぶ使い慣れてきた感もあります。
Expoが公式でサポートしているというのが当初の導入理由ですが、立ち上げ当初は必要な分析環境がスムーズに構築できた印象があります。

【React Native】【Expo】分析ツールAmplitudeの導入方法とそのメリット - maricuru tech blog

またAmplitudeは蓄積したログのエクスポートAPIがあるので、別のDBに蓄積したデータを突っ込むなんてことも可能です。

Amplitudeでは自由にSQLが書けないので、細かい分析をしたいときに歯がゆいこともあります。 そこでmaricuruではそのAmplitudeのデータをBigQueryにエクスポートする基盤を構築して、細かい分析はRedash→BigQuery経由で行えるようにしています。

f:id:wasan:20181203164351p:plain

この辺の詳しい話はまた別の記事で書きたいと思います。

JSバンドルの更新が重い

Expoの最大の利点として、ストア申請なしで中身のJSバンドルだけをOTAアップデートできるという点があります。
ただこのJSバンドルのダウンロードが割と重いことがあります。
社内のWi-Fi環境だと気付かないのですが、実際にユーザーが屋外で使っていると電波状況次第ではストレスフルなレベルで待たされることがありました。

ここに関しては一応対策があります。

デフォルトでは起動時に最新版JSバンドルを落としてきますが、それをManualモードにして自分でハンドリングすればOKです。
例えば以下のような感じで、非同期でJSバンドルを落としてきてユーザーに確認の上で更新するなどすれば、起動時間のストレスは軽減されると思います。

    try {
      const update = await Expo.Updates.checkForUpdateAsync();
      if (update.isAvailable) {
        await Expo.Updates.fetchUpdateAsync();
        Alert.alert(
          '最新版が利用可能です',
          'アプリを再起動して今すぐ更新しますか?「いいえ」を選んだ場合、次回の起動で更新されます。',
          [
            { text: 'いいえ', onPress: () => {}, style: 'cancel' },
            {
              text: 'はい',
              onPress: () => {
                Expo.Updates.reloadFromCache();
              },
            },
          ],
          { cancelable: false }
        );
      }
    } catch (e) {
      // handle error
    }

最新のJSバンドルが落ちてこないことがある

OTAアップデートが便利すぎて、初めの頃はストア申請は全然せずにOTAで更新しまくっていました。

するとある日、あるユーザーのアプリが遥か昔の懐かしすぎるバージョンで動いておりました(汗)

まあこれはよく見るとドキュメントに書いてあるのですが、ネットワークが繋がってなかったり、30秒かかってもJSバンドルのダウンロードが終わらなかったら、ローカルにキャッシュされてるバージョンで起動される仕様になっています。

If there is no network connection available, or it has not finished downloading in 30 seconds, Expo will fall back to loading a cached version of your app, and continue trying to fetch the update in the background (at which point it will be saved into the cache for the next app load).

Configuring OTA Updates - Expo Documentation

ここでさらに注意点は、ストアから落としたばかりで一度もJSバンドルをダウンロードしたことがない場合、ストア申請時(=buildしたとき)のバージョンで起動します。
buildしたときその時のバージョンを内蔵しているのでしょう。

なのでOTAアップデートは便利とはいえ、大きめの機能改修があった際はbuildしてストア申請すべき、ということを学びました。

まとめ

以上、1年を思い出しながらツラミについて振り返りました。
けど基本的には、React Nativeはいいぞ!Expoはいいぞ!ですね。

明日は、@yoshi_kskさんの「任意のReactコンポーネントをReact Nativeで使う方法」になります!

ITベンチャーが語るエンジニアリング組織論とは(イベントレポ)

こんにちは、maricuruのワダです。

さて、昨日はBizteXさんとLOBさん主催の「ITベンチャーが語るエンジニアリング組織論」に参加してきました。
ゲストスピーカーは、『エンジニアリング組織論への招待』の著者である広木大地氏、Japan Node.js Association 代表理事を務める古川陽介氏です。

lob.connpass.com

最近こういうイベントに参加するときは、敢えてブログ枠で申し込んで、アウトプットのプレッシャーを掛ける作戦で望んでますw
ってことでイベントレポです。

個人ブログに書けや!ってことも書いていきますよ〜笑

f:id:wasan:20181128083434j:plain




当イベントでは、エンジニア組織の構築をテーマに、ゲストスピーカーのお二方からは豊富な経験に裏付けられたノウハウ、またさらにBizteXさんとLOBさんのCTOの方々からはゼロイチから組織拡大にかけての生々しい経験が語られました。

では、特に印象に残ったフレーズを中心にプレイバック!

マネージャーは神でも親でも先生でもない

これは広木さんのお話だったのですが、とても納得がいきました。
なんとなく、組織の中でマネージャーってのは、神?とは言わずとも親や先生のような人格者のような位置づけになりがちです。

しかし、広木さん曰く、単にマネージャーという役割をロールプレイしているだけとのことでした。

たしかに、組織変更なんかがあればマネージャーっていう立場はいつでも逆転しうるわけで、あくまでその瞬間にその立場を演じてるに過ぎないのかもしれません。
マネージャーという肩書きがついたからと言って、急に人格者になれるわけではありません。

これは、マネージャーと部下、それぞれにとって良い意識改革が出来る気がします。

マネージャーにとっては、そういう立場だからって、人格者でない自分に焦る必要はないでしょう。
あくまで一人の人間です。演じればいいのです(合ってる?)。   そう思うとマネージャーの人も自然体でいれそうです。

また、部下にとっては、変にマネージャーを神格化して、発言を鵜呑みにすることはなくなるでしょう。
立場にとらわれれず、純粋に目の前の”コト”に向かった議論ができるようになれば、より健全なチームが築けるのではないでしょうか。

リファラル戦争

これはLOBさんが採用で実施した施策なのですが、
全社員を2チームに分けて、それぞれのチームでどちらがリファラル採用を多く獲得できるかを競ったそうです。

面白いな〜、と。
全社一丸で向かうのはいいですね。

同じくスタートアップのBizteXさんに聞いても、基本的に初期の採用はリファラルが中心のようでした。

スタートアップにとって、人を集められるスキルというのも一つの重要なスキルで、
広木さんの言葉で面白かったのが
「まともなエンジニアを連れてこれない経営者には出資しないほうがいいよ 」
という話でした。たしかにな〜 笑

目標 ≒ 評価

会社では半年とか1年とかで、目標設定とか評価があると思います。

そのときに目標が評価(=給与)と直結しすぎるとよくないよ、という話でした。
とくに、イノベーティブなビジネスの場合には、とのことです。

これは非常に納得がいきます。

仮に枯れたビジネスだと、定量的目標を評価基準にすることはワークするでしょう。
例えば広告営業の新規獲得とか。顧客数が収益に直結することは見えています。

一方、イノベーティブなサービスを開発している場合、なにが収益のドライバーになるかも見えていません。
なので目標もコロコロ変わる可能性があります。
そんな時に目標が評価と結びついてると、柔軟性が失われます。

まとめ

今回はエンジニアリングマネジメントがテーマでしたが、弊社はいま正に組織拡大中で、マネジメントが必須なので、とても興味深いイベントでした。
こういう組織がダイナミックに変化するタイミングを経験できるのは貴重かもしれませんね。

興味あるかたは↓のリンクから是非(笑)
エンジニア募集!(副業、リモート可)



あと余談ですが、ゲストの広木さんの著書「エンジニアリング組織論への招待」は2年の歳月を費やして執筆されたそうです。
2年のノウハウが数時間で吸収できるのはお買い得ですね。
エンジニアリング組織論への招待 ~不確実性に向き合う思考と組織のリファクタリング