見出し画像

【開催レポート】カジュアル座談会「プログラミング学習サービス開発を支える技術」

Progate

2021年9月2日、カジュアル座談会「プログラミング学習サービス開発を支える技術」を実施しました!この記事では、当日の内容をご紹介します✨

登壇メンバー

画像1

前田 和樹
リクルートテクノロジーズにてインフラSREリーダーとして基盤構築改善に従事。現在、「Engineer Function」のマネージャーを担う。
島津 真人
Googleにてソフトウェアエンジニアとして5年間 Chromeの Service Worker の開発に従事。テックリードを経験した後、 Progate に入社し、 現在は新規サービスの企画・開発を担う。
当日の構成
アイスブレイク
Progateの演習デモ
Progateの構成概要
現在の開発組織について
Q&Aタイム

‍アイスブレイク「Progateクイズ」

画像2

正解はにんじゃわんこです。

SNSで「え!?たぬきじゃなかったの!?」という意見があり、社内がざわつきました。たぬき…見えないこともない…?

画像3

正解は7年。

2014年7月、CEOの加藤が東大在学中に創業しました。創業ストーリーもあるので、ぜひ読んでみてくださいね。


画像4

正解は「日本」「インド」「インドネシア」です!

インドではインド工科大学(IIT)に導入してもらったり、インドネシアではProgateの学習プログラムが大学単位として認定されたりしています。

オンラインプログラミング学習「Progate」インドネシアで大学単位として認定
インド最高峰の大学であるインド工科大学(IIT)にプログラミング学習を提供


画像5

正解は「PHP/Symfony」です。

割と早い段階でRailsに移行し、現在もRailsをメインで使っています。一部でGoの採用が始まっており、特性に合わせた技術選択をしています。

フロントはTypeScriptに移行しつつありますが、まだFlow.jsも結構使っています。


画像6

正解は17人です。

3カ国に拠点を置いて230万人のユーザーを抱えている規模のサービスとしては、かなり少ないエンジニア数で運営しております…!

エンジニアが参画しているチームは6チーム。各コンポーネントを2人くらいのエンジニアが頑張ってカバーしています。


Progateの演習デモ

画像7

Progateを触ったこと、ありますか?

初心者向けのプログラミングを学ぶ必要のないエンジニアの皆さんも、せっかくなので、見ていってください。

最初にスライドで概要と内容を確認して、今からどんなことをするのか認識してもらいます。

画像8

画像9

その後、スライドで学んだ内容を実践します。

エディタやターミナルなど、実行環境はすべてブラウザに揃っており、環境構築は不要です。環境構築不要に関しては、こちらの記事もぜひご覧ください。「学習コンテンツ制作チーム」マネージャーの岩崎の記事:元Googleエンジニアが、エンジニアを辞めてProgateで学習コンテンツ制作に挑戦する理由

画像10

ブラウザの中でIDEのようなものが実装されており、ブラウザだけど自分で様々な言語のコードを書く体験ができます。

ターミナル操作もブラウザ上で実施できるようになっており、実際にコマンドを実行しながら開発してける学習体験を提供しています。

こういったものを使いながら、ユーザーさんは学習して問題を解いていきます。現在は言語の学習に特化した演習を作り込んでいます。

また、実際にユーザーさんが打ったコードの内容や、その実行結果が正しいかどうか判定するシステムも実装されています。

正解したら次の学習に進めるようになっており、どんどん学習を進めていくことができます。

イベントでデモとしてお見せした「Quest」は実験的コンテンツとなっており、従来のProgateのコンテンツより難しい内容になっています。自分の力試しにもなると思うので、ぜひチャレンジしてみてください。Questはすべて無料でご提供しています。

画像11

▲期間限定Questコース:https://prog-8.com/courses/quest

Progateの構成概要

画像12

現在のProgateをどう提供しているか、簡単に紹介させてもらいます。

Webサーバーに関しては、AWSのEC2でホストされたRailsがいて、ユーザーさんがブラウザを開いてHTTPのリクエストを投げるとRailsからレスポンスが返ってきます。

エディタに書いたコードがどう実行されているのかというと、Webサーバーとは別にコード実行システムがあり、ブラウザとコード実行システムがお互いの情報をインタラクティブにやりとりできるような作りになっています。

