ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみた - feb19
ウェブ制作で React(Next) や Vue(Nuxt)、jQuery が最近どれぐらい使われているのか調べてみたdate2022.9.4(Sun.)tagsweb developmentFrontendJavaScript ウェブアプリケーション開発で React や Vue を使うのはよくある話かなと思うのですが、マーケティングや広報活動など広告クリエイティブ系のウェブサイト制作ではどれぐらい使われているのかなと思い、暇つぶしにリサーチしてみました。 調査方法母集団ウェブギャラリーサイトをいくつか見て比較的国内系のセレクトが多そうな https://io3000.com/ さんから 2022 年に紹介されている 175 件と、ウェブサイトのアワードサイトとして有名な https://www.awwwards.com/websites/ さんで 2022.8 以降に Winner と
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
React Hook Formハマりどころとベストプラクティス
初めに React Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。 そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。 個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しない これしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例 このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがありま
2022-07-20のJS: Node.js 18.6.0、React NativeのHermesデフォルト化、AWSのデザインシステム
JSer.info #601 - Node.js 18.6.0がリリースされました。 Node v18.6.0 (Current) | Node.js Node.js 18.6.0ではexperimentalで実装されている--loaderの挙動の変更が含まれています。 複数の--loaderを指定した場合の順番を変更。またloaderの実装はshortCircuitを返すのが必須となっています。 そのため、すでに公開されているloaderが動かなくなっている場合があります。 詳しくは、次のIssueと記事で解説されています。 esm: add chaining to loaders by JakobJingleheimer · Pull Request #42623 · nodejs/node Custom ESM loaders: Who, what, when, where, why
Reactに有利なベンチマークを Vue.js で試したところ大差なく、そして…
みなさんこんにちは。 現在、フロントエンドでは宣言的UIが大流行しており、そのためのフレームワークも Vue.js をはじめ複数存在しています。 （React はフレームワークではなくライブラリです） 同種のソフトウェアや言語があれば、自分の好みを巡って意見を出し合うのはエンジニアの常でして。 それがパフォーマンスに関することであれば、無関心ではいられなかったりするわけです。 とはいえ Evan You もいうように特定のフレームワークやライブラリが現実世界のパフォーマンスの問題を銀の弾丸のように解決できるわけではありません。 フレームワークの開発者が数10ミリ秒単位でパフォーマンス改善に勤しむなか、利用する企業が（数100ミリ秒要するような）広告会社のスクリプトを迷いなく追加したりするのですから。 それでも僕たちは、パフォーマンスの話題をせずにはいられません。 だって、それがエンジニアで
Reactに有利なベンチマークを作ってみた 【ハードモード】 - Qiita
前回のおさらい 前回の記事では、同じアプリケーションを6つのUIライブラリで実装し、Reactに有利な状況設定で作られたベンチマークを走らせると当然Reactが勝つという結果をお伝えしました。 そのベンチマークでは、「レンダリングのために高い負荷がかかっている状況でもユーザーが快適に入力を行えるかどうか」を測りました。 Reactでは、レンダリングのジョブを中断してユーザーの入力を処理するスケジューリングの機構が備わっているため、高負荷の状況でもユーザーの入力に高速に応答することができました。 また、今回書くベンチマークアプリは「最大限自然かつ簡潔」という条件で実装したため、スケジューリングがライブラリ本体に組み込まれているReactのみが有利な結果となりました。実はReact以外のライブラリは1文字入力されるたびに律儀にDOMに反映していましたが、Reactは本体からスケジューリング機構
Reactに有利なベンチマークを作ってみた - Qiita
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
useEffectを使ったデータ取得はベストプラクティスではないです、react-hooks-fetchをお試しあれ
useEffectの新しいドキュメントが書かれている途中です。useEffectのタイミングでデータ取得を開始するのは、これまでもベストプラクティスではないと言われていたのですが、React 18のStrict Effectにより再び議論されるようになりました。 今のところ、Reactが提供しているAPIだけですんなり実現する方法はなく、3rd-partyライブラリやフレームワークを使いましょうとなっています。react-hooks-fetchはその一つにならないかと開発してます。 また、他のライブラリも開発してます。比較表を作りました。 ちなみに、以前作っていたuseEffectベースのライブラリはdeprecateしました。こちらの記事にも注釈追記しました。 かいつまんだ紹介しかしませんでしたが、こんな議論を楽しめる方がいらしたら、ぜひReact Fanオンラインコミュニティ(Slac
ライブラリゼロの20行でReduxもどきを実装して、Reduxを完全掌握しよう！！
はじめに Reduxは遠い昔に誕生したものなので、いまReduxを使っていない人も多いかもしれません。 Reduxは、出現当時はそれほど大きなソフトウェアではなかったのですが、ときが経つにつれて、いろいろな便利関数たちが現れてきて、そのせいで今からReduxを調べる人は、何が本質なのかを調べるのが難しくなっていると思います。 そこで3分でReduxもどきを実装しました。こちらです。20行！！ じゃーん！ JavaScriptでうごきます！！ // 実装 const createStore = (reducer) => { let state = 0; const listeners = []; const dispatch = (action) => { const newState = reducer(state, action); state = newState; listeners
React Queryを使いこなすために試したこと
はじめに タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。 モチベーション 現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。 React Que
【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
Design Doc for react-boilerplate-2022
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
iOS版YouTubeアプリのOSSライセンスページが魔窟 - ナカザンドットネット
気分転換で下調べも何もせずに雑に書いた記事です。個別のライブラリについては間違ったことを言っている部分が多いと思うので、参考にしないでください。 こんなツイートを見かけました。 YouTube、yogaが使われてるんだ👀 pic.twitter.com/A9GVR7ByPb— Naturalclar(Jesse K.) #StopAsianHate (@natural_clar) 2021年11月17日 Yogaといえば、FacebookMeta社が作ったAndroid / iOS向けのレイアウトエンジンです。 yogalayout.com React Nativeのレイアウトエンジンでもありますが、まあ今回はReact Nativeの話はしません。YogaはAndroid向けのLithoやiOS向けのComponentKitといった形でも提供されており、ネイティブアプリのUI実装にも活
React Leaflet + TypeScriptで地図（地理院タイル）を表示する
Webブラウザで地図を表示させる JavaScript のライブラリとして Leaflet がよく使われる。 Leaflet ではブラウザに地図タイルを表示し、移動・拡大・縮小といった基本的な動作を行うとともに、マーカー・画像等を地図と連携して表示させることが可能。あちこちの商用サイトでも使用されているのを見かける。 Leaflet は単なる JavaScript のライブラリなので、これを React で扱うときは、その間を上手いことバインディングしてくれる React Leaflet を使うのが便利。 そこで本記事では、React Leaflet を TypeScript で扱いつつ、国土地理院が公開している地理院タイルを表示するまでの手順を解説する。 （というか、これをやる方法を軽く検索したけど良いサンプルが見付からず、試行錯誤して動くものを作ったので、その経緯をメモとして残しておく
すべてのウェブ開発者へ。人気GitHubリポジトリ9選 - Qiita
本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」（2021年4月4日公開）の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ10選 便利なツール、参考になる例など はじめに GitHubは、最近の（ウェブ）開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。 そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。 1. Realwor
React でアイコンを使うなら React Icons がおすすめ
概要 みなさんは React のプロジェクトでアイコンが必要な際はどのように実装していますか？ SVG の埋め込み？それとも Font Awesome？ 私は、主に「React Icons」という React 用のライブラリを使用しています。 React Icons は、豊富な種類のアイコンが揃っておりシンプルで使いやすいため、大変重宝しています。 この記事では、React Icons の紹介とその使い方について解説しています。 それでは、早速みていきましょう。 React Icons とは React Icons は、Font Awesome や Material、Codicons（VSCode のアイコン）などのアイコンを簡単に利用することができる React 用のライブラリです。 npm パッケージとして提供されているため、npm installを使用してプロジェクトに導入します。
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
PIXIV Design System 2021 の発表をしました（前編） #pixivdevmeetup - pixiv inside
2021/10/25追記 おまたせしました。この記事の後編も公開しておりますので、合わせてお読みください。 inside.pixiv.blog こんにちは。プロダクトデザイナーの yksk とフロントエンドエンジニアの f_subal です。 ピクシブにはデザインシステムを開発するチームがあります。ピクシブが運営する数多くのプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。 今回は、先日行われた pixiv DEV MEETUP 2021 のセッション「PIXIV Design System 2021」で発表した、技術的な取り組みについて前後編に分けて発表します。 前編にあたるこの記事では f_subal パートの内容をおさらいをしていきます。 PIXIV Design System 2021 昨年のpix
私が React を好きな理由
何かを好きになるのに、理由なんているかい？ ~セ・ヤ (B.C.2525)~ 出会い あれはおよそ4年前のことでした。 2016年の冬、寒さに震えていた私はフロント未経験の身でありながらフロントの技術選定をしなければならなかったのです。 その頃のフロント界は混迷を極め、 React もまだ枯れておらず、Angular は2系が1系と大きく違うことから叩かれ、Vue が名乗りを上げようとしていました。「フロント界隈は動きが速い」というフレーズも流行語大賞になりそうな勢いでした。 そんな中選択肢・考えることの多さに絶望していた私は React を試しに触ってみました。 そして「思ったより覚えることないし、独自文法とかも少ないからミスってもリカバリー効きそうだな」と直感的に思いました。 はっきり言ってしまえば雰囲気で選んだのですが、今ならこの時の直感は間違っていなかったと自信を持って言えます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
