はてなブックマーク

LAPRASのエンジニア組織ではフロントエンド専任のエンジニアはいません。皆プロジェクト単位でバックエンドもフロントエンドも（ときにインフラも）触りながら開発しています。 ただそれだけだと個別領域の技術的負債の解消が進みにくいので、フロントエンドに関心のある有志のエンジニアがフロントエンド改善委員会という会を結成し、週1回1時間集まり改善活動を行っています。今回はその委員会メンバーで行ってきた改善活動を紹介します。 🐉 今年行ったフロントエンドの改善活動 時系列、規模は順不同で紹介します。 JestからVitestへの移行 LAPRASのテストは開発当初からJestでした。ただ、JestはES Modulesのサポートやパフォーマンスの問題があり、今年Vitestに移行しました。 結果CIのフロントエンドテスト実行時間が約1/3になり、リリースのリードタイムの短縮にも繋がりました。ES

プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。 🦀 Rspackとは？ Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。 2024/08/24にv1.0.0がリリースされました。 🤔 なぜRspackに移行したのか？ ビルド速度改善のため以前からwebpackの移行を検討していましたが、プロダクトがwebpack依存の構成[1]で、Viteやその他のビルドツールへの移行が少し面倒でした。 Rspackであればwebpackのプラグインもそのまま動き移行が容易、かつ速度改善が見込まれるためRspackへの移行を選びました。 💡 移行方法 移行方法は、rspackの公式ドキュメントの migrate from webpack をそのまま参考にして進めま

これは、SRE Advent Calendar 2023の18日目の記事です はじめに LAPRAS株式会社でSREをしているyktakaha4と申します🐧 私は、LAPRAS株式会社にSWEとして入社後、ロールチェンジを経て約2年間にわたって組織のLead SREとしてプロダクトの改善に取り組んできました 技術面での学びがあったり、うまくいったな～と感じたものについては適宜Zennに記事を書いてきたのですが、ちょっとしたドキュメンテーションでなどの記事にするほどまとまった分量が取れない小ネタ🍣については書くきっかけが無く、環境が変わったり忘れたりして揮発してしまう前に何かしら備忘メモを遺しておきたいと考えていました そんな折に、ちょうどこのアドベントカレンダーのことを知り、よい機会なので参加することとしました🐤 大規模だったり技術難易度の高い組織でバリバリ働かれている方には物足りな

これはエンジニア転職のLAPRAS/エンジニア採用のLAPRAS SCOUTを提供するLAPRASのAdvent Calendar 2023 15 日目の記事です。 最近作った家庭用の Alexa スキルを紹介します！ 💘 モチベーション 現在、以下の記事で紹介したように AWS EC2 で家族専用のマイクラサーバーを運用しています。 今まで子供とマイクラで遊ぶ際は、都度自分が AWS のコンソールからサーバーを起動していたのですが、自分の不在時に子供だけで遊びたいというケースもあり、少し不便でした。 そこで、Alexa を使って声でサーバーを操作できるようにしたら子供が自由に使えて便利かなと思い今回の開発に至りました。 🔊 作ったもの 以下ツイート動画のように、サーバーの起動・停止・状態確認ができる Alexa スキルを作りました。 起動ワードの「マイクラサーバー」を発話した後に、サ

LAPRAS株式会社でSREをしているyktakaha4と申します🐧 弊社のSREチームで最近運用をはじめた見積もりやふりかえりの手法について書きたいと思います 大規模な立ち上がり済みの組織向けでなく、今ひとりで仕事をしている人が2人目のSREを迎え入れたときの一事例としてご覧ください 経緯 弊社は2016年に創業して以来、ソフトウェアエンジニアとして入社した社員がアプリケーションからクラウドまでプロダクト全体を開発・運用するというスタイルが取られていましたが、 エンジニア組織の拡大に伴い、2021年頃からプロダクトの信頼性や可用性の向上を責務とする専任のSREを立ててシステムの改善をおこなってきました 以下は、弊社で導入しているホラクラシーに基づいて定義された Site Reliabilityサークル のロールの一覧です 原則として、ロールは誰であっても自由に負うことができるので、主務

