react

※ これは 2023/05/18 時点の create-react-app@5.0.1 の情報です 最新版では動作が異なる可能性がありますのでご注意ください 前回に引き続き React のチュートリアルの続きを焦らず少しずつ進める スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({});

こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は『グローバルステートの管理』について学びます。 グローバルステートの管理方法 Contextを使用する方法 外部ライブラリを使用する方法（Redux） Reduxの基本概念: ステート（State） リデューサー（Reducer） アクション（Actions） 実践 準備 ステートの利用 ステートの更新 どうやって使い分けるのか？ Contextのメリット Reduxのメリット まとめ グローバルステートの管理方法 Reactにおけるグローバルステートの管理方法は2つありま…

※ これは 2023/05/18 時点の create-react-app@5.0.1 の情報です 最新版では動作が異なる可能性がありますのでご注意ください Unity のネタ切れになってしまったので、これまであまり触ってこなかった分野をやってみることにする それは React ！ UI にからんだクライアント系技術をひたすら習得していたものの、Web や JavaScript 系はあまり詳しくないので、これを機に触ってみることに とりあえず上記チュートリアルの最初の一歩、ローカル開発環境の構築 のところをやってみる スポンサードリンク (adsbygoogle = window.adsbyg…

Reactのライフサイクル（Lifecycle）は、Reactコンポーネントが生成され、更新され、破棄されるまでの一連のイベントの流れを指します。 Reactのコンポーネントは、特定の時点で実行されるメソッドを持ち、それによってアプリケーションの状態の変化やDOMの更新を制御します。 マウント（Mounting） マウントフェーズは、コンポーネントがDOMに最初に追加される時のフェーズです。以下のメソッドが順番に実行されます。 'constructor()': コンポーネントの初期化を行います。stateの初期化やイベントハンドラのバインドなどを行う場合に使用します。 'static getD…

React でのアプリの作り方の流れを、React の流儀 – Reactの検索可能な商品データ表を例に学んだ。 モックを作る UI をコンポーネントの階層構造に落とし込む React で静的なバージョンを作成する UI 状態を表現する必要十分な state を決定する state をどこに配置すべきかを明確にする 逆方向のデータフローを追加する モックを作る まずはモックを作る（ゴールをみてどんなものが必要になるかを考えられる状態にする） モックから始めよう UI をコンポーネントの階層構造に落とし込む モックを構成する各コンポーネントを四角で囲んで命名する。 どんな役割なのかを整理する。 …

こんにちは！ スマレジ テックファームのMichiです！ 前週に引き続き、Reactのキャッチアップをしていきます。今回は、『レンダリングの最適化』について学びます。 コンポーネントが再レンダリングされる条件 サンプルコード memo - コンポーネントのメモ化 - useCallBack - 関数のメモ化 - useMemo - 変数のメモ化 - まとめ コンポーネントが再レンダリングされる条件 前回のおさらいです。Reactにおいて、コンポーネントの再レンダリングが発生する条件は、（大まかに言って）以下の三つでした。 コンポーネント内の状態管理されている値（state）が変更されたとき 親…

Reactにおけるstate（状態）は、コンポーネント内部で管理されるデータのことを指します。 stateは、コンポーネントの見た目や動作を変更するために使用されます。 Stateの初期化 コンポーネントでstateを使用するには、まず初期値を設定する必要があります。 クラスコンポーネントでは、コンストラクタ内でthis.stateを使ってstateを初期化します。 関数コンポーネントでは、useStateフックを使用して初期値を設定します。 Stateの初期化 Stateの使用 stateは、コンポーネント内の任意の場所で使用できます。 例えば、イベントハンドラ内でstateの値を変更したり…

更新日時 2023/06/04/07:07 Qiita Trends Daily 1位 [New] Java,unicode Qiita Trends Daily 2位 ※前日2位 Python,初心者,Docker,VSCode,新人プログラマ応援 Qiita Trends Daily 3位 ※前日5位 MySQL,SQL,DB,パフォーマンスチューニング Qiita Trends Daily 4位 ※前日10位 統計,統計学,データサイエンス,統計検定準1級 Qiita Trends Daily 5位 ※前日6位 TypeScript,AI,embedding,ChatGPT,LangCo…

月の変わり目なので、先月の学習を振り返ってみようと思います。 5月上旬 progate Ruby on rails Ⅸ～Ⅺ、道場編Ⅲ 先月からの続きのRuby on Railsでは、インスタンスメソッドによる投稿文章とユーザーの紐付け・likesテーブルを使用した、いいね機能実装・パスワードのハッシュ化を学びました。 progate JavaScript, React, Node.js 1.JavaScriptの前半では、四則演算・変数定数・条件分岐・switch文・繰り返し処理・配列とオブジェクトを学び、後半では関数・アロー関数・引数と戻り値・クラスとインスタンス・コンストラクタとメソッド・…

まず、ReduxやRedux toolkitの恩恵を感じるために例を作成します。 完成形がこれです。 よく車の台数をカウントしている光景を見かけますが、車種別にカウントできるようにしました。 具体的には、それぞれの車種別にカウンターがあり、その総数が一番上にカウントされるものです。 図はわかりやすいように、CSSファイルを入れてますが、今後はCSSファイル抜きで説明したいと思います。 create-react-appを使用します。 src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; i…

さて、そろそろreduxを勉強しようと思ったのですが、生のreduxは非推奨のようです。 redux toolkitが推奨されているようですので、こちらをやっていきましょう。 www.youtube.com 通しで、どのようなことをやるのかを学習したい場合は上記のYoutubeが有用です。 Reduxの概念を理解したい場合は、 Reffectの「Reac初心者でも読めば必ずわかるReactのRedux講義」を参照。 reffect.co.jp そして、Redux toolkitを使いたい場合は Reffectの「Redux入門者向けの初めてのRedux ToolkitとRedux Thunkの…

ReactでSPAを書いているのだが、一つだけハマってまだ抜け出せないバグが。あるコンポーネントの最初のボタン・リンク要素だけイベントハンドリングが上手く行かず、クリックしても何も起こらないと言う事象が発生している。コードのイメージはこんな感じ。 import xxx function AAA() { --省略-- const clickHandlerA = () => { console.log('Clicked Button-A'); }; return ( <div className='newPortfolio'> <div className='newPortfolioContain…

こんにちは。SaaSプロダクト開発部の千葉です。 今回は、最近試した「React 対応の WYSIWYG エディタで HTML 文字列を（class などの属性値を維持しながら）編集する」方法をまとめていきたいと思います。 WYSIWYG エディタとは React 対応 WYSIWYG エディタの選定 Draft.js で HTML 文字列を出力する基本的な実装 解説 基本的な実装での課題 Draft.js を深くいじって解決 解説 まとめ WYSIWYG エディタとは 今回の要件は、HTML 文字列を「編集前と編集後で class などの属性値を維持しながら編集する」ことです。 この条件を満…

こんにちは、れいじです。 CANDY CHUPS Lab.は先日から開催されている技術書典14に参加しています！ techbookfest.org 本サークルからは新刊「ウチらの最強のReactコンポーネントライブラリを作る本」を発行しています！ 頒布情報 オンラインマーケットでは手数料なしの1200円で販売中となります。※電子版のみ techbookfest.org BOOTHでは冊子版＋電子版を2200円、電子版を1500円で頒布中です。 こちらはサービス手数料込みの値段となっておりますが、冊子版を購入する場合はBOOTHのみが販売窓口となっております。実質電子版に1000円課金で冊子がつ…

目次 目次 はじめに NestJSを選んだ理由 取り組んでみて分かったこと 情報量はまだ多くない これからはRuby on RailsではなくNestJSを選択する おわりに はじめに こんにちは，光岡です． アンさん，及川さんのブログ記事に引き続き，Zine作成についての最後の記事になります． お二人のブログ記事は以下です． blog.lab.sugimototatsuo.com blog.lab.sugimototatsuo.com ネットワークデザインスタジオの大学院生3名で制作した「カラフルなJavascriptであそぼう p5.js | Konva.js | NestJSのノウハウブ…

アトミック(Atomic)デザインとは？ アトミックデザインはデザインシステムの一種であり、UI/UXデザインにおいてコンポーネントベースのアプローチを採用しています。 アトミック(Atomic)デザインのメリットは？ 再利用性が高い アトミックデザインでは、小さなコンポーネントを組み合わせて様々なUIを作り出すため、コンポーネントの再利用性が高くなります。同じアトムや分子を複数の有機体で使うことができるため、デザインの一貫性を保ちやすくなります。 コンポーネントの管理が容易 アトミックデザインでは、コンポーネントをアトム、分子、有機体、テンプレート、ページのようなレベルで分類することで、コン…

こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js…

www.youtube.com Meta(当時Facebook)のReact Core Teamの主要人物たちに直接インタビューしたドキュメンタリー動画 タイムライン 2012年まで 最初はFacebook社内でReactが普及するまでの道程。 当時世の中的にはクロスブラウザの解決策はjQueryに落ち着き、モバイルアプリ化の流れでAPIサーバーとViewは切り離される傾向にあり、JavaScriptのクライアントサイドで大きいアプリケーション作るためにMVCフレームワークとか取り入れないとね〜という雰囲気だった Facebook社はマーク・ザッカーバーグがHTML5に賭けていた頃*1にBol…

タイトル通り、podman環境下でapcupsdとapcupsd-cgiを動かす話です。 こんなことしなくてもdockerhubになんぼでも先駆者の叡智がうｐされてんだからそれ使えばいいじゃんとは思うけどやりたかったんだ。 環境 RocyLinux8.8で動くKVMで動くRocyLinux8.8(KVM上)のPodman # cat /etc/rocky-release Rocky Linux release 8.8 (Green Obsidian) # podman version Client: Podman Engine Version: 4.4.1 API Version: 4.4.1…