はじめに 今回の記事では、学習・開発でTypeScriptを使ううえで絶対に確認するべきGitHubリポジトリ、サイトや書籍を33も紹介する。TypeScriptで生計を立てているプログラマーはもちろん、これからTypeScriptを学習するプログラマーはぜひ確認しておきたい。 GitHubリポジトリ awesome-typescript TypeScriptの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。TypeScriptを使っているプログラマーは全員確認するべき。 awesome-react Reactの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。 awesome-vue Vueの学習・開発に役立つツール、サイトや書籍を一つにまとめているGitHubリポジトリ。 awesome-nextjs Next.jsの学

本をよく積みます。よく読むではなく、ともかく積んでいます。 俺たちの本積むスピードには誰も追いつけない（読んでない本、まだまだあるのにまた本を買ってしまう） pic.twitter.com/RxrHrRl8KX — フジイユウジ (@fujii_yuji) 2021年12月17日 毎週土曜の朝から積読を強制的に消化する会というのをオンラインでやってまして、「誰か来るだろうから起きて読まなくては……」と強制力が働くことで本を少しずつ読むことができています。参加者のみなさん本当にありがとう。 時期によって人が増えたり減ったりして、ここ最近は数人しかいない状態なので新規参加者を募集しております。誰でも参加できるので参加してみたい方は連絡くださいな。 というわけで、今日は読んでよかった本をまとめて紹介していきたいと思います(今年じゃないのもちょっとあり)。 まとめてみたらニンゲン的な原理や不合理と

はじめに こちらはバイセルテクノロジーズ Advent Calendar 2022の 24 日目の記事です。 前日の記事は田中さんの「環境構築をコマンドでまとめてみた」の記事でした。 ​ こんにちは！ テクノロジー戦略本部 開発二部の小林です。 ​ 自分が担当したプロジェクトでは、弊社で初めてバリデーションライブラリとして Zod を使用し、React-Hook-Form × Zod の構成でフォームを作成しました。 ​ 本記事では、実際にプロジェクトで実装した事例を紹介したいと思います。 ​React-Hook-Form × バリデーションライブラリの技術選定に迷っている方がいましたら、ご参考になれば幸いです。 はじめに 対象読者 React-Hook-Form とは Zod とは なぜ React-Hook-Form とバリデーションライブラリを組み合わせるのか バリデーションライブラ

