…アをしている鳥山（@pvcresin）です。 4月に函館で行われたRubyKaigi 2026に、Eightのエンジニア数名で参加してきました！ 参加したメンバー 今回は、それぞれの視点から感想や印象に残ったセッションをご紹介します。 目次 鳥山 平石 間瀬 まとめ 鳥山 RubyKaigiへの思い RubyKaigi参加は、沖縄・松山に続き今回で3回目です。Rubyの今後の方向性や最新トレンドを多角的に学びたいと思い、参加しました。特にRubyの型やRailsのView層、…

…アをしている鳥山（@pvcresin）です。 中華料理のお店で小籠包を食べる時によく出てくる黒酢（鎮江香醋）に最近ハマっていて、自宅でも愛用しています。 酸味と香りのバランスが絶妙で、焼売や餃子、炒め物にもオススメです。見かけたらぜひ。 さて今回は毎年恒例の「Eight LT」について、会の設計と今年の様子を紹介します。 Eight LTとは その名の通り、Eightを開発するエンジニアメンバーで集まってLT（Lightning Talk）をする会です。 エンジニア組織内での…

…アをしている鳥山（@pvcresin）です。 先日、スポーツサンダルで炎天下を散歩したのですが、日焼けで足の甲がシマウマみたいになってしまいました。 足にも日焼け止め塗った方が良いかもしれません。 さて今回は、RSpecのテストコードを元にRubyのメソッドの型（sig）を自動生成した話をしたいと思います。 ※ 本記事はOmotesando.rb#112での発表資料を元に加筆修正したものです。 目次 背景 当初検討した方法 RubyKaigiでの追い風 Eightでメソッドの…

…井上 平石 鳥山(@pvcresin) 菅間(@sugamaan) 井上 RubyKaigiへの思い 昨年の沖縄に続き、2年連続の参加となりました。 今回は、昨年のセッションで特に気になったNamespaceの続報と、現在チームでも導入を進めている型定義のセッションを中心に聞いてきました。 また、Drink Upでさまざまなエンジニアと交流できるのも楽しみの1つでした。 気になったセッション State of Namespace Namespaceの開発状況についての発表で、…

…アをしている鳥山（@pvcresin）です。 最近は、カフェに入ってコカ・コーラとクラフトコーラがあったら、クラフトコーラを選ぶようにしています。 なんかちょっとオシャレな感じしますよね。 ただ、味の当たり外れが激しいので、素直にコカ・コーラを頼んでおけばよかったと後悔することも多々あります…。 さて今回は、Web版Eightのフロントエンドにおいて、モジュールバンドラーをwebpackからRspackに移行し、ビルドを高速化した話をしたいと思います。 目次 背景 Turbo…

…アをしている鳥山（@pvcresin）です。 最近は、社内の謎解きが好きな人たちとリアル脱出ゲームに参加しています。 10人ほど必要なイベントでもすぐに人数が集まるので、社内にコミュニティーがあるのはありがたいですね。 さて今回は、Eightで昨年末から取り組み始めたRubyへの型導入について紹介します。 目次 背景 静的型付けブーム 型チェッカーと関連ツールの概要 SteepとSorbetの実導入による比較検証 比較の結果 採用にあたり気になるポイント まとめ 背景 Eig…

…アをしている鳥山（@pvcresin）です。 仕事部屋が寒すぎて脚がキンキンに冷えているので、分厚いルーズソックスみたいな靴下を履いています。サンタさん、床暖房が欲しいです🙏 さて、今回はこれまであまり関わることがなかったRubyコミュニティに参加した感想について書こうと思います。 はじめに まずは、簡単に自己紹介をさせていただきます。 私はこれまで、Webフロントエンドまわりを主に担当していましたが、現在は生産性向上に向き合うDPE1チームに所属し、Railsで書かれたバッ…

…アをしている鳥山（@pvcresin）です。 10月25, 26日に有明で行われたKaigi on Rails 2024に、Eightのエンジニアメンバーで参加してきました！ 今回は、それぞれの視点からKaigi on Railsの感想や印象に残ったセッションについてレポートします。 目次 鳥山 平石 太田 まとめ 鳥山 自己紹介と参加への思い Kaigi on Railsは初参加です。 元々は主にWebフロントエンドの開発や改善をしていたのですが、最近は開発者の生産性向上の…

