2024/07/02 現在
氏名：田村元（たむらげん）
フロントエンド領域を中心に活動している Web アプリケーションエンジニアです。10 年ほど前に、ビジネス職の仕事を辞めて独学で Web アプリケーションエンジニアになりました。
独立当初は自ら法人を立ち上げ、CtoC のお手伝いマッチングサービスを Rails + Heroku のスタックで開発・運営しておりました。1 年半ほど活動しましたが、事業自体を成立させることが難しく、その後 Web アプリケーションエンジニアとして、独立しました。 ビジネス職のときも HTML、CSS、JavaScript でのコーディングは行っていたので、フロントエンド領域の経験は 15 年以上です。その後、正社員での就業やフリーランスでの活動を経て、2022 年 12 月に改めて法人を立ち上げ、現在は一人法人として活動しております。
Web フロントエンドのシステム寄りの領域が最も得意です。 最近は Next.js / TypeScript の案件を多く、こちらのスタックが最もパフォーマンスが高いです。Next.js については AppRouter / PageRouter ともに実装経験があります。 環境構築は、Next.js を利用して zeroconfig のような環境が多くなってきましたが、以前は webpack を利用した最適化なども行っていました。もちろん、VanillaJS での実装も可能ですし、jQuery などで実装されているプロジェクトを React に置き換えるようなプロジェクトも可能です。フロントエンドのビルドを GitHub Actions などで CI/CD など FrontendOps 的な業務も可能です。また、関わらせていただいたプロジェクトで大規模にフロントエンドのテストを書く機会はあまりありませんが、テストを導入し、ビルド時に走らせるなども対応可能です。 CSS は、プレーンな CSS から Sass、CSS modules、TailwindCSS などのライブラリ利用や、BEM や Flocss など CSS 設計も可能です。簡単なものであれば、CSS animation も対応できます。 最近はフレームワークやライブラリなどを適切に利用しているため、以前ほどみかけなくなりましたが、多くの人があまり好ましく思わない、レガシー環境や込み入った構成になっているフロントエンド部分を、整理整頓することが好きです。例えば以下のような要件です。
- jQuery でロジックもビューも複雑に絡み合っているスパゲッティコードを構造化して、見通しを良くし、継続的な開発を続けられるようにする
- フロントエンドとバックエンドが密結合になっている Rails アプリケーションを分割して、フロントエンドのみで開発・デプロイできるようにする
メインでリードできるほどではないですが、バックエンドについても、Ruby、Node.js、PHP、Go については実務経験があります。
インフラについても Heroku や Vercel、Firebase などの PaaS や、みずから堅牢なインフラを構築するまでではないですが、AWS や GCP などの IaaS も一通り利用することができます。最近は AWS Amplify Gen2 を Next.js で活用し、frontend と backend、infra とフルスタックで開発しています。
React / Next.js / TypeScript を中心に、モダンフロントエンドの開発をすることが多いです。 すでに確定している要件からの開発案件や、ふわっとした要件で開発進めることや、モダンフロントエンドのみならず、Web 制作の jQuery を利用したコーディング案件、また、PoC などでフルスタックに開発してほしいなどでも、柔軟に対応いたします。現在は、業務委託案件を中心に対応させていただいております。準委任契約では、最低稼働時間は設定せず、お試しで 1 時間から稼働可能です。請負契約の事前見積もりは無料で対応いたします。準委任・請負でどちらが適しているかが不明な場合も、柔軟に対応しておりますので、お気軽にお声がけください。
| No | 所属 | 業種等 | 期間 | 役職等 |
|---|---|---|---|---|
| 1 | 株式会社ジーイーエヌ | IT・一人法人 | 2022 年 12 月〜現在 | 代表取締役 |
| 2 | フリーランスエンジニア | - | 2020 年 09 月〜2022 年 11 月 | フリーランス |
| 3 | フリー株式会社 | SaaS・会計、人事労務等 | 2020 年 07 月〜2020 年 08 月 | 正社員 |
| 4 | フリーランスエンジニア | - | 2020 年 01 月〜2020 年 06 月 | フリーランス |
| 5 | 株式会社ツクルバ | 不動産 | 2018 年 04 月〜2019 年 12 月 | 正社員 |
| 6 | フリーランスエンジニア | - | 2016 年 04 月〜2018 年 03 月 | フリーランス |
| 7 | 株式会社スマイルメーカー | IT・ブラウザゲーム | 2014 年 03 月〜2016 年 03 月 | 正社員 |
| 8 | ヘルプリー合同会社 | IT・一人法人 | 2012 年 07 月〜2014 年 02 月 | 代表社員 |
| 9 | 株式会社ジェーシービー | 金融・クレジットカード | 2006 年 10 月〜2011 年 12 月 | 正社員 |
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社ツクルバ | 2023 年 09 月〜2024 年 04 月 | 「ウルカモ」フロントエンド開発 |
| 株式会社住宅ローン診断カンパニー | 2022 年 12 月〜2023 年 08 月 | 住宅ローン関連システム開発 |
| ドクターズモバイル株式会社 | 2022 年 12 月〜2023 年 08 月 | 医療関連システム開発 |
■ 株式会社ツクルバ
- ウルカモ｜中古不動産のソーシャルマーケット のフロントエンド領域を担当。
- 施策開発と並行し、Next.js12 から 14 へのアップグレードを実施。
- 利用技術 Next.js/TypeScript/Recoil/SWR/TailwindCSS/Storybook/ESLint/Firebaseauthentication/Vercel
- 利用技術
- Next.js / TypeScript / ReactHookForm / Zod / TailwindCSS / shadcn/ui / Vercel / LIQUID eKYC JS SDK
- 利用技術
- Frontend: React / React Router / ContextAPI / MaterialUI
- Backend: Node.js / pm2 / MongoDB / mongoose
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社ツクルバ | 2021 年 11 月〜2022 年 10 月 | 「ウルカモ」フロントエンド開発 |
| 株式会社ツクルバ | 2021 年 08 月〜2021 年 10 月 | 「cowcamo 売却の基礎知識」フロントエンド開発 |
| 株式会社ツクルバ | 2020 年 10 月〜2021 年 07 月 | 「cowcamo」Web アプリケーション開発 |
| 株式会社 QUMPOO | 2020 年 08 月〜2021 年 01 月 | HTML、CSS、jQuery コーディング |
■ 株式会社ツクルバ
ウルカモ｜中古不動産のソーシャルマーケットのフロントエンド領域を担当。 Frontend1 名(gentamura)、Backend1 名、Design1 名、PdM2 名のチーム構成。 プロジェクト立ち上げからフロントエンドのリードエンジニアとして参画し、技術選定、設計、実装、テストを実施。開発期間 4 ヶ月を経て、2022 年 2 月に本リリース。その後、追加開発等も含めた運用・保守に従事。選定技術は Next.js/TypeScript/Recoil/SWR/TailwindCSS/Storybook/ESLint/Firebaseauthentication/Vercel 等。
cowcamo 売却の基礎知識を Next.js の StaticExports にて実装 選定技術は Next.js/TypeScript/TailwindCSS/Storybook/ESLint/Vercel/microCMS 等
Rails アプリケーション内で利用しているフロントエンド領域で以下を対応
- React アプリケーションに Redux 導入
- npm security alert のアップデート
- 独自 CMSEditor のバグ修正
- erb の Google Analytics Event を整理し、JS での制御を追加
- その他細々としたバグ修正・実装調整
- 大手上場企業の独自 CRM 上での HTML、CSS コーディングを実装
- 大手上場企業のイベントサイトをコーディング、日英切り替えを jQuery 実装
人事労務フリー所属チームにて、フロントエンド領域の開発に従事
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社ツクルバ | 2020 年 04 月 | co-ba.net リニューアル |
| 株式会社ツクルバ | 2020 年 01 月〜2020 年 03 月 | コワーキングスペース入退出アプリ |
| 株式会社 SEESAW | 2020 年 02 月〜2020 年 04 月 | HTML、CSS、jQuery コーディング |
■ 株式会社ツクルバ
- WordPress のみの運用から、Gatsby.js + WordPress RESTAPI による運用に変更
- Next.js / TypeScript / CloudFunctionsforFirebase / CloudFirestore / FirebaseAuthentication / AkerunAPI / Pay.jp
- Flutter / FirebaseSDK / FirebaseAuthentication
- Meguro.es#25@Fringe81 にて TL 登壇
- 社内管理画面（SFA/CRM/CMS）のフロントエンドの開発リードを担当
- Ruby on Rails アップデートプロジェクトにおける、フロントエンド領域のリードを担当
- コワーキングスペース入退出アプリの開発リードを担当
- コーポレートサイトリニューアルプロジェクトの開発リードを担当（技術選定・関係部署折衝含む）
- cowcamo.jp における、Web アプリケーションの機能改修を担当
- co-ba.net の開発・保守を担当
- wayfarer で管理されていた routing を、RailsView にセットした data 属性で React の mount 判定する機能を実装
- モノリシックな Rails に複数の SPA が存在し、Rails の Routes と Frontend の wayfarer が重複していたため、front 側の routing を管理せずに React をマウントできるように実装した
- flumpt で管理されていた state を、ContextAPI を利用した state 管理に移管
- React に ContextAPI が実装されたタイミングで Redux に ContextAPI が実装されていなかったため、独自実装した•営業係数のダッシュボードに対して、D3.js を利用し、円グラフ・折れ線グラフ・棒グラフを実装
- Assetspipeline で管理されている JavaScript/CSS の調査
- gem 単独で assets を利用しているものはそのまま残す方針
- assetspipeline を経由必須の gem に関しては、スクラッチで JS 実装（select2 など）
- webpack によるフロントエンド機構の開発環境の整備
- browserify-rails、babelify を利用し、Assetspipeline を経由していた部分を、webpack のみで完結するように実装
- erb に埋め込まれている JavaScript の切り出し
- jQuery 利用部分の VanillaJS への置き換え
コワーキングスペース利用者の入退出時間を管理する Web アプリ
- Next.js / TypeScript / Cloud Functions for Firebase / Cloud Firestore / Firebase Authentication / Akerun API / Pay.jp
- WordPress + Heteml で運用されていたコーポレートサイトを以下スタックにリプレース
- ユーザ画面・管理画面を Google App Engine (standard)で 3 services で実装
- ユーザ向けフロントエンド（Go / Gin / HTMLtemplate / JavaScript / Sass / Flocss）
- 管理画面
- フロントエンド（Next.js / JavaScript）
- バックエンド（Node.js / Express / Firebase functions / Cloud datastore）
- Rails Controller / View / Spec の実装
- VanillaJS、jQuery での実装
- Docker compose にて WordPress / Nginx / MySQL のイメージを利用
- AWS Elastic Beanstalk に host し、Blue-Green Deployment にて運用
- カスタム Docker イメージは、 AWS ECR へホストして管理
| クライアント名 | 期間 | 概要 |
|---|---|---|
| 株式会社 socialsolutions | 2016 年 04 月〜2018 年 03 月 | 「Child Care System + Pro」フロントエンド開発 |
| 株式会社クスール | 2017 年 04 月〜2017 年 06 月 | 「BAUS」フロントエンド開発 |
| 株式会社クスール | 2017 年 03 月 | JavaScript 研修補助講師 |
| 株式会社サイズ | 2016 年 06 月〜2016 年 10 月 | 「WebMeister5」フロントエンド開発 |
保育園 ICT 管理システム「Child Care System + Pro supported by NTT 東日本」 のフロントエンド開発業務（2016 年 04 月〜2018 年 03 月）
業務内容
- スタッフのシフト予定や実際の出退勤、園児の登園予定・実際の登退園に連動するデータを 1 画面で登録・閲覧可能な「-シフト作成」の開発方針策定、実装を担当
- フロントエンドで利用する API（PHP）の改修
- 開発環境整備の導入提案・運用を担当
開発方針
- クライアント要望により、jQuery + ES5 + Backbone.Events の構成にて実装
- SPA（SinglePageApplication）として画面を構成
- 役割によるディレクトリ分割（MVVM をベースとした独自構成）を実施 •Webpack を用いたモジュール管理を実施
開発内容
- JavaScript
- models:Ajax 通信と DB データの状態管理を実装
- views:templates への HTML 展開と DB データ表示、View の状態管理を実装
- templates:HTML を分割して構成
- DB 更新は、一貫して views でイベントを dispatch し、models にて受け取る構成を独自で実装
- シフト登録画面を Google カレンダーのようににグリッド構成し、ドラッグ&リリースで、データを登録する UI を実装
- 使用ライブラリ
- jQuery,jQueryUIdatepicker,Webpack,Backbone.js,moment.js
- PHP
- 初期ロード時に複数の API をシリアルで叩く構成になっていたため、API 側で初期ロードに必要なデータを合成し、リクエスト数を減らすよう改修
開発環境整備
- Git、Git-flow、Backlog を導入し、チケットでのワークフローを提案し、導入・運用を実行
■ 株式会社クスール
クリエイティブプラットフォーム「BAUS」のフロントエンド開発業務（2017 年 04 月〜2017 年 06 月）
業務内容
- Rails で構築されているプロジェクト内のフロントエンド実装を担当
開発内容
- JavaScript
- Slick をカスタマイズし、カルーセル、クロスカルーセルを実装
- スクロール量に合わせたコンテンツの表示・非表示切り替えを実装
- 使用ライブラリ
- jQuery,Slick,jQueryLazy
- Rails
- View の調整、部分テンプレートを利用した View の共通化を実施
UX/UI の実践スキルを学べるデザインスクール「Delight U for Students」 における JavaScript 講座の補助講師（2017 年 3 月）
業務内容
- DeNAとcshoolが主催のデザインスクールにて、JavaScript セクション（5 日間）の補助講師を担当
- デザイナー志望の受講者へプログラミングの基本からメモアプリの実装までの講義をフォローする補助講師として参加。
■ 株式会社サイズ
HTML5CMS「WebMeister5」 の JavaApplet から JavaScript への切替開発業務（2016 年 6 月-2016 年 10 月）
業務内容
- HTML5 対応 Web オーサリングツールにおける管理画面の UI 開発
開発方針
- クライアント開発のコードをベースに追加開発を実施
- SPA（SinglePageApplication）として画面を構成
- Require.js を用いたモジュール管理を実施
開発内容
- JavaScript
- ディレクトリ機能、ファイル表示画面でのソート機能を実装
- TinyMCE を利用した HTML 画面のリッチ編集機能を実装（ライブラリ拡張も含む）
- ドラッグ&ドロップによるアップロード機能、右クリックメニューを実装
- 使用ライブラリ
- jQuery,TinyMCE,require.js,moment.js,clipboard.js,pikaday.js
- CSS
- Sass を導入し、CSS を構造化
- RPG ゲームにおける戦闘画面の開発を担当
開発内容
- ActionScript3
- MVVM ベースの構造化
- ビジネスロジック設計・実装
- モーション設計・実装
- Away3D
- 戦闘画面の 2D/3D ハイブリッド画面を実装
その他開発
- Git、Git-flow の運用方針構築・導入・推進、Redmine 導入
- 受付アプリ開発(Objective-C、Swift)
- 旧コーポレートサイトの構築（ActionScript3、FlashProfessionalCC）
- 既存 PC ブラウザゲームのスマートフォン版更新開発（HTML5、CSS3、JavaScript、Handlebars.js、jQuery）
- 新プラットフォーム検討におけるデモアプリ作成（CoronaSDK by Lua、Cocos-x by JavaScript）
おてつだいを依頼したい人と働きたい人をオンライン上でマッチングするお手伝いマッチングサイト「Helply」の開発・運営業務内容
- 事業戦略、UI/UX 策定・開発、システム開発、サービス運用、経営管理全般
開発内容
- Ruby 2.0.0 / Ruby on Rails 3.2.11
- ユーザ新規登録 / ログイン / ログアウト / Facebook 認証 / 会員登録認証メール送信 / パスワードリセット / ユーザ一覧表示 / ユーザ詳細表示 / 仕事新規登録 / 仕事一覧リスト表示・ソート・フィルタ / 仕事一覧 GoogleMaps 表示 / 依頼した仕事一覧 / 受け付けた仕事一覧 / 決済機能 / SSL 通信 / 画像アップロード・編集 / コメント機能 / オファー機能 / レビュー機能 / メッセージ機能 / 通知機能
利用ライブラリ
- Devise / Omniauth / Twitter Bootstrap Rails / CarrierWave / Cloudinary / less rails / will paginate / WebPay / Heroku / PostgreSQL / SQLite3 / RapidSSL
研修講師
- iPhone アプリ開発研修講師（2013 年 10 月〜2013 年 11 月）
フロントエンド開発
- イベント管理アプリ「minakul」のタイムライン実装（2013 年 07 月〜2013 年 08 月）
- エンタメ関連プロモーションサイト（2013 年 07 月〜2013 年 08 月）
- Facebook アプリの画像編集機能（2013 年 07 月〜2013 年 08 月）
- NPO 法人の Wordpress テーマ開発（2013 年 07 月）
- ソーシャルゲームスマホ版 UI 実装（2013 年 02 月〜2013 年 04 月）
サーバサイド開発
- ものづくりレシピサイト API を Rails にて実装（2013 年 05 月〜2013 年 06 月）
- 支社営業の短期・中期目標を策定、また達成に向けた戦略を立案、実行補佐、進捗管理に従事
- 支社評価制度策定、短期・中期 KPI 目標策定
- 戦略進捗会議設計、運営(月 1 回)、執行役員向け報告資料作成、報告
- 支社体制の検証、人員配置策定、予算配布、予実差異管理、計数集計・管理・分析
- 営業支援システムの導入における要件定義・ベンダー折衝
業務本部 JCB インフォメーションセンターにて「JCB インフォメーションセンター」の現場管理者として従事センター規模
- オペレータ：40 名、SV：3 名、リーダー：6 名、入電数：平均 3 千件/日
- コールセンター管理(質疑応答・上席対応・呼量調整・スキル設定変更・応対品質・勤怠管理・計数管理)、オペレータの業務研修、「お客様の声/業務改善案」収集・策定・実施
- 社内ポータル構築・保守（HTML / CSS / JS）、電子マネー設定 Web マニュアル構築(業務改善提案銀賞授与)