背景 ある日。 彡(ﾟ)(ﾟ) 「ファッ！？ 基本ケバブケースでファイル名が作られてるのに、一部でスネークケースとキャメルケースが混じっとる！！」 という状況に直面しました。 Nest.jsで作っていたマイクロサービスで起こっており、基本的にキャメルケースで当初は命名が統一されていました。 が、別のマイクロサービス(Laravel)でModel(Actice Record)の定義などを先にしていたのをNest.jsにそのまま持ち込んだ際に、テーブル名がキャメルケースだったりすることもあり、そこから紛れ込み始めたものと思われます。 要するに、人為的なエラーです。 ということでこれを修正する 目に見えるケバブケース以外のファイル命名は潰せましたが、本当潰し切れているか。あるいはこれから先も同じようなことが起こらないかが気になるところ。 こんなときの解法がlinterによる静的解析です。 という

import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio

タイトルは初見時の自分の気持ちでした。内容は結構あっさりしたもので、5分あれば読めると思います。 「あーなるほどね」となった方はわざわざ読む必要がない記事っぽいです。 型の互換性チェック 一言で言ってしまえばそういうことです。KとUが互いに置き換え可能かどうかを確認しています。 これがKとUのままだと分かりづらいのですが、適当な型に置き換えてみると分かりやすいです。 type Test1 = [1, 1] extends [1, 1] ? true : false; // true type Test2 = [number, number] extends [number, number] ? true : false; // true type Test3 = [string, string] extends [string, string] ? true : false; // tru

執筆時点でIDXを使った記事は見かけるものの、VSCodeを使ってローカルで試している日本語記事は自分はまだ見かけていないので、おそらく日本語では初の記事なんじゃないかと思います。 少なくともZennでは自分が最初の1人でした。 Firebase Data Connectとは Google I/O 2024で発表されたFirebaseの新機能です。 これを使うことで、GraphQLを介して、Cloud SQL For PostgreSQLへアクセスしデータのCRUDが可能になるようです。 Getting Start 記事執筆時点では限定公開プレビュー版なので、利用するためには限定公開プレビューへの申し込みが必要です。 申し込みはFirebaseプロジェクトの管理画面上から可能です。 ただし申し込み後すぐに使えるわけではなく、Googleさんの方で手続きをして頂いたのちに利用可能となります。

Kobe.tsとは TypeScriptとその周辺知識についての勉強会を開催していくコミュニティです。 なので、フロントエンドに限らず、node.js, Deno, Nest,js, Freshなどのバックエンドや、Firebase,Cloudflare,VercelなどのSaaS、npm,pnpm,Biome,tailwindCSS,Figmaなども取り扱うトピックの範囲です。 記事執筆時点でですが、立ち上げから3週間で既にメンバーが80人になりました。 神戸在住な方に限らず、ぜひメンバーになるボタンだけでも押していってください！！！ なぜ神戸？ 生まれてこのかた約30年、ずっと神戸に住んでいるからです。おそらくこれからも住み続けます。 そう断言できるのは、もちろん私が神戸を気に入っているからというのもありますが、職場が神戸にある妻と結婚したからです。 ソフトウェアエンジニアとしての性が

TL;DR TypeScriptでライブラリなどを覗いているとよく見かける<T, K extends keyof T>について、問題を分解してきちんと理解する試みです。 extends この場合のextendsの役割は継承ではなく、制約です。 例えば以下のようなイメージ。 type StringOrNumber<T extends string | number> = T type A = StringOrNumber<string> type B = StringOrNumber<number> // Type 'boolean' does not satisfy the constraint 'string | number' type C = StringOrNumber<boolean> type User = { id: number; name: string; }; cons

先日、こちらの勉強会に参加しました。 学びになる内容がたくさんあったのですが、自分が一番気になったのはこちらの発表でした。 この発表のなかで触れられている、 必要に応じてSWRのfetch関数にnullを指定、キャッシュのインバリデートを無効にしたグローバルのキャッシュ領域をグローバルステートとして利用する方針にしている という部分に「なるほど」となりつつも「どう書く🤔」となったため、それを試してみたというのが本記事の内容です。 SWRとは Next.jsを作成しているVercel社が作っているデータ取得のための React Hooks ライブラリです。 基本的な使い方はこんな感じです。 import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user',

