三輪俊太郎

概要

すでに運用されている大規模Webサービスのフロントエンド部分の実装・オフショアメンバーが制作したものの品質管理。

チーム情報

• PL: 1人
• ディレクター: 8人
• フロントエンドエンジニア: 1人
• オフショアディレクター: 2人
• オフショアエンジニア: 5人
• バックエンド部分の開発を行う他会社様

担当役割

フロントエンドエンジニアとして参画し、以下を担当しました。

• 共有された仕様書を元にディレクターと相談しながら実装方法の検討
• ディレクターが作成したワイヤーフレームを元に実装観点で懸念がないかのレビュー
• オフショアディレクターと連携して、仕様の相談
• オフショアエンジニアが作成したコードのレビュー
• ワイヤーフレームをもとに詳細設計書の作成
• 実装されたものが適切に動くかのテストを行うための項目書の作成
• 別会社で作成しているAPI仕様書を元に、APIが適切に画面側として設定を行うことができるかレビュー
• 本番リリース対応

使用技術

• React.js
• TypeScript
• Storybook
• Jest
• SCSS
• Atomic Design

課題

以下のような課題があり、プロジェクトにアサインに至った。

• 今まで業務委託の方がメインで担当していた日本側での「フロントエンドエンジニア」の領域を、正社員の人でも行うことができるように体制強化。
• 業務委託で参加されていた「フロントエンドエンジニア」の方がReact.jsについて詳しいわけではなかったため、React.jsでの実装部分の詳細を知りたい場合、オフショアメンバーに調査を依頼するしかなかったため、スピード感がない状態になっていた。

取り組み

1. React.jsで稼働しているアプリケーションに対して、コードの品質を担保することができるようにJestを用いたスナップショットテストを行うことで想定外のページ・コンポーネントの変更を検知することを可能にしたり、Storybookを用いてコンポーネントベースでも見ることができるようにすることでエンジニア視点での品質担保はもちろん、ディレクターの方がワイヤーフレームを作成する際の効率化やコンポーネントを修正したことによるを想定外のエラー発生件数を0件にすることを達成できました。
2. 本番リリース対応の際に、エンジニアが1人だったためディレクターの方に見てほしい観点・Gitの操作方法を共有することで、レビューを行うことができる環境を作成したことで品質担保できるように取り組み、本番リリースのミスを0件にすることを達成できました。

工夫した点

1. オフショアメンバーが英語でのコミュニケーションだったため、自分も英語を学習することでオフショアディレクターとの会話のみではなく、日本語がわからないオフショアエンジニアとのコミュニケーションもチャットでスムーズに行うことを心がけました。
2. ディレクターから実装観点の相談をされた際に実装観点のみだけではなく、ディレクターの方に伝わりやすくするためにユーザーの使いやすさの観点から意見を言うことで、よりよいユーザー体験を提供することができるように心がけました。

概要

コーポレートサイト作成にあたり、TOPページをメインとしたフロントエンド領域のインタラクション実装を担当しました。

チーム情報

• ディレクター: 1人
• デザイナー: 3人
• フロントエンドエンジニア: 6人

担当役割

フロントエンドエンジニアとして参画し、以下を担当しました。

• デザイナーが作成したインタラクションを元にwebサイトに実装
• TOPページでMicro CMSの連携が必要な箇所があったため、MicroCMSとの接続（MicroCMSの構築自体は別の人が作成）

使用技術

• Adobe XD
• After Effects
• Next.js
• React.js
• TypeScript
• Micro CMS
• Atomic Design

課題

以下のような課題があり、プロジェクトにアサインに至った。

• 以前制作されてから年月が経過していたため、リニューアルを行うためにプロジェクトが開始された。
• 記事周りの領域を実装するメンバーとコンテンツ領域を実装を行うメンバーはアサインされていたが、インタラクション領域を実装メンバーがアサインされていなかった。
• TOPページのインタラクションがWebサイト全体の世界観に影響してしまうため、デザイナーやディレクターと密接に関わりながら実装を行う必要があり、インタラクション専任で実装を行う人が必要だった。

取り組み