LAPRAS 社内で開催した Vue3 勉強会の資料を一部内容を変更して公開します。 Vue3 の新機能、Breaking Change に対して Codesandbox でひとつひとつ実行環境を作っています。動作・コードを検証しながら読んでもらえると嬉しいです。 🙋‍♂️ 対象読者 Vue2 を Vue3 に移行中 or 移行検討中の人 普段 Vue は触らないけど、教養的に Vue3 をキャッチアップしたい人 Vue3 の機能・注意点を普段フロントエンドを触らないメンバーに説明したい人 🏎️ Vue3 で何が変わる？ 新たな API の追加 Teleport, Fragments、Suspenseなど便利な API が多数追加 リアクティブの改善 Vue2 はObject.definePropertyを利用したリアクティブの実装だったが、Vue3 ではProxy をベースに変更 パ

LAPRAS株式会社でSREをしております yktakaha4 と申します 🐧 今回は、仕事のひとつとして1年くらい取り組んでいたEKSクラスタのバージョンアップの運用改善について一息つけたので、振り返りを兼ねて備忘録を遺したいと思います ✍ 先にお断りしておくと、この記事で話すのは 運用ノウハウが{ほぼ無い,失われてしまった}EKSクラスタに対して、手順改善やリファクタリングを通じて継続的なバージョンアップ運用を再開する方法 というあまり胸を張れない内容です ネットの記事やカンファレンスを見ていると、大規模環境や高トラフィック下における取り組みや、初期構築の段階で充分な運用設計を済ませている素晴らしい事例などが目に留まります 一方で、過去に選定したk8sを破棄して元の技術スタックに戻す意思決定をしたプロジェクトについて見かけることもあります 各社においても様々なコンテキストがあるものと

この記事はLAPRAS Advent Calendar 2022 22 日目の記事です。最近作った GitHub Actions について書きます。 💳 作ったもの 以下のツイートのように LAPRAS スコアを GitHub Profile にカード画像として表示する GitHub Actions を作りました。 最近 Beta 機能としてリリースされた LAPRAS の公開 API を使っています。 カードのデザインも自作の Generator で自由に設定可能です。 設定方法 GitHub Actions の Marketplace で公開しているので、すぐ使えます。 GitHub Profile リポジトリ README.md 内のカードを表示したい位置に以下のコメントを追加します。

これは、LAPRAS Advent Calendar 2022の8日目の記事（代理投稿）です また、この記事を書き始める前に眺めていたらたまたまいいタイミングで空いていたので、Go Advent Calendar 2022 の22日目にもエントリーしたいと思います なにこれ LAPRAS株式会社でSREをしていますyktakaha4と申します 🐧 このたび、Gitのリポジトリを検索し、コントリビューター毎に今稼働しているSLOCに応じて日本地図を塗り分けして可視化する Kunitori というCLIをGoを使って作りましたので、そのご紹介と学んだことを残したいと思います ✍ Kunitoriで生成した日本地図 作った理由 突然ですが、みなさんの一番好きなGitHubの画面はどこでしょうか 私は /graphs/contributors です 各コントリビューターがリポジトリにどの程度コミ

フロントエンドのダッシュボードを作ってみたらいい感じだったので紹介です。 作ったもの zx と Datadog、GitHub Actions を使って以下画像のように、フロントエンドのコードベースの各指標を可視化するダッシュボードを作りました。 値はデモ用に書き換えています 現在、計測している指標はこちらです。 Vue SFCファイルにしめるTypeScriptの割合 Vue SFCファイルにしめるComposition APIの割合 strict: trueにした場合のType Errorの数（tsc & vue-tsc） Jestの各種カバレッジ 各指標は毎朝9時に更新していて、時系列での推移も確認できます。 なぜ作った？ 技術的負債解消等コードベースのリファクタリングの活動は、機能追加に比べ進捗を把握しにくい、成果が伝わりにくいという問題があり、それを解消したいと考えたからです。 こ

最近作った Slack Bot が好評だったのでまとめてみました！ どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot（社内では tell-me-paccho）という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt（TypeScript）にて作ってみました（アイデアをくれた@しかじろうさんに感謝🙏）。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で