Kazuya Imoto - Front-End Developer site.

ECサイト フルリニューアル開発（2023年07月 〜 進行中） | iine.jp株式会社

職種

フロントエンドエンジニア

役割

メンバー

業務内容

• 各ページの作成：コンポーネント設計やカスタムフックを用いて実装
• フォーム開発：React Hook FormとYupを活用した入力フォームの作成
• テスト実装： JestやReact Testing Libraryを使用したユニットテスト・結合テストの作成
• E2Eテスト：Playwrightを用いて重要なユーザーフローを網羅したE2Eテストの作成と実行
• コードレビュー：GitLab を活用し、チームメンバーと互いにコードをレビューし合い、品質向上とナレッジシェアを推進
• ジュニアエンジニアのスキル向上：OJTや勉強会を通して、社内エンジニア（ジュニアレベル）の育成を担当。コードレビューや開発プロセスの指導を行い、チーム全体のスキルアップを目指しました。

技術スタック

言語

TypeScript、HTML、CSS

フレームワーク・プリプロセッサ

Next.js、SCSS

テスト

Jest、React Testing Library（Unit Test、Integration Test）、Playwright（E2E）

API

GraphQL

バージョン管理

GitLab

デザインツール

Adobe XD

コミュニケーションツール

MatterMost、Jitsi

ECサイト内の特集ページ開発支援（2023年07月 〜 2024年08月）| iine.jp株式会社

職種

フロントエンドエンジニア

役割

テックリード

業務内容

• コードレビューの実施：Webデザイナーが作成したコードをレビューし、品質向上や技術指導
• コーディング規約の策定：チーム全体で一貫性のあるコードを保つため、BEM記法やJavaScriptのベストプラクティスを基に規約を作成
• PrettierとESLintの導入：自動フォーマットと静的解析ツールをプロジェクトに導入し、コードの統一性と可読性を向上
• 技術指導：Webデザイナーに対し、BEMやJavaScriptの実践的なスキルを指導。Gitの基本操作（ブランチ管理、コンフリクト解消、コミットメッセージの書き方など）を指導し、チーム全体でのスムーズなバージョン管理を実現

技術スタック

言語

HTML、CSS、JavaScript

プリプロセッサ

SCSS

バージョン管理

GitLab

コミュニケーションツール

MatterMost、Jitsi

販促品・ノベルティの制作なら名入れ印刷サイト｜ミコミル（株式会社AmidA）

職種

フロントエンドエンジニア

役割

メンバー

業務内容

• 各ページの作成：トップページから商品詳細ページまでのフロントエンドの実装。
• カート機能：UI・UX設計改善からフロントエンドの実装までを担当し、ユーザビリティの向上に貢献。
• CSS：CSS設計やレスポンシブ対応を含むコーディングを担当。
• 規約：コーディング規約を作成し、プロジェクト全体のコード品質向上を推進。
• パフォーマンス改善：サイト高速化の検証と改善を行い、パフォーマンス最適化を実施。
• 技術選定：開発における技術選定を担当し、プロジェクトの効率化とスケーラビリティを向上。
• チーム開発：デザイナーやバックエンドエンジニアと連携し、スムーズなチーム開発を推進。
• 開発手法：アジャイル・スクラム手法を用いて、1週間単位のスプリントで開発を進行。

技術スタック

言語

TypeScript、PHP、HTML、SCSS

フレームワーク

Laravel

テスト

Dusk

バージョン管理

BitBacket

デザインツール

Adobe Photoshop

開発手法

アジャイル開発/スクラム

コミュニケーションツール

Slack、Zoom

IDE

Visual Studio Code

タンブラー名入れ印刷販売サイト | 名入れタンブラー館（株式会社AmidA）

職種

フロントエンドエンジニア

役割

メンバー

業務内容

• コーディング：多端末対応を考慮した実装
• CSS設計・コーディング規約策定：BEMの導入、コーディング規約を策定してチーム内で統一
• 表示速度の改善：CSL・Core Web Vitals等のページ速度・ユーザー体験の向上
• デザイナー・SEOチームとの連携：UI/UX改善のためデザイナーと連携や検索結果向上の施策でSEOチームとの連携を実施
• リプレイス：動的コンテンツの追加やAPI連携のため、HugoからNext.jsへの再構築

技術スタック

言語

TypeScript、HTML、CSS

ライブラリ・フレームワーク

Next.js、Hugo、SCSS

バージョン管理

GitLab

開発手法

アジャイル開発、スクラム

IDE

VSCode

コミュニケーション

Slack、Zoom

ハンコヤドットコム ｜ハンコヤドットコム（株式会社AmidA）

技術スタック

言語

HTML、CSS、JavaScript、PHP

プリプロセッサ・CMS

SCSS、PowerCMS

バージョン管理

SVN

開発手法

アジャイル、スクラム

IDE

VSCode

コミュニケーション

Slack、Zoom

磁気ネックレスなど健康器具のECサイト | 株式会社コラントッテ

技術スタック

言語・ライブラリ

HTML、CSS、Javascript、jQuery

ツール

Atom、Gulp、Git、SourceTree、Photoshop CC、Illustrator CC

Craftsmanship 職人の技能・技巧 | 株式会社コラントッテ

技術スタック

言語・フレームワークなど

HTML、CSS、Javascript、jQuery

青山学院大学 陸上競技部（長距離ブロック）インタビュー特集ページ | 株式会社コラントッテ

技術スタック

言語・ライブラリ

HTML5、CSS3、Javascript、jQuery

ほいコレナビ | ベルサンテスタッフ株式会社

技術スタック

言語・ライブラリ

HTML、CSS、Javascript、jQuery、PHP、MySQL

ほいコレナビ 教えてinfo | ベルサンテスタッフ株式会社

技術スタック

言語・ライブラリ・CMS

HTML、CSS、Javascript、jQuery、WordPress

ツール

Dreamweaver CS6、Illustrator CS6

ほいくのコレカラ あうあうあう | ベルサンテスタッフ株式会社

技術スタック

言語・ライブラリ・CMS

HTML、CSS、Javascript、jQuery、WordPress

IDE

Dreamweaver CS6

ほいくコレクション | ベルサンテスタッフ株式会社

技術スタック

言語・ライブラリ・SQL

XHTML、CSS、Javascript、jQuery、PHP、MySQL

IDE

Dreamweaver CS6

Lunch Maps | 個人開発

技術スタック

言語・フレームワークなど

Next.js、React Hooks、グローバルステート(useContext)、TypeScript、Emotion

IDE

VSCode

API

GoogleMapsPlatform（Maps JavaScript API、Places API、Directions API、Geocoding API）/ GeoLocation API

データベース

FireStore

ユーザー認証

Firebase Authentication

ホスティング

AWS Amplify

モックアップ

Figmaへ移動します

GitHub

https://github.com/imoto-rec-git/lunchmaps

Weather Wear | 個人開発

技術スタック

言語・フレームワークなど

Next.js、React Hooks、TypeScript、Emotion

IDE

VSCode

API

Weather Forecast API、GeoLocation API

ホスティング

AWS Amplify