今までTSをたくさん書く機会がなかったのですが，最近はTSをたくさん書く機会に恵まれたおかげでTSの型推論に面白さを感じています． TSの型今まではGoを書く機会が多く，たまにTSを書くと型の弱さが気になっていました．例えば，Goで次のようなコードはコンパイルエラーとなります．package maintype A inttype B intfunc foo(a A, b B) {}func main() { var a A = 1 var b B = 2 foo(b, a) // ./prog.go:12:6: cannot use b ...

はじめにモニクルでSREをしているbeaverjrです。この記事では、私が2023年7月に弊社初の専任SREとして入社してからの経験を振り返り、行ってきたこと、実際に直面した挑戦やそこから得られた学びを共有します。今回は技術的な面ではなく、SREチーム・個人としてどのように成長してきたか、その過程でどのようにSREのイネーブリングの取り組みを進めてきたかに焦点を当てて紹介したいと思います。※イネーブリング：この文章では組織にSREの原則と実践を広め、根付かせることを目指す活動を意味します。 SREチーム立ち上げの背景弊社はエンジニア全員がフルサイクルエンジニアとして活躍...

はじめにこの記事では、GraphQL のデータソースに microCMS を利用する方法を書いてみます。GraphQL は BFF として利用するケースも多いですが、GraphQL としては、データがどこから来たのかは重要ではありません。データベースや RESTful API、マイクロサービスから取得するといった選択肢があります。今回は microCMS をデータ取得元にすることを想定し、その構成や構築手順を書いていきます。（以下の図の REST API の部分が mciroCMS になるイメージです。）GraphQL is data source agnostic出典: h...

はじめにAWSやGoogle Cloudなどのクラウドサービス上でリソースとコストを効率的に管理するためには、適切なクォータ設定がマストです。例えば、やばい!!!!! 間違ってBigQueryで大量のデータにクエリを実行してしまった!!!!!!!という場合などでも、クォータを適切に設定しておけば、予期しない高額な請求を防ぐことができ、一安心です。この記事では、Terraformを用いてGoogle Cloudのクォータ管理をする方法を、BigQueryの事例を通して説明します。 Google CloudのクォータについてGoogle Cloud コンソールでは、クォー...

はじめにNext.js(AppRouter)をみなさん上手く扱えていますでしょうか？弊社では現在新規プロダクトで使っているのですが、パフォーマンスが良くないという問題にぶちあたっていました。今回はその解決方法を一部共有したいと思います。前提条件として弊社は以下の環境となっています。next : 14.1.0react : 18.2.0react-dom : 18.2.0typescript : 5.3.3Node.js : 18.17.1デプロイ環境 : Vercel!「一部」という表現は、問題の要因としてsearchParamsもあるのですが、今回はD...

2023年12月に静的サイトジェネレータであるLumeのバージョン2がリリースされました．私は個人ブログを書くのに GitHub Pages + Lume を利用しているので，年末はLumeのバージョンアップなどの作業をしていたのですが，改めて体験が良いなと思ったのでLumeの紹介をしたいと思います． 前提知識 GitHub PagesGitHub PagesはGitHub社がプロジェクトのプロジェクトのウェブサイトを提供することを目的に，リポジトリに配置してある静的ファイル(HTMLやJSなど)をホスティングしてウェブサイトを公開してくれるサービスです．@a-skuaという...

組織再編などで企業やプロジェクトの構造が変化すると、異なるAWSアカウントでサービスを管理する必要が生じることがあり、Amazon Connectの電話番号に関してもアカウント間で移行するシーンがあるかと思います。実際にAmazon Connectの電話番号をアカウント間で移行した際、注意しなければならないと思った点を紹介します。 アカウント間での電話番号移行下記の公式ドキュメントのAmazon Connectインスタンスが異なるリージョンまたは異なるAWSアカウントにある のセクションにも記載がある通り、アカウント間での移行には移行元と移行先の各アカウントから1つずつ、2つのA...

はじめにみなさんはHTMLをどんなサイト・書籍で学んできましたか?私はというと、10年前に当初全て無料で閲覧できていたドットインストールで少しかじり、7年前にWebアプリケーションの開発をする中でプロダクトコードから学んだという具合でした。現在の会社に転職してきて再度フロントエンドの開発もすることになり、思い返してみるとHTMLを体系的に学んでこなかったと思ったので、MDNが公開している「ウェブ開発を学ぶ」をやってみました。この記事ではなるほどなと思った部分を抜粋して紹介したいと思います。 前提知識基本的なことから理解を進めようと思っていたので、まずは「ウェブ入門」から...

フロントエンドはいらなくてシンプルな Node.js だけを動かしたい。であれば、Vercel の Serverless Functions だけ使うのも良いかもな〜と思い、Vercel 公式サンプルhttps://vercel.com/templates/other/nodejs-serverless-function-expressを動かしたかったんですが、2024-01-12 時点でそのままでは動かなかったので備忘録です。$ ghq get https://github.com/vercel/examples$ cd $HOME/dev/src/github.com/ver...

Cloudflare の公式ドキュメントはこちら。https://developers.cloudflare.com/workers/wrangler/ci-cd/公式ドキュメントのとおりにやれば良いだけの話ではあるのですが、「よーし、なんか作るぞー」と思ってから、表題のとおりプロジェクト作成から main ブランチにプッシュされたら（実際のお仕事では main ブランチに直接プッシュはしないので PR が main ブランチにマージされたら）GitHub Actions で自動デプロイされるまでの環境構築を、あまり頭を使わずにシュッとやりたいのでまとめました。Cloudflar...

普段の開発では nodenv を使って各プロジェクトのバージョンに合わせた Node.js をインストールしています。その後、各プロジェクトの README や package.json を頼りに npm install -g yarn や npm install -g pnpm することが多いです。先日、同僚から「最近は corepack 使ってますよ」と教えてもらったので、「おーもう実務で使えるのかー」と一気にモチベーションが上がったので corepack 使っていきたいと思います。まずはこちらの鉄板記事でおさらい。https://zenn.dev/teppeis/articl...

この記事は、モニクル Advent Calendar 2023 の10日目の記事です。 はじめにCloudflare Workers から DB は普通に使えます。https://developers.cloudflare.com/workers/tutorials/postgres/しかしながら、Cloudflare Workers に限らず Edge な環境における DB のコネクションまわりについて、以下のことが気になります。処理の度に接続が切れるのでコネクションプールが使えない（プールしても使い回せない）つまり毎回新しい接続確立のコスト（時間）が発生する新しい...

この記事はモニクルAdventCalendar2023の21日目の記事です。 ご挨拶 + 概要どうもこんにちは！モニクルのエンジニアの久慈です。そろそろクリスマスも近くなってきましたね🎅最近は朝がとっても寒く感じ、ベットからやっとの思いで飛び起きています。毎朝の起床も試錬に感じますが、今回は業務で試錬に感じていることについてまとめていこうと思います。↓「試練」とはこの記事では、モニクルに入社してから自分が携わっている業務の一つである、Railsで作られている社内向けプロダクトをReact+GraphQLに置き換えていく業務についてまとめていこうと思います！ 開発して...

この記事は モニクル Advent Calendar 2023 の 8 日目の記事です。@beaverjrです。モニクルでSREをしています。 はじめにVercelでは、出力したログを各プロジェクトのFunctions画面でリアルタイム表示させることができますが、保存はされません。https://vercel.com/guides/how-do-i-store-logs-on-vercelログを永続的に保持しておくためにはVercelが連携している外部loggerサービスhttps://vercel.com/integrations#loggingまたはLogDra...

!この記事は モニクル Advent Calendar 2023 7 日目の記事です。@Colt45s です。弊社のとあるプロダクトでは、 アプリケーションのデプロイ先に Cloud Run を選択しています。大雑把な構成図はこちらの記事を参照してください。https://zenn.dev/monicle/articles/81065e5f015bb4GitHub で PR を作成した時に、Cloud Run にpr-PRの番号でタグ付けしてデプロイしています。URL マスクを <tag>-<service>.ドメイン のように設定して NEG ...

はじめにこの記事は モニクル Advent Calendar 2023 の 6 日目の記事です。この記事では、立ち上げ初期のチームにモブプログラミングを取り入れてみたら、チームビルディングが促進されたり、チームの課題と感じていた属人化が防げるようになった話を紹介したいと思います。 対象読者立ち上げ初期のチーム[1]で、これからチームをよくしていきたいと考えてる人個人分担で開発が進み担当者の属人化が課題と感じてる人 モブプロとはモブプログラミングとは、複数人で一つのコンピューターの前に集まって、みんなで協力しながら問題を解決していくことです。タイピスト(ドライバー)...

!この記事は モニクル Advent Calendar 2023 ５日目の記事です。 Introduction私が今回構築したwezterm,zsh,starship,neovim環境を紹介します。設定したconfigは以下のリポジトリにあります。今回構築するきっかけは以下の動画を見て、Vim使いこなしてるのかっこいいな〜、Terminal上で全て完結したら便利だよな〜、という単純な動機から始まりました。LazyVimでいきなりどーん！っと構築しても何が何だかわからないので、coralpinkさんのサイトを参考に構築させていただきました。構築時の環境は以下となって...

この記事はモニクル Advent Calendar 2023の4日目の記事です。こんばんは、@kubioです。モニクルでマネイロの開発を行なっています。フルマラソンを走ったあと眠気と戦いながらこの記事を書いています。（沿道の皆さんの応援もあり無事完走しました！！！すべての人に感謝を）去年末くらいからChatGPTが話題になり、それに乗っかって色々使ったりはしていましたが、OpenAI APIの利用などはできていなかったので、せっかくの締切駆動のチャンスなのでこれを題材に記事を書いてみようと考えました。そこですこーしだけ、ほんのすこーしだけですが調査したので、初心者なりにつらつ...

モニクル Advent Calendar 2023の3日目です。どうも@circled9です。モニクルで社内向けの財務システムでTypeScriptのコードを読んだり書いたりしています。最近Biomeに勢いがあってうれしいので、lintとformatのことをつらつらと書いてみます。 lintとはまずはlintとはなんでしょうか。Wikipediaには以下のように書かれています。lint とは、主にC言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行なうプログラムである。静的解析ツールとも呼ばれる。以下に挙げるように、コンパイラではチェックされないが、バ...

はじめにこの記事で作るフォームのソースコードはこちら↓になります。https://github.com/yohei222/react-hook-form-zod-mui【React Hook Form × Zod × MUI】フォームを作ろう！の続編になります。ソースコードや実装方針などは前編のものを継承しています。前編の「フォームを作ろう！」では、テキスト入力フォームと選択フォームの実装例を紹介しています。この記事では、型安全に複数選択可能でオートコンプリートなフォームを実装する方法の例を紹介していきます。 使用技術TypeScriptReact ...