僕は努力しない自分は嫌いだ
- 名前
- 原田 礼 (Rei Harada)
- 所属
- 株式会社モノサス
- 役割
- アクセシビリティアドボケイト、エンジニアリングマネージャー、フロントエンドエンジニア、テクニカルディレクター、etc.
- 居住
- 東京
- 家族
- 妻・長男（12歳）・長女（8歳）
スキルセットとベースライン
- HTML
- マシンリーダブル、A11y、Divスープさせないマークアップを意識する。jsレスな新しい要素を積極的に使用する。カスタム要素を使用し静的HTMLでも宣言的なUIを実現する。ブラウザの読み込みを考慮しユーザビリティを高める。
- CSS
- postCSSをすこしだけ、変数、@layer、css-nestなどモダンCSSで構築する。CSSフレームワークもSASSなどのレガシープリプロセッサーも必要が無いことを体現する
- JavaScript
- browserに配信されるスクリプトは宣言的に記述する。状態の変化にはクラス属性よりもaria属性など意味合いのある属性を操作する。単一責任、YAGNIで開発する。Web Componentsが好き
- 開発手法
- DXを意識し、「ファイルは可能な限り細かく、可能な限り少なく、可能な限り短く」というスタンスで開発する。高速なビルド時間と低依存な開発環境を構築する。
- TypeScript
- NodeJS、browserJSどちらもTypeScriptを使用する。
- GenerativeAI
- 15分を20秒に、1週間を30分にするために使用する。
- マネジメント
- 自分自身が今どこを向いているのかをチームへ伝え続ける。（その上で）メンバーの判断を尊重する。
- コミュニケーション
-
知っていることをすべて伝える。ローコンテクストに徹する。良くないものは良くないと伝える努力をする。
人々があなたがどのように言っているかではなく、何を言っているかに集中できるようにする
「必要な時に必要な場所へ必要なものを必要なだけ」
「コーディングによって自分ではなく顧客の課題を解決する。」
事例
- 中規模サイト構築
- フロントエンド歴４ヶ月程度のジュニアエンジニア4人とともにWCAG AA対応の700p超え大学webサイトを構築した。Next.js + Story bookの組み合わせから静的HTMLを生成しCMSへ投入。実装についてはジュニアメンバーのフォローアップに徹し、環境構築、基本設計、コードレビュー、スケジュール管理・顧客とのコミュニケーション部分を担当した。
- 運用スリム化
- 1000ページ超えのLPについて、コピペでページを複製し続けていた運用から、管理下のexcelファイルからAPIデータを生成し汎用ページ1枚に集約。API化する際にexcelの表記ゆれに対してバリデーションをかけデータの品質を担保しヒューマンエラーを抑止。
その後の作業時間について、コーディングは0に、リリースまでに関わるコミュニケーションも1/6に削減した。 - 既存サイトアクセシビリティ改善
- 800p超えの既存サイト（築14年くらい？）のマークアップ調整。Siteimproveから項目と対象を抽出しスコア改善。
- 既存サイト高速化
- 静的資材で構成されている既存サイトの高速化。lighthouseをバッチで回し次世代規格に更新すべき画像の一覧を作成。画像の読み込み調整、スクリプトの遅延読み込み、不要スタイルの削除を行った、計測関連含むサードパーティースクリプトにより本番環境では少しの改善になってしまったが、開発ドメインではlighthouseのパフォーマンスにてモバイル90点超えをおおよそのページで達成した。
- E2Eテストによる運用品質改善
- 保守運用業務にて、修正及び更新依頼部分については「実装者→ディレクター→品質管理チーム→クライアント」と4段階で人の目が入っていたが、複数ページの同時修正などで「修正すべきではない箇所」が誤って修正されてしまったことを検知できなかった。
0ベースからE2Eテストのフローを新規開発し、ビューベースで変更差分が発生している部分に目印を付けた状態でキャプチャを取得しテキストレベルで何件の差分が発生しているかのレポートを提供するように改善した。 - 中〜大規模サイトへのデザインシステム導入
- デザインシステム導入に伴うワークフローの改修とドキュメント全般を制作。ページデザインからコンポーネントを抽出しコンポーネントの意味と使用方法を定義した。デザインシステムでは、企画→デザイン→実装の直列な制作フローではなく、並列した「コンテンツ（企画）」と「ディスプレイ（デザイン）」をフロントエンドで結合させることが重要であるため、PJ内でフロントエンドエンジニアの再定義を行った。