- 氏名: 寺本 真之（てらもと しんじ） | 1988年12月27日
- TypeScript/JavaScriptエンジニアとしてフロントエンド、バックエンド、インフラを分業せずにWebアプリケーション開発をしています。
- フロントエンドはReactの開発経験は5年間、サーバサイドはNode.js/Express.jsの開発経験は5年間、MongoDBの開発経験は3年間、Firebaseの開発経験は2年間あります。
- 自社開発、受託開発の経験があります。どちらも仕様策定、新規開発から運用まで一気通貫して対応しています。自社サービスは最長8年間(フルリプレース含み)、受託開発は最長5年間の運用サービスがあり、先を見越した技術選定を行うようにしています。
- 2013年からの2年間はプロジェクトマネージャーとして初の自社サービスであるフォトブックサービスの立ち上げに従事しました。
- 事業の主体を事業会社に移行したことに伴う転籍であるため、仕事内容や開発体制等の実体に変更はありません。
- 事業内容: 自社Webサービス、受託開発、コンサルティング、マーケティング支援
- 従業員数: 3名 (エンジニア内1名: 本人)
- エンジニア: 1名(本人: 2016年〜現在)
- プロジェクトマネージャー(カスタマーサービス等の事業立ち上げ): 1名(本人: 2013年〜2015年)
- マネージャー: 1名
- エンジニア: 3名
- 期間: 2013年1月～現在
- 価値観や職業観の違いからマネジメントは苦労することが多々ありましたが、様々な施策を経て、最終的にはタスクを細かく分割、明瞭な部分を意識的にアサインすることで安定的に成果を出せるようになりました。
- 本人: 主に新規開発、アーキテクチャ設計、インフラ構築、タスク管理を主に担当しております。
- オフショアメンバー: 当初は開発を全面的に担当、現在は運営保守を中心に担当しております。
- 期間: 2021年4月〜現在
産業向けに特化したカタログサイトです。
- 使用技術
- 使用言語: TypeScript、NestJS
- フロントエンド: React, Next.js, GraphQL、Material-UI, Jest, Cypress
- バックエンド: Cloud Firestore
- 開発環境：GCP(Cloud Run, BigQuery, Cloud Functions), Github Actions, Terraform
【受託開発】 化学業界の総合メディアサイト (https://chematels.com)
化学業界向けに記事やマーケット情報を提供する総合メディアサイトです。技術の面ではAWSのEC2上にnginx、Node.js、MongoDBで構築していた開発環境をフロントエンド面ではJamstack化、サーバーサイドをサーバーレス、フルマネージドを主軸とする構成にしました。管理するプロジェクトの増加によるコスト増加とインフラ面の煩雑化の発生をフルマネジメント構成に移行することにより抑制できました。
- 期間: 2019年12月〜現在
| # | 期間 | 内容 | 開発チーム |
|---|---|---|---|
| 1 | 2019/12 〜 2020/1 |
開発基盤の技術検証を行い、フロントエンドはJamstackをベースにヘッドレスCMSのGraphCMSとBaaS(Cloud Firestore)をVercelにデプロイ、バックエンドはCloud Functions、アドミン系はCloud Runに構築、データ分析環境はFirebase Analytics、Firebase ExportsとFivetranの処理によりBigQueryに集める構成にスタックの導入することを決めました。データパイプライン等の導入は断念し、GraphCMS・AlgoliaのデータはFirebase FunctionsのpubsubでFirestoreにデータ追加した後、Firebase Exportsにより自動でBigQueryにデータエクスポートする構成にしました。 | 1名 (本人) |
| 2 | 2019/2 〜 2020/6 |
フロントエンドとバックエンドの大部分の開発を担当しました。 パフォーマンスの高速化とインフラ面のためにフロントエンドはJamstackベースで開発しました。このプロジェクトからインフラ面をAWSからGCP・Firebaseに変更したため、Firebase AnalyticsからBigQueryへのエスポートで発生する稀な問題等がありインフラ面での苦労が多かったです。 | 2名 (本人含む) |
| 3 | 2021/4 〜 現在 |
運営中・新規プロジェクトを横断してものづくり産業に関わる企業様が利用できるSaaSサービス開発中しております。*半育休中しながらの開発期間を含みます。 | 1名 (本人) |
- 使用技術
- 使用言語: TypeScript、Node.js
- フロントエンド: React, Next.js, GraphQL、Material-UI, Jest, Cypress
- バックエンド: Cloud Firestore
- 開発環境：GCP(Cloud Run, BigQuery, Cloud Functions), Github Actions
【自社開発】 観光SaaS (https://biz.posto.jp/)
Webアプリケーションで観光地のポストカードやスタンプラリーを実施し、アンケート等を活用し、自治体・観光・商業施設運営者に旅中のデータを提供するサービスです。私はWebアプリケーション部分のフロントエンドとバックエンドの大半の開発を担当しました。
- 期間: 2017年4月〜現在 (現在は実質サービス停止中)
| # | 期間 | 内容 | 開発チーム |
|---|---|---|---|
| 1 | 2017/3 〜 2017/4 |
立山黒部アルペンルートの単発イベント用のWebアプリとして始動しました。当初はリリースまでの時間がなかったこと、今後の継続性が未確定のため実用最小限のポストカード作成とデータの蓄積/エクスポートに重点を置き開発しました。また、ログイン機能を持たせないことになったため、localStorage/redux-persistの同期部分で苦戦しました。 | 1名 (本人) |
| 2 | 2018/6 〜 2018/9 |
Webスタンプラリー機能の開発をしました。Webスタンプラリーは景品引換の特性上、ログイン機能をつけることになりましたが、UXの工夫としてプレゼントの引換の直前まではログインせずにスタンプを貯められるようにしました。技術面ではプロトタイプではTypeScriptの利用はありましたが、リリースされたプロダクトとしては初めて全面的にTypeScriptを用いて開発しました。 | 1名 (本人) |
| 3 | 2019/5 〜 2019/9 |
ポストカードのクライアントの増加と印刷会社と提携し共同運用し販売を拡大する方向になったため、クライアントアドミンを開発し、誰でもイベントを作成できるようにしました。困難だったところとしては、アンケート作成機能になります。アンケートは質問の数、回答方法、複数言語と考慮する範囲が広かったからです。 | 1名 (本人) |
- 使用技術
- 使用言語: JavaScript/TypeScript、Node.js
- フロントエンド: React, Next.js, Redux (Redux-Thunk)、Material-UI, Jest
- バックエンド: Express, MongoDB
- 開発環境：AWS(EC2, S3, CloudFront, Route53), Github
【受託開発】 プラスチック成形材料データベース (https://plabase.com)
- 期間: 2015年10月〜現在
納品のない受託開発として構想段階から開発・運営まで一括で請負サービスをリリースさせる。複雑な成形材料の情報を電子化・データベース化する方法、Webサービスとしての機能を顧客と二人三脚で考え実現させる。その後も、2017年にサイトトラフィックの改善のNext.jsによるSSRへの移行、2018年に総合メディアサイト化、現在プラスチック成形材料データベース・総合メディアサイトして月間10万PVを達成し、プラスチック業界のマーケティングツールとしての地位を確立しました。
| # | 期間 | 内容 | 開発チーム |
|---|---|---|---|
| 1 | 2015/10 〜 2015/11 |
成形材料に適した検索方法を考え、jQueryを用いて検索ページのプロトタイプの作成しました。 | 1名 (本人) |
| 2 | 2015/12 〜 2016/3 |
自社開発で使用していたPHP/CodeIgniterに限界を感じていたため、新技術スタックの選定、シングルページアプリケーションによるフロントエンドとバックエンドの切り離し、JavaScriptを中心とするエコシステムの技術(JavaScript(ES2015)/Node.js/React/Redux/MongoDB)を中心とすることを決め、準備を進めました。 | 1名 (本人) |
| 3 | 2016/4 〜 2016/11 |
新技術スタックの選定時に技術スタックの習熟をしていたため当初はメンバーの習熟支援を中心に行いました。複雑な成形材料をデータベースに落とし込み、また元データの作成部分で苦戦しました。 | 4名 (本人含む) |
| 4 | 2017/6 〜 2017/9 |
SEO強化に伴いシングルページアプリケーションからサーバーサイドレンダリングへの移行を実施しました。当初はwebpack-isomorphic-toolsはによる実装を試みましたが安定化に失敗しました。その後、Next.jsを導入してSSR化に成功しました。この時の経験から、ビルド環境はレールに乗るのが好ましいと考え、その後はNext.jsをフロントエンド開発の中心としました。 | 1名 (本人) |
| 5 | 2017/10 〜 2018/2 |
メディア化(ヘッドレスCMSとしてしてWordpressの導入・市況状況)の追加とモバイルWeb版(レスポンシブデザインではなく独立したモバイルWeb版)の導入をしました。私はモバイルWeb版を中心に開発をしました。 | 2名 (本人含む) |
- 使用技術
- 使用言語: JavaScript(ES2015)、Node.js
- フロントエンド: React, React-Router → Next.js, Redux (Redux-Thunk)、Material-UI, Jest
- バックエンド: Express, MongoDB, Redis
- 開発環境：AWS(EC2, S3, CloudFront, Route53), Bitbucket
【自社開発】 Facebook/Instagramからつくるフォトブックサービス (https://happylogue.com/)
2013年からの2年間は初の自社サービスであるフォトブックサービスの立ち上げを担当、開発の業務部分としてはブリッジSEに近い立場でインドチームと共に開発を進めました。(AWS上でのインフラ整備やBitbucketによるバージョン管理の導入支援などは行いましたが、この期間のコーディングはインド側で行なっておりました。2017年からシステム面のフルリプレースを実施し、開発を主導しました。
- 期間: 2013年1月〜現在
第一フェーズ(2013年〜2018年)
| # | 期間 | 内容 | 開発チーム |
|---|---|---|---|
| 1 | 2013/1 〜 2013/2 |
オフショア開発メンバーの採用活動、oDeskを使って行い、インドのケーララ州のシステム開発会社と契約しました。プロトタイプの作成等を行いました。 | 4名 (本人含む) |
| 2 | 2013/3 〜 2013/12 |
インドチームとのプロダクト開発、印刷会社との成果物やオペレーションフローの策定等の行いプロダクトをローンチさせました。 | 4名 (本人含む) |
| 3 | 2014/1 〜 2015/7 頃 |
サービスリリース後の製品改良、カスタマーサポート、筑波大学大学院システム情報工学研究科の修論と授業の題材としてデータ提供をし、サービス成長に向けた施策の議論等を行いました。その後、ソースコードの開発を全面的にインドチームに依存するリスクを高いと判断し、私はシステム開発部分への関与を強め、オペレーション等の仕事を日本メンバーへ引き継ぎました。 | 4名 (本人含む) |
- 使用技術
- 使用言語: PHP
- フロントエンド: jQuery
- バックエンド: CodeIgniter, MySQL
- 開発環境：AWS(EC2, S3, CloudFront, Route53, Amazon Aurora), Bitbucket
第二フェーズ(2018年〜現在)
| # | 期間 | 内容 | 開発チーム |
|---|---|---|---|
| 0.1 | 2016/11 〜 2017/2 |
育児アプリと提携し、そのデータを使ったフォトブックサービスの開発をNode.js/React/Redux/MongoDBで行いました。ある程度形になったところで先方アプリのクラウド化の頓挫によりプロジェクトが終了となりました。 | 2名 (本人) |
| 1 | 2018/10 〜 2019/2 |
前述のプロトタイプをベースにTypeScript化など技術的な差分をアップデートとしつつ、サービスのフルリプレースを行いました。私はフォトブックの部分を除く、アプリケーション部分のフロントエンドとバックエンドを担当しました。 | 3名 (本人含む） |
- 使用技術
- 使用言語: TypeScript、Node.js
- フロントエンド: React, Next.js, Redux (Redux-Thunk)、Material-UI, Jest
- バックエンド: Express, MongoDB
- 開発環境：AWS(EC2, S3, CloudFront, Route53), Github
【自社開発】 ご当地アイドル公式iOSアプリ (https://applion.jp/iphone/app/1001901462/)
- 期間: 2015年2月〜2016年5月
2014年から学習中だったSwift・iOS学習を自社ビジネスに繋げたいと考え、当時地下アイドルブームだった市場情勢を活用し、アプリ × 地下アイドルのビジネス化を企画しました。まず、富山県のご当地アイドルの公式アプリ化を目標とすることにし、ご当地アイドルのプロデューサにイベント後に突撃営業をして、公式アプリの権利を獲得しました。
| # | 期間 | 内容 | 開発チーム |
|---|---|---|---|
| 1 | 2015/2 〜 2015/6 |
ゲームパートのドット絵とロゴのデザインを除いて、アプリ開発、リリース作業等のすべての開発面を担当しました。Swift/iOSの学習は主にraywenderlich.comから得ました。 | 1名 (本人) |
- 使用技術
- 使用言語: Swift
- 期間: 2021年9月〜11月
Reactのフロントエンドの機能実装、テスト環境等の開発環境の向上。
- 期間: 2021年11月〜2022年9月
新規事業の開発、React, KotlinのSaaSサービスの基盤・セキュリティ開発、管理画面の開発
- 期間: 2022年12月〜2024年3月
ノーコードでフォーム作成ができるフォームSaaSサービスの開発、フォームSaaSサービスを用いての案件デリバリー業務
- JavaScript: 6年
- JavaScriptは基本的にES2015以降の言語仕様ベースにしております。
- TypeScript: 3年
- 現在はフロントエンドとバックエンド(Node.js)共にTypeScriptをベースに開発をしております。
- 2018年以降の新規アプリケーションはフロントエンド・サーバーサイドともにTypeScriptを選択しています
- Kotlin: 6ヶ月
- Spring bootでのバックエンド開発
- Go: 6ヶ月
- React: 5年
- ReactはプレーンなJavaScriptで書くことができ、タグの中にフレームワーク特有のシグナルで条件分岐や繰り返しがないところに当初は魅力を感じ使いはじめました。その後は豊富なエコシステムやReact hooksのシンプルなAPIに魅力を感じております。
- サスペンスを使ったデータ取得と取得中のスケルトン表示はエンドユーザーへの高いユーザーエクスぺリンスの提供に好ましいと考え積極的に利用しております。
- Next.js: 4年
- Next.js 2.0の頃から利用を開始しました。動的なルーティングやApp Component(_document.js, _app.js)がまだない頃でしたが、webpackの負担軽減やSSRに魅力を感じ導入を決めました。
- 直近では、Next.js 9.4のIncremental Static Regenerationが魅力的な機能と思っております。
- GraphQL
- Material UI - UIコンポーネントフレームワークを使ってのWebアプリケーション開発を好みます。UIコンポーネントにより素早く、コードの読みやすさ、長期的な保守運営するのは必須であると考えています。 - その中で、Material UIを選択した理由は2016年当時では最も安定したUIコンポーネントフレームワークだったからです。
- ESLint
- Prettier
- Jest
- React Testing Library
- Cypress
- 仕様があまり固まった状態ではなくプロトタイプを作成、フィードバックを繰り返して開発していたこともあり、テストファーストの実施はしておりませんでした。ある程度、プロダクトが固まったら段階的にテストコードを追加していました。
- テストはE2Eを中心に薄くしか実施できていません。E2EはBDDベース、画面遷移やボタンアクションのテストを中心にテストしております。
- Node.js
- Express.js
- NestJS
-
MongoDB
- Mongoose
- MongoDBへの直接アクセスはせずに、Mongooseのスキーマの型を通してのアクセスを徹底させることにより、NoSQLの柔軟性を得ながら、安全性を高めて利用しました。
- Mongoose
-
Cloud Firestore
- 2020年より、プロジェクト数の増加による負荷を低減させるために、可能な限りインフラ部分はフルマネージド環境で開発する方向に転換しました。
- MongoDB Atlasも検討しましたが、mBaaS環境やエコシステムの弱さもあり、Cloud Firestoreへの移行を決めました。
-
インフラ
- GCP
- Cloud Run
- DockerをContainer Registryに登録、Cloud Buildによる継続的デプロイの設定は行えます
- Serverless NEGとHTTPSロードバランサーをCloud Runと紐づけてIdentity-Aware Proxyを使ってのアクセス制御の経験はあります。
- BigQuery
- WebサービスのFirebase Analytics、Firebase Extensions-Export Collections to BigQuery、Fivetranを用いてシンプルなデータ基盤の開発の経験はあります。
- Firebase
- Cloud Firestore、Cloud Storageを使ってのサーバーレス開発の経験はあります
- Cloud Run
- Terraform
- GCP
- CI/CD
- Github Actions
- QA、Prod環境へのデプロイ、テストのCI
- Github Actions
- Docker
- GCP
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent