tl;ldr ウォーターフォールという言葉を悪口として使うのは良くないんじゃない？ 空想上の開発手法ウォーターフォールと進化したウォーターフォール アジャイル開発の説明がされるとき、アンチパターンとして「ウォーターフォール」が使われることがあります。これは「ダメな開発現場」と同義で使われており、共通仮想敵としての空想上の開発手法とも言えます。 それは、曰く、硬直化していて変化や手戻りを許さず、一本道でフィードバックサイクルがない、数十年アップデートされていない古臭い手法のことらしい。 もちろんそういう開発をしている現場もまだ数多く存在するでしょう。ただ、ウォーターフォールをカイゼンし進化させている人達もいます。そういう人たちの話を聞くと、例えば以下のような話を聞きます。 一ヶ月で１ウォーターフォールを回す 前の手順に戻る手続きが定められている 初期フェーズから開発者を巻き込む 定期的なレビ

はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl

ウェブアプリでの位置情報アクセスなどの強力な機能を使用するための権限をリクエストする命令型の方法はいくつかあります。これらの方法にはいくつかの課題が伴うため、Chrome の権限チームは新しい宣言型方式である専用の HTML <permission> 要素をテストしています。この要素は Chrome 126 のオリジン トライアルであり、最終的には標準化したいと考えています。 権限をリクエストするための命令型メソッド ウェブアプリが強力な機能にアクセスする必要がある場合は、権限をリクエストする必要があります。たとえば、Google マップが Geolocation API を使用してユーザーの位置情報を必要とする場合、ブラウザはユーザーにプロンプトを表示し、多くの場合、その決定内容を保存するオプションが表示されます。これは、権限の仕様において明確に定義された概念です。 事前リクエストではな

はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av

しのゆ𝕏酒くずエンジニア @shinoyu 新宿で社長やってるソフトウェアエンジニア18年生のおかまちゃん / 💻技術🎧 V系 🎀ロリィタの人 / 170スペ110 スプリング、骨ウェーブ、顔ソフエレ / 絡みない鍵とスパムは🚫 / 原則IT関連業のみフォロー /たまに会えるかも @shinjukudist しのゆ𝕏酒くずエンジニア @shinoyu わし詳細設計書書くのやだよ(￣･ω･￣) 細かければ細かいほど仕様変わった時の変更が爆増してメンテコスト爆上がりする。かけるべきコストはそこじゃない。 必要なのは完成に必要要件がまとめられたもの。それを元に受け入れ試験書がつくられる。それクリアすればどう作ってようが構わんわけだ 改修コストを下げるための設計になってることは前提だけどね。 だけど、詳細設計書が必要となる現場はこの設計することはできない。だってそれできてたら詳細設計書

Perplexity Pro is the most powerful way to search the internet with unlimited Pro Search, upgraded AI models, unlimited file upload, image generation, and API credits.

Tailwind CSSでデザインシステムを構築する［後編］ ～デザイントークンを定義するときに何を議論すべきか 2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 前回の記事の最後で、デザインシステムを構築する際にコンポーネン

2024年1月26日発売の『Tailwind CSS実践入門』の第9章「ユーティリティファーストでデザインシステムを構築する」の一部を、前後編の2回に分けて掲載します。ユーティリティファーストというTailwind CSSの発想を活かしたデザインシステム構築の最初の一歩をまとめたものです。開発者がデザインルールをTailwind CSSの設定に落とし込む過程はもちろん、デザイナーが開発者とどのように協力しあうべきかについても論じています。 本記事の内容は、書籍の最終章に当たる部分です。ほかの章の内容に言及していたり、書籍内ですでに使われた用語が説明なく登場したりするのを防ぐため、書籍の原文から一部を変更しています。 一般的には、デザインシステムとは一貫したデザインや操作性でWebサイトやアプリケーションを提供するためのガイドラインの集まりと理解されます。使われ得る色のパレットや可能なスペー

