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

Webフロントエンド

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

【App Router】Next.jsでページの離脱防止を実装する

こんにちは。フロントエンド開発を担当している Y.O. です。 現在開発中のプロダクトでは、Next.js（App Router） を採用しています。 開発を進める中で、フォームやデータを編集中にページを離脱しようとした際、警告を表示する処理を実装する必要がありました。 いわゆる「入力内容が消えますがよろしいですか？」のようなやつですね。 こんなの もし入力中の内容が、ユーザーの意図しない操作でクリアされてしまったら、「もういいや」と、そのままタブを閉じられてしまうかもしれません。 この離脱防止の処理、Pages Router 時代にはrouter.eventsを使って比較的簡単に実装できたの…

#Webフロントエンド#Next.js#App Router

関連ブログ

KENTEM TechBlog•1ヶ月前

【チートシート】JavaScriptのfor ofとfor inの使い方

こんにちは！普段ReactとTypeScriptを使ったフロントエンド開発をしているT.C.です。 配列操作はarray.map()やarray.forEach()といった便利なメソッドを使うことも多いですが、いざfor文を書く必要が出たとき for of なのか for in のどちらを使うべきか迷ってしまうことが多いです。 本記事では for of なのか for in なのかをはっきりさせつつ、その使い方を例示します。 for of なのか for in なのか 配列のループ 値だけを取得する 値とインデックスを取得する インデックスだけを取得する オブジェクトのループ 値だけを取得する…

#Webフロントエンド#JavaScript#TypeScript#for
技術と労働のダイアリー•3ヶ月前

Astroで遊ぼう

Astroという静的webサイト作成のフレームワークを使ってポートフォリオ兼遊び場のwebサイトを構築した。使い勝手がよく、学習コストも高くないツールなのでおすすめです。 https://nakaokat.net Astro の好きなところ ReactなどのUIライブラリを使う必要がない。使わなくてもコンポーネントに分割できる。 使おうと思えばReactなどのUIフレームワークを使う事もできる。 astro コマンドを使えばコマンド１つで色々できるように用意されている。例えばReactの追加も pnpm astro add react を実行するだけだった。JSのツール周りは色々あって大変なイ…

#Webフロントエンド#SSG#JavaScript
Tabelog Tech Blog•5ヶ月前

ts-jestからSWCへの移行で発生するイミュータブル性と型チェックの問題について

この記事は 食べログアドベントカレンダー2024 の18日目の記事です🎅🎄 はじめまして。食べログ開発本部ウェブ開発2部FEチームの中内です。 本記事では、食べログノートで使用しているJestのトランスパイラをts-jestからSWCに移行した際、既存のテストが動作しなくなる問題と型チェックについて解説します。 食べログノートとは 2023年2月に本格展開を開始した予約管理台帳です。 食べログでネット予約をご契約いただいている店舗向けのオンライン予約台帳サービスで、電話予約や各種グルメメディアのネット予約を一元管理することで、紙台帳よりも手間なく管理することができます。 詳しくはこちらをご覧く…

#Webフロントエンド#アドベントカレンダー
Goodpatch Tech Blog•6ヶ月前

デザイン会社のテクニカルディレクターの楽しさと心がけている習慣

この記事はGoodpatch Advent Calendar 2024 4日目の記事です。 テクニカルディレクター/ソフトウェアエンジニアの池澤です。 最近はテクニカルディレクター（テックディレクター、TDとも言う）として仕事をすることが多くなりました。 Goodpatchはデザインを得意とする会社なので、テクニカルディレクターの役割にもUIデザインやユーザ体験の考えが大きく含まれます。このデザインとテクニカルディレクターを組み合わせた仕事はとても楽しいものです。その楽しさと私が心がけている習慣についてご紹介したいと思います。 テクニカルディレクターとは テクニカルディレクターの楽しさ 切れる…

#アドベントカレンダー2024#TechDirector#design#Webフロントエンド#要件定義
every Tech Blog•6ヶ月前

Pinia Colada入門：非同期処理をもっとスムーズに！

はじめに Pinia Colada とは 非同期処理の課題 1. 冗長なコード 2. 状態管理の複雑さ 3. 効率的なデータフェッチング 非同期処理における様々なアプローチ 1. Vue Promised 2. swrv 3. TanStack Query (Vue Query) Pinia Colada の優位性 Pinia Colada の基本的な使い方 セットアップ 基本的なデータ取得の例 ポイント解説 まとめ はじめに この記事は every Tech Blog Advent Calendar 2024 の2日目の記事です。 はじめまして、エブリーの羽馬（@naoki_haba）です。…

#Pinia#Vue.js#Webフロントエンド
Studyplus Engineering Blog•7ヶ月前

Vue Fes Japan 2024に参加してきました！

こんにちは！Webアプリケーショングループのエンジニアの羽鳥です。 一昨日の10/19（土）に開催されたVue Fes Japan 2024に参加してきたので、今回はその感想についてお話ししたいと思います！ Vue Fes Japan2024のクリエイティブウォール 参加した理由 私は業務でStudyplus for SchoolというWebアプリケーションを開発をしていますが、フロントエンドの技術スタックはReactでVueは使っていません。しかし、今回Vue Fesに参加した理由としては以下のような想いがありました。 フロントエンドのツールチェーンに興味がある 利用していない技術スタックで…

#Webフロントエンド#カンファレンス
KENTEM TechBlog•8ヶ月前

ESLint × Prettier × Vite(React) 環境構築

こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 ESLint v9.0.0のリリースブログによるとESLint v9.0.0以降はFlat configと呼ばれる書き方がデフォルトになるようです。 そこでESLint Flat config時代における、VS Codeを使ったVite × React環境にESLintとPrettierを組み込み、保存時に自動的にフォーマットしてくれる設定をご紹介します。 2024年9月現在、Viteを使ったReactプロジェクトを立ち上げる方法についてです。 ViteによるReact環境構築 パッケージのインストール ESLintの設…

#Webフロントエンド#react#ESLint#Prettier
KENTEM TechBlog•9ヶ月前

Vite × Vitest × React Testing Library環境構築

こんにちは。私は主にReactでWEBフロントエンド開発を行っています。 機能が多く複雑なNext.jsではなく、Viteを用いたシンプルな構成のReactプロジェクトを立ち上げることも多いです。 そういったプロジェクトにコンポーネントテストを導入する際、環境構築に手間取ることが多かったので、この記事でその方法を紹介します。 手順 ViteによるReact環境構築 パッケージのインストール TypeScriptの設定ファイルの修正 Vitestのセットアップファイルの作成 Viteの設定ファイルの修正 環境構築完了 動作確認と追加設定 動作確認 テスト結果を見やすくするための追加設定 まとめ …

#Webフロントエンド#テスト
Adwaysエンジニアブログ•1年前

放置したUIフレームワークのバージョンを上げた時の学び

どうも〜、エージェンシー事業のエンジニアチームでユニットマネージャーをしていますぬまちゃんです！ 前回はAWS AuroraからGoogle CloudのDatastreamを用いてBigQueryへデータをレプリケーションした話 をしました。 今回は打って変わってフロントエンドのお話をしようと思います！ 背景・きっかけ 話を始める前に アップデート作業の概要 大変だったこと ■ 開発案件と並行して作業をしなければならなかった点 ■ 見た目の確認 学び ■ バージョンアップは放置しない ■ 案件と大きめの改善を並行しない ■ コンポーネントの共通化をする まとめ 背景・きっかけ 自分が担当して…

#Webフロントエンド