Renovateという自動ライブラリ更新botを利用し始めたのですが，マージの順番管理をする時間が増えてしまったので，その自動化をしました． 短く言うとこうです． Renovate（またはDependabot）を利用していて GitHubのマージ前にブランチを最新にするルールを利用していると （Renovate以外の）PullRequestがなかなかマージできなくて困るので マージ順を管理するGitHub ActionsであるMerge Masterを作りました ついでに，Enable auto-mergeを押すだけでいい感じにマージされるようになって便利になりました Renovateとは？ Renovateは，GitHubのホストするDependabotと同様に，リポジトリに含まれる依存関係のアップデートを自動で行ってくれるBotです． 導入すると，自動で古い依存パッケージを検出し，アッ

自分が使ってるやつを紹介します。 GitHub Star History 指定したGitHubリポジトリのスターの増加数をグラフで見れるサイトです。 たとえば、👇の3つのReactのUIライブラリを例に見てみます。 mui chakra-ui shadcn-ui ▲https://star-history.com/#shadcn-ui/ui&chakra-ui/chakra-ui&mui/material-ui&Date こんな感じで、一目でライブラリの人気度合いをざっくり比較できます。 使い方 テキストボックスに、比較したいライブラリのGitHubリポジトリURLを入力するだけです。 また、「Align timeline」にチェックを入れると、グラフのスタートを揃えれます。 たとえば、Prisma ORMとDrizzle ORMを比較するとPrismaの方が圧倒的に見えますが、スタート

プラハチャレンジにて、受講生チームから次のような質問がありました。 データベース（RDB）のテーブル設計を変更したい テーブル設計を変更する作業中にアプリケーションからデータベースへのアクセスが発生すると困る メンテナンス期間を設けアプリケーションを一時的に停止することで、データベースへのアクセスを防ぐことはできる データベースを止めることなくテーブル設計を変更する方法はないか この質問に対して、Expand and Contract patternを紹介しました。 この記事では、Expand and Contract patternを用いてテーブル設計を移行する方法を例を交えて紹介します。 ことのおこり プラハチャレンジのデータベース設計の課題の1つに、次のようなものがあります。 「漫画・小説といった書籍を保存してそれらにコメントできるようなサービス」（以下、書籍サービスとします）のデー

1人でウミガメのスープを遊べるiOSアプリを作りました。 アプリの概要 「ウミガメのスープ」は以下のようなゲームです。 出題者が問題を出し、他の人は「はい」または「いいえ」で答えられる質問を出す。質問者は、出題者が考えているストーリー、あるいは物を推測して語る。それがすべての謎を説明できたとき、このパズルは解けたことになる。 （Wikipedia - シチュエーションパズルより引用） 通常は複数人でプレイするゲームですが、このアプリでは出題者をChatGPTに担当してもらうことで1人でウミガメのスープを遊ぶことができます。 問題は今のところ15問で遊びたい問題を選択してプレイできます。 （良い問題が思いついたら追加する予定です） アプリ開発のきっかけ 2024年4月から業務でモバイルアプリ開発をすることになりました。 自分はWebアプリの開発経験しかなく業務時間だけのコミットでは足りないと

むかしむかしあるところに ※おおむね嘘です めでたくリリース！までは幸せだった ボス🧔‍♂️ < 今日から新規プロジェクトを立ち上げる！ ボス🧔‍♂️ < まず、君には基幹システムからのデータ連携システムの構築を任せる。 ボス🧔‍♂️ < 連携元システムの担当者はxxxさんだ。詳細は彼と詰めてくれたまえ。 私👨🏻‍💻 < ラジャ！ ... 私👨🏻‍💻 < でけたっす！ ボス🧔‍♂️ < よくやってくれた。では次のタスクを～...。 ... ボス🧔‍♂️ < 無事リリースだ！お疲れ様！ ボス🧔‍♂️ < 早速次のプロジェクトに移ってもらう。運用保守はやってもらうが、優先度は低くていい。 私👨🏻‍💻 < ラジャ！ そして起こる悲劇 CS👧 < すみません、お客様が「商品を購入したのにログインできない」っておっしゃってます！カンカンです！至急確認をお願いします！

雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js 15が正式に安定版としてリリースされました。 このリリースはRC1とRC2のアップデートをベースにしています。 安定性に重点を置きながら、気に入っていただけるようなエキサイティングなアップデートを追加しました。 今すぐNext.js 15をお試しください。 # 新しい自動アップグレードCLIを使用する npx @next/codemod@canary upgrade latest # もしくは手動でアップグレードする npm install next@latest react@rc react-dom@rc また、今週木曜日（10月24日）のNext.js Confでは、次の新機能についてもご紹介します。 Next.js 15の新機能は以下の通りです。 @next/codemod CLI: Next.jsとR

