この記事は毎週必ず記事がでるテックブログLoglass Tech Blog Sprintの17 週目の記事です。 1 年間連続達成まで残り 36 週となりました！ はじめに こんにちは！株式会社ログラスでエンジニアをしているd4te74です 🍷 ログラスではレポートと呼ばれる経営データ分析のための機能領域を改善するチームに所属しています。 この記事では、最近取り組んでいたレポート機能のフロントエンドのパフォーマンスチューニングとして行った「巨大なテーブルコンポーネントの仮想スクロール化」について書いていこうと思います。 ※ Loglass は事業の予実を管理するサービスです。 レポート機能とは レポート機能とは、Loglass 内に統合された部署や勘定科目などの経営データに対し集計・分析が行える機能で、ユーザー自身がそれらを自由度高く表形式に組み立てて、表示できるというものです。 以下の

※この記事は「COUNTERWORKS Advent Calendar」の14日目の記事です。 はじめまして、株式会社 COUNTERWORKS にてEnterprise向けプロダクトのエンジニアリーダーのshimです。 私のチームは、障害対応や既に決まっていたミーティングなどの次に、コードレビューの優先順位を高くしております。 私がチームのリーダー的存在となって1年半ほど運用してきた振り返ろうと思います。 古くは Google様のドキュメント 、本年も他の会社でも同様の取り組みで良かったと聞くことが増えました。 個人的にかなり良い取り組みとなったので、この文化が広まる一助となるよう筆を執りました。 経緯 開発メンバーも増えたものの、いろいろなバックログがしかかり中で終わって、メンバー数の割になかなか価値提供までいかないスプリントが多かった時期がありました。 それについて複数要因はあったの

こんにちは、atama plus というスタートアップで web エンジニアをしている yubon です。 atama plus Advent Calendar 2023 の 7 日目になります。 本記事では、atama plus で実際に開発・運用している React プロジェクトにおいて、機能的な凝集度を高めるために行ったディレクトリ構成の再設計について紹介します。 フロントエンドのディレクトリ構成に関する考え方や設計思想は多くの記事で紹介されていますが、「業務で開発しているプロジェクトのコードで、ペインがある状態から再設計して実際に移行した」というケーススタディ的な記事は少なそうだったので、書き残しておこうと思います。

はじめに Flutter好きの皆さんこんにちは！ アルサーガパートナーズ株式会社でFlutterエンジニアをしているtaiseiです！ 突然ですが皆さん、FlutterでUIの開発を進める中で、「このUIはどんなデバイスでも適切に表示されるのだろうか..?」と不安に感じたことはありませんか？ レスポンシブデザインはもちろんのこと、テキストのフォントや色、ダークモードの表示など複数のデバイスで複数の画面を一回一回チェックするのは骨の折れる作業ですし、開発を進める中で副作用によってUIが変更され、気付かないうちに開発が進んでしまうといったこともあります。 そこで、これらの問題を解決する方法として、Golden TestというUIテスト手法があります！！ 今回はこのGolden Testについて、設定から基本的な使い方、私が実際に遭遇したエラーに対するトラブルシューティング等を解説していこうと思

はじめに こんにちは！Google CloudでオブザーバビリティやSRE関連の担当をしているエンジニアです。この記事はGoアドベントカレンダーの22日目の記事です。 Goとオブザーバビリティ 私は業務でオブザーバビリティを中心として啓蒙活動や開発を行っているわけですが、その中で常に「改善にはまず計測が必要です」というメッセージをさまざまな方々にお伝えしています。 Goでは計測のための仕組みとして（ testing.B あるいは go test -bench として知られる）ベンチマーク[1]や pprof が最初期から[2]用意されていて、パフォーマンス計測はかなり標準が充実した言語になっています。 そして近年もそれに満足せず、Goを改善するための計測の仕組みがいくつも提案されています。 たとえばruntime/metricsはdesign #37112で提案されてGo 1.16から導入

この記事はVisual Studio Code Advent Calendar 2023 19日目の記事です。 もうすぐクリスマスですね。我が家は3歳の息子がいるのですが、今更「ツリー買い忘れたけどなんか飾り付けほしいなぁ」と思ってダイソーでツリーが印刷された布を買い、布を壁に貼ってシールや工作物をペタペタ貼ることでそれっぽいものができました。ツリーのゴミも散らからないので、もし悩んでいる方がいればぜひお試しください DALL-Eで出力してもらったイメージはこちらになります（こんなにちゃんとしていませんが） はじめまして、LayerX 機械学習チームの @yakipudding です。 突然ですが、私はSQLを書くのが好きではないです。業務での調査や分析によくSQLを使用するのですが、構文やJOIN、どの項目がどのテーブルにあるのかなどを都度確認しながら書くのが面倒で、億劫に感じます。 そ

