Kamal 2 を使い、インフラに詳しくない人でもNext.jsを296円のVPSにデプロイできるよう、説明してみる
9月26, 27日に開催され、めちゃくちゃ盛り上がったRails World 2024でKamal 2が発表されました。Kamal 2はRuby on Railsを作った37signals社が、自社の人気サービスをデプロイするのに使用しているツールです。 37signals社はAWS等のクラウドに年間で$3,201,564を使った(2022年: 日本円で4.5億円ほど)らしく、一方でAWSを使ってもインフラ系人員の削減もほとんどできなかったので、全然割に合わないからもうクラウドはやめて自分たちのサーバを使うと宣言しています。Kamal 2はそのために作られた、本格的なデプロイツールです。 （ちなみに自分たちのサーバを使うと言ってもオンプレミスでサーバを運用するというのではなく、さくらの専用サーバに近いイメージです） Dockerベース Docker化されたアプリなら何にでも対応 (Rail
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
React Server Component のテストと Container / Presentation Separation
Photo by Jon Tyson from unsplashはじめに先日 @takepepe さんと フロントエンドのテストについてパネルディスカッションする機会 があり、その際に一瞬だけ Next.js App Router のテストの話題になりました。 僕自身、最近 Next.js App Router と格闘する日々を送っておりタイムリーな話題であったのですが、イベントの場では時間の都合もありほとんど語らず仕舞いとなってしまいました。 そこで、今回の記事は App Router、特に React Server Component のテストについて、最近考えていたことを吐き出していこうと思います。 要旨この記事では「2023 年 8 月現在で利用可能なツール群で、どのように React Server Component (以下 RSC) をテストしていくのが妥当か」を書いていきます
現代的なユニットテストでのコードカバレッジ（テストカバレッジ）の扱い方 - 千里霧中
ユニットテストのコードカバレッジ（テストカバレッジ。ステートメントカバレッジやC0、C1など）は、不適切な運用が根強く見られます。多いのが、コードカバレッジの確保だけをテストの十分性目標にして、まずいテストを書いてしまうパターンです。 今回はこのコードカバレッジについて、現代的な開発を支えるための適切な運用について解説します。 コードカバレッジのみを直接のテストの十分性の目標にしてはいけない 結論から言うと、まずユニットテストは以下を目標として作成します。 ふるまいの仕様が実現されているか確認する プログラマが感じる品質リスク（いわゆる不吉な臭い等）が許容できる水準であることを確認する 法規制対応など、外部からのテスト要求に対応する コードカバレッジは、上記目標を達成することで副次的に確保されることを目指します。 注意点として、コードカバレッジの確保のみを直接の目標にすると弊害が大きくなり
抽象度の高い仕事の進め方 - Konifar's ZATSU
仕事をしていると、だんだんと抽象度の高いことを任されるようになる。 たとえば、方針も明確な小さな修正タスク => 修正方法がいくつか考えられるタスク => そもそも何をやるかから明確にしないといけないタスク といった感じで次第にふわっとした依頼になってくる。いわゆるグレード制を採用している会社において、"どれだけ抽象度の高い仕事を任せられるか" がグレードの違いの要素のひとつと言ってもいい。 抽象度の高い仕事を安心して任せられる人は何が違うのか自分もよくわからないので、自分のまわりの人がどういう動きをしているかを雑にまとめてみる。 1. なぜやるかを明確にしている わからないときはドキュメントやチャットのやりとりを探し、直接聞いたほうがよい人には自分でコミュニケーションを取っている やる理由がないと判断したら依頼者に話をして、実際にやらないこともある あとで「自分はこう言われただけなので」
EmotionからCSS Modulesへの移行！React Server ComponentsのCSS対応 - Findy Tech Blog
こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も良く、これまで活用してきました。 一方で、フロントエンド開発フレームワークにNext.jsを採用しており、そちらではApp Routerへの移行を進めています。 App Routerのメリットはやはり
清潔になりたい男たちへ に倣っておすすめアイテム書くよ その2（日焼け止めとクリーム、ケアについて）
anond:20240904185451 を書いた者だよ！朝起きたらすごいブクマ数になってて恐縮です。 ブコメへのいくつかお返事と、ブコメにもあった「日焼け止め」と秋冬に向けてのクリームのおすすめも書いておくね！ ↑の記事と同じような条件で基本的には選んでいるよ！ ちなみに、シェーバー兼用の洗顔とかはパートナーの男性が使って評価が高かったやつ！ 前段 なんでスキンケアのものを推すのか？→ここが長くてうだうだ言う奴がいてウザかったから、その3に飛ばした！→https://anond.hatelabo.jp/20240905171035 無料で見てるくせに文句ばっか言いやがって、残暑厳しい中ギトギトにクリーム塗りたくるぞコラ！！！！ （＝つまり、お金を払っているクライアントでもないのにどうしてそんな上目線でいられるのか不思議… 文句言うなら読まなければいいのに？ということ） 日焼け止めが大事な
「清潔になりたい男たちへ」に倣っておすすめアイテム書くよ
9/5NEW その2（日焼け止め・保湿について）https://anond.hatelabo.jp/20240905170633その3（クリームの紹介）https://anond.hatelabo.jp/20240905171035 も書いたよ！ anond:20240904005812 の主ではないけれど、ブコメに 「 id:doksensei せめてブコメでオススメのスキンケアとかないのか。デオコ以外にはてブで話題になったものないんじゃないのかこの役たたずインターネットめが」 とあった。ウム。役に立ちたい。というわけで、おすすめ書きます。 洗顔と保湿の1アイテムずつなので、取り入れやすいと思うよ。 個人の意見男性のほうが、保湿するだけでも（これまでやっていなかった分見違えるように）かなり若見えするので、 ぜひ洗顔と保湿だけでも見直してみて！「キレイになる」ではなくて、「若く見える」「ち
コードレビュー開発者ガイド
コードレビュー開発者ガイド はじめに コードレビューとは、コードの作成者以外の人がコードを調べるプロセスです。 Google ではコードとプロダクトの品質を維持するためにコードレビューを実施しています。 このドキュメントは Google のコードレビューのプロセスとポリシーに関する正規の解説です。 このページでは私達のコードレビュープロセスを概観します。このガイドはさらに二つのドキュメントに分けられます。 コードレビューの仕方: コードレビュアーのための詳細なガイド CL 作成者のガイド: CL をレビューしてもらう開発者のための詳細なガイド コードレビュアーはどんな観点でレビューすべきか？ コードレビューは次の観点で見るべきです。 設計: コードはうまく設計され、そのシステムにとって適切か？ 機能性: コードは作成者の意図通りに動作するか？ユーザーにとってコードの挙動は適切か？ 複雑さ:
フロントエンドカンファレンス北海道 2024 公開資料・Xアカウントリンクまとめ
2024/08/24(土)で開催されたフロントエンドカンファレンス北海道 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 X アカウントについては、fortee や資料に記載されていたり、資料公開の投稿で分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 タイムテーブル 本イベントでは2つの会場でそれぞれ講演がありました。 便宜上、以下のように A, B と表します。 カケハシ（8F）：A LINE ヤフー WOW ルーム（6F）：B 11:00 - A - Webの潮流から考える、フロントエンドの溢れんばかりの魅力とフロントエンドエンジ
PrismaのTypedSQLがなぜアツイのか
Prisma界隈で話題沸騰中（自分調べ）のTypedSQLだが、自分の中ではかなりアツいと思っているので、その理由を語ろう。なおTypedSQLの機能とか仕組みについては記述しないのでドキュメントや以下の記事を参照するとよい。 Prismaの難しさ 複雑なクエリを組み立てるのが特に難しい。複雑といっても何10行もあるようなクエリとかではなく、joinとか集計関数がいくつかあるくらいで十分複雑になる。たとえば特定のユーザーに紐づく記事をコメントの数を含めて取得したいとする。クエリは雰囲気こんな感じ。SQLとしては全然難しくない。 SELECT posts.id, count(comments.id) AS cnt FROM posts INNER JOIN users ON posts.author_id = users.id LEFT JOIN comments ON posts.id =
今一番推してるマンガを教えてくれないか
みんなの好みを知りたいし、読みたいから ［追記］みんなありがとう！嬉しい！読ませてもらいます！
見よ、これがHonoのRPCだ
僕が開発しているWebフレームワークHonoは、同じJavaScriptのフレームワーク、Expressと比べられることが多いです。どちらもやれることはほぼ同じですが、HonoのアドバンテージはファーストクラスでTypeScriptをサポートしていることです。特に「RPC」機能は他のフレームワークにはなかった「TypeScriptの型でサーバーとクライアントの仕様を共有する」ことを可能にしています。今回はそのHonoのRPCについて紹介します。 どんなものか まず、どんなものかを箇条書きで共有します。 Web APIの仕様、特にインプット・アウトプットをサーバーとクライアント間で共有するためのもの OpenAPIやgRPCを使ってやりたかったことを叶えるかもしれない サーバーとクライアントをどちらもTypeScriptで書くことが大前提である 同種のものにtRPCがあるが、Honoの場合、
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828
自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 追記 20240829: DATABASE_URL で Connection Pool を有効にするのに ?pgbouncer=true を追加 https://supabase.com/partners/integrations/prisma このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、20
生SQLに型を手書きする時代は終わり？Prismaの新機能「TypedSQL」
生SQLを扱う $queryRaw TypeScript向けのORMライブラリとしてPrismaがあります。Prismaは直感的で型安全なAPIを提供し、TypeScript向けのORMとしては第一に名前が上がることが多いライブラリです。 しかしそんな人気なPrismaでも、裏側では少しクセのあるSQLが発行されていたり、欲しいSQLがPrismaのAPIでは実現できない場合があります。 そういった場合のために $queryRaw というメソッドが用意されており、これを使うことで生SQLを書いてその結果を受け取ることができました。他のORMにもよくある機能です。 例えば以下のように実装することができます。 const users = await prisma.$queryRaw` SELECT id, name FROM "Users" WHERE id = ${userID} `; co
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Functional TypeScript
[スタパ齋藤のApple野郎] Macのメニュー表示を自由に解放するアプリ![[スタパ齋藤のApple野郎] Macのメニュー表示を自由に解放するアプリ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7dd75d69ab56ce02a6c1c1326d83a1998b95e8a6/height=288;version=1;width=512/https%3A%2F%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1377%2F454%2Fstpapl2022-01-05_thumbnail.jpg)
Next.jsの考え方
