はてなブックマーク

年初に「今年こそは」と気合いを入れてこんな記事を書きました。 が、そんな快適に使っていた corepack がつい先日 Node.js から削除されることになりました😇 正確には Node.js にバンドルされず分離されることになりました。 今回承認された Proposal の中で分かりやすい3,4を抜粋すると Corepack's documentation should be moved out of the Node.js API documentation and into its own website, or accessible as Markdown files in the Corepack repo. Corepack is a separate project from node and intermingling its documentation within

フロントエンドカンファレンス北海道 2024にて「ウェブエンジニアでもWasmを使いたい!」というタイトルで20分のトークを行いました． 当日のトークでは，WebAssemblyの特徴に触れつつ，特殊な用途[1]以外でWebAssemblyをどのように活用できそうか，実際にAssemblyScriptのコードを例に紹介しました． AssemblyScriptはTypeScriptをWebAssemblyにコンパイルできる言語として紹介しましたが，より正確にはTypeScriptと同じ構文を持つ言語をWebAssemblyにコンパイルする言語という方が正しいかもしれません． これはTypeScriptにはない構文などをAssemblyScriptでサポートしているという話ではなく，TypeScriptの型推論などの言語機能を活用してAssemblyScriptのコードを書くことができるように

成果 最終的に、Cloud Run のコストが$6/day前後から$1/day前後に！ ちなみに、Cloud Tasks は1ヶ月あたり最初の100万回のオペレーションまで無料なので余裕で収まっています。 モチベーション 今回リプレイスを検討したシステムは軽量な非同期処理が大半で、もともと絶対に Sidekiq でないと困るということが少なかった Sidekiq は Redis をポーリングしてジョブを取得する方式なので、Cloud Run で実行するには min-instances を1以上にしなければいけない 何もジョブがない状態が続いてインスタンスが0になると起こしてくれる人がいないので... 絶対に Sidekiq でないと困らないなら Cloud Tasksにして、非同期処理がない時は寝ていても良いようにしたい => コストダウン！ Pub/Sub との比較検討もしましたが今回は

Cloudflare Workersを中心とした、Cloudflareの開発者向け製品群（いわゆるCloudflareスタック）は、今やそれだけでちょっとしたサービスを生み出すことが不可能ではなくなってきています。 今回、システム構成をCloudflareスタックにほぼ全振りした新サービスをお仕事で作ったので、工夫した点を紹介します。 なお、本記事で紹介するサービスは7月4日に正式リリースしたばかりで、本格的なトラフィックをほとんど経験していない状態でこの記事を書き始めています。2ヶ月ほど運用した後での生の声は、8月25日に新潟で行われる、Cloudflare Meetup Niigataで講演枠をいただいてお話しする予定ですので、気が向いた方は新潟まで足をお運びいただければと思います。 他にも機会があれば登壇したいので、Cloudflare系のイベントにお誘いいただけますと幸いです！ キ

こんにちは、Webサイト作ってますか？ Webサイトを作っていると、Lighthouseスコアを上げるために画像のサイズやフォーマットにも気を配りたくなりますよね。 筆者は画像のフォーマットにはあまり頓着してこなかったので、「フラットな画像ならPNG」「込み入ったイラストはJPEG」「なんかWebPとかいうのもあるらしいけどよくわからん」くらいの解像度で適当に使っていました。しかし、最近の開発でLighthouseスコアのチューニングをしてみたところ、色々新しい知見が溜まったので、自分用の備忘録として残しておこうと思います。 3行まとめ ちゃんと複数の解像度の画像を用意しようね WebPやAVIFといった次世代フォーマットも使ってみようね <picture> と <source> は便利 画像のサイズを複数用意する 表示するディスプレイの解像度に合わせて、表示する画像の大きさを調整すること

こんにちは、Webサイト作ってますか？ Webサイトを作ってると、SNSやSlackにURLが貼られた時の見栄えを良くするために、OGP画像（og:image）を設定したくなりますよね。 筆者はCloudflare PagesとRemixでサイトを作ることが多くなってきたのですが、OGP画像を動的に生成する上手い方法を調べていたら一定の成果が出たので、共有しておこうと思います。 要点としては次のとおりです。 Cloudflare Pages向けの @vercel/og ラッパーを使う できたらURLの末尾を .png にする（Cloudflareのキャッシュを効かせるため） VercelのOGP画像生成ライブラリ @vercel/og OGP画像を動的に生成する分野には一定の需要がありますが、簡単に実現する方法というのはあまり多くありません。そんな中、Vercel社が提供している @ver