1. Next.js + TypeScriptで動作するWebサイトで、パフォーマンスを意識したインタラクション実装。開始から終了まで決まっているアニメーションについてはCSSアニメーションを使用し、パララックスやユーザーの動作に応じて動作させる必要があるものについてはCSSのみでは実装を行うのが難しいため、GSAP等を用いて開発することで個人の生産性の向上を行いました。
2. インタラクションの細かな調整・検討を行うためにlil-guiを用いてデザイナーやディレクターの方がエンジニアの知識がなくても触りやすいように実装しました。この方法によって、細かな秒数の調整や検討をスムーズに行えるようにしたことでタイトなスケジュールでもチームとしての認識ずれををなくして品質向上を担保することができました。

工夫した点

1. 従来ではインタラクションの細かな調整・検討を行うためにlil-gui用いらずにデザイナーやディレクターの方と会話をしながら行なっていたため、全員の予定を合わせる必要があったが、lil-gui用いることで細かな調整については各々で確認・チャット上で行うことで全員の予定を合わせて認識合わせをする回数を減らすことを心がけました。
2. TOPページのインタラクションをメインに下層ページにも同様のインタラクションを用いる必要があったため、React.jsでのコンポーネント化を行い共通化できる部分については共通化することで複雑なインタラクション部分の導入をスムーズに反映することでタイトなスクジュールの中でも品質を担保することができました。

概要

既存のWebアプリをフルリニューアルする必要があったため、行なったプロジェクト。

チーム情報

PL: 1人
ディレクター: 3人
デザイナー: 2人
システムエンジニア: 4人
フロントエンドエンジニア: 5人

担当役割

フロントエンドエンジニアのテックリードとして参画し、以下を担当しました。

• Next,js(アプリケーション部分) + React.js(コンポーネント部分)の切り分けのため、 Nx(monorepo)を使用して、0から環境を構築
• コードレビュー・実装のフォロー
• 「システムエンジニア」が作成した仕様書・「ディレクター」が作成したワイヤーフレームをもとにページの実装
• デザイナーと協力してコンポーネントが提供する機能の仕様作成・コンポーネントの分類

使用技術

• Next.js
• React.js
• TypeScript
• Nx(monorepo)
• React Hook Form
• Yup
• SCSS
• ESLint
• Stylelint
• Prettier
• Atomic Design

課題

以下のような課題があり、プロジェクトにアサインに至った。

• 長年運用されていたWebサイトのため、レスポンシブデザイン等にはなっておらずスマートフォンユーザーに対して適切なUIが提供されていない事象になっていた。
• フロントエンド周りが昔の技術から変更がされていなかったため、ページのパフォーマンスや状態管理、インプットの使い勝手などフロントエンド部分の最適化がされていない状態になっていた。

取り組み

1. フルリニューアルにあたって、フォーム周りの状態管理やSEO、コンポーネントベースでの開発ができるようにフレームワーク + SSR環境にすることができるようにNext.js + React Hook Form + Yupを採用することでユーザーの入力したフォームの最適化やページのパフォーマンスの最適化を行いました。
2. CMS周りで運用されているページも存在したため、HTMLを生成し、CMS領域に反映する必要があったため、Next.jsとは別にReact.jsの環境のアプリケーションについても環境を構築することでコンポーネントはNext.jsのものと統一化することで開発効率が落ちることなく生産する環境を作りました。
3. ESLint, Stylelint, Prettierを導入することで、コードのフォーマットや記載ルールを意識することなく機械側で確認・修正を行うことができるようにすることで、品質担保・スピード感の両方を行えるようにしました。

工夫した点

1. Next.js, React.jsで別のアプリケーション上で同じコンポーネントを使用するためNx(monorepo)を利用しました。このようにすることで1つのリポジトリ上で管理を行うことができるため、アプリ間でのバージョン差異等を発生させないことで品質を管理しやすいように心がけました。
2. 新しく入ったメンバーや海外で働いているメンバーもいたため、コードのフォーマットや記載ルールのドキュメント等を作成するよりもESLint, Stylelint, Prettierを用いて機械ができることを機械に任せることでレビューコストの削減を行うことができるように心がけました。これにより、品質担保・スピード感の両方を同時に行うことができました。

概要

SESとして、お客様先に出向。
出向先のSP TOPサイトにて、Sitecore + jQueryを使った現状のシステムでCore Web Vitalsのスコアが悪い状態だったため、jQueryからNext.jsにリプレイスを行なったプロジェクト。

チーム情報

[リプレイスプロジェクト]

• PL: 1人
• PM: 1人
• フロントエンドエンジニア: 5人

[デザインシステム構築プロジェクト]

• PL: 1人
• PM: 1人
• デザイナー: 1人
• エンジニア: 3人

