はじめに
TechTrainは今年2022年でリリースから3年を迎えました。創業当時の開発がどんな状況だったのか？現在はどのような状況なのか？また、これからどうなっていくのが良いのか？を創業当時のプロダクト開発に携わった2名の対談からお伝えしたいと思います。
※こちらの対談はTechTrainのユーザー限定で公開いたしました。ブログの最後に当日の視聴者からの質問回答も掲載しております。
インタビュイープロフィール
手島 拓也（以降：tejitak）
IBM研究所やLINEにて主にWeb製品開発を約7年間担当。その後、共同創業者兼CTOとしてタイにて起業、事業譲渡を経験。現在はシンガポールを拠点に東南アジア発のスタートアップスタジオGAOGAOを設立し代表を務める。TechTrainメンター。過去TechTrainの開発に携わってくれた経緯がある。
「Vue.js入門」共著出版。7/25「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」共著出版。
TechTrainメンター詳細ページはこちら
大木 優（以降、スー）
TechBowlにて、TechTrainのエンジニアリング全般を担当しています。
なんだかんだフロントエンドとバックエンドの両方を担当していますが、メインはバックエンドです。
前職では、PHPをメインにToBのEC自動化サービスの開発などをやっていました。 最近はNotionをハックするのが趣味。
出身: 山形県。大学: 茨城大学。近況 最近は個人開発でFlutterを使い始めました。
TechTrainメンター詳細ページはこちら
創業当時の技術選定や開発環境。大変だったバグだらけのTechTrain。
スー
どこから話していいか...まず、当時の開発環境は、フロント:Vue.js、インフラ：GCP、API:Python Flask。フロントはサーバーサイドレンダリングもなく、めちゃめちゃ画面がちらついていてログインすらできない。さらに、バックエンドのデータが全く保存されておらずFirebaseが中途半端にデータを持っているなどなど。2019年4月末にTechTrainβ版リリースの時は、もはや炎上案件の典型例みたいだったかなと思います。
「この案件、やばそうだな」という印象はあったと思うんですけど、その時どういう風に感じて、どう考えていたのかみたいなところをお伺いしたいです。
tejitak
懐かしいですね、もうさかのぼること3年前？そんな風に色んな大バグがあって。
確か、当時1度ログインしたら、永遠にログインできなくなるみたいなこともありましたよね。
スー
はい。Firebaseにはデータがあって登録済みにはなってるけど、バックエンドにデータがないっていう状態。ログイン自体はできるけど、バックエンドに問い合わせするとデータがないから、またログアウト扱いしちゃう。でも、すでに登録されてるから同じメールアドレスで再登録とかはできなくて、「な、なんだこれは...？」っていう。
tejitak
そうだそうだ。そういうバグがあって、さらに、最初の登録フォームで聞いた重要な複数の情報が実は半分近く保存されてなかったなんてバグもありましたね。
スー
ありましたね！名前、メールアドレス、何の言語を学んでるか？などの今でも聞いているような登録情報のうちアドレス以外ほとんど全部保存できず落ちてしまってました。
tejitak
そうそうそうそう。ユーザー側のプロダクトだけではなくて、管理画面も画像を管理画面からアップロードできないというとんでもないバグが。GCPの管理コンソールから画像をアップロードして、そのリンクをDBに直接追加するっていうオペレーションしてましたね。
スー
やってましたね。tejitakさんにリプレイスを進めてもらってる間に、僕がもらった画像をGCSに直接アップロードして、自分で作ったINSERT文を本番に直接叩いて入れるという本番環境が「本当にこれは本番なのか？っていう状態でしたよね。
tejitak
ある意味すごいですよね。それでサービスを立ち上げたことが。
スー
β版リリース前はスプレットシートとgoogleフォームでMVPを作ってうまくいったからシステム化！という段階でいろんな大トラブルが発生していました。正社員入社を決めてからその状況だと初めて知って、「失敗したな」っていう後悔の念が出る状況だったなあ。
tejitak
僕は、ちょうどその時期におざまささん(代表小澤)と共通の知人経由で知り合いました。当時のTechTrainの開発は3人の副業フリーランスの方にかなり短い納期での開発をお願いしていたそうです。「助けて」って聞いて開発に入った結果、コミュニケーションもうまく取れない中で作られた最小限の機能にもなってないプロダクトでしたが、それを運用でカバーしていたという状況でした。
参加してから、ここからどうやってこうリニューアルしようかな？まだ始まってもいないレベルなのに、なぜかもうリニューアルっていう感じなんですけど(笑)。
まずは設計から入り、最短納期で実装されたPythonでの簡易的なAPIからGAOGAOの他プロジェクトでも使用してたLaravel(PHP)を使ってAWSへリプレイスする方針に。フロントエンドは、APIと分けてLaravelのグレードなどを使わずSPAであるNuxt.jsを採用することに決めました。
スー
当時、管理画面を使えるようになって、おざまささんが「すげええええ！」って言いながら超感動してましたよね。
tejitak
(笑)。管理画面はお手製で作られてましたが、リプレイス時にLaravel Adminへ。Laravel Adminは、データベースの定義をするとちょっとコード書くだけで、リスト、追加、編集、削除がかなり簡単に実装できるようになります。いわゆるCRUDオペレーションですね。こんな感じで、管理画面はあっという間に完成しました。
スー
実は、この管理画面は今も元気に動いています。もちろん、tejitakさんが開発を離れた後も順調に拡張が進んでいて、今やカスタマサポートには欠かせない画面にはなっています。
当時、インフラも全体的にGCPだったところからAWSのElastic Beanstalkを中心とした構成に変えてもらいましたよね。GAOGAOさんが使いやすいという点や、BigQueryなどは使わないからということで選定したよね。
tejitak
はい。今だったらECSとか使ったかもしれないですけど、当時は割とElasticbeanstalkが全盛期だったこともあって採用したと思います。
スー
今まで話してきたことや以前の記事に書いたこと以外に、リプレイスしてる最中にこんなところ意識してたなってポイントや何か感想などはありますか？
tejitak
そうですね。個人的な感想なんですけど、スーさんの成長が著しかった。基本的には僕が全体を設計しながら、フロントのリード、サーバーのリードが実装を進めていく 中、まだ経験が浅くてジュニアレイヤーだったスーさんはフロント、サーバーに関わらず全てのこぼれ球を拾うという立ち位置でした。半年近くらいその状態を続けて、今やマネジメント側になってますよね？なので、当時の環境は学びを得るためにいい環境だったのかなっていうことは、ちょっと思いました。
スー
ありがとうございます。なんかちょっと照れくさいですね。
前職の開発環境が少し古いものでプレーンなPHPを触っていたので、当時はVue.jsやLaravelなど最新のフレームワークやライブラリをほぼ触ったことがなく、画像などの処理だと「cropってなんだ？」ぐらいの状態でした。なので、皆さんの書き方を見て必死にキャッチアップしながらひたすら量をこなしたことはよかったのかなと思います。
tejitak
なんというか、コミュニケーションをとって連携するということが割とうまくできたかなとも思ってますね。マイクロマネジメントはせず、一方で緩すぎず粒度を緩めてタスクを切ってアサインしていく。肝心なところは自分が決めてもできる限り裁量を与えるようにしていました。
手抜きマネジメントだと言われたらそうかもしれないですけど、決められたものを実装するだけよりも自分で考える力が養うようなマネジメントをしていたかなっていうのは意識していた部分ではありますね。
スー
今の自分も当時のtejitakさんと同じようなことをやっていて、むしろそれよりもちょっと無茶振りしちゃってるかなっていうのは、反省ポイントでもあるんですけど。でも、なんとかついてきてくれるインターン生を中心としたエンジニアメンバーたちなので、自分なりにやり方を模索しながらやっていきたいなと思っていますね。
tejitak
いいですね！
バグだらけのβ版リプレイスからさらにアップデート。TechTrainの現在。
スー
ここまで超初期の過去の話をお伝えしてきたので、ここからtejitakさんが開発が離れた後から現在の話をしていきたいと思います。バックエンドは、当時Laravel5で構築をしてもらいましたが今は最新のLaravel9に移行。フロントエンドはNext.jsへリプレイスしました。リプレイスを決めた理由は、Nuxt.jsが2から3に大幅アップデートしたタイミングで、流行としては3へアップデートではなくNext.jsにリプレイスするという動きが出ていたからですが、僕よりたくさんの開発現場見ているtejitakさんとしては、この選択についてどう考えているかお伺いしたいです。
tejitak
まず、GAOGAOで担当している数十のプロジェクトでは、TechTrainを手伝っていた当時はVue.js/Nuxt.jsが中心でしたが、もうほとんどがReact/Next.jsでの開発プロジェクトになってます。新規のプロジェクトでVue.jsを採択する場合というのは、TypeScriptに馴染みがない人たちが集まってるとか、Vue.jsしかやってなかったっていう人しかいないとかいう状況のみ。それ以外は大体React/Next.jsになっているなと思います。
個人的にはVue.jsはもともと好きなので、応援したいんですけど、やっぱり元々個人クリエイターから開発されたVue.jsと予算や影響力のある企業がバックアップしてるReact/Next.jsと比べると、やっぱりなかなか厳しいなっていう感覚はあるかな。
スー
僕もVue.jsの書き方や会社ではなく個人クリエイターが作ってるというところもあり思想としてもすごく好きなんですけど、事業として使うって考えるとReact/Next.js側に倒れるかなと思いますね。トレンドに則ってTechTrainもNext.jsにリプレイスを果たしたので、ここにいる人だけ先行で画面をちょっとだけお見せしようかな。ちょっとまだ細かい修正部分はあるんですけど、全部Next.jsで書かれています。
(※こちらのリプレイスはすでにリリースしており、対談時点では対談を見てくれていたユーザーに対してのみの先行公開でした。)
tejitak
すごいサクサク動いてますね.
新機能は特になく、UI/UXがかなり改善されたみたいな感じですか？
スー
リニューアルと一緒に新機能を2つリリースしました。まずは、Railwayをいつまでにどこまでやればいいのかを示す「学習計画表」を自動で作成する機能。
あとは、このRailwayができるとどんなスキルがつくか？というのを全部リスト化した「スキルチェックシート」という機能を新しく実装しました。
今は、致命的な不具合を仕込んでないかなってドキドキしてます。
（※小さな不具合はあったものの、致命的な不具合はなく、しっかりリリースされました）
tejitak
おお！これは！Railwayの1コース分のですね。いいっすねー。これ作ったのすごいっすね。どれを満たしたらこのスキルであるっていうのを結構網羅的に作るのってすごい難しそうだな。
ちょっと細かな話なんですけど、例えば、「CSSの基本的な書き方わかる」にチェックをつけるには何をすればクリアなんですか？
スー
チェックに紐づけているCSS03という教材をクリアすればチェックがつきます。CSS03は、CSSで背景色を設定できたり、指定された文字色にできるとか画像の幅と高さが指定の値と一致したりなどなどの内容が盛り込まれています。
過去のリニューアルで教材に取り組むときは、ローカルに環境構築をしてもらうためにVSCode拡張機能もつけました。なので、テンプレートのリポジトリをgitクローンしてきてログインし「できた！」っていうボタンを押してrunするとテストの判定ができるようになっています。
tejitak
まじか、すご。全然知らなかったです...（驚き）
スー
実際自力で開発してきた人から見ると、「これができればいいに決まってんでしょ」って思うかもしれないですが、初心者からすると結局Railwayをやって何ができるようになったかわからなかったり、何ができれば自社開発のエンジニアになれるのかという部分がブラックボックスなのかなと思います。なので、それを可視化するためにこの「学習計画表」と「スキルチェックシート」という機能をを作りました。
tejitak
うん。めちゃくちゃいいっすね。これは採用する側にとっても。やっぱりこういうのがないと書類や面接での話を信じるしかない。GitHubに公開してるのであればいいですけど、大半の人はやっぱりプライベートだったりするし、何かコード力・実装力を図れるツールがあればいいっていうのはいつも思っています。
スー
そうですね。ただ一方でローカルの環境構築をするので、コード力や実装力を見るという点はちょっと難しくなってしまっています。初心者にいきなりGitHubで環境構築をさせるっていうのは、例えば、いきなり英語で話せと言ってるみたいな話なので基本文法をやってから話してもらってもいいのかなと思っています。でも、そこはまだまだ改善の余地があるかなとも思ってます。
(※TechTrainではローカルで開発環境を構築して決まった教材までを進めていただいています!）
tejitak
でも、エンジニアとして就職を目指す人には、それぐらい乗り越えてもらうつもりでやってもらわないと。
スー
そうですよね。そうは思いつつ、その部分を乗り越えられないまま挫折してしまう「エンジニアである俺かっこいいだろ」的な考えの人ではなく、「なんとしてもエンジニアになりたい」って思ってくれている人を応援するようなサービスにしたいな、という風には思っています。できるかはわからないんですが、そのために必要なものは全部用意したいです。
ここまではフロントエンドの話でしたが、バックエンドはLaravel5がLaravel9の最新版になり、レビュードッグを入れてちょっと厳しめにタイプヒントを入れたり、実はDDDを進めています。（TechTrainのDDDの詳しい話はこちらから。）
やりすぎちゃうと開発が遅れてしまいますが、Rankごとに提供する機能が異なるなど権限設計の難しい部分などは「どこで、どのRankの人が何ができるのか」を可視化する仕組みが必要だと思い、ドメインモデル図を書いてサービス全体のリアーキテクトを進めています。
もし、tejitakさんが同じような権限設計が複雑なプロダクトの案件に関わるときに管理するものを用意するとしたら、アーキテクトか、何か図となどを活用するのか、何かしらのリストで管理するのかなどどう判断しますか？
tejitak
権限..どういう種類かによりますけど、基本的にはやっぱりヒューマンリーダブルな表などでまずは認識合わせをして確かに実装していく。その上で、年月が経つとうっかりミスが起きそうなところはできる限りテストでカバーできるようにするのがいいのかなって思いますね。違う権限で呼び出した時にエラーになるテストケースなどをしっかり作っておいて検知できるようにした方が、人の記憶力を頼るよりもいいのかなって。
3年前TechTrainで開発やってた時はスピード重視＆コスト重視だったんで、テストはあまり書いてなかったと思います。なので、今体制が変わってテストとか力入れるのに、すごいいいタイミングなんじゃないかなって。
スー
そうですね、まさに。API数的にも150を超えたので、さすがにテストのカバーリングを必ずするようにしながら実装をしていかないと厳しいフェーズに入ってきたなあって。なので、最近は超急ぎでなければ、必ずテストを書いてからマージをするようにしています。自然と触ったところのテストを書いていたので、テストカバー率はだんだん上がってきてるっていうようなフェーズですかね。
tejitak
素晴らしいっすね、TDDまではいかないみたいな感じですかね？
スー
現在は、インターン生が書いてくれてるところはTDDで実装してますね。基本的にはAPIのレスポンスとリクエストのやり取りが先にインターン生同士で行われていて、そのやり取りを元にちゃんとテストを先に書いてっていうのは、バックエンド側は特に進められています。ただ、今はリモートが多く、メッセベースでレスポンスとリクエストのやり取りをしていてコミュニケーションが難しくなってきているので、そろそろOpenAPIとかSwaggerの出番なのかなっていうフェーズです。
tejitak
それはかなりいいいい環境ですね。
初期開発から現在を知り、未来のTechTrainへの想いを語る
スー
あれからもう3年も経つのかと思いながらお話をさせてもらいましたが、最後にTechTrainにはこうなってほしいっていう願望やこうなっていったらいいんじゃないかっていう意見などをお伺いして今日の対談を終えたいなと思います！
tejitak
まず、純粋にお披露目してくれた新機能はめちゃくちゃ画期的だなって思います、本当に。
今、僕は結構採用側目線になりがちなんですけど、雇ってみて「全然スキルないじゃん」っていうのってあるんですよ、実際。それが起きないっていうのはめちゃくちゃ画期的かなと。いろんな会社がトライしてるんですけど、「どういうレベルだと、どういう条件を満たすか」という整理をするところからかなりハードル高くてまとめきれる会社がまずいない中、それを作っているのがすごい。それに加えて、実際にコードを書いて紐付けてどう評価するかっていうとこまでやってるじゃないですか。それって、現状他の会社はあまりできてないなって思うので、TechTrainのRankを見れば、ある程度コードを見れるなくてもスキルがわかるっていうところまで共通認識として持っていくことができたら、すごく画期的だなって思いました。
スー
逆にこういうことTechTrainにはやってほしくないと思うことってありますか？
tejitak
やってほしくないっていうと、巷にある派遣業界の会社で、採用する企業側のことも被採用者のエンジニアのことも考えず誰も幸せにならないというよなサービスにはなってほしくないですね。TechTrainはそういったところとは全然違って、みんなが幸せになるようなやり方を誠実にやっているところが素晴らしいなって思っています。なので、これからも誠実にその道を進んでいただければ僕は嬉しいです。
それは、儲けるのが確かに難しいってところが議論のポイントですけど。その先に、TechTrainとしてのキャッシュポイントがどこかでがっつりはるところがあれば理想的ですよね。
スー
そうですね。個人的には頑張ってる人からはあんまりお金を取りたくないなっていう想いもあります。ただビジネスなんで、それだけではやっていけないので、そこはこれからもっと考えていけたらなと思っています。
tejitak
ユーザーさんからお決まりの質問で「なんで無料なんですか」っていうのがあるじゃないですか?それはもうTechTrainの思想だからですっていうか（笑）本当はちゃんとお金を儲けなきゃいけないのに、そうやってるっていう状況ですよね。
スー
お金取ろうとすると、「頑張ってんだけど、それは筋よくないよね。」っていう方を誘導するのが楽なんですけど、お金払ったのに欲しい結果が得られないってことをできるだけ避けたいなって。せっかく課金するならできるだけ欲しい結果が得られるようにする。課金しなくてもある程度まで自分が超頑張ればいけるっていう仕組みができたら嬉しいなとは考えています。
tejitak
ユーザーさんの気持ちとして、ありがとうございますと言っておきます。（笑）
スー
いや、tejitakさんにはメンターをしていただいてるので、恐縮です。頑張ります！
ありがとうございました。
tejitak
ありがとうございました！
対談後視聴者アンケートtejitakさん＆スーさん回答
リニューアルに伴いvueからreactに移行したとのことでしたが、移行で一番手間がかかったのはどういったところでしょうか
事業的な話
- リプレイスするときにどの機能をいつまでにリプレイスするのか優先度を決めること
- 実装がどこまで進んだらリプレイス後の画面をリリースするのかのタイミングを決めること
- ユーザー、メンターそれぞれに大きな使い勝手の変更を余儀なくされるので、違和感がないかどうかをデザインを含めてプロダクトチームですり合わせること
開発的な話
- チーム全体が新しい技術スタックへの対応が必要なので、技術的なキャッチアップ
- Next.jsのレンダリングパフォーマンスのチェック
- Next.js実装におけるのアーキテクチャの決定
- バックエンドとの連携をどうするのか（バックエンドはリプレイスをかけるのかかけないかを含めての判断）
新しい言語へ移行したり取り入れたりする上での判断(どのタイミングなのかなど)についてお聞きしたいです。
- 開発スピードがプロダクトの規模の割に遅くなり始めている
- 技術トレンドが移ってきて、採用が難しくなりそうだという見通しがある
- 事業のタイミング的にこれ以上大きくなったときに開発スピードが出なくなりそうな見通しが立った
その他補足
技術選定においては「流行っているから」という理由で決定する人も多かったりしますが、できる限りプロダクトの性質や開発体制なども含めてメリット・デメリットを評価した上で決定することが大切です！
おわりに
今回は対談で初期の開発のあれこれや現在、そしてこれからのことなどをお話ししましたが、いかがでしたか？
こちらはシリーズ化予定となっておりますので、次回の記事もまた楽しみにしていただけましたら幸いです。
TechTrainは、現在4,500名以上の方々にご利用いただいており、100名以上のメンターにもご協力いただきながらまだまだ成長中です。
ユーザーの皆様、メンターの皆様、本当にありがとうございます！
そして、現在TechTrainでは開発メンバーを募集中です。
TechTrain(運営会社: 株式会社TechBowl)では、一人一人の 「良いものつくりたい」という気持ちを大切にし、専門的なスキルを持つ人材の教育で「実力を一段上にあげる」ためのサービスを作っていきます。
是非より楽しくスピーディにモノづくりをできるエンジニアが増えるようなサービスを一緒に開発しませんか？
以下の3職種のメンバーを募集中しています。
[募集要項]フロントエンドエンジニア(テックリード)
[募集要項]バックエンドエンジニア(テックリード)
[募集要項]プロダクトマネージャー
Discussion