page icon

水野 廉也

自己紹介

Webアプリの開発とかしたり、ざわざわしたりしたりしているめろたんです! 写真をとったりするのが好きだったりします。

キャリアサマリー

株式会社SCC SE 株式会社Misoca エンジニア 株式会社キャスター エンジニア 株式会社YOUTRUST エンジニア
 

YOUTRUSTの好きなところ

常に全力なチーム!
そしてメンバーやその家族を大事にするという考えがあるのがいいところだな~と思っています!
 

記事

  • Tech Blog
ユーザーの詳細ページをリニューアルした件 - YOUTRUST Tech Blog
こんちはめろたん( YOUTRUST / Twitter)です。 最近、住んでる地域の近くに温泉( 尾張温泉っていうところ)があることを知って、楽しくなって行ってきた結果、帰り道が土砂降りでもうなにもかも終わりになってました。 はい。 そんななかYOUTRUSTはWebのPC版だけですが、とある画面が8月にリニューアルされました!! 🎉WebPC版のマイページをリニューアルしました🎉 いつもキャリア SNS「YOUTRUST」をご利用いただきありがとうございます! WebPC版のマイページのデザインが変わり、よりユーザー様のキャリアが伝わりやすくなりました👏 この機会にプロフィール更新をしてみませんか? https://t.co/zyIiqjrFwB pic.twitter.com/t6BT00UT8c - YOUTRUST(キャリア SNS) (@YOUTRUSTinc) 2022年8月4日 ということで、今回はYOUTRUSTのユーザーの詳細ページ(PC版のみ)をリニューアルした話を、ちょっと自分の振り返りというのも含めてしていこうかな~とおもいます! そもそもなんでリニューアルしたんじゃいという話なのですが、 この4年間ほど数々の試行錯誤や仕様変更に対して、 リファクタリング 工数が中々取れなかったため様々なスタイルや コンポーネントなどが誕生していて、 理想とするユーザー体験・情報設計の実現や開発効率・プロダクト品質そのものに悪影響が出てきていました 。 そのため、ここいらで本腰を入れて理想の形に近づける活動ができないと、今後もズルズルいってしまってどんどん理想的な体験・設計がしづらくなっていくし、開発体験としてもよろしくない方に流れていってしまうな~と考え 『ガッとやるぞ!』 というので始めました! 今までは、 コンポーネント の作り方等々が明確に定まっていなかったというのがあったので、そこから決めていくことにしました。 まず LADR *1を書き、リニューアルにかかわるコ アメンバー で各構成についてをレビュー等々し設計方針を決めました。 その方針にそって ディレクトリをつくり各 ディレクト リにREADMEを配置し、ここは何を置く場所でどう作っていくのがよいとされているか等も書いていきました(そんなに大量の文章ではないですが...ないよりマシ程度)。 実際にどんな感じにしたかというと、 v2 ---- dove # 後述しますが、弊社のデザインシステム的なもののコンポーネント等々を格納している場所 `-- app ---- components # 各画面で使う共通のコンポーネントを配置する |-- scenes # 各場面のコンポーネントを配置、またその画面内でしか使わないコンポーネントを配置する |-- hooks # 各コンポーネントで使えるカスタムフック、例えばAPIを叩くためのカスタムフックとかを配置する `-- helpers # いわゆるutil的なものを配置する こんな感じです。 これは実際によく使っているところだけを抜いてきています。 LADRで決めたものとしては他にもあるのですが、現状うまく使えていないのでどうするかは引き続き考えていかねばならんなとなっています。 リニューアルする上で、 ただ「キレイにするぞ!」だけだと、 今までの開発と同様に都度コンポーネントを作る等々になってしまい、 結局今まで通りの問題が起きうる ためデザインシステム的なものをちゃんと作ってコードとしてちゃんとつくろうというのを実行しました。 そしてできたデザインシステム的なものの名前はDove(ダブ)です。白い鳩とかそういう意味っぽいですね。 (どうでもいい情報ですが、このDoveという 命名についてですが、かつてYOUTRUSTには「ぽ太郎」というキャラ*2 が存在しており、そこから「鳩」をどっかで使えないかみたいなアレからきています。またキレイにするぞ!という意味をこめて「白い鳩」を指すそれにしたみたいなところもあります。) これについてはいずれ SmartHRさん のように公開できるとよいなと考えておりますので、時期がきたらまた公開とブログとかを書ければなと考えております! ともかく、できる限り同じ コンポーネント・スタイル等を再生成し続けるのは避けねばならぬと考え、リニューアル作業を全力ではじめるぞ!となる前に、デザイナーと共同で最低限必要な低レベルな コンポーネント ...
実はYOUTRUSTのChrome拡張つくっていた件 - YOUTRUST Tech Blog
こんちは!めろたん( YOUTRUSTアカウント, Twitterアカウント)です。 最近は忍者の本を買いました。 youtrust.jp 忍者になるために頑張りたいと思います。 はい。 みなさんご存知だとは思うのですが、ちょいちょい前にYOUTRUSTの Chrome 拡張をだしていました! もちろん皆さんいれてますよね! 入れてない人はいれてね!!!!!! 一応入れていない人に説明しておくと、 パッと思い浮かんだこととかをかんたんにすぐYOUTRUSTに投稿できる!というコンセプトの拡張になります~。 ページ内に引用して投稿したいサムシングがあれば、そのテキストを選択した状態で拡張を開くと みたいな感じでURLと引用した文字が入った状態で投稿の画面が開いたりするとかそういう機能もあったりします! \\!便利!// ということで今日はこれをどう作ったかとか、そういう感じのことを書いていこうと思います! Chrome拡張はまあ Chromeを拡張するソフトウェアというか プラグイン というかそういうやつですね。 HTMLと CSS とJSでかけるのでwebエンジニアには親和性が高くて開発しやすいかと思います。 いろんな拡張がありますが、 が個人的にはめっちゃ好きです。 なにか特別すごいことをしたいわけでもないので作りはとてもシンプルです。 投稿の画面には React を使用しています。 create-react-app で適当に作りました。 npx create-react-app my-app で React のプロジェクトがつくれるのでこれで概ね完成っすね()。 あとは「これは Chrome拡張だよ~」としらせるために manifest.json が必要なのでそれを public 配下に追加します。 今回はポップアップで画面を表示したいので、 manifest.json に を追加します。 こうするとなんか表示されるはずです。
 
  • 入社エントリ