…アをしている鳥山（@pvcresin）です。 最近、ミスタードーナツのミニオンコラボの商品を食べたのですが、 どれも美味しくて見た目もかわいいので最高でした。 特にポン・デ・リングベースのものは、表面のキャンディが口の中でパチパチと弾けて楽しいのでオススメです。 さて今回は、RailsのViewで使う、HTML用ERBファイルのフォーマットを統一した話をします。 ERBとは ERB（eRuby、embedded Ruby）はテキストにRubyのコードを埋め込むための仕様です。…

…アをしている鳥山（@pvcresin）です。 沖縄で行われたRubyKaigi 2024に、Eightのエンジニアメンバーで参加してきました！ Eightロゴのポーズをする参加メンバー 今回は、それぞれの視点からRubyKaigiの感想や印象に残ったセッションについてまとめた記事をお送りします。 目次 鳥山（@pvcresin） 大久保（@kotaohkubo） 坂田 井上 まとめ 鳥山（@pvcresin） RubyKaigiへの思い RubyKaigiは今回が初参加です。…

…アをしている鳥山（@pvcresin）です。 今回は、Eight で使用している Node.js をアップデートした際の手順や、ハマったところについてお話ししたいと思います。 目次 背景 手順 ハマったところ まとめ 背景 Eight では Web フロントエンドの開発やビルドに Node.js を使っています。 使用していた Node.js 16 のサポートが 2023-09-11 に終了するということで、アップデート対応をそれまでに行う必要がありました。 当初、Node.…

…アをしている鳥山（@pvcresin）です。 今年はいくつも BBQ の予定がたっていて、コロナ禍前の日常に戻りつつあることを実感しています。 BBQ ならラムチョップが好きです。 今回は、Web フロントエンドの本番ビルドに SWC を導入した話をしたいと思います。 目次 背景 esbuild と SWC 事前検証 ビルド処理の移行イメージ 移行作業 ハマったポイント 結果 まとめ 背景 Eight では Web フロントエンドの本番ビルドを AWS CodeBuild で…

…アをしている鳥山（@pvcresin）です。 最近は芸人のラランドのラジオにハマっています。「お母さんヒス構文」が好きです。 さて今回は、私が普段行っている Frontend Enabling 業務の紹介をしたいと思います。 背景 Eight というプラットフォーム上には、名刺を起点として個人や企業に向けた様々なサービスがあります。 これら複数のサービスにはそれぞれ対応した開発チームが存在しますが、Web フロントエンドの分野において以下のような課題感がありました。 知見の蓄…

こんにちは。技術本部Digitization部データ化グループでエンジニアをしている池田力です。 普段の業務に加えて、Tech道場の運営に関わっています。Tech道場とは、エンジニアだけではなく、普段エンジニアリングに関わりのない社員に向けて技術に触れる機会を作るために去年の9月から再始動した企画です。*1 *1:以下の記事に詳しく紹介しています。buildersbox.corp-sansan.com buildersbox.corp-sansan.com note.com

…アをしている鳥山（@pvcresin）です。 2022 年 6 月 15 日、Internet Explorer（IE）のデスクトップアプリの提供が終了しました。 それに伴い、PC 版 Eight では IE のサポートを完全に終了し、閲覧することができなくなりました。 今回はサポート終了の際に行ったことについてお話ししたいと思います。 Web サービスを運営する中で今後、ブラウザのサポートを終了する際の参考になれば幸いです。 （本当はサポートを終了した次の週あたりに公開しよ…

…アをしている鳥山（@pvcresin）です。 散歩が趣味なので、暖かくなってきて嬉しい今日このごろです。 さて今回は Web フロントエンドのビルド時間短縮のため、esbuild-loader を導入した話をしたいと思います。 背景 ビルドにかかる時間はプロダクトが大きくなるにつれてじわじわ伸びていき、開発者体験（DX）を悪くする原因となるため、常に短縮する方法を考える必要があります。 Eight の Web フロントエンドは主に TypeScript・React で開発を行…

…アをしている鳥山（@pvcresin）です。 気づいたら開発者体験（DX）向上の取り組みばかり記事にしていたので、たまには実装の記事も書いていこうと思います。 今回は、ローディングを CSS アニメーションで実装した話になります。 ローディング システムが何か処理をしている状態や、それをユーザーに知らせる UI のことをローディングといいます。 ユーザーが何かアクションを起こしても画面に変化がなかった場合、ユーザーにはシステムが何も処理をしていないか、フリーズしているように見…

