こんにちは。株式会社EVERSTEELでソフトウェアエンジニアをしている日野原です。 主にフロントエンドを担当しており、技術としてはNext.jsを使用しています。（詳しい技術内容はこちらを参照） 少し前の話になりますが、ゼロからテストを導入したので、その過程や戦略について話していこうと思います。 フロントエンドのテストを検討している方や、テストの運用方法を迷っている方の参考になるかと思います。 Reactアプリにおけるテスト戦略と実践ガイド 一昔前はフロントエンド開発においてテストはあまり重要視されていませんでした。 しかし、フロントエンドの複雑さが増したため、最近ではテストが重要視されており、テストを書くことが求められています。 ただ、なぜテストが必要なのか、どのようなテストを書けば良いのか、どの程度のバランスでテストを構成すべきなのかは、十分に理解されていない場合も多いかと思います。
ホームニュース一覧デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 目次 はじめにデジタル庁デザインシステムを採用するメリット最新のアクセシビリティの国際規格であるWCAG 2.2の達成基準86項目のうちの43項目で「適合」または「適合が容易」にサンプルコードをコードスニペットで提供、すぐに活用可能よくあるアクセシビリティの課題とデジタル庁デザインシステムを活用した解決策（1）具体的なアクセシビリティの性能について：視野狭窄の当事者による閲覧に対応視野狭窄を考慮したアクセシビリティ1：「操作対象から離れた重要なコンテンツの変化に気づけない」問題と解決策視野狭窄を考慮したアクセシビリティ2：「右端にある要素に気づかないことがある」問題と解決策視野狭窄を考慮したアクセシビリティ3：「右
導入：なぜ、あなたの「優しさ」は利用者を疲弊させるのか問題提起：「耳に余る」代替テキストの現状 最近、SNSやウェブサイトで、「ぎっちぎちに情報を詰め込んだ『俺の、俺の話を聞けー』っぽい」代替テキスト（alt属性）が増えています。 製作者側は「これだけ書けば大丈夫だろう」「情報不足を解消しなければ」という善意や努力のもとで記述しているのでしょう。しかし、その「過剰な情報提供」は、スクリーンリーダーを利用するユーザーにとっては、かえって大きな負担や苦痛となりかねません。 私たちは今、代替テキストの記述という技術的な問題ではなく、その背後にあるアクセシビリティの目的と哲学について、根本的に立ち止まって考える必要があります。 ジレンマの提示：「障害者のため、だけではない」の危うさ この議論を進めると、「代替テキストは障害者のため、だけではない」という意見が必ず出てきます。この言葉は、一見、正しい
2025年9月6日（土）に北海道札幌市で開催された 「フロントエンドカンファレンス北海道2025」に、テックタッチはゴールドスポンサーとして協賛しました。 当日はスポンサーブースを出展し、来場者を対象にフロントエンド技術に関するクイズを実施しました。技術系イベントでのブース出展は、テックタッチとして初の試みです🌟 本記事では、ブース企画を担当した tsune、aki、shoko から、クイズの内容や結果をレポートします。 当日のブースの様子（左：フロントエンドエンジニアの tsune、右：プロダクトオーナーの kuni） ブース企画：テックタッチフロントエンドクイズ クイズ成績サマリー 問題と解説 Q1. document.elementsFromPoint() の結果に含まれる要素は次のうちどれ？ Q2. delete Date.prototype.toJSON した後に JSON.s
はじめに 昔からサービスの運営者を困らせてきたものはいくつかあると思いますが、 特に代表的なのが “自動化による悪用” です。 スクレイピングによる無断データ収集や、予約システムを狙ったボット、さらには不正ログインを試みる自動化ツールなど、その形は時代とともに多様化してきました。 X (旧Twitter) には、今でも詐欺DMを送るボットが多いです。(自分は毎日来ます。) また、大阪万博の予約を勝ち取るために、サーバーに過度の負荷をかける形で自動化が悪用された事例もあります。 そして、最近はAIを利用した巧妙なものも増えています。 この記事を読んで、そのような事態に対処できるように知識が少しでも増えれば良いな、と思っています。 ぜひ少しでも役に立てば、いいね・他SNSへの共有など、よろしくお願いします！！ 実例 2025年現在、大阪万博なる物が開催されており、DX化の一環として予約をウェブ
この記事では、埋め込み動画の Youtube プレーヤーの再生ボタンやシークバーなどのコントロールを使わずに、JavaScript で動画の再生・一時停止や再生位置の移動を行う方法について説明します。また、HTMLコントロールからYoutubeプレイヤーを操作する実装例を紹介します。説明の動画例には Google アプリの CM 動画を使います。 動画の埋め込み 自分で書く必要はありません。目的の動画の「共有」メニューから「動画の埋め込み」を開くと、次のようなタグを自動生成してくれます。特定の動画を埋め込む場合でも、src 属性を変更して読み込む動画を動的に指定する場合でも、ベースは同じです。 <iframe width="560" height="315" src="https://www.youtube.com/embed/ef41Q2-DQ2Q" title="YouTube vid
Prettify CSS? Prettifying makes inspecting the CSS easier, but very slighty changes the numbers. The best way to analyze your CSS is to use the CSS analyzer, but if you're in a hurry or if you want an opinionated tool, then you can use this CSS Code Quality analyzer. It will use the output of the CSS analyzer to run a couple of checks and turn that into a set of recommendations for your CSS. It wi
9/2にChromeは17周年を迎えました、時が経つのは早いですね。先日アップデートされたChrome 140に追加された、CSSの新しい機能を紹介します。 今回のアップデートではCSSの新機能がかなりの数で追加されており、calc()で使える計算式が増えたり、カスタムハイライトが使えるようになったり、バリアブルフォント用のプロパティが増えたりなど、Web制作者は要チェックです！ New in Chrome 140 Chrome 140 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに calc()で使える計算式が増えます CSSのscroll-target-groupプロパティ contentプロパティの代替テキスト ビュー遷移の疑似ツリー ネストされたビュー遷移 ov
毎日繰り返しやる処理は カスタムスラッシュコマンドで自動化する スラッシュコマンドとは あらかじめ登録した処理を実行できる 毎回長いプロンプトを書く必要がない 組み込みスラッシュコマンド /doctor Claude Codeのバグをチェック /review コードレビューをリクエスト https://docs.anthropic.com/ja/docs/claude-code/slash-commands カスタムスラッシュコマンドとは ユーザーが独自に登録した処理を実行できる 毎回命令している長いプロンプトは登録するのが便利 .claude/commands/コマンド名.mdに処理を記述 スコープを設定できる グローバル・プロジェクト・プロジェクトで自分だけ使う等 https://docs.anthropic.com/ja/docs/claude-code/slash-commands
7月25日、Jono Alderson氏が「It’s time for modern CSS to kill the SPA」と題したブログ記事を公開し、海外で話題を呼んでいる。 7月25日、Jono Alderson氏が「It’s time for modern CSS to kill the SPA」と題したブログ記事を公開し、海外で話題を呼んでいる。 この記事では、モダンCSSとブラウザ標準機能がシングルページアプリケーション（SPA）の利点を置き換え、マルチページアプリケーション（MPA）への回帰を促す潮流について詳しく紹介されている。以下に、その内容を紹介する。 「アプリのように見せたい」思考の罠 従来、サイトを“アプリらしく”見せる最も手軽な手段はSPA (Single Page Applications)だった。ReactやVueを使い、クライアント側でルーティングと描画を担
View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に利用できる JSフレームワークでの対応も進んでいる Chrome 126・Edge 126（2024年6月）、Safa
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。 HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 - JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
みなさんこんにちは！エンジニアの高澤です！ 今回はWordPressのリライトルールについて、カスタマイズ方法をわかりやすく解説していきたいと思います。 リライトルールという仕組みは、テーマ開発にしてもプラグイン開発にしても非常に重要な仕組みといっても過言ではありません。 リライトルールを扱えることでパーマリンク（URL）の構造を自由にカスタマイズすることができ、また、WordPressで何かアプリケーションを実装したりする際や、SEO対策においても大変活きてくる知識となるかと思います。 よろしければぜひ当記事をお仕事でご活用いただけましたら幸いです。 リライトルールとは WordPressのリライトルールとは、WordPressサイトでパーマリンク（Permalink）構造をカスタマイズするための仕組みです。 WordPressはデフォルトでは、「?p=123」といった形式のURLが使わ
Notoファミリーは「すべての言語で文字化けのない世界」を掲げて開発されたフォント群です。通常のフォントでは、該当する文字（グリフ）が存在しない場合、代替として四角い記号が表示されます。この四角い記号は「□」のような形で表示され、見た目が豆腐のブロックに似ていることから「豆腐（Tofu）」と呼ばれています。そんな中、Notoファミリーは、豆腐のないフォント＝No Tofuを意味して「Noto」と命名されたことは有名なエピソードです。 「Noto Sans JP」は数多くのウェブで利用されています。今年4月のWindowsにもNoto Sans JPが搭載され大きな話題となりました。しかしNotoフォントは2014年の登場から11年以上経過し、複雑な状態になっているのも事実です。 Noto Sans JP、Noto Sans Japanese、Noto Sans CJK JPなどたくさんの名
サイト＆サービス-Site & Service モーション サービス MOVIN - 単一のLiDAR＆RGBカメラを搭載したデバイスでマーカー＆スー... 2025-08-06 単一のLiDAR＆RGBカメラを搭載したデバイスでマーカー＆スーツ不要モーションキャプチャが可能なソリューション「MOVIN（ムービン）」が2025年8月1日に提供開始されました！ 続きを読む Maya プラグイン プラグイン＆アドオン-Plugin&Addon PivotPainter2 for Maya - テクニカルアーティストの神崎 ... 2025-08-06 テクニカルアーティストの神崎 建三 氏が、Maya向けのPivotPainter2ベイクスクリプトを開発！「PivotPainter2 for Maya」を近日OSSとして公開する事を発表しました！ 続きを読む
Webサイトの“速さ”は、ユーザー体験を左右する重要な指標だ。とはいえ、ブラウザの中で実際にどんな処理が走っていて、どこにボトルネックがあるのかを把握するのは簡単ではない。本セッションに登壇したのは、Node.js／フロントエンド領域を専門とするフリーランスエンジニアであり、各社のWebサイトに一ヶ月単位で入り込み、Web VitalsやCI/CDの改善を行う“パフォーマンスの傭兵”として活動する竹馬光太郎氏。PageSpeed InsightsやLighthouse、DevToolsを駆使した実演を通し、問題の洗い出しからローカルでの再現、修正、そして再測定に至るまでの改善サイクルを丁寧に解説する。 パフォーマンスとはなにか？mizchi氏が見てきた現実 Node.jsやフロントエンドのパフォーマンス領域を専門とするフリーランスエンジニア・竹馬光太郎氏。SNSなどでは「mizchi」の名
先日、HTMLの仕様が変更され、属性値内に記述した<と>がエスケープされるようになりました。この変更は6/25にリリースされたChrome 138やFirefox 140をはじめ、Edge, Safariも次のバージョンでサポートされる予定です。 この変更は主に、XSS脆弱性の防止に役立ちます。Web制作者に与える影響と潜在的な問題について紹介します。 HTML spec change: escaping < and > in attributes 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに 変更点 変わらなかった点 何が壊れないのか 何が壊れるのか 終わりに はじめに 2025年5月20日にHTMLの仕様が変更され、属性内の<と>がエスケープされるようになりました。これによ
kiso.css - 日本のWebサイトのための「基礎」となるリセットCSS kiso.css は、日本のWebサイトのための「基礎」となるリセットCSSです。日本語に最適化しつつ、アクセシビリティやカスタマイズのし易さを重視しています。 tak-dcxi.github.io kiso.cssは、単なるスタイルのリセットを超えて「より良いデフォルト」を提供することを目指したリセットCSSです。その名が示すように、Webサイト構築の「基礎」として機能します。 有用なUAスタイルシートは活かしつつ、独自のスタイルも追加しているため、厳密には「リセットCSS」の定義から外れるかもしれません。しかし、類似のCSSが一般的に「リセットCSS」として紹介されている現状を踏まえ、検索性を考慮して本記事でもそのように呼称します。 kiso.cssはdestyle.cssやUA+を参考にしつつ、独自性も加え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く