担当役割

フロントエンドエンジニアとして参画し、以下を担当しました。

• Next.jsを使用した環境構築
• jQueryで実装されていた実装部分を調査し、React.js + TypeScriptにリプレイス
• デザインシステム構築のため、構築方法などのアドバイス・レビュー

使用技術

[リプレイスプロジェクト]

• Next.js
• React.js
• TypeScript
• Storybook

[デザインシステム構築プロジェクト]

• HTML
• SCSS
• JavaScript
• Gulp
• Storybook

課題

以下のような課題があり、プロジェクトにアサインに至った。

[リプレイスプロジェクト]

• ユーザーからのアクセスの多いスマートフォン版のページにて、改修前はCMSで運用されておりCore Web Vitalsのスコアが類似サービスと比べて悪い状態になってしまっていた。
• jQuery + Sitecoreで制作されている状態のため、新しいフロントエンドエンジニアの採用をしようとした時に採用しずらい状態になってしまっていた。

[デザインシステム構築プロジェクト]

• 社内で改修を行う際に毎回独自で定義をしていたため、同じUIでもページの箇所が違うとUIが変わってしまったりしていた。一例として、ボタンUIの高さやフォントサイズがページごとに異なってしまっている状態だった。

取り組み

[リプレイスプロジェクト]

1. アプリがReact Nativeで運用されており、チーム移動があったとしても学習コストを少なく運用することができたり、React.jsを用いた求人も多数存在しているなどReact.jsを用いることに懸念点はなかったため、React.jsを使用してリプレイスを行うのと、SSRで構築を行うことでSEO・ページパフォーマンスが適切になるようにNext.jsを使用することをチームで決めました。

[デザインシステム構築プロジェクト]

1. Next.jsで運用されているWebサイトとJavaベースのWebサイトの2つで運用することができるデザインシステムを構築する必要があったため、HTMLとCSS、JavaScriptを用いることでCSSとJavaScriptはページ全体に配置し、HTMLはデザインシステムチームから提供されているものを用いることができるようにチームで決めました。これによって、フロントエンドに詳しい人でもそうでない人でも安定したUIの作成を達成することができました。

工夫した点

[リプレイスプロジェクト]

1. 技術スタックについて継続して運用がされている、インストール数が多いパッケージを使用することで社内独自の設定にならないように選定の際にはチーム全員に共有・レビューをされることをチームとして努めました。
2. UIの統一についても同時進行していたため、パフォーマンス観点ではチーム全体として運用していくことで品質担保で行い、UI観点では「リプレイスプロジェクト」と「デザインシステム構築プロジェクト」を兼任しており、HTML, CSSともに詳しい自分が主導して品質担保を行なっていくことでリプレイスプロジェクトで大きな問題が発生することなくリプレイスに成功することができました。
3. 上記の結果、より良いユーザー体験を提供しプロジェクトとしても成功させることができ、会社としてのプロジェクトでの表彰も受けました。

[デザインシステム構築プロジェクト]

1. デザインシステムの実装者がHTML, CSSに詳しい人でなかったため、制作が慣れていない人でも品質担保できるように積極的にHTMLでのマークアップの方法やCSSでの実装方法を共有することで安定したUIの提供を行うことができるように努めました。
2. HTML + CSSベースの環境でもコンポーネントベースでUIの確認を行うことができるようにStorybookの使用を提案を行うことで取り入れることができた。また、作業者が別の人だったため、自分が以前記載したQiitaの記事を共有することでスムーズに実装を行うことができるように努めました。
   • 自分が以前記載したQiitaの記事: https://qiita.com/miwashutaro0611/items/f011c291f5ecc8c4996d
3. 上記の結果、大手webサービスのデザインシステムとしての提供しプロジェクトとしても成功させることができ、リプレイスプロジェクトと同時に会社としてのプロジェクトでの表彰も受けました。

概要

フォームの入力を行うサイトで入力項目が多数・複雑になっており、またWebサイトのアクセシビリティにも担保を行う必要があったため、フォームの入力を行うサイトとは別で新規制作を行なったプロジェクト。

チーム情報

• ディレクター・プランナー: 3人
• デザイナー: 2人
• フロントエンドエンジニア: 2 - 6人

担当役割

フロントエンドエンジニアとして参画し、以下を担当しました。

• Nuxt.js + Vue.jsを使用したコンポーネントの実装
• tailwind cssを使用したUIの作成
• リリース作業

