400万人が利用するビジネスSNS
フロントエンドエンジニアの姫野暁登です。 エンジニア歴は約4年で、最初の2年はWordPressでの制作を中心に50サイト以上を納品し、その後 Vue / Nuxt.js、React / Next.jsを軸にしたWebアプリケーション開発に移りました。
バックエンド、インフラ、セキュリティ等を学びフルスタックに業務に貢献できるエンジニアになりたい。 AI時代で簡単にWeb・スマホアプリが作成できるようになったが、だからこそ基礎を大事に学んでいきたい。
開発メンバーとして参画 【言語】TypeScript / Python 【FW】Vue / Django [詳細] 1️⃣【データ前処理システムのフロントエンド・バックエンド開発】 分析系Webアプリケーションの中核機能であるデータ前処理システムにおいて、Vue 3を用いたノードベースのエディタUIの改修・機能追加を担当しました。 ノードタイプごとのバリデーション機能の構築やデータ取り込み機能の実装、ファイルアップロード機能の再設計など、フロントエンドだけでなくバックエンド(Django + Python)側の開発にも取り組みました。 2️⃣ 【可視化機能の改善とUI品質向上】 Vue 2ベースの分析プラットフォームにおいて、各種チャートの統計可視化機能の改善を実施しました。 テキスト省略時のツールチップ表示やスクロールバーのクロスブラウザ対応など、細かなUI/UXの品質向上にも取り組みました。 3️⃣ 【画像処理機能の改修】 画像処理サブシステムにおいて、権限周りの表示調整や画像編集機能の挙動修正などの改修対応を行いました。 4️⃣ 【定例進行の担当によるプロジェクト運営への貢献】 テックリードの負担軽減を目的として、お客様との定例会における司会進行を担当することを提案し、実際に進行役を務めました。 開発業務に加えて、プロジェクト運営の面でも貢献しました。 5️⃣ 【インフラを含む大規模ドキュメント整備】 プロジェクト内でドキュメント整備が十分に進んでいなかったため、フロントエンド、バックエンド、インフラに関する技術ドキュメントやアーキテクチャ図、API仕様書を体系的に作成しました。 チーム内でキャッチアップしやすい環境づくりに取り組みました。
フロントエンドエンジニアとして参画 【言語】TypeScript 【FW】Next.js 15(React 19)/ NestJS 11 【DB】PostgreSQL 14 【ORM】Prisma [詳細] 1️⃣【チャットUI・主要画面のフロントエンド開発】 メッセージングプラットフォームと連携したAIチャットアプリにおいて、 フロントエンドエンジニアとしてチャットUI(リサイズ可能なパネルレイアウト、 日付ピッカー、AI/手動モード切替など)、ログイン画面、エラー画面、 通知バッジ、検索機能(カナ対応)などの主要機能を実装しました。 2️⃣ 【管理画面の実装およびDB設計】 管理画面(ユーザー一覧、クライアント一覧)のUI実装に加え、 管理者用テーブルの設計やマイグレーションの作成など、DB設計にも取り組みました。 3️⃣ 【バックエンド・テスト領域への貢献】 フロントエンド業務に加えて、NestJSによるバックエンドのサービスロジック実装や ユニットテストの拡充にも取り組みました。 フロントエンド以外の領域にも積極的に手を広げ、開発チーム全体への貢献を意識しました。 4️⃣ 【フロントエンド基盤整備】 Tailwind CSSのバージョンアップ対応や、Biomeによるコード品質管理の統一、OpenAPIからのコード自動生成ワークフローの活用など、開発基盤の品質向上にも貢献しました。 5️⃣ 【ドキュメント整備の推進】 社内ドキュメントが十分に整備されていなかったため、 非エンジニアでも理解しやすい内容を意識してドキュメント作成を進めました。 その取り組みについては、PMよりスプリントの区切りで直接評価をいただきました。
フロントエンドエンジニアとして参画 【言語】TypeScript / JavaScript / HTML / CSS 【FW・ライブラリ】 Nuxt 3 / Vue 3 [詳細] 1️⃣ 【Spring Boot(Java)で構築されていた既存システムを、フロント部分のみNuxt.jsへリプレイスする案件】 UI担当は私1名のみで、Nuxt.js の初期構築からアーキテクチャ検討・実装まで一手に担当し、大規模な機能拡張が想定されていたため、状態管理にPiniaを採用しました。 たまにバックエンド担当者が手伝ってくれることもあったため、GitLabのWikiを整備し、バックエンド担当者が参画しやすいようドキュメントを充実化しました。 2️⃣ 【デザインが特に存在せず、既存システムをベースに「いい感じ」に調整して実装】 基本デザイン面に関しては既存システムを踏襲とのことでしたが、ホームページ制作の経験からボタンの押下時の動きにちょっとしたアニメーションを追加や、APIのレスポンス待ちの際のローディング追加など、ユーザー目線も配慮した「いい感じ」のデザインを積極的に提案しました。(もちろん工数がかからない最小限のアニメーションです。) 3️⃣ 【UIメンバーが追加されてからは自然と UI チームのリーダー的ポジションに】 開発当初から仕様書が存在しないプロジェクトだったため、システムの画面を触りまくったり、Javaのコードを読み解きながら仕様を整理して、スムーズな情報共有を目的に、ドキュメント整備を業務後に少しずつ作成していきました。 4️⃣ 【自身が担当した範囲】 Nuxt.js + Piniaベースのフロントエンド開発・アーキテクチャ構築 UIデザインのブラッシュアップと実装 Java(Spring Boot)との連携部分の仕様調査・設計書作成 GitLabのWiki充実化、およびチーム内ドキュメンテーション推進
1️⃣ 【50を超えるサイト構築と作業効率化への取り組み】 WordPressを中心に、これまで50以上のホームページを手掛けてきました。 案件ごとにgulp導入して作業フローを最適化し、GSAPを活用した今風のアニメーション表現も積極的に取り入れてきました。 2️⃣ 【BEM を活用した予測・保守・再利用・拡張性の高い CSS 設計】 コーディングの際には BEM を用いた CSS 設計を徹底し、大規模なページ数の案件においても保守性と拡張性を両立。 ページ数が約50ページに及ぶプロジェクトでも、ひとりで予測しやすく再利用がしやすいコードを心がけて仕上げてきました。 3️⃣ 【カスタムフィールドによる運用管理のしやすさ】 WordPress サイトでは、カスタムフィールドを活用して管理画面の操作性を高め、サイト管理者がストレスなく更新作業を行えるよう配慮してきました。 4️⃣ 【短納期案件への柔軟対応と継続依頼の獲得】 スケジュールが厳しい案件では、必要に応じてフリーランス仲間をディレクションしつつ、 自身もコーダーとして稼働することで、納期遅延を起こさずに対応してきました。(納期遅れは絶対に起こさないです。) 基本的にホームページ制作は請負契約ですが単発で終わらず、私に依頼をくださった制作会社は100%継続して依頼してくれていました。 私自身それほどコーダーとしての技術が高いというわけではないのですが、 【相手の仕事を如何に無くして楽をさせるか】を徹底的に考える姿勢があったから技術力がそこまで高くなくても継続的にご依頼があったのだと考えております。
HTML + CSS
JavaScript
jQuery
WordPress
Vue.js
企業からスカウトをもらいましょう