この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri

TL;DR Wasmコンポーネントのインターフェースを定義する言語です パッケージという形で名前空間を提供します インポートとエキスポートの定義のことをワールド（world）と呼びます 注意：仕様策定中の技術を扱っています。仕様作成の進行によっては、内容が正しくない場合があります。 背景 Wasmモジュールにはi32、i64, f32, f64の4種類のデータ型しか存在しません。また文字列やユーザー定義型のような構造を持つデーターの表現にも標準が存在せず、データをどのようにメモリ上に配置方法はプログラミング言語の処理系、またはプログラマーが決めるものとされていました。 例えば、次のようなデータ構造と、それに対する操作があったとします。 pub struct Point { x: i32, y: u8, z: u16, } #[no_mangle] pub fn hash(point: &P

はじめに この記事はGo 言語 Advent Calendar 2023及びOpenTelemetry Advent Calendar 2023 8 日目の記事です。 今まで OpenTelemetry に関する記事をいくつか書いてきました(App Runner にデプロイしたアプリからトレースを X-Ray や Jaeger で可視化する記事やコンテナでデプロイした Lambda から X-Ray に OpenTelemetry でトレースを送る記事など)。今までの記事はどちらかというとインフラ観点のものが多く、アプリのサイドカーで OpenTelemetry Collector を動かしてマネージドサービスや OSS のツールにトレースを送る設定だったり、コンテナで動かして docker compose でローカルでも動かせるようにするだったりにフォーカスした内容が多かったです。一方で

こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 本記事は株式会社アルダグラム Advent Calendar 2023 6日目の記事です。 この記事を読めば以下のTypeScript(JavaScript)のテストコードがなぜこけるのかが分かったような気持ちになります。また最後に「細かい理屈はいいからいけてる感じに動くlengthやtruncateがほしい！」という方向けの付録もついています。 it('surrogate pair', () => { // 2 expect('😊'.length).toEqual(1) }) it('variation selectors', () => { // 4 expect('👍🏿'.length).toEqual(1) }) it('combining character', () => { //

この様に指定すると3分毎に実行されます。 とても便利ではあるのですがコマンドの実行が失敗すると、冗長なコマンド実行となり得ます。cron ではコマンドの実行が失敗し続けるとメールが運営者に繰り返し送信され続けます。 crontab にコマンドが1分毎に実行される様に投入してひとまず正常起動を確認、仕事を終えて家に返ってビールでも飲んで、さぁ寝ようかなと思った頃にコマンドが失敗し始めると、朝までメールが飛び続けます。 またウェブサービスの API を呼び出す cron ジョブを投入していたらそのウェブサービスがメンテナンスに入った、なんて事もあると思います。メンテナンス中にも関わらず無限に失敗し続ける API 呼び出しはもしかしたら BAN の対象になってしまうかもしれません。 全ては cron に exponential backoff する機能がないのが問題です。 systemd tim

useEffectEvent という react フックをご存知ですか? まだ experimental なので、知らない方も多いと思います。しかし、このフックは 「なんで今までなかったんだろう?」と思ってしまうほど革新的 です。今回はその使い方の紹介などをします。 概要: useEffectEvent は useEffect とともに使うフック まず概要ですが、useEffectEvent は イベントリスナーを設定する useEffect とセットで使うフック です。 useEffectEvent を使うと、エフェクトとイベントリスナーを分離できます。そして、イベントリスナーの deps の変化時にエフェクトを再実行せずに済みます。 …とまあ、抽象的な説明だけでは分かりづらい と思うので、以降では useEffectEvent がどういう課題を解決するのか、また具体的にどういうケースで

どうもこんにちは。MESIと申します。 皆さんVimは使ったことがありますでしょうか？ Vimといったらキーボードのみで操作をしないといけない敷居の高いエディターなため、使っていない人のほうが多いと思います。 私はエンジニア3年目なのですが、ずっとVScodeをつかってコードを書いていて たまにCUI環境を使わざるをえないときに仕方なく使うくらいでした。 当然まともには使えないので、insertモードと矢印キーでごまかしながら使ってました。 そんな感じだったのですが、11月の月初からVimを使っています。 12月になった今、本格的にvimを使いだして1ヶ月が経過したので、その節目として振り返りたいと思います。 ちょっとVimに興味があるVim未経験の方へ参考になれば幸いです。 なぜVimを使うことになったのか？ Vimを使い始めた理由ですか？それは… なんか…カッコいいから です。 コード

はじめに 皆さんは外出先などで突然VS Codeを使いたくなったことはないでしょうか？僕はあります。 それは職場かもしれませんし、カフェかもしれませんし、オフトゥンの中かもしれません。そんな時に、ブラウザとネットワーク環境さえあればいつものVS Codeが使えるのがGitHub Codespacesです。 GitHub Codespacesとは GitHub Codespacesは、GitHubが提供しているクラウドベースの開発環境です。 機能的にもUI的にも普段利用しているVS Codeとほぼ同じため、日常的にVS Codeを利用している人であれば、いつも通りの開発体験を得ることができます。 GitHub上の任意のRepositoryをcloneすることができるので、GitHubで管理しているソースコードであればすぐに開発を開始することができます。 ブラウザ上で利用できる GitHub

Solo Technical Writer のやざきです。いまは株式会社ソラコムで、SORACOM Users (通称、SORACOM ユーザーサイト) というサイトの管理をしています。「ユーザー」と書いていますがれっきとした公式サイトです。 先日、個人的な立場として (とても大切)、次世代 Web カンファレンス 2023 Technical Writing セッション (Togetter) で議論をさせていただきました。もしまだ聞かれていない方がいらっしゃったらぜひ聞いてみてください。 今回は、そこでは話し足りなかったことの一つ「ドキュメントを誰のために書いていますか」について補足しておこうという記事です。 誰のために書いていますか 「読者のため」に書きましょう。これが原理原則だと思います。 ですが、「読者」を正確に把握できますか？と考えると、現実には難しいことが多そうです。つまり「読

こんにちは。株式会社シグマアイリサーチャーの@k_arakiです。 今回は初めて携わったアプリ開発で簡単に導入できて便利だった機能を3つ紹介します。 はじめに この記事を書くきっかけとなった体験についてお話しします。 入社してまもなく、ある企業に対する業務サポートの効果検証プロジェクトに参加しました。 まず初めにサポート用のプログラムだけ作成し、過去のデータを用いて有効性を調べました。 その次のステップである試験運用を行うために簡易的なアプリ化が必要でした。 今回の話はこの時の開発に関するものです。 本体のプログラムはそれまでの検証で既に出来上がっているため、アプリとしての開発項目は以下の2つでした。 業務サポートプログラムのWebAPI化 データの入出力・整形を担当するフロントエンド開発 あくまで試験用だったこともあり、要件定義は表面的に必要な機能の洗い出し程度のものでした。 その結果出

この記事は、Lancers（ランサーズ） Advent Calendar 2023 の9日目の記事です。 本記事では、マークアップで、CSSのmarginプロパティをあまり書かなくなった話を紹介します。 Webサービスのレイアウトについて 大きく以下が考えられます。 縦に並べる 横に並べる 絶対配置 さらに、それぞれに対して以下が考えられます。 不規則的な配置 規則的な配置 今回は、縦に並べることに着目して、マークアップを考えてみます。 不規則的な配置のパターン marginを利用する .mt-4 { margin-top: 4px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } <div class="box box1"></div> <div class=

こんにちは、SRE ディビジョンの小堀内です。 今回は Google Cloud に関するテーマとは異なるテーマで記事を執筆させていただきます。 テーマ 僕が考える テックブログを書く意義 と 書き方のすゝめ 対象読者 テックブログを書くことによるメリットを感じられていない方 テックブログを書くことへ壁の高さを感じている方 そもそもテックブログの書き方がわからない方 説明すること／説明しないこと 説明すること テックブログを書く意義 テックブログ (Zenn) 執筆の手順例 テックブログを書くにあたって便利な VSCode の拡張機能とその設定方法 説明しないこと 技術的な知識 ブログネタの提供 テックブログを書く意義 僕がテックブログを書く意義は エンジニアとして自身の成果物を残しながら、技術領域を広げる ことにあります。 自身の学習過程であったり、技術的課題を解決するためのテクニックを

こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を

2023 年の Prettier の活動を振り返ります。 Prettier とは Prettier は JavaScript で書かれたコードフォーマッタです。設定可能な項目が少ないいわゆる opinionated なコードフォーマッタです。JavaScript や TypeScript だけではなく、HTML や CSS、GraphQL などもサポートしています。 リリース 2023 年は、メジャーバージョンのリリースが 1 回、マイナーバージョンのリリースが 1 回でした。これまでは 3 ヶ月に 1 回程度マイナーバージョンをリリースしていたので、頻度は少し下がっています。 ですが、メジャーバージョンである 3.0 をリリースできたことと、これまでよりもカジュアルにパッチバージョンをリリースするようになったことを考えると、開発自体が停滞しているわけではないと思っています。 「カジュアル