US配列のMacでABC入力と日本語入力を切り替えたい場合、以下の4つの方法があります。 地球儀キーを押す ^ + スペースを押す Caps Lockを押す 英数/かなキーを押したことにする 地球儀キーを押す US配列のMacの場合、キーボード左下にある地球儀キーを押すことで入力ソースを切り替えられます。 MacBook本体のキーボードやMagic Keyboardを使っている場合、一番簡単な方法です。 ^ + スペースを押す 標準設定では、^ (Control) + スペースを押すことで入力ソースを切り替えることができます。 変更したい場合は、設定を開き「キーボードショートカット...」から入力ソースのカテゴリーを選択し、キーの割り当てを変更できます。 Apple以外のキーボードを使っている場合には、こちらの方法が有力です。 Caps Lockを押す 設定を変更することで、Caps Lo

社内で「Arrayの要素を指定するときは [i]やめて.at(i)を使おう」という内容の雑談をしていました． 添字指定に感じていた課題 添字指定でもatメソッドでもどちらもArrayの要素を取得できるメソッドであることに変わりはないのですが，TypeScript上で添字指定した場合はundefinedが返ってくる可能性が推論されないということに課題を感じていました． TS Playground const arr: string[] = []; const str: string = arr[0]; // OK console.log(str); // undefined この例では，1行目で空のstring[]を作成していますが，2行目で最初の要素を取得するとstring | undefinedではなくstringと推論されてしまいます． ところが，実際に実行するとstrの中身はunde

こんにちは！モニクルのエンジニアの久慈です。 先日、モニクルの開発合宿にてReact Nativeを用いてアプリ開発する機会に恵まれたので、振り返りも兼ねてブログを書いています。 きっかけは？ モニクルでは2023年度から開発合宿を行なっています。(2023年度の開発合宿の詳細はこちら) 合宿で何をするかを計画する段階では、今年度の開発合宿では昨年同様、まずは開発部のメンバーが開発合宿で取り組みたいアイデアをブレストする形で始まりました。ちなみにブレストはfigjamで行いました。 そのブレストの最中に一つ「これをやってみたい！」と私に刺さるアイデアがありました。 それは同僚のなかざんさんの「React Nativeを使ってアプリ開発をしてみよう！」というものでした。私は早速このアイデアに賛同して、チームメンバーになる流れになりました。 実際のfigjam上でのブレストの様子 React

はじめに Node.js では logger として pino や winston を採用することが多いのではないでしょうか。 Deno でも利用することは可能ですが、標準ライブラリには @std/log が用意されています。 なぜ@std/log を選んだか 私は Cloud Run をよく利用しますので Cloud Run にデプロイする想定です。 デプロイ先では stdout にログを出力し、Cloud Logging によって自動収集させたいです。 さらに、出力するログは JSON オブジェクトとしてフォーマット(構造化ログ)して運用時の検索性を向上させたいです。 Node.js ではこのような時、前述したライブラリを採用すると思いますが、Deno では@std/log だけでログのフォーマットやログの書き出し方法の設定、環境によってのロガーの切り替えを行うことができます。@std

はじめに 株式会社モニクルでSREを担当しているbeaverjrです。 弊社SREチームではSlack次世代プラットフォーム（next generation Slack platform）を活用して、インシデント対応の標準化を目指すSlackbotを作成しました。今回はその取り組みについてご紹介します。 背景と課題 弊社では、インシデント対応においていくつかの課題に直面していました。特に、インシデントレベル（SEV＝深刻度）やエスカレーションフロー（SEV別の報告先、役割分担、対応フロー）が定まっていないことが大きな問題でした。そのため、まずはこれらの定義を行いました。 この取り組みにより、複数のチーム間で共通の言語ができ、インシデント対応が少しずつ改善されてきたとのフィードバックも得られました。しかし、以下のような課題が残っていました。 復旧作業に夢中で関係者への連絡やフローに沿った対応

年初に「今年こそは」と気合いを入れてこんな記事を書きました。 が、そんな快適に使っていた 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のコードを書くことができるように

てんてんてん(..., 3点リーダー)をいい感じにしたい！ フロントエンドの画面表示を実装していて、「数行(コンポーネントを使う側から指定)かつ溢れたら3点リーダーを付けれるコンポーネント」を実装したくなることがあるかと思います。この記事ではそのやり方をメモ程度にまとめていきます。 具体的なUI こちらは実装後のStorybookのキャプチャです。 どうやるの？実際のコードは？ React, MUIを用いて.tsxに実装する場合の一例を残しておきます。 MUIでなくても、コードを適宜修正すればchakraなどでも大体同じようにして使えるはず！ 追記：chakraにはnoOfLinesというpropsがあると同僚エンジニアが教えてくれました！ /** * テキストを指定行数で省略表示するコンポーネント * @param param0 lineLength: 表示行数 * @returns T

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

はじめに CJSやESMといったモジュールタイプ、先人たちの記事を読み理解したつもりになるが、時間が経つと完全に忘れるということを繰り返している。package.jsonの最低限の設定と、その読み込み方法を簡易的に記載する。 これは検証で書いたサンプルコード CJSからCJS, ESMを読み込む パッケージ中の .js は、パッケージのpackage.jsonに記載されている type フィールドが commonjs の場合はCJSとして扱われ、 type フィールドが module の場合はESMとして扱われる。type フィールドのデフォルト値は commonjs なので、 type フィールドが指定されていなければCJSとして扱われる。 package.jsonの main フィールドはパッケージのエントリーポイントで、パッケージを使用する側がimportまたはrequireする際に

今まで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

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

はじめに 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 を使っ