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の値を変更したり…

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

タイトル通り、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…

ヨドバシカメラから届きました。 Alex Banks、Eve Porcello「Reactハンズオンラーニング Webアプリケーション開発のベストプラクティス」 最近のJavaScriptライブラリーとして外せないので、どんなものか知るために購入です。これから読みます。

Web上でプログラムを書いて動かすことができるサイトの紹介になります。 ■Paiza.io ■codepen ■Google Colaboratory ■Paiza.io サイト：https://paiza.io/ja>サイトにアクセス後”コード作成を試してみる（無料）”ボタンをクリックすることで すぐに使用することができます。メジャーな言語はもちろん、24言語以上対応しているため、便利です。 ■codepen サイト：https://codepen.io>サイトにアクセス後”Start Coding”ボタンをクリックすることで すぐに使用することができます。 Googleアカウントを持ってい…

超ざっくりいうと明るいHSPの歌（笑）相手の些細な言動の意味や、自分の言動が正しかったかどうかつい考え込んでしまうこと、私もあるなあ。 Thinking 'bout what you just said 君が言ったことについて考えてる Sleepless, now my eyes are red 寝不足で目が赤い My head can't comprehend 頭で理解できないよ Living in the background, wondering what you meant ぱっとしない生活を送りながら、君の言葉の意味を考える That's when my eyes got red そ…

半年ぶりの更新が技術の話じゃなくて、個人的かつ年齢のお話… ついに私も30歳という年齢になり、ある意味での節目とも言えるので、20歳から少し振り返ってみる。 学生時代（20~24） 新潟を離れ、仙台、東北大学の学部や院で6年間を過ごした。 ロボコンサークルでプログラム班みたいなのに属して、今の仕事のベースとなるプログラミング技術を学んだ。 サークルではプログラム以外にも、自分が触るものは全部触ろうみたいな考えを持って回路だったり、時にはガワも作るようになった。 このスタンスが今の仕事のやり方にも反映されていて、いい経験が出来るサークルに巡り会えたなと思う。 もちろん経験が出来ただけでなく、良い…

React Nativeで作成しているiOSアプリをXcodeでビルドしたら Node found at: /usr/local/bin/node dyld[39998]: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.71.dylib Referenced from: <D092FE6D-5639-3BBF-A0A6-1CE0F725CADB> /usr/local/Cellar/node/18.10.0/bin/node ... Command PhaseScriptExecution failed with a nonze…

React Hook Formとreact-dropzoneを組み合わせた時にバリデーションを発火させるのに手間取ったのでメモ。知ってれば難しいことはない。 Next.jsのAPIでnodemailerを使ってメールを送るのアップデート版 textareaのinputをメール送信するだけの機能に、下記の要素を追加 選択肢を追加 ファイルのアップロードを追加（pdfに制限する） バリデーションを追加 機能の実現のために、下記のライブラリを追加した React Hook Form: form項目増えるので管理のため react-dropzone: ファイルアップロードをドラッグ＆ドロップで実現した…

最近ジメジメしてきましたね。