こんにちは、今年の 7 月に join した Web Developer の @yoshimaru46 です。 今回は、stateとpropsの違いがわからないくらいには React 初心者だった私が2ヶ月前に SPA のプロジェクトに join してキャッチアップする中で感じたことについてお話させて頂きます。 ちなみに言語歴はこんな感じです Java 2 年 Ruby, Rails 1.5 年 JavaScript 数ヶ月 先日の記事 で @ujihisa さんが「僕は Vim 暦 20 年くらいで、まだ初心者です。」と言っていたので、 まだまだ先は果てしないなぁと思います。 どんなプロジェクトだったか 参加したプロジェクトは既存のウェブサイトをフルリニューアルするプロジェクトでした。 規模が大きいうえにリニューアルで、相対的に新しい技術(The App Shell Model, The

つい先日, 2018-11-24 (土) に開催された VimConf 2018にて、弊Quipper社の ujihisa さんが登壇しVimの技術発表を行いました。本記事ではその発表の解説と、その裏話をめいっぱい記します。 発表タイトルは "Modes" という一単語のみで、公式サイトに載っているtalk abstractによると以下のようなものです。 Abstract Discover what is happening internally when you switch modes, such as insert mode, normal mode, and operator-pending mode. This talk first revisits how modes are when you use Vim, then I'll let you dive into the V

こんにちは。@hotchemiです。 今回は、最近始まったQuipperのAlumni Network(卒業生ネットワーク)についてご紹介できればと思います。 Alumni Networkとは ALLIANCE　アライアンス―――人と企業が信頼で結ばれる新しい雇用より引用します。 ７、会社は「卒業生」ネットワークを作ろう 卒業生ネットワークをつくり、退職した人ともいい関係を作っておくことは双方にとってメリットがある。 会社にとっては、やめた人から人材を紹介してもらえる、出戻りの率があがる、情報を教えてもらえる、顧客を紹介してもらえるなど。 退職者にとっては会社から転職先を紹介してもらえる、退職者同士のネットワークが使える、やめた企業から仕事をもらえるなど。 現役、退職した人の両方を含めたネットワークをオンラインでつくる、定期的にイベントを開催して食事代の費用を負担するなどのそれほど大きくな

モバイルエンジニアの@hotchemiです。 今回は少し前にReact Nativeアプリの開発中にメモリリークを調査、解決した体験が学びが多かったので調査の顛末を共有できればと思います。 概要 今回問題となったのは、上記の課題・宿題を管理する画面の開発でした。 QA中に発覚した問題としては、「アプリを操作していると特定の端末(主にiPhone5)でアプリが落ちたり、その他の端末でも次第に筐体が熱くなる事がある」というもので、表示するデータはそれなりにあるものの画像や動画を表示する画面ではないのでさすがにおかしいだろうという事と、プロセス起動から時間が経つに従い事象が発生・深刻化していくという特性を考慮しメモリのリークが発生しているという仮説を元に調査を開始しました。 モニタリング 「推測するな、計測せよ」の格言通り、まずはメモリの使用量を計測する所から始めてみます。 Native Rea

Web Engineer の @kachick です。 今回はスタディサプリのクレジットカード決済を堅牢化するために行っている工夫の一部を抜粋して紹介したいと思います。 前提 本記事で紹介する内容は、過去に我々が提供していたサービス（以下、サービスAとします）において直面した決済バグから学び、スタディサプリに導入したものです。 決済バグとは 決済というものはその性質上、セキュリティに次いでバグへの高い温度感を求められがちです。 サービスプロバイダの目線からは決済のバグを2つに大別出来ます。 本来よりも多く請求しまい、ユーザーからの信頼を損ねる。 決済の金額を増やしてしまった。 決済の時期を早めてしまった。 決済は通ったがサービスを提供できていなかった。 本来よりも少なく請求してしまい、事業運営に支障を来す。 決済の金額を少なくしてしまった。 決済の時期を遅くしてしまった。 実際には決済が通

エンジニアリングマネージャの@rivayamaです。 2018年5月に第一子が誕生してから約2ヶ月間の育児休業を取得したので、その話をしたいと思います。 育児休業を取るまで 一定の基準を満たした労働者には育児休業法により育児休業を取得する権利があります。もちろんQuipperにも育児休業の制度があり、2017年以降に子供が生まれた男性エンジニアの100％が取得しています（予定含む）。このような状況から私も妻の妊娠がわかった際には「育休を取得しよう」と自然に考えることができました。 エンジニアリングマネージャになりたてだったこともあり育休について伝えることには若干の不安がありましたが、みんなが快く了承してくれたのでとても安心しました。チーム全員が不在時の体制作りや引き継ぎなどに協力してくれて、改めてQuipperという組織の健全さを感じました。 チームメンバーがプレゼントしてくれた riva

こんにちは、Web エンジニアの @kechol です。 今回は スタディサプリの学校向けサービス を開発しているプロダクトチーム（社内通称: スクールチーム）で、千葉県の金谷にて１泊２日の合宿をしてきたレポートをお伝えしたいと思います。 合宿の目的 今回の合宿は、PM・Web エンジニア・デザイナーが参加しており、お互いのことをもっと理解することで、今後のチームの生産性を高めたいという思いがありました。実際に合宿のコンテンツを考えるにあたっては、以下のように目的を言語化しました。 チームとしての相互理解を通して 1. 成果の質を高めるためのアクションを決める 2. プロダクトの品質向上にチーム全体で取り組む 合宿の最初に改めて目的を説明する Product Owner こうした目的を達成するために、今回の合宿では、１日目に PM とエンジニアのペアプログラミング、２日目にはこの一年間の振

こんにちは、Web エンジニアの @kechol です。 Quipper では現在、ブログを再開したり StudySapuri Meetup（Product 回、Data 回）を開催したりと、採用活動に力を入れています。今日はそんな採用活動について、僕も関わっている Web エンジニアの採用プロセスの裏側を少しご紹介したいと思います。 TL;DR Quipper における Web エンジニア採用プロセスにおいては、コードテストを実施しており、そのプロセスは非常に重要なものだと考えている これまでアプリケーションを書いてもらうようなテストを実施していたが、候補者・採用メンバー双方の負担が大きく、改善の余地があった それを受けて、より小さく、実務に近いコードでテストできるようにコードテストを改善した Quipper における Web エンジニアの採用プロセス Quipper における Web

こんにちは。最近は主に frontend を書いている @banyan です。 現在私達のチームではスタディサプリの Web の生徒アプリケーションをリニューアルしています。 この夏に合格特訓コースというプランに絞ってベータ版という形でリリースして、これから段階的に全面リニューアルに向けて開発を進めていきます。 技術スタックとしては React + Redux + TypeScript + Workbox (Service Worker) です。 SSR に関しては、SNS での流入がないことや、ページが基本的に生徒のデータを扱いキャッシュしにくいサイトのため、採用しませんでした。 またこの記事も参考にさせて頂き、 Does your app require a sign-in to view most content (e.g. GMail)? If so, you don’t need

本エントリは3部作のPart2となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1からすっかり時間が空いてしまい恐縮ですが引き続き弊社のReact Nativeハイブリッドアプリの取り組みについて語っていければと思います。 段階的なインテグレーション 前回のエントリでmonorepoへの移行とCIの整備について語りましたが、今回は実際にどの様にインテグレーションを進めていったかについて説明していきます。 新しい技術を採用するに辺り、ビッグバンリリースを避け段階的に導入を試みていくアプローチの方がリスクを避け柔軟に対応できると考えています。ですので一気に再構築プロジェクトを発令するのではなく、ある機能をリニューアルする際にその画面のみReact Nativeで書いてみ

やっていき手の@hotchemiです。 現在、新気鋭podcast集団yatteiki.fm様との協賛企画が絶賛進行中です。Ep55, 56の感想を#yatteikifmハッシュタグをつけてツイートすると抽選で30名様にオリジナルボールペンをプレゼントという事ですので是非是非感想をツイート頂ければと思います！ 【プレゼントキャンペーン実施中🍁】 リスナー感謝企画！30名様にオリジナルボールペンをプレゼント！ 応募方法は #yatteikifm をつけて55, 56回の感想ツイートをするだけ。 本企画はQuipperさんのご協賛で実現しました。勉強の秋、このペンと一緒に積ん読を崩しましょう！ 👉https://t.co/h4A4fbrMfx pic.twitter.com/TSfnFEsRGA— yatteiki.fm やっていき手のためのPodcast (@yatteikifm) Se

Engineering Manager の @ohbarye です。 このたび"Quipper Web Engineer 東京オフィス採用面接ガイド"を Quipper Handbook*1 の一部として公開しました。 Quipper Web Engineer 東京オフィス採用面接ガイド (2019-10-09 追記: Quipper iOS Engineer 東京オフィス採用面接ガイド も公開しました！) (2020-01-16 追記: Quipper Android Engineer 東京オフィス採用面接ガイド も公開しました！) 本記事では同ガイドについてご紹介させてください。 採用面接ガイドとは？ Quipper東京オフィスで行っている採用プロセスについてより多くの方に知っていただくためのドキュメントです。とりわけ面接に訪れる方を読者として想定しており、候補者には面接の日程調整時に

はじめに CTO兼SREエンジニアリングマネージャーの中野です。ここしばらくの間、CTO/SREエンジニアリングマネージャーとして注力しているKubernetes導入について紹介したいと思います。 今回は、Kubernetes自体がどういうものなのかということより、それをツールとしてどう使い、それでどういう世界を実現したいのかみたいなところを中心に紹介できたらと思います。 まず現在の状況ですが、Quipperでは、大きく分けてスタディサプリの小中高校生向けと日本以外向けの2つのサービスを展開しています。サービスとしての構成はほぼ同じですが、基盤としては別々のAWSアカウントで運営されています。このうち日本国外向け環境では、Kubernetes化がほぼ完了というステータスになっています。目下、スタディサプリも移行中です。 Kubernetes化以前は、Deis(Herokuクローン的なもの)

はじめまして、Quipperに再来週に入社予定のujihisaと申します。 本記事では、Vim本体のC実装をデバグするのにGNU Debugger (GDB)を用いる方法について説明します。 巷には「GDBをVimに統合させて何らかのプログラムをデバグする方法」はいくつか解説記事がありますが、本記事はそうではなく、Vim自体のデバグについてに着目します。 Quipperでは社内のソフトウェアエンジニアのうち4割 *1がVimを使用しており、我々はVim本体の未解決バグを踏んだときに自力で解決しVimコア開発者にフィードバックできるようになっているべきです。 Vimを debug_info, not stripped でビルドする お使いのVimのバイナリは、おそらくdebug buildではないです。ちょっと確認してみましょう。 $ file `which vim` /usr/sbin/v

こんにちは。6月にSREとしてJoinした近藤（@chaspy）です。 入ったばかりでまだ新鮮な目を持っているうちに、Quipperで働く環境についてお伝えしようと思います。 福利厚生・制度 以前、Quipperで働く環境・制度についてという記事が書かれていますが、ここに書かれていることは現在でも変わっていません。上記の記事で書かれていることと、書かれていないことをいくつか紹介します。 勤務体系 「原則出社」ではあるものの、同時に「気軽にリモートできる」運用は続いています。また、出社時間もみんなバラバラです。「ひとりサマータイム」と言って7時に来て16時に帰るひともいれば、午後から出社するひとまで様々です。 ツール 上記の記事で書かれているように、SlackとGitHubとGSuiteに統一されています。 感覚ですが、ちょっとしたことはSlackで質問して、ちょっと解決に時間がかかりそうで

Quipper で Engineering Manager をやっている @ohbarye です。 2018-07-19 (木) に StudySapuri Product Meetup というイベントを開催しました！本記事では同イベントでの登壇者の発表内容とスライドを、司会を担当した私から一言添えつつご紹介します。 techplay.jp 弊社のプロダクトチームがスタディサプリの名前とともに表に出たのはこれが初めてではないかと思います。それにも関わらず定員120名に対して事前申し込みが400件超えという盛況ぶりで非常に嬉しい限りです。 また、来場いただいたうえにソーシャルでも盛り上げていただいた方々、本当にありがとうございます。イベントの感想は togetter にまとめましたので興味がありましたら是非こちらもご覧ください。 各トークの紹介 スタディサプリの事業フェーズとBiz視点から見

こんにちは。4月にNative Teamにjoinした@chiiia12です。 今回はQuipperのdevチームで行われたBugBash Hackathonについて開催レポートをしたいと思います。 Quipperのエンジニアメンバーがワイワイ楽しんでいる様子をお届けできればと思います。 BugBash Hackathonとは BugBash HackathonとはQuipper Devチームの中で行われている月に一度の社内イベントです。 なかなか時間を取れていないけれどやったほうが良いタスクを行ったり、その場でBugを見つけ修正したりなど、普段の業務ではできないことを皆で集まってモクモク開発をします。 いつもは一部のチームのみで行っていましたが、今回はWeb/Nativeやプロダクトの垣根を超えて横断開催されました。 当日の様子 開催は金曜日！ Quipper流BugBash Hacka

本エントリは3部作のPart1となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 数週間前にReact Native at Airbnb(非公式の日本語訳)が世間を賑わせましたが、皆様いかがお過ごしでしょうか。 弊社でもここ数ヶ月Nativeで書かれたスタディサプリのiOS/AndroidアプリにReact Nativeを部分的に導入していく、いわゆるハイブリッドアプリ開発体制に挑戦しており、そこで得られた知見を何回かに分けて公開していければと思います。 Goals まず、なぜハイブリッドアプリという選択をしたのかについて、我々が目指していたゴールは以下の様なものです。 モバイルエンジニア不足の解消 Quipperは元々Webエンジニアの数が多い一方でモバイルエンジニアの人数

Quipper でプロダクトマネージャーをしている @daishi-kayano です。担当はスタディサプリ大学受験講座のBtoC領域と、ネイティブアプリです。 今回は弊社がとてもお世話になっている GitHub issue管理ツール Jasper について、私なりの活用法を、感謝を込めてご紹介します。 QuipperでのGitHub Issueの使い方 前提として、弊社では国内・海外問わず、ほぼ全員がGitHub上で仕事のやりとりをしています。*1 開発の仕様の議論はもちろんのこと、Bizの企画の議論、カスタマーからのお問い合わせの調査、コーポレートスタッフからのお知らせも、全てがGitHub Issuesでのやりとりです。 GitHub Issuesさえ見えてけば、隣のチームのこと、海外拠点のことも知ることができます。 全てがissueで進むので、多くのチームが進捗をGitHub Pr