Hatena Blog Tags
はてなブログ トップ
フロントエンド
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

フロントエンド

(一般)
【ふろんとえんど】

表側のこと。
⇔バックエンド

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
NRIネットコムBlog•1日前

UIデザイナーがエンジニアと最高の協業を実現する7つのテクニック

本記事は 【Advent Calendar 2025】 16日目②の記事です。 🌟🎄 16日目① ▶▶ 本記事 ▶▶ 17日目 🎅🎁 「このデザイン、ウィンドウ幅が狭くなるとどうなりますか？」 「これはhover（オンマウス）で開きますか？クリックで開きますか？」 「どこをスクロール領域にしますか？ボタンはスクロールさせず固定位置にしますか？」 こんなやりとりがデザイナーと開発者の間では頻繁に行われます。 私はFigmaでデザインを作成するとき、「実装しやすいデザイン」をいつも意識しています。 「実装しやすいデザイン」を作ることで、手戻りを減らすことができ、開発スピードを向上できます。さらには…

#UIデザイン#デザイン#フロントエンド

関連ブログ

クロスマート Tech Blog•2日前

Sentryを「入れるだけ」で終わらせない。エラー調査を楽にする設定

はじめに こんにちは、クロスオーダー請求書チームでフロントエンドエンジニアをしている大田です。 私たちの開発チームでは、アプリケーションの品質担保のためにSentryを導入しています。 現状は、本番・ステージング環境での予期せぬエラーを検知するために利用しており、特定の重要機能では明示的にエラーをキャプチャして通知を受け取る運用を行っています。 この基本的なエラー監視だけでも十分に役立ってはいるのですが、Sentryにはエラーの再現を助ける機能や、より詳細な分析機能など、まだ私たちが活用しきれていない便利な機能がたくさんあります。 せっかくSentryを入れているならもっと開発を楽にするために…

#Sentry#監視#フロントエンド
KENTEM TechBlog•6日前

ReactHooksとインスタンス更新の注意点

この記事は、 KENTEM TechBlog アドベントカレンダー2025 11日目、12月11日の記事です。 今回紹介するのは、React初心者の私が実際に経験した「クラスとReactの挙動」に関する問題です。 機能実装の過程で計算基準を保持する計算クラスを作成しました。このクラスには計算メソッドを定義し、計算結果を返すようにしていましたが… 画面の計算基準の値は更新されているのに、計算メソッドで使われる計算基準は古いままという謎の現象に直面しました。なぜこんなことが起きたのか？この記事では、その原因・解決策を学びとして共有します。 起こった事象 原因 解決策 まとめ おわりに 起こった事象…

#アドベントカレンダー#フロントエンド
TECHSCORE BLOG•8日前

2025年 CSS トレンド – 開発現場で役立つ新機能 Part2

はじめに 前回の Part1 では、コンテナクエリ、スクロールドリブンアニメーション、Subgrid、text-wrap を紹介しました。Part2 では引き続き、2025年の開発現場で役立つ CSS の新機能を取り上げます。今回紹介するのは以下の4つです。 :has() セレクター @starting-style と transition-behavior light-dark() と相対カラー構文 interpolate-size（height: auto へのアニメーション） CSS の紹介 :has() セレクター :has() は子要素や後続要素の状態に応じて親要素をスタイリングでき…

#CSS#フロントエンド#Webデザイン#ダークモード#アニメーション
PLAY DEVELOPERS BLOG•9日前

大規模フロントエンド分離を成功させるための具体的なアプローチと知見

こんにちは、PLAY CLOUD本部 技術推進室の市川です。 前回は、サービス間の差異をなくすための共通Node.jsモジュール管理について解説しました。 developers.play.jp 今回もPLAY CLOUD全体の改善の一環として実施した、アーキテクチャの大幅な変更について、その背景や具体的な手法についてご紹介します。 具体的には、PLAY CLOUDの管理画面をSPA（Single Page Application）化し、フロントエンドとバックエンドを完全に分離させた話になります。 従来の構成と課題 実施した構成変更 リポジトリのサービスごとの分離 フロントエンドとバックエンドの…

#フロントエンド
KENTEM TechBlog•9日前

cssで要素を重ねるなら、gridでも良くない？

この記事は、 KENTEM TechBlog アドベントカレンダー2025 8日目、12月8日の記事です。 こんにちは。2年目フロントエンドエンジニアのM.Hです。 皆さん、cssで要素を重ねるとき、どのようなプロパティを設定しますか？ すぐに思いつくのはposition:absoluteではないかと思います。あとはtransformやマイナスのマージンを付けたりする方法もありますね。 gridを使うことでも重ねられるのですが、重ねる方法をwebで検索してもあまりすぐには出てきません。ということで本記事ではgridを使って要素を重ねる方法を紹介します。 想定ケース positionを使った重ね…

#アドベントカレンダー#CSS#Grid Layout#フロントエンド
KENTEM TechBlog•12日前

iPadでファイルが添付できない！？NFC/NFD問題について

この記事は、 KENTEM TechBlog アドベントカレンダー2025 5日目、12月5日の記事です。 こんにちは！普段フロントエンドで開発しているK.Sです☃️ 皆さんは「PCではファイルがアップロードできるのにiPadではできない！」という不具合に遭遇した経験はありますか？私はあります😅 今回は実際にプロジェクトで直面した「NFC/NFD問題」について、その時の状況を交えながら原因と解決方法をご紹介したいと思います。 こちらの記事を参考にさせていただきました。 zenn.dev qiita.com 発生したときの状況 なぜ起こったのか？ 行ったこと 余談 まとめ おわりに 発生したとき…

#アドベントカレンダー#フロントエンド#typesciprt#iPad
KENTEM TechBlog•14日前

ハンバーガーメニューの進化を考えてみた

この記事は、 KENTEM TechBlog アドベントカレンダー2025 3日目、12月3日の記事です。 新卒1年目社員の K・K です この記事では、Web・アプリ制作に欠かせない UI コンポーネントである ハンバーガーメニュー について、その成り立ちから最新の工夫、そして進化のアイデアまでを分かりやすくまとめました。 React Native 初心者が、React Native の勉強の一環として、ハンバーガーメニューの進化を提案します。難しい内容ではないので、気軽に、温かい目で読んでいただけますと幸いです。 そもそもハンバーガーメニューって何？ 歴史と普及の理由 工夫されたハンバーガ…

#アドベントカレンダー#フロントエンド#React Native
RevComm Tech Blog•16日前

フロントエンド開発において信頼性の高いテストを記述するための方法や考え方の紹介

はじめに RevComm Advent Calendar 2025 1日目の記事です。 qiita.com 昨今では AI コーディングエージェントが話題です。AI コーディングエージェントを活用することで、フロントエンド開発においても生産性の大きな改善が期待できます。 AI コーディングエージェントの活用を広めていくためには、信頼性の高いテストコードがあるとより積極的かつ安全に活用や導入を進めていきやすいのではないかと考えています。 そこで、この記事ではフロントエンド開発において信頼性の高いテストコードを記述するための方法論などについて説明できればと思います。 テストダブルの使用について 前…

#フロントエンド