使用技術

• Nuxt.js
• Vue.js
• JavaScript
• SCSS
• ESLint
• Prettier
• GitHub
• AWS

課題

以下のような課題があり、プロジェクトにアサインに至った。

• フォームの入力を行うサイトで入力項目が多数・複雑になっており、また常に新しい情報・使い方などを発信しなければならないため、別でフォームの入力を行う上での注意事項・最新の情報を提供するWebサイトの制作することになった。
• Webサイトの仕様上、「JIS X 8341」への準拠が含まれていた。

取り組み

1. Nuxt.jsで稼働するWebページ上で、追加されるコンテンツをどのようにコードを記載すれば、他のコンテンツに移動を行いやすいかを考え、Atomic Designを取り入れStorybookでUIを確認できるようにチームとしてコンポーネントの開発を行いました。結果別のページにUIを反映する際に同じUIを制作することなくスムーズに開発でき品質・スピード感の両方を担保できました。
2. Webアクセシビリティの対応を行うために、WAI-ARIAの定義・マウスのみではなく、キーボードでの操作を行うことができるように開発しました。結果「JIS X 8341」の内容を満たしてユーザーに対してより使いやすいようにチームとして取り組みました。

工夫した点

1. 同じような機能（動きは同じ・スタイルは違う）の場合一つのVue.js内にtemplate, script, styleの3つを入れているため、他の部分に移植・template, styleの変更をしても大丈夫なようにコンポーネントを設計することで、コンポーネントを移植しやすいように心がけました。結果、タイトなスケジュールの場合でもスケジュールの遅延を発生させることなく実装を進めることができました。

概要

フロントエンドでの技術のアプトプットや使用したことのない技術の検証を行う場所として個人ブログの運営。
こちらは趣味で行なっている個人プロジェクトになります。

個人で制作したWebサイト:
https://witman.vercel.app

個人で制作したWebサイトで行ったことについて:
https://note.com/jackblog/n/n92693b0d61ba

チーム情報

1人

担当役割

企画から運用まで全て1人で行いました。

使用技術

• React.js
• Next.js
• TypeScript
• Emotion
• Storybook
• Atomic Design
• ESLint
• Stylelint
• Prettier
• CircleCI
• Vercel

課題

以下のような課題があり、プロジェクトにアサインに至った。

• 2019年3月より、インプットのみではなくアウトプットをする場を作成するため、はてなブログにて個人ブログの開設。月1回のペースで更新を行なっています。
  • はてなブログ: https://jackswim3411.hatenablog.com/
• 2021年10月より、最新の技術について記事をアウトプットするだけではなく自分でプロダクトを制作した方が学習になると考え、「Qiita, Zenn, Note, はてなブログ」を1つのWebサイトで見ることができるように個人でWebサイトの制作。
  • 個人制作ブログ: https://witman.vercel.app

取り組み

1. 個人で運用を行うためなるべくお金をかけないで運用すること・SEOでも上位を取りやすいように記事については自分で0から構築するのではなく、各種サービスを利用することで両方を担保するようにしました。
2. 当時使用したことのなかったReact.js, Next.jsを用いることで実務レベルで使用できるようにする、コードレビューを行なってくれる人もいなかったため、LintやCircleCI等を利用した。
3. 上記を行うことによって、普段の業務では行うことができていなかった最新の技術について触れる・新しいWebサイトを立ち上げる上で必要なことを学ぶことができました。その結果、実務面でも実装部分のみではなく、全体を見ながら動くことができたり品質担保についても活かせました。

工夫した点

1. React.js, Next.jsなどの自分が今まで触ったことのない技術に触れることや、メジャーパッケージがアップデートされる度にアップデートの対応を行うことでパッケージの変更点・懸念点を知ることで、実務で同じ作業を行う際にいち早く活かせる環境になるように努めました。
2. 個人で開発を行なっているため記事が更新されたタイミングで手動ではなく自動でデプロイ作業を行いたい & ページのスピードを優先させたかったため、SSG + 1日1回ビルドさせることで不要なサーバーとの通信を無くしつつ最新の状態を見ることを成功したり、ホスティングサービスについてもNext.jsと相性がよく無料で利用することができるVercelを用いることで、運用フローについても軽減させることに成功しました。
3. 上記を行うことによって、企画から運用まで全てのフローでどのように動いたら良いのか実務での活かすことに成功しました。