Gmailをメーラーとして使ってますが、メールを開くのがいまだに苦手です。 これをどうにかしようと、メールをもっと気軽に消せる方法はないかなーと思ってInbox Zeroを思い出したのでやり始めました。 次の記事や動画を参考にしています。 Inbox Zero and the Inbox Zero Method — everything you need to know 【15分で完了】1度設定したら戻れない、受信トレイ0生活 | おかんの給湯室 My Complete Inbox Zero Workflow (in 2022)! - YouTube 基本的には、この動画を参考にして設定しました。 Inbox Zeroの設定方法 細かい設定は参考にした動画や記事の方に任せます。 Gmailの”設定”でやること 詳細タブ [ ] 自動表示 を有効化(アーカイブしたときに次のメールを自動で開く

回答: noteのロゴデザインがリニューアルされたのですね。デザインを手掛けたのは日本デザインセンター代表の原研哉氏！（余談ですが、その昔、彼の著書とファンレターを日本デザインセンターに送りつけ、一方的に原研哉氏のサインをお願いするという暴挙にでたのはこの私です。） 新しいデザイン、nの形がとても好きです。シンプルながら味と趣があり、アプリのアイコンになってもスマホの画面に良く映えると思います。Note-FONTと呼ばれるオリジナルフォントは、Gothamをベースにしたのかな、丸みのある親しみやすい書体で好感が持てます。原氏は「無色透明で邪魔にならない、それでいてしっかり信頼に足る品質...

2021/09/29 TypeScriptでSOLID原則〜依存性逆転の原則〜 design TypeScript SOLID原則とは？ SOLID原則とは、オブジェクト指向プログラミングにおいて、変更しやすい・理解しやすい・再利用しやすいモジュール（クラスや関数などの、ソフトウェアのを構成する部品）を設計・開発するための原則のことです。ソフトウェアエンジニアRobert C. Martinに提唱された多くの設計原則を5つにまとめたものの頭文字をとって命名されました。 S … Single Responsibility Principle: 単一責任の原則O … Open-Closed Principle: 開放閉鎖の原則L … Liskov Substitution Principle: リスコフの置換原則I … Interface Segregation Principle: インター

TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

なぜLiteFS+SQLiteか 「個人開発のコストはDB次第」でサーバーレス環境でコンピューティングリソースを節約できたけどマネージドDBはまだ高いよ(要約)ということを言っていたら「本番環境でSQLiteを使うといいよ」と何人かの人に教えてもらってLitestreamのことを知った。 LitestreamはDBを読み書きするプロセスを1つにして利用するので、サーバーレス環境でsqliteファイルをパスで参照できて、複数箇所から掴まないように構築すれば条件は整えることができる(Cloud Runのように並行に呼び出してもインスタンスが共有されるサービス+最大サイズを1にしておく、とか)。 Litestreamのみでも便利に使えていたんだけど、プロジェクトをウォッチしていたらその後サーバーを複数台にしてそれぞれのインスタンスで同じ結果を得られたり、書き込み先を適切にハンドリングするデザイン

[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が

概要と投稿の背景 本投稿では、下記の参考にした記事や動画を通じて私が学習した、Firestore Security Rules の書き方と守るべき原則についてまとめます。 まず、そのような学習に有益な情報をオープンに発信して下さっているディベロッパー・クリエイター、Google 公式の皆さんへのリスペクトと感謝を表明します。本当にありがとうございます。 私と同じ学習者・初学者の方の参考になればと思い、具体的なユースケースを想定しながら、実際のコードを含む形でまとめています。 参考にした記事や動画 本記事では、以下のような記事や動画を通じて学んだ内容をまとめています。 【公式】Firebase CLI リファレンス 【公式】Cloud Firestore セキュリティ ルールを構造化する 【公式】Cloud Firestore セキュリティ ルールの条件の記述 【公式】Firebase 公式

We are thrilled to announce the release of SWR 2.0, the popular React data-fetching library that enables components to fetch, cache, and mutate data and keeps the UI up-to-date with changes in that data over time. This new version comes packed with improvements and new features, such as new mutation APIs, improved optimistic UI capabilities, new DevTools, and better support for concurrent renderin

この記事は 「個人開発Advent Calendar 2022」 8日目の記事です。 はじめに 先日リリースされた、SplarateというWebサービスの開発をお手伝いしています。そこで導入したtRPCが驚くほど便利だったので、実際の体験を交えてその使いやすさを紹介します。 tRPCとは？ tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation. https://trpc.io/docs/ tRPCは、スキーマやコード生成なしで型安全なAPIを簡単に構築し、呼び出すことのできるライブラリです。 tRPC is for full-stack TypeScript developers. と謳われているように、TypeScriptに特化して作られており、Ty

こんにちは、楽ウマ料理研究家のかめきちパパです。 焼き鳥好きな私。焼鳥屋さんでいただくじっくり焼いた鶏肉のあの味を家でも“楽ウマ”に食べられないか、と考えたのが今回のレシピ。フライパンのままテーブルに出す「串なしねぎま風」です。 鶏の照り焼きのような感じですが、ちょっと違う。長ねぎの風味で、一気に焼鳥屋さんのねぎまの味わいになります。一味唐辛子を多めにかけてちょっとピリッといただきました。 嫁さん評価　★★★★★ 「確かに焼き鳥の身の大きい版みたいな感じね。鶏もも肉を美味しく食べられる料理の1つ」 娘評価　★★★★★ 「味付けは美味しいけど、一味をかけすぎた気が……」 かめきちパパの「串なしねぎま風炒め」 【材料】1人前 鶏もも肉　1枚（300g） 長ねぎ　1本 一味唐辛子、七味唐辛子、粉山椒など　お好みで （A） しょうゆ　大さじ2と1/2 みりん　大さじ2 砂糖　大さじ1 作り方 1.

この記事について 実際にフォームを使用するときは、バリデーションライブラリと合わせて実装することが多いと思います。 こちらの記事で再描画を抑えるためにはReactHookForm（以下 RHF）を使用するのが良いと投稿しました。 今回の記事では、タイプセーフなバリデーションライブラリ「Zod」とRHFを使用した実践的なフォームを作成していきます。 RHFとZodは以下のresolverを使用すると簡単に組み合わせることができます。 ですが愚直に実装しても、1つのコンポーネントにすべての関心事が詰め込まれ、ファットなコンポーネントになってしまうでしょう。 今回は、フォーム処理における関心事をカスタムフックに切り出し、交換可能（プラガブル）なフックを作成していきます。 画面 以下のようなフォーム画面を実装しています。 InputFieldコンポーネント 以降で使用しているInputFieldの

TanStack | High Quality Open-Source Software for Web Developers React Query について公式ドキュメントを読みながら自分に必要なものをまとめたメモを記事化したもので以下の 4 つの記事で構成されています。記事ができたものから順次リンク化していきます。 React Query-基礎知識編 React Query-データ取得編 React Query-データ更新編 React Query-テスト編 参考記事 Testing | TanStack Query Docs API | Testing Library MSW – Seamless API mocking library for browser and Node | Mock Service Worker Testing React Query | TkDodo's

エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（

JSConf jp 2021 kaonavi front-end development in the monolithic service

｢ソフトウェア分野で迅速なイノベーションを実現するには、それぞれが何に取り組んでいるのか、誰が何をコーディングしているのか、把握しておくことが不可欠です｣ 11月21日にツイッターのサンフランシスコ本社で開かれた全社会議の場で、マスク氏は大規模な人員整理が完了したこと、（テスラのような）テキサス州への本拠移転計画は考えていないことを語っているが、上記のメールはその数時間後に送られた。 なお、Insiderがすでに報じたように、同社のフルタイム従業員数は現在約2300人、10月末にマスク氏が経営権を握った時点の7500人に比べて3分の1以下まで激減した。 メールは、エンジニアらに各自報告を求める内容として、｢どんなプロジェクトに取り組んでいるか｣｢何を到達目標としているのか｣の説明に加え、｢その週に書いたコードのサンプルまたはファブリケーター（Phabricator、コードレビュー用ツール）