はてなブックマーク

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

先日の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サーバー→実行方式と順を追って説明していく構成になっています。 「細けぇこたぁいいんだ、おらぁ今すぐ答えだけ知りてぇンダ」という方

はじめに みなさん、きちんとフレームワークやライブラリのコードを読んでいますか？ 自分はこれまで「ここってどうなってるんだろう？」と思いながらも、「とりあえず使えないことには始まらない」「読解する時間がない」「基本がわからないとどうしようもない」という理由でフレームワークのコードを読むことを後回しにしてきました。 けど、それを後回しにしてもいい時間はもう終わり。 今のレベルから一つ上のレベルに上がっていくためには「なぜ？」を放置せず、疑問を突き詰め、さらなる疑問にぶちあたり、またその疑問を調べ解決していくという作業が必要なのではないかと思います。 そこで以前から利用しているもののその中身を詳しく覗いたことがなかった、"Laravel Breeze"のソースコードを読み解いていこうかと思います。 シリーズものにしていこうかと考えており、今回はまず基本も基本、ログイン処理から見ていこうと思いま

先日、『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: [email protected] Ok to proceed? (y) y ✔ Project name: … vitest-react ✔ Select a framework: › React ✔ Select a variant: ›

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 夏のブログリレー企画』の5日目の記事です。 昨日はasukaさん(@a_skua)の「Flutterを用いたWeb開発の今後について考える」が公開されました。 次回はKanonさん(@samurai_se)の「私がエンジニア勉強会を作り、ブログリレーを主催するまで」です！ はじめに 以前、Type Challenges Judgeという、type-challengesのオンラインジャッジを作りました。 Type Challenges Judgeは、type-challengesの問題の回答の正誤判定を行ったり、自分がどれくらい正解したかや、他の人の回答が確認できるアプリです。 このアプリをRemix + Cloudflare（Pages、D1）に移行してみた[1]ので、やったことについて書こうと思います。 技術スタックについて Type Ch

この記事は『blessing software 夏のブログリレー企画』の4日目の記事です。 昨日はGANGANさん@gangan_nikki のESLintモジュールを用いてNuxt3 + ESLint設定を行うが公開されました。 明日は鉄馬さん@tekihei2317_ の個人開発アプリをRemix + Cloudflare D1に移行してみたが公開される予定です！お楽しみに！ Flutterを用いたWebアプリ開発の課題 2021年にFlutter2が出た際に、WebのサポートがStableになりました。その際に簡単なWeb Appを作ったのですが、大きく3つの課題があると感じていました。 Webページにしてはファイルサイズが大きい Canvasを用いてレンダリングするため、Webページとして扱いづらい フォントをWebフォントを利用して描画するため、フォントのダウンロードを行っている

先日、『Developers Boost 2023』に参加してきました。 ここで 30 代を目前に控えたエンジニアの方達から、さまざまなキャリア論をお伺いすることができました。 その中の一人、sakito さんが 20 代中頃にこのような発表をしたとおっしゃられていました。 これを見て自分も 20 代後半に差し掛かったこの頃に一度、 今の時点で気づいた真理 これから先やっていこうを思うこと を整理しておこうと思い筆を取り、敬意を込めて sakito さんのスライドタイトルをそのままこの記事のタイトルにいただきました。 ただし、ここで書こうとすることはエンジニアリングのみならず、これからシステムエンジニアとして生きていく上で必要そうなスキルも含まれそうです。 現状自分が得た真理 ここまで 5 年という短い期間ですがシステムエンジニアとして仕事をしてきたなかで、揺るがないだろうと思える事実につ

はじめに ddd を"ドメイン駆動開発(Domain Driven Development)=DDD"のタイポだと信じ「実はちゃんとドメイン駆動開発のことを説明するんでしょ？」と期待してこの記事を開かれた方、誠に申し訳ありません。 ここでバックしていただいて結構です。これ以上読んでもご期待に添えることはできません。平に謝罪致します。 一方で ddd がタイポではなく、何のことか察しておられる方はこのまま答え合わせしていってください。どうやら幅広く Laravel の知識をお持ちとお見受けします。 また、何のことか察してはいないものの「じゃあなんなんだよ？」と気になる方もこのまま最後までお付き合いください。 ところで dd は知ってますよね？ Laravel でデバッグするときに使うヘルパー関数です。 ただ、この言い回しには若干の語弊を含む可能性があります。 よく dd を紹介する記事で L

TL;DR 「正しく説明できないな」となった人は useEffect を使ったり useEffect の関連記事を読む前に、ここで一緒に理解していきましょう。 この記事を最後まで読めば useEffect の基本についてはバッチリになると思います。 useEffect の基本 以下のような形が基本形となります。 第一引数には useEffect のコールバック関数、第二引数には依存配列と呼ばれるものを渡します。 依存配列に値を渡した場合、その値が更新された際にコールバック関数が実行されます。

モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記事を読むと React Developer Tools の簡単な使い方を知り、useState の再レンダリングについて動きがイメージできるようになると思います React Developer Tools これのこと。React を使った開発をするのであれば、必ず導入しないといけないレベルのもの。 再レンダリング時ハイライトの設定 React Developer Tools をインストールした後、F12 を押下して Component を選択この歯車を押下す

🏃 はじめに 今度、このような勉強会が開催されます。 ここで、「もし自分が"勉強法"を説明するならどうするか？」をふと考えていると、観点が２つあることに気づきました。 学習のワークフロー 学習の方法それ自体 この二つの観点から自分の勉強法について言語化してみようと思います。ただし前提として、ソフトウェアエンジニア向けというのがあります。 📚 アジャイル勉強法が Zenn Book になりました!! この記事で説明している以上に詳しい内容を Zenn Book の方には書かせていただいております！ この記事を読んでみて、より詳しく知りたいとなった方はぜひ Zenn Book の方もよろしくお願い致します。 1 章は無料で読めます！ ⏰ 学習のワークフロー サイクルはこんな感じです。 年間の計画を立てる タスクに細分化して GitHub Project に登録していく 週単位で消化するタス

はじめに こちらの記事の続編で Laravel Breeze の Remember me 編を書こうとしていました。 その際にソースを追っかけていたのですが、Remember me について解説するためには、auth ミドルウェアを見る必要がありました。 そして、Middleware 見るためには Laravel の呼び出しライフサイクルから見ていく必要があったのですが、結果として Remember me よりも複雑でしたので別記事として公開することにしました。 なので、Remember me 編に入るまでにこちらの記事を読んでおくと、スムーズかと思います。 また内容が Laravel のコアな部分についてなので、つよつよ Laraveler 達に 「クソ記事」「こんな程度で技術記事書いてるとか」 みたいに叩かれそうで怯えながら公開したのですが、Twitter でびっくりするくらい沢山の良