はじめに ざっくりまとめ alt について altとは なぜ必要なのか altの指定の仕方 情報画像 装飾画像 機能画像 テキスト画像 複雑な画像 集合画像 画像マップ altの指定に迷ったとき alt属性決定木 そのほかヒントとコツ おわりに 参考記事 はじめに 画像の代替テキストの書き方に曖昧な部分が多かったので、W3Cの公式の文書を読めば代替テキストに対する正しい理解を得られるのではと思った次第です。 そもそも、imgタグの扱いに関してざっとまとめようと思っていたのですが、alt（代替テキスト）だけでも十分すぎる内容の量になりそうだったので、今回はaltについてフォーカスした内容にしました。 （WAI-ARIAにも触れて深掘りするべきかと思いましたが、とても広い概念になるので、今回はテーマを絞っています。） なお、本記事はW3CのImages Tutorialの内容を簡単にまとめた内

2024年7月25日紙版発売 柴田芳樹　著 A5判／208ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-14293-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Amazon Kindle honto この本の概要 本書は，著者が1993年から約30年間経験してきたAPI仕様の作成，2003年から20年間経験してきたテストファースト開発／テスト駆動開発の知見をまとめたものであり，一般的なソフトウェア開発者が習得することが容易ではない事柄を，本書を通して学び，実践してもらうことを目的としています。 本書が提唱する「API仕様ファースト開発」はWebサービスにおける大域的なテスト駆動開発の実現に必要なものであり，また，API仕様ファースト開発を実現するにはテスト駆動開発が必要です。API仕様ファースト開発とテスト駆動

はじめに フロントエンドエンジニアのhiroです。 エンジニアになって半年が過ぎました。 表題にあるとおり、この記事では vuejs/core のソースコードを探検してみたいと思います。 ソースコードの探検が目的のため、実装の詳しい解説自体は行いません。あらかじめご了承ください。 目的 本記事はubugeeeiさんの素晴らしい本であるchibivueに出会い、ubugeeeiさんご本人にVueについて直接教えて頂き、Vueのソースコードに興味を持ったことがきっかけで執筆しています。chibivueはVueの基本的な機能を自分で実装することで、Vueについての理解を深め、vuejs/coreのソースコードが読めるようになることを目的とされている本です。 エンジニア経験の浅い私にとってVueのソースコードを理解することは難しいですが、全部が理解できなくてもなんとなく 「こういう実装になっている

概要 速さが正義 LINE Botの開発でCloudflareとHonoを使う理由 Cloudflare Workersの応答速度が速いから PoPについて CloudflareはAWSのlambdaに比べてポイントオブプレゼンス（PoP）の数が多く、処理が実行される場所がよりユーザーの近くにある可能性が高い。 そのため、パフォーマンステストではAWS Lambda、AWS Lambda@Edgeよりも応答時間が小さいという結果になった。 コールドスタートがない Cloudflare Workersはコールドスタートがなく、LambdaとLambda@EdgeのようにEventBridgeで1分おきにツンツンしなくていい。 Service bindingsが便利だから Cloudflare WorkersのService bindingsを使用することで、worker間の通信はパブリックに

昨年11月、政府や地方自治体が共同で使う「ガバメントクラウド（政府クラウド）」の提供事業者に選定されました。これまでに採択されたのは、アマゾン・ウェブ・サービス（AWS）ジャパンなど米系4社。今回は、国内勢からインターネットイニシアティブとソフトバンクも応募しましたが、選ばれたのはさくらインターネット1社でした。 選定事業者は、まさか1社になると思っていませんでした。ガバメントクラウドの選定に当たり、国の姿勢が大きく変化したのが昨年です。私たちは、入札基準のハードルを下げない状態で他社が手掛けた「サードパーティー製品」の使用も認めることをパブリックコメントで国に求めました。その後、国が似通った内容で入札基準を設定し、それで私たちが応募、採択に至ったという経緯があります。 今は、（本選定の条件になっている）2025年度末を期限とする技術要件の達成に向けて取り組んでいるところです。もちろんハー

