実践 React Native 運用チェックシート - Qiita
アプリをストアに公開後、半年に1回のペースでアップグレードを行ってきました。短いものだと1週間、長くて約2ヶ月かかってます。 0.46.2 -> 0.50.4 の思い出 初めてのアップグレードだったのでとにかく大変だった印象です。11月から着手して、クリスマスがすぎ、大晦日がすぎ、正月がすぎてもなかなかエラーが解消せず、先が見えない不安がありました。今でも覚えているのが、AIRMap(いまはreact-native-maps)とfbsdkです。AIRMapはAirbnbが開発していたライブラリでその名の通り地図表示なのですが、ネイティブ層のビルドエラーで苦しんだ記憶があります。かなりObjective-Cのソースコードを読みました。のちのAirbnbのReact Nativeやめる宣言により、ライブラリ開発がどうなるか心配だったのですが無事にReact Native Communityに移
Reac初心者でも読めば必ずわかるReactのRedux講座 | アールエフェクト
突然ですがReactではReduxを利用することですべてのコンポーネントからアクセス可能なデータを一箇所で一元管理することができます。 アクセス可能なデータを一元管理？？Reactの初心者の方であればデータを一元管理するということがどういうことを言っているのかも理解し難いかもしれません。Reactでは複数のコンポーネントを構成してアプリケーションを構築するためコンポーネント間でデータの受け渡しが必ず必要になります。コンポーネント間でデータを渡す場合は親コンポーネントから子コンポーネントへpropsを使って行います。しかしpropsでは親子関係のないコンポーネント間ではデータを渡すことができません。また親と子のみの関係であればpropsを一度渡すだけでいいのですが子コンポーネントにさらに子コンポーネントがあるとpropsをバケツリレーのように渡していなかければなりません。どのコンポーネントか
一言で理解するReact Server Components
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？ という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
React でコンポーネントの再レンダーを防ぐ仕組みを理解するミニマムな例
こんにちはフロントエンドエンジニアの茶木です。 React コンポーネントのレンダーの基本を理解し、再レンダーの抑制の方法をまとめました。 先日、社内のテックシェアで React の hooks の基礎の勉強会をしたのですが、その中で useCallback を使った、再レンダーを防ぐ仕組みを説明したかったのですが、わかりやすい例を準備できなかったのでこちらのブログでリベンジします。 React コンポーネントの再レンダーの基本コンポーネントの再レンダーは、以下の場合に発生します。 state に変更があった場合props に変更があった場合親コンポーネントでレンダリングがあった場合再レンダーが起きる例実際の実装に近い形かつミニマムな例を考えてみました。 text input と reset を持ったフォームです。 これはちょっとありそうな例だと思います。 import React, {
デザイナーが抱くReact+TypeScriptの疑問を紐解き、フロントエンドに一歩近づこう - estie inside blog
こんにちは。ひらやま（@rhirayamaaan）です。 先日とあるツイートを見かけ、つい反応してしまいました。 これはReactコンポーネントを作る時に最低限必要なTypeScriptの知識をまとめた記事を書く気運高まってますか…！！？ https://t.co/rb9iwfNqDG— ひらやま (@rhirayamaaan) 2023年3月1日 3, 4年くらい前（2023年4月現在）は、フロントエンドを好むエンジニアやプログラムを書くマークアップエンジニアが目を輝かせながら React に飛びついていたように私は感じていました。しかし最近では React を使ったサービスが運用される機会も増え、デザイン修正を行うためにデザイナーが React のコードを触るケースも徐々に増えてきている印象があります。 ここ最近ではデザインエンジニアや UX エンジニアという形で表記ゆれを許しながら新
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
Storybookを活用したUIコンポーネントの管理について紹介します - NRIネットコムBlog
本記事は Design Week 2023 5日目の記事です。 🌈 4日目 ▶▶ 本記事 ▶▶ 6日目 💐 はじめまして。フロントエンドエンジニアを目指して日々奮闘中の中平です。この春でNRIネットコムに入社して2年目になります。 昨年の8月に現場配属され、9月頃からはコーダーとしてWeb画面リニューアルの案件に参画しました。初めて参画したこの案件では、画面上に表示するボタンやチェックボックス等のUIパーツ（以下、UIコンポーネントと記載）がStorybookを使って管理されていました。 私自身は途中からの参画だったこともあり、案件参画中はStorybookの導入方法や活用方法をあまり理解しておらず、サイトで使われているUIコンポーネントが一覧で見られるもの程度の認識でした。しかしうまく活用できていれば、さらにスムーズにページのコーディングができていたということに気づき、もう少しSto
Storybook Tutorials
Storybook は開発時にアプリケーションと並行して動きます。Storybook を使用することで、UI コンポーネントをビジネスロジックやコンテキストから切り離して開発できるようになります。この文書は React 向けです。他にも React Native、Vue、Angular、Svelte、Ember 向けのバージョンがあります。 React 向けの Storybook を構築する Storybook を開発プロセスに組み込むにあたり、いくつかの手順を踏む必要があります。まずは、degit を使用してビルド環境をセットアップしましょう。このパッケージを利用することで、テンプレート（アプリケーションの一部をデフォルト設定で構築したもの）をダウンロードし、開発ワークフローの短縮に役立てることができます。 それでは、次のコマンドを実行してください: # Clone the templa
React脱初心者への道しるべ #React #設計 #フロント開発 #Tips - クリエーションライン株式会社
React脱初心者を目指して Reactが今日のフロント開発に欠かせない存在になっていることは、もはや疑いようのない事実です。 ますます多くのエンジニアがReactを学習し、利用していることでしょう。 本記事は「Reactの基本的な機能は何となく理解し、動くものは一応作れるようになった」というエンジニアが「実務で耐えうる設計や開発の進め方を身につける」ための道しるべです。コード例は一切登場せず、考え方を中心にお伝えしていきます。React初心者の方は「次の一歩」として読み進めていきましょう。 記事は「全体の作り方」と「コンポーネントの作り方」の二部構成になっています。 この記事で身につくこと Reactアプリを作る際のオススメ開発環境。 Reactアプリを、どこからどのように作っていけばよいか。 Reactアプリを作る際の考え方や進め方。 Reactコンポーネントの、設計・実装の指針。 R
顧客企業のネットワーク構成によりReact Native + ExpoのOTAアップデートが動作しなかったのを突破した話 - カミナシ エンジニアブログ
カミナシ・エンジニアリングマネージャーの @dmi8a と、 エンジニアの @imu です。 現場DXプラットフォーム「カミナシ」は、WebのアプリケーションとMobileのアプリケーションを1セットで提供する形を採用しているサービスです。 今日はExpoのOTAアップデートを介した、カミナシMobileアプリのリリースでぶつかった壁とそれを突破した方法について共有させてください。 本記事における前提 「カミナシ」は、Mobileのアプリケーション開発に、React Nativeを採用しております。 ※ご周知の通り、React Nativeは、iOS/iPadOS系アプリとAndroid系アプリの双方を開発できるクロスプラットフォームのアプリ開発用フレームワークです。 本記事では、iOS/iPadOS系アプリに絞った話となっております旨ご了承ください。 React Native + Exp
Reactのレンダリング、差分検出処理の仕組みを学ぶ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
恥ずかしながらReactのレンダリングとは何か、差分検出処理とは何かをよく分からずに、 再レンダリングを回避するため雰囲気でReact.memoを使ってきました。 今回はReactのレンダリングと差分検出処理について調べました。 まずは公式ドキュメントの差分検出処理についてまとめます。 異なる型の要素の場合 ルート要素の型が違う場合、Reactは古いツリーを破棄して新しいツリーをゼロから構築する ツリーを破棄するタイミングで古いDOMノードは破棄される 配下のコンポーネントはアンマウントされ、アンマウントされたコンポーネントのstateも破棄される 古いDOMノードが破棄される時に、useEffectで定義したクリーンアップ関数を実行する（クラスコンポーネントのcomponentWillUnmount） 新しいツリーを構築する時に、新しいDOMノードがDOMに挿入される DOMに挿入された
React | create-react-appによる環境構築 | CODE-GUIDE
最初は複数のファイルやフォルダが定義されるので少し戸惑うかもしれません。Reactで作成するプログラム（UIコンポーネントなど）は src フォルダ以下にJavaScriptファイルとして作成していくことになります。まずは src フォルダの中にプログラムを作成していくという点を覚えておきましょう。 それから public フォルダはHTMLファイルなどの公開フォルダという位置づけです。Reactで作成したJavaScriptプログラムを実行するための index.html ファイルなども public フォルダに配置されています。 また Node.js を基盤にReactアプリケーションを開発いていくことになるので、パッケージの定義ファイルである package.json ファイルや package-lock.json ファイル、node_modules といったフォルダも準備されていま
【Udemy備忘録】Next.jsを知る - Qiita
概要 Udemyでかなりお得なセールをしていたので、Next.jsについて学び直しました。 受講したコースは、以前もお世話になった講師の方の最新のコースで、前回同様とても良質だったので、どんなことを学べるのかまとめました。 ただし、有料コースなのですごくざっくりした紹介程度です。 NextjsとSupabaseによる高性能Web開発 すごくおすすめです。 SupabaseというBaaSを使用していますが、本題はNext.jsの仕様の話です。 サイトアーキテクチャ 以下のアーキテクチャについて詳しく学べます。 これを知ることで、作成するサービス・サイトをどのような設計で作ればいいのかがわかります。 SSG（Static Site Generator ） SSG + CSF（Client side Fetching） SSR（Server side Rendering） ISR（Increme
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小林（@koba04）です。 2019年5月に『SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷』という記事を書きましたが、そこから2年以上が経過し、Reactを用いた状態管理は大きく変わりました。本記事ではReactを取り巻く状態管理の変遷について解説します。 広がるReduxの採用 Hooksの登場 コンポーネントツリーから独立した状態管理 Concurrent Featuresによる新しいユーザー体験 状態とキャ
【React Table V8 & TypeScript 】 ユーザー入力でセルを書き換える
const columns = [ columnHelper.accessor("id", { header: "id", cell: IdCell, }), columnHelper.accessor("updatedTimestamp", { header: "更新日", cell: DateCell, }), columnHelper.accessor("name", { header: "名前", }), columnHelper.accessor("age", { header: "年齢", }), ]; export default function V8() { return ( <PageBase title={"V8"}> <div> <h1 className={styles.title}>V8</h1> <Table<MatchResult> columns={col
【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法 | Enjoy IT Life
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ（操作可能）なページを生成する過程のことをいいます。Hydrationはクライアントサイド（ブラウザ）で実行されます。 Hydrationの定義と役割については、Next.js『Pre-rendering and Data Fetching#Pre-rendering』に記載されている説明と図も参照してください。 Next.jsの公式ドキュメントでも説明されている通り、HydrationというプロセスはPre-renderingの有無に関わらず実行されます。 Next.js（Pre-rendering）におけるHydrationの過程について Next.js（Pre-rendering）のHydrationではページをインタラクティブにする処理に加
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React開発における失敗事例と学び〜実例3選とともに〜
VueとReactのプロジェクトをHMR（ホットリロード）が爆速と噂の「Vite」を使って構築してみる | ビジネスとIT活用に役立つ情報（株式会社アーティス）