divではなく、spanを使ったほうが良いと思いました！ + <div>山田</div> - <span>山田</span> 文章だけで「ここはこうした方がいい」を説明するより、コードも一緒に提案してあげた方が分かりやすいです。 GitHub上だと、以下のように操作するとコードの提案ができます👇️ GitHubのリンクを貼る時はパーマリンクを使う

Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保

ディレクトリツリーを2秒で書けるアプリを作りました。 アプリ開発のきっかけ PRに説明をつけるとき、自分はよくディレクトリツリーを使います。 👇 こんなのです。 一から自分でディレクトリツリーを書くのはなかなかの手間なので、👇のようにしていました。 既存のディレクトリツリーをコピーしてファイル名の部分だけを変える 足りない部分は他の部分をコピーしたり「けいせん」を変換して補完する が、それすら面倒になってしまいサラッと書けるようなアプリを作ってしまおうと思い作成しました。 アプリの概要 入力したインデントに応じて自動的にディレクトリツリーの罫線部分を挿入してくれます。 左のテキストエリアにスペースやタブを入れるとスペースやタブの数がそのままディレクトリの深さとなり、右のテキストエリアにディレクトリツリーが描画されます。 [2024/8/31追記] この記事投稿後に@ShuntaToda

会社でNeverThrowというライブラリを使っています。 とても便利なので、とても便利だよ〜という記事を書きます。 NeverThrowとは？ NeverThrowは、TypeScriptで「Result型」を実現できるライブラリです。 Result型とは？ Result型は、関数の中でエラーをthrowする代わりに、エラーを戻り値として返すようにすればいいじゃね？な仕組みのことをいいます。 もっと噛み砕いて説明します。 たとえば「50%の確率で足し算してくれるけど、50％の確率で💩をthrowする」という関数があるとします。 コードで表すと👇になります。 function add(a: number, b: number) { if (Math.random() >= 0.5) { throw new Error('💩'); } return a + b; }

社内のプチ発表に使った資料です。 文章のコツ 前置き フルリモートでは、文章でのやり取りがメインになる。 なので、文章がヒドいと「この人と仕事するのキツイ」と思われちゃう😢 そう思われないための色々思ったことを自戒メモ。 なるべく箇条書きにする

雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js 15 リリース候補 (RC) が利用可能になりました。この初期バージョンでは、今後の安定版リリースの前に最新の機能をテストできます。 React: React 19 RCをサポート。React Compiler (Experimental)の登場及び、ハイドレーションエラーの改善。 Caching: fetchリクエスト、GETルートハンドラー、クライアントナビゲーションはデフォルトではキャッシュされなくなりました。 Partial Prerendering (Experimental): PPRをオプトインする設定をLayout及びPageに追加しました。 next/after (Experimental): レスポンスのストリーミングを終了後にコードを実行する新しいAPIを追加しました。 create-n

GitHub Actionsとは？ GitHub Actionsは、GitHubが提供する「スクリプトを動かしてあげるよ～」なサービスです。 具体的に言うと、リポジトリに以下のようなディレクトリを作って、その中に「こういうときにこれを実行してね」なYAMLファイルを設置しておくだけで、GitHubが「お！これを実行したらええんやな！」と認識してくれます。 料金（2024年05月現在） publicリポジトリだと無料で使い放題です。すごい。 privateリポジトリでも無料枠が2,000分/月もあります。 その前に：YAMLの書き方を予習する 先にYAMLの予習をしておくのがオススメです。 というのも、先にYAMLの書き方が分かっていないと「これはGitHub Actionsの機能なの？YAMLの機能なの？」と迷うからです。 学習としてオススメなのが、JSONでいろいろなデータを表現してみた

株式会社プラハは2022年、株式会社アガルートによるM&Aで子会社となりました。 この変化の一環として、アガルート社長自らがプロダクトオーナーのひとりとして参加する新規プロダクト開発が始まりました。プロダクトの開発はプラハの私たちが担当し、私も「開発チームのリーダー」としてそのチームに加わることになりました。 私はこれまで開発メンバーとしての経験しかありませんでしたが、エクストリームプログラミングとかレガシーコードからの脱却とかめっちゃ好きで、本で学んだプラクティスをリーダーとして実践できる機会が与えられて最高にハッピーでした。しかも、プロダクトオーナーの一人として参加するアガルート社長はこれまで伝統的な開発手法しか経験したことがないとのことで、新たな開発の進め方を経験してもらう絶好の機会でもありました。 やったこと 「欲しい機能一覧」を受け取ったが、いったん白紙に戻した プロジェクトが始

