並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 1798件

新着順 人気順

FrontEndの検索結果1 - 40 件 / 1798件

  • フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?

    2024/06/25: モノレポは、令和のソフトウェア開発における銀の弾丸か? https://hack-at-delta.connpass.com/event/319792/ フロントエンドの Monorepo をやめてリポジトリ分割したワケ 坂井 学 ソフトウェアエンジニア

      フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?
    • 「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答

      JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16%、フランスが7%、ドイツも7%、イギリス(UK)が5%、ポーランドが4%、ロシアが3%、カナダが3%などで、日本は2%(回答者280人)でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました

        「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
      • Vite ってよく聞くけど何なんですか? あれは

        初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか?? なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵‍💫 (ヴィテ...? ヴァイト...?) この記事では、Vite についての基本的な情報をまとめてみます。 発音? 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite(フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音)は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界

          Vite ってよく聞くけど何なんですか? あれは
        • TypeScript 5.5 で追加された正規表現構文チェックを理解する


          TypeScript 5.5@graphemecluster🎉 TypeScript 調    JavaScriptTypeScript ESLint   TypeScript 5.540 5.5 //  var re = /a/b; // 
            TypeScript 5.5 で追加された正規表現構文チェックを理解する
          • State of JavaScript 2023

            It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b

              State of JavaScript 2023
            • Server-Sent Events を複数パターンで実装して理解を試みる


              Server-Sent Events (SSE)  Server-Sent Events (SSE)  調  SSE  SSE  Push  MDN  HTTP/1.1  SSE  wikipedia  SSE  SSE 
                Server-Sent Events を複数パターンで実装して理解を試みる
              • 軽量なStorybook駆動開発を支えるコンポーネント設計

                こんにちは。この記事ではStorybook駆動開発をゼロから導入するために実践した内容をコンポーネント設計の側面から紹介します。合わせて、紹介した設計を元にどのようなテストを実装しているかについても紹介します。 簡単に実装できることが持続可能なテストへの鍵 Webフロントエンドの持続可能なテスト文化を醸成するためには、テストを開発フローの中で簡単に実装できることが何よりも重要です。テストの実装に機能開発以上のコストが掛かってしまう場合、「時間が無いのでテストコードを後から実装する(結果実装されない)」という典型的なアンチパターンに繋がってしまいます。 持続可能なテストを実現するためのアプローチ フロントエンドにおいて、特にIntegration Testの実装容易性は、コンポーネント設計やツールの使い方によって大きく左右されます。 筆者が関わるプロジェクトでは軽量なStorybook駆動開

                  軽量なStorybook駆動開発を支えるコンポーネント設計
                • vuejs/core のソースコードを探検する楽しさ

                  はじめに フロントエンドエンジニアのhiroです。 エンジニアになって半年が過ぎました。 表題にあるとおり、この記事では vuejs/core のソースコードを探検してみたいと思います。 ソースコードの探検が目的のため、実装の詳しい解説自体は行いません。あらかじめご了承ください。 目的 本記事はubugeeeiさんの素晴らしい本であるchibivueに出会い、ubugeeeiさんご本人にVueについて直接教えて頂き、Vueのソースコードに興味を持ったことがきっかけで執筆しています。chibivueはVueの基本的な機能を自分で実装することで、Vueについての理解を深め、vuejs/coreのソースコードが読めるようになることを目的とされている本です。 エンジニア経験の浅い私にとってVueのソースコードを理解することは難しいですが、全部が理解できなくてもなんとなく 「こういう実装になっている

                    vuejs/core のソースコードを探検する楽しさ
                  • PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉

                    本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs

                      PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
                    • Netflixは、フロントエンドテストへのカスタムアプローチであるSafeTestを発表

                      Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

                        Netflixは、フロントエンドテストへのカスタムアプローチであるSafeTestを発表
                      • Remix ドキュメント - Remix ドキュメント日本語版

                        はじめにクイックスタート (5分)チュートリアル (30 分)v2 へのアップグレードコミュニティFuture Flags変更ログ議論のトピックはじめに、技術的な説明ランタイム、アダプター、テンプレート、およびデプロイメントルート設定フルスタックデータフローサーバー側コード実行とクライアント側コード実行React Routerプログレッシブエンハンスメント待ち UI状態管理ネットワーク並行処理の管理フォーム vs. フェッチャーホットモジュール置換フォームの再送信ファイル命名規則.client モジュール.server モジュールアセットインポートentry.cliententry.serverルートルートファイルの命名vite.config.tsルートモジュールactionclientActionclientLoaderコンポーネントErrorBoundaryhandleheadersH

                          Remix ドキュメント - Remix ドキュメント日本語版
                        • フロントエンド開発の効率化!Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog

                          はじめに なぜ VRT が必要なのか? VRTとは? Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか?このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト(以下、VRT)があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します! なぜ VRT が必要なのか? フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま

                            フロントエンド開発の効率化!Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
                          • よりシンプルになる Svelte の世界

                            Svelte は記述量が少なくシンプルなコードで書けることが特徴の 1 つでした。しかし、アプリケーションの規模が大きくなるにつれて学習コストや認知負荷が増加していくという課題が浮上してきました。Svelte v5 で導入される Rune は今までの Svelte のコンセプトを覆し、よりシンプルになることを目指しています。このトークでは Svelte v5 の新機能を通じて Svelte の書き方がどのように変わるのかについて話します。

                              よりシンプルになる Svelte の世界
                            • 生成AI時代のフロントエンド開発術

                              2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに

                                生成AI時代のフロントエンド開発術
                              • 令和のHTML / CSS / JavaScriptの書き方50選

                                Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい!」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

                                  令和のHTML / CSS / JavaScriptの書き方50選
                                • フロントエンドから Amazon S3 にマルチパートアップロードしたい - カミナシ エンジニアブログ

                                  はじめに Presigned URL(*) などで、Amazon S3 へのアップロード処理を実装していると、大きなサイズのファイルをアップロードしようとしたときに、以下のような課題に直面することがあります。 一回のPUT リクエストでアップロードできるサイズの上限が 5GB まで 単一の HTTP リクエストでアップロードするため、大きなサイズをアップロードしようとしたときに問題が起きる。例えば、アップロードの処理の途中で失敗したとき、最初からやり直しになる。 このようなときに活用したいのが、マルチパートアップロードです。マルチパートアップロードとは、その名の通り、アップロード対象のオブジェクトを小分けにしてアップロードする方法です。 AWS の SDK には、マルチパートアップロードが簡単に行えるような API が用意されているものの、多くは、S3 にアップロードを行うことができる I

                                    フロントエンドから Amazon S3 にマルチパートアップロードしたい - カミナシ エンジニアブログ
                                  • サービス開発におけるVue3とTypeScriptの親和性について

                                    2024年5月11日(土)に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons

                                      サービス開発におけるVue3とTypeScriptの親和性について
                                    • 個人的におすすめしたい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

                                        個人的におすすめしたいFeature-Sliced Designというフロントエンドアーキテクチャ設計方法論
                                      • Node.js の進化に伴い不要となったかもしれないパッケージたち

                                        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 が挙げられていますが、この記事では「これら

                                          Node.js の進化に伴い不要となったかもしれないパッケージたち
                                        • フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた


                                          () JavaScript(TS)     調() Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma   JavaScript Runtime Deno Bun
                                            フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
                                          • The Front End Developer/Engineer Handbook 2024

                                            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

                                              The Front End Developer/Engineer Handbook 2024
                                            • 日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開

                                              日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開 一般社団法人 日本CTO協会(本社:東京都渋谷区/代表理事:松岡剛志、以下:日本CTO協会)は、Webフロントエンド版DX Criteria(プロダクトのユーザー体験と変化に適応するチームのためのガイドライン)を2024年4月24日に公開しました。 Webフロントエンド版DX Criteria(プロダクトのユーザー体験と変化に適応するチームのためのガイドライン) https://dxcriteria.cto-a.org/frontend Webフロントエンドの技術環境は日々変化しており、プロダクトを構成する技術要素だけではなく、ユーザーの利用端末や通信環境、要求も変化し続けています。その変化の速さに企業や団体の組織変革やWebフロントエ

                                                日本CTO協会から、プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』を4月24日に新公開
                                              • Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン

                                                Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン

                                                  Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン
                                                • IME変換中のエンターキーで送信される!への対処法[追記あり] - Classi開発者ブログ

                                                  [2024年4月25日 追記] Safariの動作について考慮漏れがありましたので、一部追記・編集しました。 新宿にオフィスのあるClassiは、岡山在住の私のような地方在住者だけでなく、いわゆる通勤圏内に在住していてもリモートワークで働いている人が多い会社です。必然的にミーティングはいわゆるオンラインミーティングとなり、主にGoogle Meetが利用されています。 そのGoogle Meetのチャット機能、ここ1週間ぐらい「IMEで日本語に変換のために押すエンターキーで送信されてしまう」という現象が発生しています。このエントリーを読まれている時点では対応しているかも知れませんが、2024年4月22日17時時点ではその現象は続いています(Windowsでは再現しないという情報もあります)。 入力開始 変換して確定のエンターキーを押すと 送信される エンターキーに頼らない日本語入力を頑張り

                                                    IME変換中のエンターキーで送信される!への対処法[追記あり] - Classi開発者ブログ
                                                  • Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog

                                                    Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは? 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ

                                                      Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
                                                    • Vue Vaporモード近況 | gihyo.jp

                                                      本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM(Virtual DOM, VDOM)と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM(V-tree)をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更(patch)します。 しかし、UIが複雑になってくると仮想DOMも大き

                                                        Vue Vaporモード近況 | gihyo.jp
                                                      • Node学園 42時限目 Next.js AppRouterについて (2024/04/30 18:00〜)

                                                        お知らせ connpassではさらなる価値のあるデータを提供するため、2024年5月23日(木)を以ちましてイベントサーチAPIの無料での提供の廃止を決定いたしました。 2024年5月23日(木)以降より開始予定の「connpass 有料API」の料金プランにつきましてはこちらをご覧ください。 お知らせ connpassをご利用いただく全ユーザーにおいて健全で円滑なイベントの開催や参加いただけるよう、イベント参加者向け・イベント管理者向けのガイドラインページを公開しました。内容をご理解の上、イベント内での違反行為に対応する参考としていただきますようお願いいたします。

                                                          Node学園 42時限目 Next.js AppRouterについて (2024/04/30 18:00〜)
                                                        • Promise や Context から値を読み取る use React フック

                                                          use フックは 2024 年 4 月現在、React の Canary および experimental チャンネルでのみ利用可能です。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { const response = await fetch("/api/users"); return response.json(); }; const Users = () => { const users = use(fetchUsers()); return ( <ul> {users.map((user) => ( <li key={user.id}>

                                                            Promise や Context から値を読み取る use React フック
                                                          • タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし | TAKLOG

                                                            タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使

                                                              タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし | TAKLOG
                                                            • Front-end development’s identity crisis

                                                              Elly Loel Front-end development’s identity crisis 🔗 https://ellyloel.com/blog/front-end-development-s-identity-crisis/ Created on March 29, 2024 •Last modified on March 29, 2024 • Complete • BlogWorkingWeb design I’m not a “[full-stack] developer”, regardless of what my last job title says. I’m not even a front-end developer, thanks to the JavaScript–industrial complex. I’m a front-of-the-front-e

                                                                Front-end development’s identity crisis
                                                              • React フレームワークの 動向と選定基準

                                                                まずはじめ React に焦点を置き、昨今のフロントエンドでどのようなフレームワークが選択肢にあげられるのかについて紹介します。続いて、技術選定を行う際に、どのようなことを考えるべきかについて話します。最後にこれまで話した点を踏まえて、私が実際に技術選定を行った際にどのような選択をしたのか実践的な内容について触れたいと思います。

                                                                  React フレームワークの 動向と選定基準
                                                                • App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement

                                                                  フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/

                                                                    App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
                                                                  • リンクの入れ子は subgrid が最適解かもしれない


                                                                      稿  <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML  <a>  Subgrid 使 Subgrid 
                                                                      リンクの入れ子は subgrid が最適解かもしれない
                                                                    • フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから

                                                                      フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから Cloud Native Computing Foundation(CNCF)は、Webアプリのフロントエンドにおいて、任意の機能のオンオフを管理するフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」をリリースした。 ソフトウェアの機能追加や変更を行う際に、いきなり全ユーザーに新機能や変更を展開するのではなく、展開する範囲や時期をコントロールするための仕組みとして「フィーチャーフラグ」がしばしば用いられます。 例えば、最初は少数のユーザーにのみフィーチャーフラグをオンにすることで試験的に新機能を試し、問題がなければ全ユーザーに拡大する、といった場合などに用いられます。 クラウドネイティブの普及や推進のための団体「Cloud Nativ

                                                                        フロントエンドにおけるフィーチャーフラグ標準化のための「OpenFeature Web SDK v1」がリリース。CNCFから
                                                                      • 静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築

                                                                        静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン

                                                                          静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
                                                                        • オーバーレイ ファクトシート

                                                                          Webアクセシビリティ オーバーレイとは何ですか?オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード(多くはJavaScript)を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。

                                                                          • urqlのDocument Cachingを安全に運用する - ROUTE06 Tech Blog

                                                                            こんにちは、ROUTE06 でソフトウェアエンジニアをしている@MH4GFです。 この記事では、urqlの Document Caching における additionalTypenames についての説明と、実運用でどのように扱うべきかという私見を書きます。最後に、提案する方針を後押しするために作成した Exchange(urql のプラグイン)を紹介します。 urql と Document Caching urql は、主に Web フロントエンドアプリケーションで使用される柔軟性と拡張性に優れた GraphQL クライアントです。 GraphQL クライアントライブラリにはパフォーマンスを向上させるためのキャッシュ機構が用意されていることが多いですが、urql はデフォルトではDocument Cachingと呼ばれる概念を使用します。 Document Caching は quer

                                                                              urqlのDocument Cachingを安全に運用する - ROUTE06 Tech Blog
                                                                            • 当ブログのレスポンシブコーディングについて | TAKLOG


                                                                               使 使 調調
                                                                                当ブログのレスポンシブコーディングについて | TAKLOG
                                                                              • 「ref と reactive」 結局どっちを使えばいいのか? (2024 年最新版)

                                                                                🏆 結論 「とりあえず ref を使えばいい!」 おしまいです。ref でできないことはありません。 注意点として補足しておくと、これは「Vue.js が ref を推奨している」「迷ってるならとりあえず ref を使っておけばいい」という話であって、reactive をはじめとする他の Reactivity API が非推奨だという話ではありません。 reactive がケースによって便利であることは Evan 氏なども認めており、そもそも Vue.js には厳密なルールがあるわけではないので、結局は自分の手に馴染むものを選択していくのが良いと思います。 なので、究極的な結論としては「とりあえず ref ファーストで考えておいて、なんらかしらの理由で reactive を使いたいなら別にそれも良い」という話になりますが、特別な理由がない場合は ref の方が推奨されます。 🚩 はじめ

                                                                                  「ref と reactive」 結局どっちを使えばいいのか? (2024 年最新版)
                                                                                • 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 に沿った仕様なのが注意点になりそう、

                                                                                    JSR の Public Beta 公開など : Cybozu Frontend Weekly (2024-03-05号)