ぷぐま Portfolio
===

## 略歴

### 学業

- 東京工業大学(現: 東京科学大学 理工学系) 情報理工学院 情報工学系
- 2023年4月 入学
- 2025年4月 小林研究室所属

### 資格

- TOEIC L&R - 895点 (第333回)

### サークル・その他所属団体

- 東京科学大学デジタル創作同好会traP
- 2024年 渉外補佐
- 2025年 渉外
- CyberAgent - CA Tech Lounge
- 2024年12月 ~
- 分野は Webフロントエンド

### アルバイト

- 株式会社CRI・ミドルウェア
- 2024年2月 ~
- TeleXusの研究・開発補助を担当
- 株式会社DubGuild
- 2025年8月 ~
- マイクロサービスの開発やそれらを束ねるインフラ構築を担当

## 技術スタック

### よく使うもの

- Vue3 + Vite + TypeScript + HTML + CSS
- Webアプリケーション フロントエンド開発
- Go言語 + echo + sqlx
- Webアプリケーション バックエンド開発
- Docker / Docker Compose
- 上記制作物のデプロイ
- GitHub (GitHub Actions) / Gitea (Gitea Actions) / GitLab
- 集団開発時のコード管理 / CI

### たまに使うもの / 最近使い始めたもの

- Terraform / ansible
- インフラ構築
- Kubernetes + traefik
- サークル内インフラ管理
- Rust + Tokio + axum
- Webアプリケーション バックエンド開発
- Python (+ TensorFlow)
- 競技プログラミング / 機械学習

### 使ったことがあるもの

- C++
- 競技プログラミング
- Unity + C#
- ゲーム開発

## 過去の開発事例 (特にアピールしたいもの)

### 【長期開発】traPortfolio

#### サービス概要

traP部員が部内での活動や、その制作物をを外部にアピールできるプラットフォーム

#### 担当範囲

- 2024年4月から フロントエンドリーダー
- 要件定義の見直し
- フロントエンド実装の一部・レビュー
- フロントエンドリポジトリの管理
- 開発日程・工数の管理
- 開発環境の整備
- v1リリースに向けたデプロイ作業

#### 開発中に心がけたこと

##### 期限を切った開発

私がこのプロジェクトに加入したのは2023年7月のことでしたが、このプロジェクトはおおよそ2020年から始まり、開発が長期化していました。この背景には、リリースまでのロードマップが定まっていなかったことが挙げられると考えました。そこで、私がフロントエンドリーダーになったときにはまずは期限を定め、それに向かって開発を行うことでリリースを確実に行えるようにしました。
今回は「春ハッカソンで部員が開発したものを外部公開できるようにする」という明確な目標地点を定めることで、設定した期限にも意味をもたせるようにしました。

##### Minimum Viable Product (MVP)

先述の通り期限を切った開発を行うようにしましたが、先に定めた目標「春ハッカソンで部員が開発したものを外部公開できるようにする」を満たすためにはどのような要件が必要かをこのとき一旦整理しました。ここで必須でないと判断したものはv2の要件とし、v1の計画を必要最低限なものに削ぎ落としました。
また、この要件を一度たたき台として作った後、チームメンバーに共有し、それをもとに開発を行うようにしました。

##### サークル内外での積極的な発信

期限を切った開発を行うと決めた際、まずはその期限でリリースすることをサークル内で宣言をしました。これは、サークル内など比較的厳しくない環境下においても期限を形骸化させないという理由がありました。
他にも、開発チームを活発化させる狙いもありました。私が4月にフロントエンドのリーダーを引き継いだ際、定期的にコントリビュートを行っているメンバーはフロントエンドとバックエンドをあわせても5人程度でした。ただ、リリースについての情報を部内で積極的に発信したり、開発の雰囲気について言及することによって自分たちの開発に興味を持ってもらえるようにしました。その結果、現在では5人が追加メンバーとして加入し、開発が更に活発になりました。

##### メンバーの育成と開発環境の積極的な整備

