JSR の Public Beta 公開など : Cybozu Frontend Weekly (2024-03-05号)
JSR の Public Beta 公開など : Cybozu Frontend Weekly (2024-03-05号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023 年 3 月 5 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Tempo 新しく登場した Date 操作用のライブラリである Tempo が公開されました。Intl を利用しつつ、Intl 自体の使いづらさを内部で吸収してるのが特徴です。 フォーマット用 Token が Unicode 準拠ではなく day.js に沿った仕様なのが注意点になりそう、
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
PHPerKaigi 2024 • Day 1での登壇資料です。 https://phperkaigi.jp/2024/ https://fortee.jp/phperkaigi-2024/proposal/0d0f8507-0a53-46f6-bca6-23386d78f17f ※ Authorizationヘッダーを利用したBearerトークン等の活用については言及していません。
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及を削除。SPAで行われる初回表示に関する変化の説明と重複するため ・SPAの初回表示について、FCPが速くなったとポジティブな書き方を、逆にLCPが遅くなったとのネガティブな記述に修正 ・SPA+SSRのページを削除。サーバーサイドフェッチを伴うSSRについてはNext.js側のページで解説 ・サーバーサイドフェッチを伴うSSRについてのネガティブな記述を削除し、SPA的なクライアントサイドフェッチのアーキテクチャとフラットに取り扱う
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL - Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog - 「作ってから売る」と「売ってから作る」と「売れるようにしてから作る」 ～技術の社会実装のための『開発』～ - Speaker Deck - React プロジェクトを始める – React - フロントエンドの移り変わりは早すぎるのか Zenn
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
ssig33: "最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 ##..."
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
Denoのフロントエンド開発の動向【2024年冬】
半年程前に、以下のような記事を書きました。 この記事では、上記の記事から半年程の間で起きたDenoでのフロントエンド開発に関して影響がありそうな内容などをまとめていきます。 Deno本体のアップデート 直近半年ほどでDenoに導入された機能からフロントエンド開発に影響しそうなものについていくつか紹介します。 npmパッケージの対応状況について 大きな点として、Deno v1.35からAstroが動作するようになったようです。 それ以外にはDenoでNext.jsを動かすための試みがいくつか進んでいるようです。next buildやnext devを動かすための対応がいくつか入っています。 また、直近で公開されたロードマップではSvelteKit, VuePress, Qwik, Remixなどを動かすための対応を進めていくことが検討されているようです。 Remixについては公式でRemix
「ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット」 https://trident-qa.connpass.com/event/308664/ の登壇資料です。
ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
TL;DR 弊社で実験的に導入を始めている、2024初頭時点で今後に期待が高まる最新のweb技術についてまとめています。 新規プロダクトの技術選定に迷っている方などにおすすめです。 Turborepo - Monorepo管理 モノレポ構成における懸念点の一つとして、プロダクトが大きくなるにつれてビルド時間が膨大になって来る点です。 TurborepoはRust製、並列化、差分ビルド、Remote Cashingなど、肥大化しがちなmonorepoのビルド時間を短縮するメソッドがたくさん詰まっています。 Bun - Package manager (runtime, test tool) 正確にはBunはランタイムですが、Nextなど厳密にはNode.jsで動かす必要があるため、弊社では（ほぼ）パッケージマネジャーとして活用しています。 pnpmやyarnと比較してnpm installな
こんにちは、AIShift バックエンドエンジニアの石井(@sugar235711)です。 AIShiftでは去年の11月からAI Worker[1]という新しいサービスの開発が始まりました。（以下AI Worker） 本格的に開発が始まり3ヶ月弱経ったので、その間に試してきた技術やチームの取り組みについてまとめてみたいと思います。 はじめに この記事では、AI Workerのおおまかな概要・設計を説明し、それらのバックエンドを実現する上でどのような技術を試してきたのか、技術以外でのチームの取り組みについてまとめます。 少し分量が多いので、ライブラリについての情報を求めている方は、目次から気になる部分を読んでいただければと思います。 何を作っているのか ざっくりまとめると、Microsoft Teams/Web上で動くAIを活用した業務改善プラットフォームを作成しています。 GPTとRAG
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
Renovateを使ってフロントエンドのバージョンアップを改善した話 | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。Renovateを使ってフロントエンドのパッケージやライブラリのバージョンアップを改善したことについて紹介します。 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 このリポジトリは作成されてから2年ほどしか経っておらず、使っているライブラリも比較的新しいため、今までバージョンアップの仕組みを特に整備していませんでした。 ただフロントエンドのライブラリはバージョンアップの頻度が多く、異なるライブラリ間でバージョンの依存関係があることもあり、将来のことを考えればライブラリのバージョンを更新する仕組みを作ることはほぼ必須でした。 また、monorepoであるためライブラリのバージョンを大きくあげようとした際の対応コストも大きく、最新との差が小さいうちに細
フロントエンドのGitHub Actions実行時間を削減するために取り組んだこと | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアの小張です。GitHub Actionsの実行時間を削減するために取り組んだことについて紹介します。 経緯 PR TIMESではReactに関するコードを、monorepoとしてprtimes-frontendという1つのリポジトリで管理しています。 GitHub Enterprise Cloudプランでは月50,000分のGitHub Actionsを無料で実行することができますが、prtimes-frontendだけで7割近い時間を消費してしまっていました。またCIに時間がかかることで、Pull Requestを作成した後、10分近く待たないとコードレビューに回すことができず、開発効率が落ちてしまっていました。 そこで現状の使い方を見直して、billable timeの削減に取り組むことになりました。 billable time削減の改善点を探す b
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
GitHub - m31coding/fuzzy-search: A fast, accurate and multilingual fuzzy search library for the frontend.
import * as fuzzySearch from './path/to/fuzzy-search.module.js'; const searcher = fuzzySearch.SearcherFactory.createDefaultSearcher(); const persons = [ { id: 23501, firstName: 'Alice', lastName: 'King' }, { id: 99234, firstName: 'Bob', lastName: 'Bishop' }, { id: 5823, firstName: 'Carol', lastName: 'Queen' }, { id: 11923, firstName: 'Charlie', lastName: 'Rook' } ]; const indexingMeta = searcher.i
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita
Safetest is a powerful UI testing library that combines Playwright, Jest/Vitest, and React for a powerful end-to-end testing solution for applications and component testing. With Safetest, you can easily test the functionality and appearance of your application, ensuring that it works as expected and looks great on all devices. Safetest provides a seamless testing experience by integrating with yo
Introducing SafeTest: A Novel Approach to Front End Testing
by Moshe Kolodny In this post, we’re excited to introduce SafeTest, a revolutionary library that offers a fresh perspective on End-To-End (E2E) tests for web-based User Interface (UI) applications. The Challenges of Traditional UI TestingTraditionally, UI tests have been conducted through either unit testing or integration testing (also referred to as End-To-End (E2E) testing). However, each of th
はじめに こんにちは。プロダクト開発本部のYoungjin Jangです。 皆さんはフロントエンド開発をするときに、テストコードを書いていますか？ フロントエンドは分野の特性上、開発スケジュールの後半に成果物（スペック、デザイン、API）を総合して最終的にプロダクトを作る立場になるため、時間に追われてテストコードを書きにくいこともあるかと思います。逆にスケジュールの前半では他の職種より比較的時間が余ることもあるでしょう。この時間を活用してテストを書いてみるのはいかがでしょうか？ この記事では、テスト駆動開発の基本的な概念とCypressを利用したテスト駆動開発方法、そして実際にLINEドクターのフロントエンドを開発するときに、どのようにテスト駆動開発を行っているかを紹介します。 LINEドクターとは LINEドクターはオンライン診療サービスで、ユーザーはLINEを通じて診察を受け、処方箋や
React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import clsx from 'clsx' function Entry(props) { return ( <div className={ clsx(props.category === '暮らし' ? s
フロントエンド監視の全体像と実現方法
必要性 フロントエンドの監視はバックエンドやインフラのそれらと比べ、優先度が低くなりがちです。 バックエンドやインフラでの障害はサービス継続に直結するため、これは当然と言えば当然なのですが、別の理由もあると考えています。 それは計算リソースをサービス提供側が管理していないことです。 例えばアプリケーションがインフラとして AWS を利用しているなら、AWS のリソースを管理するのはサービス提供側です。 これは AWS 以外のクラウドサービスプロバイダやオンプレであっても同様です。 一方でフロントエンドはエンドユーザのブラウザ上で動作し、これを管理しているのはエンドユーザです。 フロントエンドはその性質上、監視の「盲点」になりがちです。 しかしフロントエンドはエンドユーザが直接触れるものであるため、そこで何が起きているかサービス提供側は正確に把握する必要があります。 マイルストーン フロント
フロントエンドで収集するべきテレメトリは何か
先日『フロントエンド監視の全体像と実現方法』という記事を投稿しましたが、その中でテレメトリについては触れませんでした（※本記事は上記記事の内容を知らなくても読み進められるようになっています）。 というのは、テレメトリは可観測性を実現するための重要な概念ではあるものの、テレメトリを軸に監視を考えるのは手段の目的化になってしまうと考えているからです。 重要なのはサービスにとって何を観測するべきかを考えることであり、テレメトリはそれを設計や実装に落とし込む際に現れるものです。 一方で監視に対する理解を深める上では、テレメトリを軸に考えることも重要でしょう。 そこで本記事ではフロントエンド監視においてどのようなテレメトリを収集するべきか述べていきます。 監視 SaaS と OpenTelemetry (OTel) Datadog, New Relic, Sentry のいずれかを利用することを考え
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
当ブログのレスポンシブコーディングについて ｜ TAKLOG
「ref と reactive」 結局どっちを使えばいいのか？ (2024 年最新版)
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
TypeScriptでクリーンアーキテクチャを実践する
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
雑にReactアプリを作りたい時に使ってるもの
【徹底比較】Vue.js と React でレンダリングされる値、されない値
You Don't Need Next.js | ドクセル
Mac で Safari Web アプリを使う - Apple サポート (日本)
VRTツールのダークホース Lost Pixelを紹介したい
Storybookの実力をフル活用するChromatic
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
【2024初頭】新規開発で使ってみたいモダンフロントエンド最前線
新規サービスのバックエンド開発で3ヶ月経ったので、試した技術や取り組みをまとめてみた
実践 popover 属性 〜HTMLのみのモーダルで実案件に使えるのか確認〜
Webサービスを作るときのテンプレートを作った - hiroppy's site
GitHub - kolodny/safetest
「SafeTest」がすごい ー Netflix内で利用されている、新しいフロントエンドテストライブラリ
Cypressを使ったフロントエンドのテスト駆動開発：LINEドクターの事例
似ているけどちょっと違うものをスタイリングする CSS テクニック - mizdra's blog