今までTSをたくさん書く機会がなかったのですが，最近はTSをたくさん書く機会に恵まれたおかげでTSの型推論に面白さを感じています． TSの型 今まではGoを書く機会が多く，たまにTSを書くと型の弱さが気になっていました． 例えば，Goで次のようなコードはコンパイルエラーとなります． package main type A int type B int func 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 (variable of type B) as A value in argument to foo // ./prog.go:12:9: cannot use a (variable of type A) as B value in arg

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

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

はじめに Next.js(AppRouter)をみなさん上手く扱えていますでしょうか？ 弊社では現在新規プロダクトで使っているのですが、パフォーマンスが良くないという問題にぶちあたっていました。 今回はその解決方法を一部共有したいと思います。 前提条件として弊社は以下の環境となっています。 next : 14.1.0 react : 18.2.0 react-dom : 18.2.0 typescript : 5.3.3 Node.js : 18.17.1 デプロイ環境 : Vercel 問題 Next.js(AppRouter)では、headersやcookiesといったDynamicFunctionが提供されています。 Using any of these functions will opt the whole route into dynamic rendering at requ

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

Cloudflare の公式ドキュメントはこちら。 公式ドキュメントのとおりにやれば良いだけの話ではあるのですが、「よーし、なんか作るぞー」と思ってから、表題のとおりプロジェクト作成から main ブランチにプッシュされたら（実際のお仕事では main ブランチに直接プッシュはしないので PR が main ブランチにマージされたら）GitHub Actions で自動デプロイされるまでの環境構築を、あまり頭を使わずにシュッとやりたいのでまとめました。 Cloudflare Workers プロジェクトを作成 GitHub リポジトリを作成 Cloudflare API トークンを作成 GitHub Actions の Secrets を設定 Workflow を追加して commit & push Deployeeeed!! ぐらいのリズムでやりたい。 1. Cloudflare Wor

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

この記事は、モニクル Advent Calendar 2023 の10日目の記事です。 はじめに Cloudflare Workers から DB は普通に使えます。 しかしながら、Cloudflare Workers に限らず Edge な環境における DB のコネクションまわりについて、以下のことが気になります。 処理の度に接続が切れるのでコネクションプールが使えない（プールしても使い回せない） つまり毎回新しい接続確立のコスト（時間）が発生する 新しいコネクションの作成は少なからず DB 側にも負荷がかかる DB 側に Edge がスケールした分だけ素直に新しい接続が要求されてしまう 新しい接続要求を制御できない => 最大接続数オーバー この辺りも予めケアされているだろうという期待のもと D1 を DB として採用する選択肢もあります。しかしながら、D1 を趣味で使う分には良いと思

Introduction 私が今回構築したwezterm,zsh,starship,neovim環境を紹介します。 設定したconfigは以下のリポジトリにあります。 今回構築するきっかけは以下の動画を見て、Vim使いこなしてるのかっこいいな〜、Terminal上で全て完結したら便利だよな〜、という単純な動機から始まりました。 LazyVimでいきなりどーん！っと構築しても何が何だかわからないので、coralpinkさんのサイトを参考に構築させていただきました。 構築時の環境は以下となっています。 OS : macOS Sonoma 14.1.1 zsh : 5.9 (arm-apple-darwin23.0.0) wezterm : 20230712-072601-f4abf8fd starship : 1.16.0 neovim : v0.9.4