いきなり結論 こういう感じでGitHubのプルリクコメント上にカバレッジレポートを表示してくれます。 以下のように設定することで、Status列の表示が変わります。閾値が設定されていなければ青色に。 閾値が設定されており、それを上回っていれば緑の丸かつ、「🎯 80%」のように閾値を表示してくれます。 import * as path from 'path'; import swc from 'unplugin-swc'; import { defineConfig } from 'vitest/config'; export default defineConfig({ test: { // 略 coverage: { // 略 thresholds: { statements: 80, }, }, }, }); 閾値を下回っていれば、上記のように赤丸で表示されます。 設定方法 使うのは

はじめに 最近Nest.js×Vitestを使ったプロジェクトのテストコードを書く機会がありました。 バックエンドをTypeScriptで書くのが初めてで、モックの書き方がさっぱりわからず困ってしまいました。 そこで勉強のために、普段テストを書くときに使うKotlinのモックライブラリ・Mockkでよく使うメソッドを「Vitestで使うには？」という視点で、いろいろと使い方を身につけようという魂胆です。 レシピ集 ということで見るべきものはVitestのモックのページなのですが、いかんせんコードがあまりにもサンプルすぎてイメージが湧きません。 またドキュメントらしき正引きになっていますが、最初のうちに正引きでドキュメントを見る人間なんていません。そのモックメソッドが最初から何をやってるのか知ってる初心者などいないからです。 ということで、この記事では逆引きでサンプルを列挙していきます。コー

先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「？SSRどうやって動かすんだ？」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。 これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮

去る2024年4月25日にTypeScript 5.5 ベータ版リリースの情報が発表されました。 どうやら今回の目玉機能は、『推論されたtype predicate』ということです。 この記事では、これまでとこれからでtype predicateがどのように変わるのかをお話ししたいと思います。 環境の用意 これまでの動作を確認するための環境は、既に用意していた別プロジェクトのランタイムを利用しました。バージョンは5.1.6です。 ベータ版環境は新たに用意します。公式のリリースノートにもありますが、以下のコマンドを実行するだけです。 これでベータ版の実行環境ができたのですが、VSCodeさんが最新版の仕様で型推論を行なってくれません。 ので、調教強制的にいうことを聞かせます。 やり方は、適当なtsファイル開いてshift + cmd + p → typescript:Select Types

この記事を書くきっかけ PHPカンファレンス小田原の参加レポートを書いたところ、武田さんからこんなフィードバックをいただきました。 こんなふうに褒めていただいて、恐縮です。 けど、これまで自分はオフラインのテックカンファレンス[1]に3回しか参加したことがありません。遠征かつ何泊かするのは今回が初めてでした。 にも関わらずこう言っていただけるような行動がきちんとできているようです。実際時間が凝縮されている感覚は自分でもあって、カンファレンスに参加すると2,3日くらいのできごとのはずなのに1週間分くらいの出来事に感じます。 では、「なんでそう感じるんだろう？」を考えてネタにしてみたら面白いんじゃないだろうか。そう思って筆を取ったのがこの記事です。自分は人に褒められたとき、「なぜ褒められたのか？」を振り返ります。詳しくはこの記事に。 そして自分のカンファレンスに対するスタンス「なぜカンファレン

アウトプット自体は元々個人ブログで書いていたのですが、それも2年前くらいから始めたにすぎなかったはず。 個人ブログからZennに移ったのは、「やっぱり技術の情報を求めて人が集まっているところに情報を投下しないと見てさえもらえない」事実に気づいたからです。 そこからコツコツと0からアウトプットを続けた結果、LaravelのMiddlewareに関する記事を出したあたりから認知度が上がったように思います。 PHPer界隈で有名な方々の多くが記事を取り上げてくださったことが今振り返ると非常に大きかったです。 それからコツコツと記事を積み上げて来たわけですが、ようやくZennで記事を書き始めてから1年が経ったようです。体感時間的には3年前ぐらいから記事を書いてるような感覚でした。 そんな節目を機に、この1年で書いた記事の中で反響が大きかったものを振り返ってみようというのが今回の記事です。 「どうい

この記事のモチベーション 「php-fpmとはなにか？」を知るため、PHPのドキュメントを見ました。 しかし、ここに書いていることはまあそうなのですがあまりに焦点が絞られ過ぎてて「php-fpmとはなにか？」に対する答えとしては少し不十分な気がしていました。 例えるなら数学の問題に答えるにあたって、途中式を飛ばしたり証明の過程を飛ばしたりというような感じ。 不十分というのは、それを理解するための段階をすっ飛ばして答えだけが書かれている状態のことを指しています。 その不十分なところを自分も曖昧にしか理解できていない気がしており、いい機会なので整理しておこうというのがこの記事のモチベーションです。 そのためこの記事は、「php-fpmとはなにか？」をプロセス→Webサーバー→実行方式と順を追って説明していく構成になっています。 「細けぇこたぁいいんだ、おらぁ今すぐ答えだけ知りてぇンダ」という方

先日、『SOFT SKILLS』という本を読みました。 『SOFT SKILLS』を読んだ内容は別途、note にまとめています。 上記の記事を書いている際に、「日本版の、それも 20 代のうちに読んでよかった本をまとめたら面白そうだし有益なんじゃないか」と思いました。 "ソフトウェア開発者"としてのバイブルは人によって異なります。なぜなら人によって専門が違うからです。Java が専門の人にとって、C#の書籍はバイブルたり得ないでしょう。 しかし、ソフトウェア開発者の"人生"としてのバイブルであれば、皆一様に同じレベルで共感してもらえるのでは？と思いました。 ということで今回は『SOFT SKILLS』に書かれている、 キャリア セルフマーケティング 学習 生産性 資産形成 フィットネス マインドセット の順に自分が 20 代前半で読んでおいてよかったと思う本。 そして、ソフトウェア開発者

おそらく 2023 年に Zenn で出す最後の記事になるかと思います。 タイトルの通り、2023 年に読んだ本の中で、特に素晴らしかったものをご紹介します。 とはいえあまり今年は技術書を読んだ印象がなく… というのも、特定の xx(例えば Next.js、Ktor)といった部類に関しては公式のドキュメントを読むことがほとんどになり、書籍に求めるのは公式ドキュメントに書かれていない何かや誰かの経験・ノウハウになったからだと思います。 この記事を書くにあたって今年読んだ本を振り返ってみても、やはり十数冊程度(それでも月に 1 冊は読んでた)のでインプット：アウトプットの割合的には良いバランスではないかと思っています。 ただ、先に述べた通り公式ドキュメントに書かれていないなにかを売っている本というのはどれも本当の意味で価値があるものであり、皆さんにも本当に意味のある情報にお金を使っていただける

TL;DR ふと「xxx みたいなコンポーネントを作るってなるとどうすればいいんだろ？」と思うことがあるかと思います そういう時に、ささっとお試しで作れる PlayGround 的なものを用意しておきたい 「なら Storybook とかいいんじゃね？」と思ったので、導入にあたってのメモを残します とりあえず CRA Storybook を導入する前に、そもそもの基盤となるプロジェクトが必要なので CRA します。 今回は Vite プロジェクトを作成することにします。 Need to install the following packages: create-vite@4.4.0 Ok to proceed? (y) y ✔ Project name: … vitest-react ✔ Select a framework: › React ✔ Select a variant: ›

TL;DR G.I.G とは Google Cloud の認定資格、Professional Cloud Developer を取得するまでの話 合格の証 G.I.G とは G.I.G は Google Cloud が主催する、 Google Cloud Platform のスキル習得のための招待制のプログラムです。 このプログラムの最終目標は、Professional Cloud Architect,Professional Cloud Developer,Professional Data Engineer のうちいずれか一つに合格することです。 そのために、参加者は全 3 回の必須セッションへの参加(セッションについては後述)と、受験資格ごとに選ばれた Cousera 講座(5or6 講座)を期間中に完了すること、そして先述の資格試験の内いずれか一つに期間中に合格することが求められま

export const getLabel = (name: string, age: number) => { return `名前は${name}で年齢は${age}歳です` } import { afterEach, describe, expectTypeOf, assertType, it, vi } from 'vitest' import { getLabel } from "./test" describe(`Testing Types`, () => { afterEach(() => { vi.restoreAllMocks() }) it(`関数であるかどうかと、引数の型を検証する`, () => { //! 関数であるかどうか expectTypeOf(getLabel).toBeFunction() //! 引数の型を検証する expectTypeOf(getLa

はじめに この記事は『blessing software 夏のブログリレー企画』の最終日の記事です。 昨日は 鉄馬 さん@tekihei2317_ の個人開発アプリを Remix + Cloudflare D1 に移行してみたが公開されました。 今回参加してくださったエスツーさん(@stg_tech)、GANGAN さん(@gangan_nikki)、asuka さん(@a_skua)、鉄馬さん(@tekihei2317_)、本当にありがとうございました！！！ 本日で blessing software 夏のブログリレー企画も最後です。 なのでトリを飾る記事として、2023 年初に自身で勉強会を立ち上げてからこのブログリレー企画を開催するまでの足跡を書いて公開することにしました。 勉強会を作ろうと思った背景 一番大きなターニングポイントとなったのは、今の会社の価値観として業務外でエンジニア