概要 みなさん、こんにちは！アルダグラムでエンジニアをしている大木です。 今回は Next.js でSSG(Static Site Generation) を試した記録を残そうかなと思います。 弊社ではLPやコーポレートサイトで Gatsby.js を利用しています。Gatsby.js の便利な側面もある一方で、(主観ですが)直近はアップデートが鈍化している傾向にあり、技術移行も踏まえて検証をしないといけないなと感じていたところでした。 そこで今回は Next.js でのSSGを試していこうかなと思います。 余談ですが、SSGでいうと Astro なんかも聞くことがありますね。今後こちらも検証していきたいなと考えております。 実際に試していく Next.js でのプロジェクト作成をしていきます。お馴染みすぎるコマンドです。 SSGの設定 ビルド時に静的なページを生成するようにするには、co

こんにちは！ KANNA の開発のお手伝いをしております、フリーランスエンジニアの len_prog です。 今回は、XState を用いてステートマシーンを作り、アプリケーションの複雑な状態遷移をシンプルに実装する方法についてご紹介します。 背景 アルダグラムでは、デジタル帳票アプリケーション「KANNA レポート」を提供しています。 KANNA レポートは、Excel や Google スプレッドシートのようなユーザーインターフェースを備えた Next.js 製の Web アプリケーションとなっており、複雑な状態遷移を多く含んでいます。 このような複雑な状態遷移を管理するためには、React アプリケーションでは通常、Redux や useReducer を用いてステートマシンを構築することが多いと思います。 しかし、これらの方法は状態遷移に厳格な制約が必要な場面で手続き的なコードを多

こんにちは！アルダグラムでエンジニアをしている内倉です🦐 ユニットテストのカバレッジを出したいけれど「ちょっと見たいだけで Codecov とか使うほどではないんだよな」というようなこと、たまにありませんか？ 今まで Rails のプロジェクトでは、テストカバレッジを GitHub の PR にコメントとして追加してみたことがあるのですが、Android + Kotlin ではやったことなかったので、少し調べてみました。 Android でカバレッジ取るなら、JaCoCo 一択なのかな？と思っていましたが、Kotlin だったら Kover というのが良さそうだったので導入してみたところ、出力したレポートをほぼそのままPRコメントにつけるだけでも、結構いい感じになりました。 Kover とは Kover は、JVM や Android プラットフォーム向けにコンパイルされた Kotlin