書こうと思った経緯 入社後、業務でGoogle Cloudを本格的に使い始め、Google Cloud自体の障害情報をいい感じにキャッチする方法がないかな〜〜と思い始めました。 （´-`）.。oO（AWSのAWS Health Dashboardみたいな、プロジェクト単位で影響がある障害情報を確認できたり通知できるサービスがあればいいのに... ...ていうか知らないだけでそもそもあるのでは!?!?) と気になって調べたところ、いいタイミングで公開されたこちらのサービスに辿りついたため、実際に使ってみました。 主な機能 ダッシュボード コンソールからGoogle Cloudのインシデント一覧の詳細を確認できます。 インシデントがプロジェクトに与える影響度がわかるのがミソだと思います。 アラート 新しいインシデントの発生や既存のインシデントの更新などのシナリオに対して、アラートを設定できます

はじめに この記事で作るフォームのソースコードはこちら↓になります。 【React Hook Form × Zod × MUI】フォームを作ろう！の続編になります。 ソースコードや実装方針などは前編のものを継承しています。 前編の「フォームを作ろう！」では、テキスト入力フォームと選択フォームの実装例を紹介しています。 この記事では、型安全に複数選択可能でオートコンプリートなフォームを実装する方法の例を紹介していきます。 使用技術 TypeScript React Hook Form Zod MUI 作成するフォーム この記事で作成するフォームがこちらになります。 実装 実装方針 実装は以下の流れで進めていきます。 zodを用いてschemaを定義 オートコンプリート単体のコンポーネントを実装 2で作成したコンポーネントにReact Hook Formを組み込んだコンポーネントを実装 3で作

はじめに この記事で作るフォームのソースコードはこちら↓になります。 使用技術 TypeScript React Hook Form Zod MUI 作成するフォーム この記事で作成するフォームがこちらになります。 フォームの内容を整理していきます。 テキスト入力要素 必須入力と任意入力で二つの要素があります。 検索ボタンを押した時にエラーメッセージが出るのは必須入力の要素のみで、任意入力の方ではエラーは表示されません。 セレクト要素 テキスト入力要素と同じく、必須選択と任意選択で二つの要素があります。 また、こちらもテキスト入力要素と同じく、検索ボタンを押した時にエラーメッセージが出るのは必須選択の要素のみで、任意選択の方ではエラーは表示されません。 実装 それでは上記フォームを実装していきます！ 実装���針 実装は以下の流れで進めていきます。 zodを用いてschemaを定義 React

はじめに 普段、仕事でも使用しているPrismaの新バージョンPrisma 5がリリースされました。 その変更点を簡潔にまとめてみます。 プレビューから一般提供になった機能 次の機能がプレビューから一般提供になり、デフォルトで使用可能になりました。 jsonProtocol Prisma Clientとクエリエンジンの間でjsonProtocolがデフォルトで使用されるようになりました。 以前は、GraphQLライクなプロトコルが使われていましたが、スキーマが大きい場合にCPUとメモリの消費が大きく、パフォーマンスのボトルネックとなる問題がありました。 JSONベースのワイヤープロトコルの導入により、特にコールドスタートのリクエストにおいて、通信が大幅に効率化されるようになりました。 同じテーブルのカラム同士の比較 同じテーブルのカラム同士を比較することが可能になりました。 例えば、以下の

最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ

【TS】呪文：undefined as unknown as numberとは？ 先日、業務中にいつも親切に教えてくださる上司から、上記のundefined as unknown as numberという呪文を教わりました。まるで呪文のように、もしくは英会話の文法のように聞こえます。また、上司曰く、悪用は厳禁な呪文でもあるようです。それでは、この呪文の意味は一体なんなのか、またなぜ悪用厳禁な呪文であるのか、を理解していきましょう。 1. そもそも "as"とは？ asは、型アサーションと言って、TypeScriptの型推論を上書きする機能になります。 タイトルの例だと、undefined as unknownとすることで、undefinedという値をunknown型とすることで、tscに型を直接、伝えることができます。 以下、サバイバルTypeScriptからの引用です。 型アサーション「

弊社のとあるプロジェクトでは以下の図ような構成でプロダクトを開発しています。（とても簡略化しています） フロントエンドからGraphQLを利用する場合には、Next.jsのMiddlewareを用いてバックエンド（GraphQL Server）との通信をプロキシさせています。 バックエンドはフロントエンドとは別のCloud Runで動作していますが、 Cloud Runのデプロイ時に --no-allow-unauthenticated フラグを付与し、認証を必要にしているといった構成になります。 このフラグを付与することでバックエンド用のCloud Runに対するroles/run.invokerロールを付与したサービスアカウントで認証することでしかバックエンド用のCloud Runと通信できないようにすることが可能となり、セキュリティを向上させることができます。 今回Middlewar

GraphQLのクエリやミューテーションはJSONエンコードされた本文をHTTP POSTでサーバに送ることで実行されます。 すべてのクエリやミューテーションは同じエンドポイント(/graphql等)に対してPOSTされるため、特別な対応をしない限り、ログには「クエリ or ミューテーションどちらなのか」「どんな内容か」などの情報が記録されません。 簡単な設定だけでログを見てざっくりリクエストの傾向がわかるようにできると便利ですよね。 ���ンドポイントにoperationNameを付与する 例: query FooBarQury を実行した場合 -> /graphql?operationName=FooBarQuery 上記のようにしてクエリやミューテーションの名前を operationName としてリクエストURLに付与します。 具体的な情報はもちろん本文に含まれるため、細かな分析はでき

GCP 素人の私と、心優しい同僚たちが、デプロイエラーに立ち向かった覚書です。筆者が GCP 素人なので、語り口が素人くさいのはご容赦ください。 3 行まとめ 2023 年 1 月 14 日以降しばらくの間、GitHub Actions を用いて Cloud Run 等へデプロイする際に「コンテナイメージが見つからない」といった類のエラーメッセージが出たら、 docker/build-push-action@v3 の利用を疑ってみる provenance に未対応のレジストリを使っているのがわかったら、 provenance: false をインプットとして指定すると、治るかもしれない Cloud Run の場合、エラーメッセージが出た時点で異常な状態のリビジョンを作成してしまっている場合があるので、念のためチェックして、必要であれば異常なリビジョンを削除するとよい 2022.2.9 追記

ざっくり流し読みして、ろくに動作確認もせずに書いているので、あんまり鵜呑みにせずに自分で調べながら読んでください。 クライアント側で完了を待つ defer サポート React 18 には Streaming という機能があるんですってね。 「ファーストビューの表示には間に合わなくてもいいから、ちょっと遅れてでも表示したい」みたいなデータを、サーバー側で用意しつつ、クライアント側では <Suspense> で待っててもらい、データの用意が出来次第サーバーからクライアントに流し込んで表示、みたいなユースケースで役立つ技術だと思っています。しらんけど。 何ができるようになるかというと、 loader() 内で「別にこれ初回表示に間に合わなくてもいいな」というデータを、次のように Promise が完了しないまま return できます。その際、いつもの json() ではなく defer()

はじめに 2022年も残すところあと3日となりました。 皆様いかがお過ごしでしょうか？ 筆者は本日が仕事納めです。 今回は忘年記事として2022年のNext.jsのアップデートを振り返っていきたいと思います。 早速ですが以下の通り、2022年は5回も大きなアップデートがありました。 12.1(2022/02/18) 12.2(2022/06/29) 12.3(2022/09/09) 13(2022/10/26) 13.1(2022/12/23) それではそれぞれのアップデートを振り返っていきましょう。 12.1(2022/02/18) オンデマンドISR（ベータ版）：getStaticPropsによるページの即時再検証 SWCへのサポート拡充：styled-components、Relayなど next/jestプラグイン：SWCによるゼロコンフィグのJestサポート SWCによる高速な最

はじめに この記事は、urqlについて調べたことをまとめた記事です。 以下、調べようと思ったモチベーションです。urqlが気になっているかたの参考になれば幸いです。 Apollo Client 以外のGraphQLクライアントをを試してみたかった urqlのドキュメントキャッシュがよさそう、という記事を読んだので試してみたかった Apollo Clientからurqlに乗り換えた、という記事が話題になっていたので気になっていた urqlとは まずはドキュメントを見てみます。カスタマイズ性と汎用性の高さが推されているようです。 urqlとは The highly customizable and versatile GraphQL client for React, Svelte, Vue, or plain JavaScript, with which you add on feature

はじめに この記事は Figma Plugin に入門してみたくなって、いろいろと試したことをまとめた記事です Figma Plugin に入門したくなったモチベーション デザイナーさんといい感じに仕事できるようにFigmaの知識を持っておきたかった Figma Plugin がどういう仕組みで動いてるのか気になってた Create Figma Plugin が気になってた Create Figma Plugin を使って Figma Plugin を開発してみたい人の参考になれば嬉しいです Figma Pluginとは Figmaは、プラグインをインストールして機能拡張することができます。詳細は、公式ドキュメントにて 世の中には便利プラグインがたくさん公開されてる。以下、最近良いなと思った適当なプラグイン また、プラグインは自分で作ることもできます。Figmaのドキュメントにあるセットア