個人開発なら仕様書がいらないと思うじゃん？後から「オレは何を作ろうとしてたんだ？」ってなるから絶対に必要「週明け月曜日の仕事と同じ」
鶴田道孝 @mTsuruta 個人開発だと 自分でプログラムするから「仕様書」いらないと思うじゃん？ いるんだな、これが。 「オレは何を作ろうとしてたんだ！？」 って、後になってから。 2025-11-26 11:29:00 鶴田道孝 @mTsuruta この現象、プログラム部分よりデータ構造とかデータの特殊処理とかの方が多い。 複数のクラスやメソッドが連合して動作する箇所。 ゲームだと、後付けでデータ構造がかなり修正されたりするんだ。 そして修正した動機が失われても、その残骸が残ったりする。 そういう時に。 2025-11-26 23:32:07 鶴田道孝 @mTsuruta じゃあ、仕様書を書けばいいかと言えば。 キチンとメンテしない仕様書は、沼。 「オレは何をしようとしてたんだー！あ、仕様書見よう」 仕様書を読む。 「オレは何がしたかったんだー！」 迷宮は、その深みをいっそう増す。
フロントエンドとサーバーでのバリデーション責務分解
はじめに 先日、Xでこんな投稿が話題になっていました。 実際のサイトを見ていないため詳細は不明ですが、事象としてはフロントエンドのJavaScriptだけでバリデーションを実装し、サーバーサイドに同等以上のバリデーションがなかったケースです。 DevToolsで回避できるということは、悪意あるユーザーが不正なデータを送信できてしまいます。 サーバーサイドではすべてのバリデーションを実装するべきです。セキュリティの観点でも、ドメインの正当性を保つ意味でも、サーバーは最後の砦となります。 一方で、フロントエンドのバリデーションについては、どこまで実装すべきか判断が難しいところです。本記事では、この点について考えを整理してみます。 バリデーションの責務を整理する 前提を決めておきます。 サーバーサイドバリデーションは絶対 サーバーサイドのバリデーションは必須です。これは絶対に省略できません。 理
1円も使いたくない個人開発のための技術スタック
対象 一般的なWebアプリケーション 特に、学生などはクレジットカードが使えずそもそも支払いができないという状況もあるので無料のものをまとめてみました。 結論として Supabase Next.js Drizzle Cloudflare Pages Cloudflare D1 / KV どんな要素が必要か Webアプリの開発に必要なのはフロントエンドと、バックエンドです。 バックエンドといっても、その中身は実際の処理に加え、DB、またログイン認証機構が必要になります。 フロントエンド フロントエンドとしては、Next.js一強です。 すでにコミュニティも成熟しているので使いやすく、いろんなところに統合できます。 バックエンド処理 バックエンド処理は、Next.jsの"use server";を使えば簡単に行えるので、別にAPIを作ったりする必要はなさそうです。 フロント・バックエンドのデプ
開放閉鎖原則(open-closed-principle)ってもはや意味ない - きしだのHatena
SOLID原則というのがあるのだけど、原則といつつ やりすぎに注意なみたいなことを言われ、自分で塩梅を探らないといけないなら全然原則じゃないやんということであまり好きではないのだけど、その中でもここではOにあてはまる開放閉鎖原則って意味ないよねって話を。 開放閉鎖原則の原典はメイヤーの「オブジェクト指向入門」で、第2版には次のような記述があります。(初版も書いてることはだいたい同じで、2版のほうが整理されて記述も多くなってます) モジュールは開いていると同時に閉じているべきである ただ、このメイヤーの文脈でいうようなモジュールの拡張ってやらないよねと。 ここでメイヤーの文脈での拡張というのは、モジュール自体に手をいれずに、機能の追加や変更ができるというものです。継承使っていい感じに機能追加ができる設計が「拡張に開かれている」ということです。 でもまあ、そんなライブラリの拡張をやらないですよ
Webkitの不具合に遭遇した話 - Oh! Can Not Diary
Webkitの不具合のようなおせっかいのような挙動に遭遇したのでまとめておく。 事象 チェックボックスが縦に複数並んだWeb上の画面で、高速で上から順にタップしていくとタップしたところとは別の要素のチェック状態が変わってしまう。 具体的には、1をタップ → 2をタップ という操作をすると 1にチェック → 1のチェックが外れるというような動き。タッチデバイスでのみ発生。ちなみにチェックボックスの更新処理でAPIを叩いたりとかの非同期処理はやっていない。 解決方法 スマホデバイス上での高速連打がダブルタップと誤認識された、という仮説のもと、css で以下のように設定したら解消した。 body:has(.hogehoge) { touch-action: manipulation; } body に指定して has擬似クラスで限定しているのは、.hogehoge で指定しても効果がなかったから
【React】知らなかったReact Developer Tools、20分で手軽に８つReact コンポーネントのデバッグテクニックをマスターする - Qiita
前書き React Developer ToolsはReactの公式開発者ツールであり、日常的なコンポーネント開発において、属性やファイルの位置特定、propsのトラブルシューティングなど様々なシーンで重要な役割を果たしています。熟練したReact Developer Toolsの使用は日常の開発をより効率的にすることができます。 この記事では、React Developer Toolsプラグインを体系的に理解することができます。本文では以下のことを学ぶことができます： コンポーネントの一時停止や遅延読み込みシナリオのシミュレーション。 コンポーネントに対応する実際のDOMを早く特定する方法。 props内の特定の関数がどこで作成されているかを早く特定する方法。 コード変更なしで、propsを介したコンポーネント変更をオンラインで検知する方法。 コンポーネントがどのファイルで作成されたかを
Rails vs Node.js
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
日本通運・アクセンチュアのシステム開発訴訟、裁判資料を読んで胃がキリキリした
物流大手の日本通運が「新・国際航空貨物基幹システム」の開発失敗を巡り、ベンダーのアクセンチュアを訴えた裁判。名門企業同士の訴訟、さらには約124億9100万円という賠償請求額の大きさは衝撃的だった。 裁判資料を読んでいると胃がキリキリした。筆者は2年ほど前までシステムエンジニアとして働いていた。その分、記されていた当事者の発言やチャットが、あまりにも生々しく映った。 訴状によると、開発プロジェクトはテスト工程から遅延し始めた。当初2020年12月の予定だった結合テストの後半過程「ITb」の終了は2021年11月にずれ込んだ。アクセンチュアがITbの「成果物」を共有サーバーにアップロードしたのは2021年11月30日。しかし、日本通運は先立って実施していた「打鍵テスト」で大量の指摘事項が挙がっていたことなどから、この品質を問題視した。以降、これら成果物の検収を巡り、両者の主張は至るところで対
ChatGPT (o1-preview) にテストを渡してコードを実装させるとどうなるか試した
はじめに 前にも別のモデルでやってる ただ o1-preview は、やり取りを重ねるよりも一発で終わらせるほうがいいらしいので、最終的なテスト全体を渡すようにした。 情報の提示方法が異なると当然結果も変わるので、 gpt-4o でも同様なことを試した。 材料 プロンプトは以下。 基本的に最初にやったときと同じ。ペアプロではないのでその部分の調整をしている - 私がテストコードを提示するのでそのテストケースをパスする最小限の実装をしてください - Vue.js のバージョン 3 と Typescript で実装を行ってください - コードのみを示してくださいコードの解説などは必要ありません - スタイリングは必要ありません - テストケースに失敗したらその内容をチャットで送信するので最小限のコードの修正をしてください - テストのコードには vitest を利用しています jest と互換
Railsのマイクロサービスアーキテクチャで構成されたアプリをモノレポ構成に移行した話 - Sansan Tech Blog
こんにちは。技術本部Sansan Engineering Unit Master Data Groupの古本です。 普段は、営業DXサービス「Sansan」の名刺交換した人や企業に関するニュースを表示し、お知らせする「企業ニュース」や「企業情報」を扱うシステムの開発をしています。 最近、マイクロサービスで作られた企業ニュースのシステムをモノレポ構成に移行しました。 今回はその時に行ったことについて話します。 モノレポ（mono repo）とは 本ブログで類似の記事があったので引用します。 一連のソースコードを単一のリポジトリで管理している状態のことです。 特に、実装言語、またはサブシステムやドメインといった何らかの区切りでリポジトリを分けている場合に、それらを集約することをモノレポ化と言います。 マイクロサービスアーキテクチャのリポジトリ構成を漸進的にモノレポに移行した話 今回も複数レポジ
Chrome DevToolsを使いこなしてフロントエンド開発を加速させる
Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保
本番環境における等価比較を活用した言語リプレイス - ZOZO TECH BLOG
はじめに こんにちは。基幹システム本部・物流開発部の上原です。昨年度に中途入社しまして、現在はZOZO基幹システムのリプレイスを担当しています。前職では、SESエンジニアとしてリプレイスプロジェクトに上流工程から参画し、大規模なシステムの言語リプレイスを経験してきました。さて私の紹介はこの辺りにして本題に入ります。 基幹システムリプレイスは既に進行しており、本年度には発送領域の機能を発送マイクロサービスとして切り出してリリースしました。それに続いて、入荷領域の機能をマイクロサービス化ではなくモジュラーモノリスに移行するリプレイスも進んでおり、こちらは細かく区切った単位でリリースをしています。 本記事では、自動テストによる「等価比較」を本番環境で実施しながら言語リプレイスを進めた事例を紹介します。この事例では、「言語間での処理の等価性を保証し、安心・安全にリプレイスをする」ということを目的と
可読性の高いコードを書くための実践ガイド - Qiita
はじめに ソフトウェア開発において、コードの可読性はプロジェクトの成功に直結する重要な要素です。読みやすいコードは、メンテナンスや拡張を容易にし、チーム全体の生産性を向上させます。 しかし、「読みやすいコード」 の定義は人によって異なります。個々のスタイルや好みによって解釈が分かれることもあるでしょう。それでも、できる限り多くの人にとって理解しやすいコードを書くことが、プロフェッショナルとしての責任です。このガイドでは、そんな読みやすさを意識した具体的なテクニックなどを紹介していきます。「もう知ってるよ！」と思った方も、今一度できているかを確認してみてください。 注意点 ここで紹介するのは、効率性を最優先したコードの書き方ではなく、誰が見ても理解しやすい、可読性の高いコードの作成方法です。効率的なコードを書くことも大切ですが、可読性を犠牲にしてしまうと、結果的にメンテナンス性が低下し、プロ
Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 | MEDLEY Developer Portal
2024-07-23 Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 S
Webエンジニアの学習ロードマップが知れるサイト - Qiita
エンジニアのみなさま、日々の学習本当にお疲れ様です！ また本記事まで足を運んでいただき本当に感謝です。 約2分程度で読めるので最後まで読んでもらえると幸いです。 はじめに 「Webエンジニアを目指したいが、何から手をつけていいか分からない」 「いろんな人が学習ロードマップの情報提供をしているが、どれに手をつけるか判断に迷う」 こんな悩みを抱えている方の一助になれば幸いです...！ 結論 こちらのサイトになります。 自分が学習したい分野を選択すると、その分野のロードマップが書かれています。 最近では「言語専用」のロードマップも書かれているため、かなり充実したサイトになってきた印象です。 それでは、試しに「Backend」のロードマップを見てみましょう。 学習ロードマップ｜Backend こんな感じです。 黄色塗りのフォームが「仕組み」や「概念」が書かれたもので必ずチェックしたい内容になります
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
window.locationを含むロジックのテストでconsole.errorが出たときの対処方法 - Qiita
Next.jsの考え方