こんにちは！アルダグラムでエンジニアをしている森下霞です。 先日、弊社では MySQL5.7のサポート期限が迫ってきたのでMySQL8に移行しました。そこで、開発者として手に入れて嬉しかったものについて、この記事で説明できればと思います。 CTE クエリのリードビリティーと多機能性 MySQL 8.0 で導入された CTE (Common Table Expressions) を使用するクエリを具体的な例で見るため、まずは3つのテーブルを用意します。 anime (id, title, genre) scores (id, anime_id, score) episodes (id, anime_id, added_at) テーブル作成の SQL クエリ CREATE TABLE anime ( id INT PRIMARY KEY NOT NULL AUTO_INCREMENT, tit

こんにちは！アルダグラムでエンジニアをしている柴田です。 弊社では、ランディングページ（以下、LP）にGatsby.js を利用しています。 今回は、LP に対してユニットテストを導入した話をしたいと思います。 背景 私が所属するチームでは、普段の開発に加え、LPの開発と運用も行っています。LPはプロダクト・組織の広報において非常に重要な役割を果たしています。例えば、新機能や導入事例のプレスリリース、企業ブランディングの情報発信の場として機能しています。 しかし、静的ページがある故に、十分なテストが整備されていませんでした。 さらにサービスの拡大に伴い、LPへの改修頻度が高まり、手動での確認作業が運用上の負担となってきました。SEO対策によりユーザー流入を増やし、広告コストを抑えることも視野しているため、より効率的な運用が求められるようになりました。 そこで、テストの棚卸しをチーム内で行い

みなさんこんにちは！アルダグラムでエンジニアをしている今町です。 弊社では、サービスサイトの LP ページ・コーポレートサイトのような静的サイトで Gatsby を利用しています（Gatsby とは React ベースの SSG フレームワークです） 私がアルダグラムに入社して初めて行った仕事が、Gatsby 製の LP ページのパフォーマンス改善でした。入社から 3 ヶ月が経過し、当時を思い出しながらどうやってパフォーマンス改善を進めていったか共有したいと思います。また、Gatsby 製のサイトを運用している方にとって、少しでも参考になったら嬉しいです 🥰 現状を知る まずは、Gatsby 製のページのパフォーマンスがどうなっているか現状を理解するところから始めてみましょう。 Google が提供している PageSpeed Insights を利用してパフォーマンスを含めた各種指標を

アルダグラムの「一人目QA」になってからの半年間の振り返り こんにちは！アルダグラムでQAエンジニアをしているshige_sです 今回は入社から半年が経ったので、これまでやってきたことを振り返っていきたいと思います。 日々の業務で振り返る機会もなかったので、今回記事を書いてもう半年経ったんだと✨ 早く感じるということは楽しかったんだとポジティブに捉えていきたいと思います！ まず、前提としてですが、QAグループは6名体制となっています。 QAグループ長：他の開発グループ長と兼務している開発エンジニア QAリーダー：私（唯一の社内QAエンジニア） KANNAプロジェクトやKANNAレポートを開発しているグループ：4名の業務委託QAメンバー QAポータルの整備📕 まず、入社してから取り組んだのはQAポータルの整備です。 QAポータルとは、QAに関わる情報を一元化したページを指します。 それまで

アルダグラムでエンジニアをしている松田です。 UI操作により、動的に変化する要素があるとします。 要素の伸縮動作の完了を見届けた後に、何らかの処理を行いたい… そのようなユースケースで、本稿の内容が参考になれば幸いです。 要素を参照する方法 🎯 まず、要素を参照する方法を考えてみます。 useRef + useEffect ? 🤔 素朴に実装しようとすると、以下のようになるかもしれません。 useRefを用いて、ref objectを用意する ref objectを対象要素のref属性に指定する useEffectでマウント時に、ref objectを参照する import React from 'react' export const SomeComponent: React.FC = () => { const ref = React.useRef(null) React.useE

こんにちは！アルダグラムでエンジニアをしている大木です。昨今若者の間では「なぁぜなぁぜ？」というのが流行っているみたいですね。積極的に使っていこうと思います。 さて今回は、Reactで使えそうなグラフ描画のライブラリはどぉれどぉれ？なのか調査調査？していこうかと思います。 グラフ描画と聞いて筆者がすぐに思いつくのは、やはり「Chart.js」でしょうか。そちらも踏まえて、どういったライブラリがあるのかか調査していこうかと思います。 ~はじめに~ 執筆の背景 実際にプロダクトで利用するつもりはなく「どんなものがあるのかな」と気になったので調査してみた、というのが執筆背景です。 エンタープライズ向け製品などで利用する場合にはより細かくユースケースが分かれており、利用するグラフの種類も多いと推測しています。それぞれのライブラリの詳細に踏み込んだ部分には触れられておりませんのでご承知おきください。

こんにちは。アルダグラムでエンジニアしている前山です。 弊社では、2022年の2月から、Zenn の Publication 機能を利用して、テックブログを運用しています。 そして、昨年の5月から、社内でテックブログチームを発足し、運営してきました。 本記事では、弊社のテックブログの目的や直近ブログチームでやってきたことを紹介できればと思います。 テックブログの目的 弊社のテックブログの運営において、目的としては会社から見てと個人から見ての2つの観点があります。 会社としての目的 1. 知名度と外部認知の向上 テックブログの記事を通して、世のエンジニアにアルダグラムという会社を知ってもらうことができます。また、どんな技術を扱っているか、どんなエンジニアが居るか、組織やカルチャーを伝えることができます。 2. 中長期での採用への貢献 テックブログは直接的な採用活動ではないものの、間接的に中長

こんにちは！アルダグラムでエンジニアをしている森下霞です。 Rails の ActiveRecord を使って素早くDBとのやり取りが書けるのですが、そこに罠があります。N+1 深い罠です。開発時に気づきづらい問題である N+1 の自動探知について話しようと思います。 どうして気づきづらい 開発時にタスク通りの動作やコードの読みやすさに焦点を当てることがおそらく多いが、その中で N+1 を見逃してしまうことがしばしばあると思います。 ログは N+1 問題の手がかりを提供しますが、開発者はログを常に注意深く確認しているわけではありません。特に大規模なシステムでは、ログの量が膨大であり、問題が埋もれてしまう可能性があります。 また、テストカバレッジが十分でない場合、N+1 問題はテスト中に見逃されやすくなります。特に異なる条件やデータ量に対するテストが不足していると、問題の存在に気づくことが難

はじめに こんにちは、アルダグラムのSREエンジニアの okenak です。 今回はスタートアップ企業のAWSコスト最適化に取り組んだ内容を紹介したいと思います。 背景 弊社はグロース期のスタートアップ企業ですがAWSのコストが約1年間で4倍に上昇しました。 これまでは社内の生産性向上や安定したサービスを提供するために、インフラリソースを潤沢に利用してきましたが、急激な円安等の流れもあり今ここにきて見直しが必要なタイミングとなったためコスト最適化に取り組むことにしました。 （上記は補足として開発用と本番用のAWSアカウントの合算の金額です） コスト最適化のための取り組み コスト最適化に関してはトレードオフの関係があります。 特に市場に投入するまでのスピードを重視するスタートアップ企業では人的リソースがかぎられるためコスト最適化のための工数は犠牲になりがちです。（それが大きく問題になるまでは

こんにちは！アルダグラムでエンジニアをしている内倉です。 本記事は株式会社アルダグラム Advent Calendar 2023 22日目の記事です🥳 これまで、時折 Cloud Functions のコードを書くことはあったのですが、テストについてあまりきちんと知らなかったので、今回は 公式ドキュメント を読みながら、プロジェクトに合った単体テストについて考えてみたいと思います。 テストのセットアップ firebase-functions-test という公式のユニットテストライブラリがあるそうです。 これを使えば firebase-functions で必要とされる環境変数の設定や設定解除など、テストの適切なセットアップと破棄を行ってくれるとのこと。 なんだかテストがすごく簡単に書けそうですね。 早速、準備していきましょう。 テストフレームワークは、お好みのもので。 npm inst

こんにちは、アルダグラムのSREエンジニアの okenak です 本記事は株式会社アルダグラム Advent Calendar 2023 17日目の記事です。 今年ももう年の瀬ということであっという間でしたが、アルダグラムのSREチームに配属されてから1年が経ったので、これまでに自分がやってきたことを振り返ってみたいと思います。 （量が多いため細かい改善などを除いた大きめのタスクだけ抜粋しています） やってきたこと 2022/12月 Datadogでモニタリング環境の整備 社内のモニタリング環境としてDatadogが導入されていましたが、専門チームがいなかったため監視や運用周りが十分に整ってない状態だったため整備を行いました。 詳細は以下の記事をご参照ください TechBlogの記事はこちら AWSでセキュリティ関係の機能の有効化 自社プロダクト（KANNA）の成長に伴い大手企業に求められ

こんにちは！アルダグラムでQAエンジニアをしているshige_sです。 本記事は株式会社アルダグラム Advent Calendar 2023 15日目の記事です。 アルダグラムではQAプロセスの改善をQAグループが中心となって行なっています。 今回は現在、QAプロセスの改善施策の内の1つ 「開発エンジニアも参加するスモークテスト」についてのご紹介です。 ※スモークテスト（smoke testing）とは、開発途上のソフトウェアをテスト（試験）する手法の一つで、開発・修正したソフトウェアの基本的な機能が動作するかなどをざっと確認すること。 今夏までは JIRA内の開発チケット毎に開発チームに所属しているQAエンジニアがテスト項目書を作成 テスト項目書をQAエンジニア間でレビュー（1名〜2名） テスト項目書を開発担当者にレビューしてもらう 開発担当者からテスト実施者に「テスト環境に実装内容を

こんにちは！アルダグラムでエンジニアをしている@sohichiroです。 本記事は株式会社アルダグラム Advent calendar 2023 13日目の記事です。 前日は、@kageyama さんによる、SQLインジェクションの話でした。 セキュリティはいつも万全にしておく必要があるので、大変ためになる記事でした。 さて、隠れ関西民として関東地方に生息している私にとっては、翔んで埼玉〜琵琶湖より愛をこめて〜は、いろいろ込み上げてくるものがありました。確かに兵庫県は神戸と芦屋だけが飛び抜けて都会指数が高いですよ😂（私、兵庫県の田舎の方出身）。関西弁を勉強したいなら、格好の教材だと思いました。 else ifが複数回出てくることのつらみ さて、else ifです。 else if。プログラマーであれば、一度は書いたことあると思います。 言語によっては、elsif（Ruby）、elif（P

こんにちは、アルダグラムの田中です！ 本記事は株式会社アルダグラム Advent Calendar 2023 8日目の記事です。 突然ですが、「エンジニア採用活動」って大変ですよね！ 採用ターゲットの策定 採用媒体運用 スカウト送付 カジュアル面談・面接 などなど採用業務は多岐にわたります。 アルダグラムでは、エンジニア全員が採用活動に携わる「スクラム採用」を行っています。 しかし、最初から「スクラム採用」の手法を取っていたわけではありません。 今回は、いかにして「スクラム採用」を導入したかについてお話しします。 スクラム採用とは？ そもそもスクラム採用とはなんなのでしょうか？ 提唱元である株式会社HERPによれば、スクラム採用は以下のように定義されています。 「採用活動を経営陣と人事に閉じたものではなく、現場社員を巻き込んだ形で行うことで、最大の成果を創出していく採用手法」 人事やエンジ

こんにちは！アルダグラムの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', () => { //

こんにちは、アルダグラムでエンジニアをしている松田です。 本記事は株式会社アルダグラム Advent Calendar 2023 3日目の記事です。 Apollo Client のLazyQueryでは、任意のタイミングでクエリを実行することができます。 また、fetchMoreを用いることで、追加のリクエストによるページネーションを実現することができます。 ただ、これらの機能を利用する際は、クエリの実行タイミングに注意を払う必要があります。 コンポーネントのライフサイクル次第で、意図しないタイミングでクエリが実行されてしまうと、パフォーマンスの低下やサーバーへの負荷増大を招く可能性があるからです。 本稿では、クエリの実行タイミングを、Reactの複数のコンポーネント間で制御する方法を紹介します。 方針 Reactで複数コンポーネント間でデータ共有する場合は、contextを利用するのが一

こんにちは。アルダグラムでエンジニアしている前山です。 本記事は株式会社アルダグラム Advent Calendar 2023 2日目の記事です。 弊社で開発している KANNA では、バックエンドは Rails で GraphQL Ruby を使用しています。 GraphQL を使用する開発の過程で、N+1 問題に直面することは珍しくありません。graphql-ruby には、N+1 問題に対処するための GraphQL::DataLoader が組み込まれていますが、KANNA では GraphQL::Batch を使用しています。 本記事では、GraphQL::Batch を用いた N+1 問題の解決方法と、その背後にある仕組みについて紹介できればと思います。 GraphQL::Batch とは GraphQL::Batch は、Shopify によって開発された Rails のライ