個人的におすすめしたいFeature-Sliced Designというフロントエンドアーキテクチャ設計方法論
Feature-Sliced Designというフロントエンドアーキテクチャ設計方法論をプロジェクトに導入してみたところ、 個人的には良いと感じているので、どのような設計方法論なのか、具体的にどのような部分が良いと感じたかを紹介していきたいと思います。 Feature-Sliced Designとは？ Feature-Sliced Designは、フロントエンドアプリケーションを対象としたアーキテクチャ設計方法論です。公式サイトでは、「コードを整理するためのルールと規約の集大成」と記載されています。 Feature-Sliced Designの設計方法論 Feature-Sliced Designでは、プロジェクトはLayerで構成され、各LayerはSliceで構成され、各SliceはSegmentで構成されます。 Layer Feature-Sliced Designの第一階層をLay
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら
※本記事で言及しているReflexのdiscord内に日本語チャンネルをつくってもらいました。もし、興味をもった人がいたら参加してみてください。 １．PythonだけでWebアプリをつくるライブラリが増えている 最近（2024.05）、Python界隈ではPythonだけでWebアプリが作れるライブラリが増えています。詳しくは他の記事を参照してもらえればと思います。 以下の記事がとても参考になりました。ありがとうございます。 ２．ライブラリの分類 こうしたライブラリも大きくわけて２つの種類があるように思います。 ①データ解析の結果を表示するダッシュボードライブラリ ②汎用的なWebアプリをつくるローコードライブラリ ①ダッシュボード系ライブラリ たとえば、上記の記事にも出てきますし、ネットでもかなり情報の多い、StreamlitやDashは項番1のダッシュボードライブラリに該当すると思いま
<script> let count = 0; function handleClick() { count += 1; } $: doubled = count * 2; </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? "time" : "times"} </button> <p>{count} doubled is {doubled}</p> 上記のコード例では通常の JavaScript と同じ方法で変数が宣言されていますが、これは Svelte のコンパイラによりリアクティブな変数に変換されます。count 変数の値が更新されるたびに、UI が自動的に更新されます。$: で始まる式は Svelte のリアクティビティシステムにより自動的に監視され、変更があると再評価されます（構文として
ENECHANGEでは、電気とガスの料金シミュレーションサービス「エネチェンジ」を開発しています。リプレース前の「エネチェンジ」のフロントエンドは、jQueryがメインで、ところどころVue2が使われていました。今回は、長年の開発によって積み重なったフロントエンドの技術負債をどのように解消しているのかについてご紹介します。
ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun
なんでもメモして個人的な知識を蓄える「Obsidian」のキャンバスデータ保存形式「JSON Canvas」がオープンソース化、中身はこんな感じ
Markdown形式でメモを作成できるサービスのObsidianが使用しているObsidian Canvasファイル形式を「JSON Canvas」ファイル形式としてオープンソース化することを発表しました。 JSON Canvas — An open file format for infinite canvas data. https://jsoncanvas.org/ Announcing JSON Canvas: an open file format for infinite canvas data - Obsidian https://obsidian.md/blog/json-canvas/ 仕様についてはjsoncanvas.orgに記載されています。サイトにアクセスするとこんな感じ。右下の「Toggle output」をクリックしてみます。 右側にJSON Canvas形式
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
Meguro.es #27 @ oRo
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。 システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
フロントエンドアーキテクチャがまた進化する ー Angular、Wizとの統合により「ハイドレーション完了後にイベントをリプレイ可能」に
4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 イベントディスパッチの導入 Angularは、 JSAction というライブラリを使用して、 発生したイベントをアプリケーションのルートで捕捉し、完全なハイドレーションが完了したあとに再生する 機能を導入した。この機能により、ページがインタラクティブに見えるが反応しないという問題を解決している。 例えば、クリック時に onSave() を呼び出す、以下のよ
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
【うひょ氏】キャリアにプラスの影響を与える、情報発信の成功戦略と必要な2つの能力 2024年4月23日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。私は普段から、主にフロントエンドの分野で技術的な情報発信を行っています。ありがたいことに、TypeScriptの分野では一定の知名度を有しており、書籍も出しています。 今回は、私が普段どのようなことを考えて情報発信をしているのか、そして情報発信のテクニックなど、これをお読みの方が記事執筆や登壇にチャレンジする際に参考になりそうな情報をお
はじめに 本記事ではレベルアップしたいエンジニアが読んでおくべきQiita記事を紹介します。厳選に厳選を重ねた43記事です。全ての記事を読んでおく必要はありませんが、ちょっとでも「分からないな」「興味あるな」など思ったタイトルがあれば読んでみてください。 次の4種類に分類して紹介しています。参考にしてください。 フロントエンド バックエンド インフラ・Linux周りの知識 その他 それでは、早速紹介していきます！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド まず最初はフロントエンドエンジニアに読んでおくべきとおすすめできるQiita記事を11個選びました！フロントエンドエンジニアとしての基礎が身に付く
React のルール – React
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
Yahoo! 知恵袋のフロントエンドには26000行を超えるユニットテスト(1つのcontrollerのユニットテスト)や、多くのロジックを含むcontrollerがあります。これらによって追加実装・保守が難しい状況です。この問題を解決するために、リアーキテクトを行いました。以下について主に話そうと思っています。 ・リアーキテクトで取り組んだこと ・リアーキテクトの結果・学び・反省点
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
オープンソースによるFirebase代替を名乗るBaaS（Backend as a Service）「Supabase」が正式サービス化を発表しました。 Supabaseはこれまで約4年間ベータ版としてサービスを提供してきました。現在は100万以上のデータベースをホストし、新規データベースも1日あたり2500以上増加しており、モバイルアプリケーションからエンタープライズ用途まで十分な機能と安定性、スケーラビリティが実証されたとしています。 Supabaseの主な機能はデータベースや認証、ファイルストレージなど SupabaseはBaaSとして主に以下のマネージドサービス群から構成されています。 PostgreSQLによるデータベースサービス 認証サービス ファイルストレージ エッジロケーションにおけるNode.jsDenoベースのサーバレス基盤 マルチプレイヤーゲームなどに対応するリアルタ
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
Stay organized with collections Save and categorize content based on your preferences.
どういうこと？/TL;DR AWS → Cloudflareに移行したら費用が99%削減できました。 対象読者 今CloudFront + S3で構築しているけど転送量に困っている人 Cloudflare R2を検討している人 (CloudFrontとCloudflareをよく間違える人) はじめに 元々、動画CDNの構築はCloudFront + S3で構築していました。 この構成の場合、課金ポイントは主に三つあります。 CloudFrontのアクセス数に対する課金: そこそこ(多量ではない) S3の保管に対する課金: 200GB程度 CloudFrontの転送量(Egress)に対しての課金: 数TB そのため、毎回イベントごとにかなり費用がかかる状態でした。 動画の数もアクセス数もそこそこではあったのですが、動画特有の転送量が非常に多い… そういった状態でした。 導入前夜 この時はち
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ 2024年4月8日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表
フロントエンド開発者がデザインに向き合うための厳選ベストプラクティス7選（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Care beyond code: 7 best design practices for frontend developers—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/11/28 原著者: Nina Torgunakova（フロントエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 本記事では原則としてdesignは「デザイン」としています。
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行われた。 マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 7.0」正式版をリリースしました。 We are proud to announce that Babylon.js 7.0 has officially been released! The ne
【告知】「フロントエンドカンファレンス北海道2024」を、2024年8月24日（土）に開催します！｜フロントエンドカンファレンス北海道実行委員会
みなさん、こんにちは！ 「フロントエンドカンファレンス北海道」の運営チームです。 私たちは、来る2024年8月24日（土）に、北海道札幌市で、全国のプロダクト開発に携わるエンジニアとデザイナーが交流できる場所を作り出すことを目指し、「フロントエンドカンファレンス北海道」を開催することを決定いたしました！ これに伴い、「フロントエンドカンファレンス北海道」に少しでも興味を持っていただくための情報発信の場として、この度公式 note を開始する運びとなりました。 初回である今回は、「フロントエンドカンファレンス北海道」の概要や目的、プロポーザルやスポンサー募集について、現時点までにご紹介できる情報をまとめさせていただきましたので、最後までご覧いただけると幸いです。 概要イベント開催日は、2024年8月24日（土）です。場所は札幌駅から徒歩2分、複合ビル JR 55SAPPORO の8階に位置す
フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから
フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから Cloud Native Computing Foundation（CNCF）は、Webアプリのフロントエンドにおいて、任意の機能のオンオフを管理するフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」をリリースした。 ソフトウェアの機能追加や変更を行う際に、いきなり全ユーザーに新機能や変更を展開するのではなく、展開する範囲や時期をコントロールするための仕組みとして「フィーチャーフラグ」がしばしば用いられます。 例えば、最初は少数のユーザーにのみフィーチャーフラグをオンにすることで試験的に新機能を試し、問題がなければ全ユーザーに拡大する、といった場合などに用いられます。 クラウドネイティブの普及や推進のための団体「Cloud Nativ
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
ZOZOTOWNのマーケティングプラットフォームでのフロントエンドの取り組み - ZOZO TECH BLOG
はじめに こんにちは、MA部の林（@hayash__p）です。 私達のチームでは、メール、LINE、Push通知、サイト内お知らせなどでユーザにZOZOTOWNのセールや新着商品を紹介するといった、マーケティングに関わるシステムを開発しています。これまで、配信チャネルや配信内容ごとに個別最適化したシステムを開発していましたが、それらを一新したマーケティングプラットフォームを作ることになりました。新しいマーケティングプラットフォームであるZOZO Marketing Platform（以下、ZMP）の概要については以下のテックブログをご覧ください。 techblog.zozo.com 本記事では、マーケティングプラットフォームのリプレイスにあたり、フロントエンドエンジニアとして取り組んだことを紹介します。 目次 はじめに 目次 背景 ZMPの管理画面モジュール MPマネージャー 技術選定 M
フロントエンドパフォーマンス 入門
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
プロンプトエンジニアリング入門
プロンプトエンジニアリング入門 .NETラボ 勉強会 2024年3月 https://dotnetlab.connpass.com/event/311594/
フロントエンドの真実
起源 まだフロントエンドという言葉が生まれる前。 古代のプログラマー達はサーバーで一画面ずつ丁寧にHTMLを構築していた。 ところがあるとき一人のプログラマーがブラウザ上で動的にHTMLを書き換えることに成功する。 これに多くのプログラマーが続いた。 次第に勢力を増していった彼らはサーバーを離れ、自らをフロントエンドエンジニアと名乗り、サーバーに残ったもの達をバックエンドエンジニアと呼ぶようになった。 きっかけ 先日こんな投稿がとある掲示板（ここではXと呼ぶことにしよう）に寄せられた。 たしかに、Server Actionsを使って書くReactと、いにしえのPHPは非常によく似ている。 ふと10年近く前の出来事を思い出した。 それは次のような同僚との会話だった。 👨🏻💻「React触ってみました。」 👨🏻💼「え、どんな感じやった？」 👨🏻💻「なんかPHPに近い感じ
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可能です。スタイルクエリを使えるようになると、どんな風に便利になるかを紹介します。 Add Superpowers to Your CSS Variables with Style Queries by Jared White 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スタイルクエリを使えるようになると スタイルクエリは変数と組み合わせると、さらに強力 スタイルクエリを使えるようになると CSSはスタイルクエリの登場により、さらなる
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js の進化に伴い不要となったかもしれないパッケージたち
PythonだけでWebアプリが作れるライブラリが増えている（2024.05） - Qiita
Svelte v5 で導入された Runes によるリアクティビティシステム
レガシーなフロントエンドを リプレースするプラクティス。 エネチェンジが挑む 「React化」
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
require(ESM)とECMAScript仕様
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
The Front End Developer/Engineer Handbook 2024
Node.js + TypeScriptのモジュールを整理してみる
【うひょ氏】キャリアにプラスの影響を与える、情報発信の成功戦略と必要な2つの能力
レベルアップしたい人必見 Qiita記事43選 - Qiita
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
オープンソースによるFirebase代替を名乗るBaaS「Supabase」が正式サービスとして提供開始
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Learn JavaScript | web.dev
Cloudflareに移行したら99％コスト削減できた話
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ
CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