具体的にいうと、コード実行システムにはユーザーごとに、個別のコンテナを立ち上げていて、そのコンテナとブラウザがWebSocketという通信プロトコルを介して双方向通信をしています。

コード判定システムはJavaScriptで作られていて、ブラウザ上で実行されます。挙動が正しいか判断して、次のレッスンに進んでいいか判定してくれるシステムです。

画像13

採択している技術はスライドどおりですが、新規サービスではGo言語を採択したり、必要に応じて柔軟な技術選定をしています。

現在の開発組織について

画像14

社員は55名ほどで、エンジニアは17名。プロダクトに関わっている人が30名強。

開発チームは縦軸の「Function」と呼ばれる職能別組織、横軸の「Feature Team」と呼ばれる機能別組織でマトリクス構造になっています。

画像15

現在も様々な課題があり、ユーザー体験を上げるためにフロントエンドを切り離したり、メンテナンス性を上げる取り組みなどをしています。

画像16

お互いのチームが何をやっているか見えないと、エンジニアとしては不安になると思うんですが、そういったことを防ぐために3つの方針を置いています。

情報をオープンにすること、誰かの失敗も共有してお互いに学び合うこと、謙虚さ・尊敬・信頼、HRT(Humility,Respect,Trust)を大事にして、みんなで一つのゴールに向かうことを大事にしています。

Q&A

画像17

前田:島津さんはProgateに触れて、面白いと思ったところってどんなところですか?

島津:ステップバイステップの作りですかね。細かい単位で達成感を与えてくれるところが楽しくて良いなと思いますね。

参加者の方からはこんな意見がありました。
演習で書いたコードをdockerで実行しているのは知らなかったので勉強になった。


画像18

前田:島津さんは2021年4月に入って、今までのProgateにはない、新しいコンテンツ「Quest」を作りましたね。

島津:実験的コンテンツなので、色々やらせてもらってます。

前田:今までのProgateって、ユーザーさんが壁に当たらないように意識して作ってましたけど、「Quest」は壁に当てにいくコンテンツですよね。

島津:そうですね。自分で学んでいただけるように、ヒントの出し方も工夫しています。

参加者の方からはこんな意見がありました。
テストを書くコースがあったら良いなと思います。


画像19

島津:僕たちが今やっていて技術的に難しいと感じている点は、やっぱり自由にプログラミングをしてもらうというところで、なんでも動かせるっていうのが難しいですね。

PythonもRailsもNode.jsも動いて、ということを全部ブラウザ上でやろうと思うと、難しい。

ブラウザは基本的にはJavaScriptしか動かないのでブラウザ上で任意の言語で実装されたコードを動かすことはできないため、裏で動いているdockerにコマンドを投げて返すということをきちんとやらなくてはいけない。しかもそれをユーザーさんごとに随時準備してあげなくちゃいけない。

各言語をユーザーさんごとに提供するのは大変です。

誰かが無限ループを書いたらそれに引きずられて自分のコードも遅くなる、みたいなことは嫌じゃないですか。そのあたりをちゃんと動くようにする必要もありますよね。

前田:一般的なクラウドIDE系のサービスと比べると、僕らは学習サービスとして工夫を入れなくてはいけないのが難しいポイントですね。

最後に質問をいただきました。

Q,フルリモートでやっていると思いますが、他社と比較して、Progate独自のリモートワーク 施策などはあるのですか?
A,HR:月2回「Coffee Break」という雑談会と、1年に1回の「Progate Award」などをやっています。「Coffee Break」はZoomを使って、ランダムにグループを分けて、30分間テーマに合わせて話すなど、コミュニケーションをとっています。「Progate Award」は日本、インド、インドネシア、すべての社員が参加する表彰式です。表彰後には全社員がオンライン上で自由に移動して雑談を楽しめる会を用意しています。こういった制度はもちろんですが、全社的に雑談を推奨しています。全員孤立しないように、雰囲気作りは心がけています。

前田:Slackのハドルも使ってますね。テキストだけだとスピードが担保できないときは、ハドルに集まって話しながら作業したりします。

島津:朝は朝会をしたり、昼はハドルでコーヒーチャットをやったり、意識的に話す場を作るようにしています。

イベントに参加してくださった皆さま、ありがとうございました!


Progateは一緒に働く仲間を募集しています!
🔸 採用情報


この記事が参加している募集

イベントレポ

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!