大学サークルという性質上、メンバーの入れ替わりも企業よりも多く、開発体制を維持するのが大きな課題となっています。現に、現在のフロントエンド開発メンバーは自分と同じかそれよりも下の学年しかいません。そこで、メンバーの育成に積極的に取り組んでいます。具体的にはオンボーディングや、その後のペアプログラミングなどです。詳細は以下に挙げているブログ記事で書いています。
また、メンバーが開発に集中できるよう環境の整備も重点的に取り組んでいます。Pull Request ごとにレビューをする際、これまでは Vite をローカルで動かしていましたがこれを ArgoCD を用いてやりやすくしたり、 UI デザインのテストをしやすくするために msw を用いたモックで手元でデータを自在に書き換えられるようにしたりしました。こちらも ArgoCD についてはブログ記事を執筆しています。

#### 関連リンク

- traPortfolio
- portfolio.trap.jp
- GitHubリポジトリ
- フロントエンド
- 外部向けページ
- github.com/traPtitech/traPortfolio-UI
- 部員向け管理ページ
- github.com/traPtitech/traPortfolio-Dashboard
- バックエンド
- github.com/traPtitech/traPortfolio
- 開発に関連したプログ記事
- trap.jp/post/2262/
- trap.jp/post/2304/
- trap.jp/post/2305/
- trap.jp/post/2367/
- trap.jp/post/2419/

### 【ハッカソン】traQ gazer

#### サービス概要

- 2023年度traP部内春ハッカソンで開発
- traP部員向けチャットツール「traQ」で利用可能なbot
- 直近の投稿のうち、設定した文字列を含むものを通知

#### 担当範囲

##### フロントエンドデザイン / 実装

- Tailwind CSS 派生の headless UI を利用

##### サービス名決定 / ロゴ制作

- 「traQ」を長時間監視する -> 凝視する -> gaze
- ロゴデザインのアイデア
- 虫眼鏡や双眼鏡を配置

アイコン

<img alt="" src="https://hackmd.io/_uploads/ByOgUUh4A.svg" width=20%/>

バナー画像

<img alt="" src="https://hackmd.io/_uploads/S1DM8U240.svg" width=50%/>

#### 開発中に心がけたこと

##### ユーザーが利用しやすいデザインをつくること

ユーザーが最も利用する機能は何か、ユーザーはどのような経路でページを移動したいのか
ということを中心に考え、フロントエンドのデザインを行いました。
この際、ページをどのように切り分けどのように遷移するか、またクリック数を可能な限り減らすことはできないか、など細かいところにもこだわりました。

しかし、このときは初めてのWebアプリケーション開発だったため技術はほとんどなく、レスポンシブ対応は行えませんでした。

#### 備考

開発後も様々な人に利用し続けてもらえているため、1年後の2024年にフロントエンドデザインの一新を行いました

#### 関連リンク

- 開発時のブログ記事
- trap.jp/post/1922/
- GitHubリポジトリ
- github.com/traP-jp/traQ-gazer
- フロントエンドデザインを1年後の2024年にリニューアルしたときのブログ記事
- https://trap.jp/post/2345/

## 自分のアピールできる能力

### 自分の考えや相手の考えを言語化すること

集団制作を行う際に最も重要なことは、チーム全体で認識をすり合わせることだと考えています。ここで、認識のすり合わせには双方が抱いているイメージを言語化し、相手にうまく伝えることが必要だと思います。
私はこういった場面で、まずはお互いが思い描いているものを言語化し、それらのどこが一致していて、どこが異なるのかを分析するところから始めるようにしています。

他にも、記事の執筆にも積極的に取り組んでいます。 2024 年にはサークルの公式サイトから約 20 本もの記事を投稿しました。他にも、企業様のブログに記事を寄稿させていただいたこともあります。

### チームのモチベーションを高めること

集団で作業を行う際に、チームメンバーのモチベーション維持も必要だと思います。私は、開発の目的を明確化したり、期限を予めはっきりさせておくことにより、メンバーに開発の意義を分かってもらったうえで、開発に臨んでもらうようにしています。

## SNS アカウント / 執筆した記事の URL など

- GitHub
- [github.com/Pugma](https://github.com/Pugma)
- X (旧Twitter)
- [x.com/Pugma_Tech](https://x.com/Pugma_Tech)
- bluesky
- [bsky.app/profile/pugma.tech](https://bsky.app/profile/pugma.tech)
- サークルブログ記事
- [trap.jp/author/Pugma](https://trap.jp/author/Pugma)
- paiza 様に寄稿させていただいた記事
- paiza.hatenablog.com/entry/2024/08/22/200539
- AtCoder
- [atcoder.jp/users/Pugma](https://atcoder.jp/users/Pugma)