<v-img :src="card.src" class="align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="200px" cover > <v-card-title class="text-white">タイトル</v-card-title> </v-img> すると、以下のとおりstyle="display:none;となり、画像が表示されない。 力技でdisplay: block !important;とCSSを指定しても言うことを聞かない。。。 調べてみると、海外の記事でバージョンが問題となっているところまで辿りつき、解決できました。 Yes it broke anything using v-show with a transition. Stay on 3.4.15 until it'

「v-memo」と「v-once」によって解決できる問題 Vueは、大きく以下のような手順で再レンダリングをしています。 データの変更 OptionsAPIで言うところのdata、CompositionAPIで言うところのrefやreactiveなどのデータオブジェクトが変更されると、その変更が検出されます。 仮想DOMの生成 新しい「仮想DOM」を生成します。仮想DOMは、実際のDOMの軽量コピーで、どこが変更されたかを効率的に計算するために使用されます。 差分計算 （2）で生成された新しい仮想DOMと、その前に生成された仮想DOMを比較して、どの部分が変更されたかを計算します。 DOMの更新 （3）にて算出した差分を、実際のDOMに対して適用します。（このプロセスは「patch」、「diffing」、「reconciliation」とも呼ばれています） DOMはツリー状で形成されます。

Today we are excited to announce the availability of the release candidate of TypeScript 5.5. To get started using the RC, you can get it through NuGet, or through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.5! Inferred Type Predicates Control Flow Narrowing for Constant Indexed Accesses Type Imports in JSDoc Regular Expression Syn

はじめに この記事の内容は、以下の動画でも解説しているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、良ければチャンネル登録よろしくお願いします！ Cookieとは？ Cookieとは、一言で言うと、サーバーからブラウザに送信される小さな文字列データのことです。 HTTP Cookie (ウェブ Cookie、ブラウザー Cookie) は、サーバーがユーザーのウェブブラウザーに送信する小さなデータであり、ブラウザーに保存され、その後のリクエストと共に同じサーバーへ返送されます HTTP Cookie - MDN ...と言っても、これだと難しくてよく分からないですよね。そこで、今回の記事では「Cookieとは何なのか？」について、順を追って解説していきたいと思います。 HTTPはステートレス まず、覚えておかないといけないのは、HTTPがステートレスなプロトコ

最近、自分のプライベートの開発環境を大きく変えたので紹介する。 先にまとめ プライベートではMacを使わなくなった 家にUbuntuが入ったミニPCを置いた 外からはThinkPad X1 CarbonからTailscale経由のSSHで家のミニPCに接続 購入まで まず、自分にとって最も大きな変化はプライベートでMacを使わなくなったことだ。2013年くらいにプログラミングを始めてからずっとメインのOSはMacだったので、約10年ぶり、ほぼ初めての非Mac環境である。 自分の普段の開発のユースケースは、Webアプリケーション開発とNode.js上で動くソフトウェアの開発、WebKitへのコントリビューション、たまにRustやGoやC/C++で自分専用ツールの開発、くらいなので別にMacで困っているわけではなかった。Web開発やNode.js上のソフトウェアの開発はまあ普通にMacで困らな

可観測性ガイダンスというタイトルで登壇してきました。 イベント名: オブザーバビリティ再入門 - 大切さと高め方を知ろう！ イベントURL: https://mackerelio.connpass.com/event/316449/ # ブログでいくつかの可観測性に関する書籍のまとめを投稿しました。 5年後には標準になっている可観測性のこと - Learning Opentelemetry の読書感想文 https://syu-m-5151.hatenablog.com/entry/2024/04/16/180511 もう一度読むObservability Engineering https://syu-m-5151.hatenablog.com/entry/2024/05/06/090014 盲目的に始めないためのオブザーバビリティ実践ガイド - Cloud Observabilit