React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO
こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう！ 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr
SWRはローカルの状態管理としても使える
SWRとは SWRとはReactのためのデータフェッチライブラリです。 詳しい説明は省略しますが、リモートのデータ取得のためのキャッシュ機構を提供するライブラリとして知られています。 この記事では、そんなSWRが実はローカルの状態管理にも使用できることを紹介します。
クラスメソッドのReact事情大公開スペシャル#3 -「高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定」というテーマで登壇しました #クラスメソッド勉強会 | DevelopersIO
西田@リテールアプリ共創部マッハチームです 先日、大阪で行われたクラスメソッドのReact事情大公開スペシャル#3で 「高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定」 というタイトルで発表させていただきました 私が所属する「マッハチーム」はLINEミニアプリの開発を主軸とし、高速にプロジェクトを立ち上げMVPを作成する、プロジェクトの立ち上げの専門チームです。そこで使われてる、高速案件立ち上げのためのテンプレートではReactが採用されています。今回はマッハテンプレートのフロントエンド技術の選定についてお話しさせていただきました 資料 感想 40人近く参加いただき、関西のエンジニアのReactへの関心の高さを感じました。懇談会も多くの方に参加いただき、いろんな方と交流ができて楽しかったです。 また機会があれば発表させていただきたいと思います！
「クラスメソッドのReact事情大公開スペシャル#3」を開催・登壇しました！ | DevelopersIO
3回目となる今回は、過去最多の39名の方にご参加いただきました（前回は20名前後）。 また、イベントでは4名の方に以下のような感じで登壇していただきました。 1.高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定 弊社の西田さんが発表されました。 マッハチームで利用されている高速開発のためのマッハテンプレートに含まれるフロントエンドのスタックについて説明いただきました。 実は私も西田さんと同じマッハチームなのですがフロントエンドの技術選定を全て理解できているわけではなかったので背景含めて大変参考になりました。 2.Reactへの刷新の取り組みと恩恵 サイボウズ株式会社に所属する ryounasso さんに登壇いただきました。 kintoneアーキテクチャ刷新PJの取り組み内容やClojureからReactに変更することによる恩恵などについてお話しいただきました。
Vol.03 Component 総数 1000 件を超える Bill One の React フロントエンドに Chromatic を用いた VRT を導入した話 - Sansan Tech Blog
はじめに こんにちは！ 技術本部 Bill One Engineering Unit の市川です。 Bill One に Join してから早いもので 1 年が経ちました 🌸 今回は 2022 年 9 月ごろから 3 カ月かけて実施した、 Bill One の React フロントエンドにおける Visual Regression Testing (以下、VRT) 導入について、 フロントエンドチームの取り組みや導入時の進め方を紹介していきます。 なお、本記事は【Bill One 開発 Unit ブログリレー】という連載記事のひとつです。 目次 はじめに 目次 VRT 導入の背景 フロントエンドチームの紹介 テスト方針の改定 Storybook と Chromatic Bill One における VRT 導入の進め方 1. VRT 対象 Component の絞り込みとゴール設定 2.
TypeScript開発に欠かせない？Zodライブラリの基本 | DevelopersIO
どうもこんにちは、稲葉です。 最近、私はTypeScriptを使ってちょっとした開発をしていたので、便利なライブラリやフレームワークを探していました。その中で、ゾッと驚くものを見つけたんです。 それが、TypeScriptファーストのスキーマ宣言・検証ライブラリであるZodです。 Zodの素晴らしさは、実際に触ってみないとわからないと思います。私自身もZodを使ってみて、その使いやすさに感動しました。 そこで、今回はZodライブラリの基本的な使い方を紹介したいと思います！ あなたもZodの魅力に触れてみませんか？ 準備 React使って進めていきます。 はじめにターミナルで以下のコマンドを打ちます。 npx create-react-app my-app --template typescript cd my-app npm start TypeScriptをテンプレートに指定して、cre
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 | Amazon Web Services
Amazon Web Services ブログ Next.js Web アプリケーションにおける SSG とSSR の比較： 正しいレンダリングアプローチの選択 人気の React フレームワークである Next.js は、開発者がモダンな Web アプリケーションを構築する方法を変えました。Next.js は、Static Site Generation (SSG) や Server Side Rendering (SSR) といった強力な機能を提供し、アプリケーションのパフォーマンスとユーザー体験を最適化します。本記事では、SSG と SSR の主な違い、利点、いつどちらかを選択するか、それぞれのアプローチで AWS Amplify を使ってデプロイする方法を説明します。Amplify は、フロントエンドの Web やモバイル開発者が AWS 上でフルスタックのアプリケーションを簡単に
Reactの気持ちになって理解するWebパフォーマンスチューニング
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
Remix の SPA モード
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
Reactをdevcontainerで構築するまで：ゼロから始める環境構築 | SIOS Tech. Lab
◆ Live配信スケジュール ◆ サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。 ⇒ 詳細スケジュールはこちらから ⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください 【3/22開催】テックブログを書こう！アウトプットのススメ 1年で100本ブログを出した新米エンジニアがPV数が伸びなくてもTech Blogを書き続ける理由とは？ https://tech-lab.connpass.com/event/312805/ 【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜 Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチ
なぜ Server Actions を使うのか
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { return ( <button formAction={async () => { "use server"; await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`; }} > <BookmarkIcon> </button> ) } X 上での反応を見ると、このクライントから直接 SQL クエリを実行するコードは見た目の印象
Rails+React環境下における、Hot Module Replacementの導入 - stmn tech blog
はじめに はじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。 以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。 今回の記事ではRailsとWebpack、そしてReactを使って、webpack_dev_serverによるHot Module Replacement（以下 HMR）を実装する方法について書きたいと思います。 軽くwebpack_dev_serverとHMRの説明をすると、webpack_dev_serverとはWebpackを利用した開発環境向けWebサーバーで、Webpack管理内の静的アセットを配信することができます。また、HMRとはWebpackの提供する仕組みで、ブラウザのリロードをせずにJavascriptの変更内容を画面に反映するツールです。 弊社のプロダクトであるT
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】フロントエンドのテストコードを書いてみよう【Vitest】 | ソフトウェア開発のギークフィード
Next.jsの新しい概念を学ぶ一覧
GitHub - DiveIntoHacking/react-hooks-101: Udemyのプログラミングコース「React Hooks 入門 - HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得しよう！」で実装したソースコード
Vite + React環境をDockerで構築する
ReactからWeb Components製のコンポーネントを利用してみよう