「ここ間違ってるよ！」があれば、コメントで指摘して頂けるとうれしいです。 フォーマッター フォーマッターは「俺が決めた書き方に修正してやるぜ」なツールです。 たとえば「この行は文字数が多すぎるから改行してやるぜ」とかをしてくれます。 現状は、Prettierがよく使われているようです。 フォーマットするルールは自分で追加できますが、公式には「フォーマットルールを議論することは無駄です」的なことが書かれてるので、暗にデフォルト設定のまま使うことを推奨している気がします。 リンター リンターは「その書き方はやめたほうが身のためだぜ」を警告してくれるツールです。 警告するルールは自分で追加できます。たとえば「関数を書くときは絶対に関数式で書け！関数宣言は使うな！」とかを警告できたりします。 ルールを追加すればするほど「俺に指図するなああーッ!!」となりますが、👇のようなメリットが生まれます。

この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 勘違いしている人が多そうなので追記します。 Prettierを使わないというのは私が独断で決めた事ではないです。 チームが発足する際の技術選定で合意は取れていますし、私が関与していない別のチームでも同様にPrettier無しで開発しています。 私達のチームはメンバー同士を互いに信頼していますし、細いスタイルで喧嘩を始めるようなメンバーは居ないので安心してください。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的としており、ESLintとは異なりデフォルト設定のままですぐに使えるのが特徴です。 さらに、PrettierはJS

2月になると「確定申告の季節ですね～」と言うエンジニアがいるのだ。 ぼくも「そうですねー」と話をあわせるのだが 「確定申告」ってなんなのだあああああああ～～～～？ 実はぜんぜん知らないのだああああああああああああああ ･･･って内心は思ってるのだ。 そんなことではいけないと思い、確定申告について調べてみたのだ！ 確定申告とは？ 一言でいうと「私は今年これだけ稼ぎました！」と税務署に報告することを指すらしいのだ。 うん、それは知ってるのだ。 中学生のときに「国民は納税する義務があるよ」と教えられたのだ。 でも、具体的に いつ？ どれくらい稼いだら？ どうやって申告する？ 税金の仕組みってどうなってるの？ など詳しいことは教えられていない気がするのだ。 そこらへんを掘り下げていくのだ。 その前に：会社員は？ 会社員の場合は、源泉徴収（げんせんちょうしゅう）というやつのおかげで、確定申告をしなく

DefinitelyTypedにプルリクを送った話を書きます。 （人生初OSS活動でした🌎） 経緯 最近、react-calendar-heatmapというライブラリを使う機会がありました。 GitHubで使われているようなヒートマップを表示してくれるライブラリです👇 ▲しずかなインターネットでも使用されてみたいです とても便利なライブラリなのですが、以下のような状況でした。 本体パッケージにTypeScriptの型が含まれていない DefinitelyTypedにはあるが、anyが多い 一言でいうと「つらい」。 そんなわけでDefinitelyTypedの型ファイルを見たところ、「自分でも直せそう」と思いました。 それくらい簡単でした。 なので、直してプルリクを出してみることにしました。 プルリクを出すまでの流れ 先に書いておくと、これが実際に出したプルリクです👇 Reduce U

「プログラマー脳」という本を読みました。 技術本としては風変わりで面白かったので、せっかくなのでメモしておきます。 （雑な解釈なので「それ違うんじゃね？」があるかもです。その場合は指摘してくれるとうれしいです） 📖どういう本か ザックリ言うと 科学的にいうとプログラマはこういう感じでコードを書いたりしてるので、こういうことを意識すると効率が上がるかもね！ みたいな内容を書いてる本です。 🧠人がコードを読むときの脳内 人がコードを読んでいるとき、どのようなことが脳内で起こっているのでしょう？ ･･･という感じの説明からはじまります。 ▲こういう流れらしい まずコードを読むと、目を通して「感覚記憶」というところに情報が入るらしいです。（1の部分） 「感覚記憶」って何？という話ですが、たとえば写真をパッと一瞬だけ見せられたとしても、脳裏に残像が少しだけ残ってる感があったりしますよね？このとき

VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に！ この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯） 以下のようにするのだ。 ＋ボタンをクリック：ステージングする ーボタンをクリック：ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい？ これは、GitHub Copilotの機能なのだ。 ✅コミット(git c