…アをしている鳥山（@pvcresin）です。 最近は、デザインとエンジニアリングの距離をもっと近くにできないかということばかり考えています。 なかなか難しい課題で、すぐには答えが出そうにありません。 さて今回は、以前書いた記事「Eight、TypeScript はじめました」の続編となります。 buildersbox.corp-sansan.com 上記の記事では、TypeScript（TS）初心者だった私が Eight の Web フロントエンドに TS を導入するまでの話…

…アをしている鳥山（@pvcresin）です。 マイブームはコンビニで買える GODIVA のベルギーダークチョコレート（アイス）を食べることです。 濃厚で甘すぎず、量も多すぎないところが気に入っています。 今回は TypeScript や JavaScript の import を自動でソートする話をしたいと思います。 といっても、TypeScript でソートがうまく行けば JavaScript でも大抵うまくいくので、主に TypeScript にフォーカスした話になるか…

…アをしている鳥山（@pvcresin）です。 違う違うと自分に言い聞かせていますが、おそらく花粉症になってしまいました 🥺 在宅勤務で良かったです。 今回は Sass のコンパイルに使用しているライブラリを node-sass（LibSass）から sass（Dart Sass）に移行した話をしたいと思います。 Sass 実装三銃士 Sass の実装としては、以下の 3 つがあります。 Ruby Sass LibSass Dart Sass まずは移行作業の話の前に、各実装に…

…アをしている鳥山（@pvcresin）です。 最近、事業部長に Slack の絵文字をプレゼントするという実績を解除しました。 早く使われないかなとそわそわしています。 さて今回は、Sass の mixin を集めたライブラリである compass-mixins を消し、Autoprefixer に移行した話をしたいと思います。 Sass の mixin PC 版 Eight では、スタイリングに CSS のプリプロセッサである Sass（SCSS 記法）を使っており、 we…

…アをしている鳥山（@pvcresin）です。 最近は、持ち手部分に適度な厚みと重さがあるいい感じのカトラリー（食卓用のナイフ・フォーク等）を探すのにハマっています。 おすすめのものがある方はご一報いただければ幸いです。 さて今回は、webpack 用の loader である eslint-loader の使用をやめることで、ビルド時間を短縮した話をしたいと思います。 はじめに ビルド時間の短縮は、開発者体験の向上において最も大きなトピックの一つです。 ビルド時間を短縮すること…

…アをしている鳥山（@pvcresin）です。 最近は UI デザインとアプリケーションのパフォーマンス改善、ビルド時間の短縮に興味があります。 Eight の Web フロントエンドは JavaScript（JS）で書かれていましたが、2020 年 5 月に TypeScript（TS）を導入しました。 今回は TS 初心者だった私が、どのようなステップを経て TS を学び、実際に導入していったのかについてお話ししたいと思います。 目次 TypeScript TS 導入の背景…

…アをしている鳥山（@pvcresin）です。 ついこの間新卒で入ったと思ったら、もう 2 年目に突入していました。時が経つのは早いものです。 今回は Eight の Web フロントエンドで使っているスタイルのリンター（コードの静的解析ツール）を SCSS-Lint から stylelint に移行した話をしたいと思います。 SCSS-Lint Eight のフロントエンドではスタイリングに Sass（SCSS 記法）を使用しています。 そして、そのリンターとして SCSS-…

…アをしている鳥山（@pvcresin）です。 最近は、Beat Saber という VR リズムゲームにハマっています。 音楽に合わせて、手に持ったライトセーバー的なものでブロックを切っていくゲームで、いい運動になっています。 さて、今回は Eight の Web フロントエンドにコードの整形ツールである Prettier を導入した話をしたいと思います。 Prettier とは Prettierは Node.js 上で動く、コードのフォーマッター、整形ツールです。 ルールを…

…エンジニアの鳥山（@pvcresin）です。 業務では Eight Career Design の Web フロントエンドを担当しています。 Eight では様々な技術を使って、CSS によるスタイリングを行っています。 PC 版 Eight Sass（SCSS） + BEM Eight-UI: 社内向け React コンポーネントライブラリ CSS Modules + PostCSS Eight のとある新規開発 styled-components 今回は、CSS にまつわ…