以前にTauri, Rust, TypeScriptで書いたソースコードを流用してWebアプリにしてみた。 前はPureScript + Halogenで書かれたソースを TypeScript + Rustに書き換えたんだけど、今回もう一度書き換えてReact + TypeScript + Wasm + Rustの構成にする。 作った成果物 開発環境 Windows 11のWSL2環境で実行しています。 ~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy ~$ npm -v 9.6.7 ~$ rustup show Default host: x86_64-unknown-li
React Testing Libraryを使ったコンポーネントのユニットテスト コンポーネントの見た目や振る舞いが正しく機能しているかどうかは、ユニットテストによって検証できます。Reactにおいては、React Testing Library というツールを利用して、コンポーネントのユニットテストを実行できます。 今回は、React Testing Libraryの導入手順と、input要素を対象にしたユニットテストの実装方法について学習した内容をまとめていきます。 テスト環境構築 以下では、Next.jsのプロジェクトにテスト実行環境を追加していきます。 なお本記事の各ライブラリのバージョンは以下の通りとなります。 Next.js: 14.2.5 React: 18.0.0 Jest: 29.7.0 @testing-library/react: 16.0.1 @testing-li
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
react-three-fiber のはじめ方｜npaka
1. react-three-fiber「react-three-fiber」は「three.js」用のReactレンダラーです。 2. エコシステム「react-three-fiber」の周りには、ライブラリ、ヘルパー、抽象化など活気に満ちた広範なエコシステムがあります。 ・@react-three/drei : 役に立つヘルパー ・@react-three/gltfjsx : GLTFをJSXコンポーネントに変換 ・@react-three/postprocessing : 後処理効果 ・@react-three/test-renderer : ノードのユニットテスト ・@react-three/flex : react-three-fiber用のflexbox ・@react-three/xr : VR/ARコントローラとイベント ・@react-three/csg : 構成的立体幾
コードのタイピング力を測るエンジニア向けタイピングゲーム「UnTyping」が登場、コースは「JavaScript」「TypeScript」「React」「Python」の4つ
120秒間ひたすらタイピングし続けてコードを記述するゲーム「UnTyping」が公開されました。下記URLから誰でも無料でプレイできます。 UnTyping - エンジニア向けプログラミングタイピングゲーム https://untyping.jp/ URLにアクセスしたら以下のようにコースが表示されます。コースは「JavaScript」「TypeScript」「React」「Python」の4つです。今回は試しに「JavaScript」をクリック。 スペースキーまたはエンターキーを押してゲームスタート。 ゲームのプレイ動画は以下から確認できます。なお、プレイヤーはプログラミング未経験者です。 エンジニア向けタイピングゲーム「UnTyping」にプログラミング未経験者が挑戦してみた - YouTube ゲームが始まると以下のようにコードが表示されるのでタイピングしていきます。 一つのコードに
All Star 疲れやすい問題 Converse の All Star のデザインが好きで、過去のどのタイミングでも2, 3足ある靴のうち1足は All Star 風のものがある しかし、All Star には非常に疲れやすいという致命的な欠陥がある この欠陥のために私は長年無印の偽 All Star を履いていた 先ほど 「All Star 風」と書いたのはこのためである 無印の偽 All Star は真 All Star よりクッション性が高く、インソールも土踏まずがしっかりあって、長時間履いたときの疲れ具合が真 All Star とは段違いだった*1 yamayoru.com しかし、ここのところ無印は偽 All Star を取り扱わなくなってしまったのである 代替品が無くなったため、私は真 All Star のインソールを Converse 公式から販売されている React イ
本書はReactベースフレームワーク「Next.js」を利用したWebアプリ開発手法を解説した入門書です。フロントエンドとバックエンドの両方の開発手法について、Next.jsによるWebアプリ開発に精通する著者の三好アキさんが解説しています。 コードを1行1行書きながら、1つのWebアプリケーションを作成するプロセスを丁寧に解説しているので、初心者の方でも挙動を確認しながら安心して学習できます。 Next.jsを利用したWebアプリの開発手法を知りたい方におすすめの1冊です。 目次 Chapter 1 基礎知識と開発ツールの準備 Chapter 2 バックエンド開発の準備 Chapter 3 アイテム操作機能 Chapter 4 ユーザー登録とログイン機能 Chapter 5 バックエンドのデプロイ Chapter 6 フロントエンド開発の準備／ Reactの書き方／ サーバーコンポーネン
概要 Create React Appで書いたフロントエンドのソースを環境毎に値を変更してビルドしたかったので対応しました。 やり方 環境変数を使います。 詳しくはこちらを参照してください。 Adding Custom Environment Variables 簡単に要点をまとめると .envファイル内に環境変数を定義しておけばJavaScript内でprocess.env.XXXXXで取得可能 REACT_APP_ というプリフィックスにしておけば public/index.html 内でも使用可能 yarn start 時には .env.development 系、 yarn build 時には .env.production 系の環境変数が使用される この辺りのルールは上記のページを参照する 複数の環境変数を切り替えられないか調べましたが特に情報が見つかりませんでした。 npmに何
![[メモ] react-scriptsで環境毎にビルドできる様にする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/da35c6f6a911c0fcbc84d778b4a7624e1f676159/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgzJUExJUUzJTgzJUEyJTVEJTIwcmVhY3Qtc2NyaXB0cyVFMyU4MSVBNyVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBRiU4RSVFMyU4MSVBQiVFMyU4MyU5MyVFMyU4MyVBQiVFMyU4MyU4OSVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QiVFNiVBNyU5OCVFMyU4MSVBQiVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YzNkYmY5MjZmMGE4ZmRjMGQ1ZGQ0MzA0M2E5ZjUxNjI%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBmcm9tX1Vua25vd24mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTUwOTJiNjAwOTJkZTIwMTFkZWU5N2IyNGI1YzkzZmI2%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D5ad10893ecb2092a2ce4397acf63df0d)
Reactで覚えとくべきポイント - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
react開発環境にreact-refreshを導入する
React の web 開発には基本的にホットリロードが導入されています。これまでのホットリロードには react-hot-loader を用いた実装が多いかと思いますが、他にも同様の機能を持つ react-refresh という React 公式ライブラリを使ったホットリロード実装も可能です。 そこで今回は react-refresh を webpack プラグインとして開発環境に導入し、React のホットリロード環境を構築します。 react-refresh - npmreact/packages/react-refresh at master · facebook/react2020 年 6 月現在、react-refresh のドキュメントはありませんが、rough guide によると React 16.9.0+ で react-refresh が使えるようです。また、reac
Reactについて学んだことをまとめる - Qiita
以下のUdemyの講座を受講したので、Reactについて学んだ事をまとめる。 Reactの要素 JSX(JavaScript XML)記法 ReactはJSX記法を用いてコードを記述する。 JavaScriptの中にHTMLのような形でコードを書くことができる。 import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); const AppHoge = () => { return ( <> <h1>Hello!</h1> </> ); }; root.render( <StrictMode> <AppHo
React Server Components – React
サーバコンポーネントは新しいタイプのコンポーネントです。クライアントアプリケーションや SSR サーバとは別の環境で、バンドル前に事前にレンダーされます。 React Server Components の “server” とはこの別の環境を指しています。サーバコンポーネントは、CI サーバでビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することもできます。 サーバを使用しないサーバコンポーネント サーバを使用するサーバコンポーネント サーバコンポーネントにインタラクティビティを追加する サーバコンポーネントでの非同期コンポーネント処理 サーバコンポーネントのサポートを追加する方法 React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワ
はじめに こんにちは@Sicut_study (Watanabe Jin)です。 去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。 エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。 👇メンバーの記事はこちらにあります その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、 実際にやっているカリキュラム(React部分)をすべて紹介します ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
はじめに 業務で SWR を使用する機会があり、プライベートで SWR の勉強をした備忘録です。 CRUD に挑戦しています。 まだ試せたわけではないですが、この記事のように useSWRMutation を使用するより、mutate を使用するほうがパフォーマンス的にはよさそうな気がします。 せっかくなのでだいぶ雑ではありますが、奮闘の記録を残します。 CRUD 今回は GET では useSWR を使用し、それ以外では useSWRMutation を使用する GET, POST, PUT, DELETE それぞれでカスタムフックを作成する それぞれ重要なところを数点あげる 前準備 フロントでのエラーハンドリングのために、レスポンスの共通の型を定義 @/types/apiResponse export type ApiResponse<T> = { data: T; errorMess
大手SIerでwebエンジニア3年目のなおとです。 react-routerのネストされたページの表示方法について、詰まった点を共有します！ やりたいこと 以下のキャプチャのように、page1の中にdetailを表示するようなネスト構造の作成を試みました。 解決前 ルーティングは正しくできているが、detailが表示されません。。。 各ファイル(必要なファイルのみ抜粋) 各ファイルのコードは以下のとおり import { BrowserRouter, Link } from 'react-router-dom'; import { Router } from './router/Router'; export const App = () => { return ( <BrowserRouter> <div className="App"> <Link to="/">Home</Link>
Amazon Amplify Gen 2 の React + Vite テンプレートで Amazon QuickSight Embedding SDK を使ったダッシュボード埋め込みを実装する | DevelopersIO
Amazon Amplify Gen 2 の React + Vite テンプレートで Amazon QuickSight Embedding SDK を使ったダッシュボード埋め込みを実装する いわさです。 Amazon QuickSight は外部 Web アプリケーションにダッシュボードやコンソールを埋め込むことが出来るのですが、パブリックな 1-Click 埋め込み機能以外は API を使って一時的なセッションを張って URL を生成したりとフロントエンドとバックエンドどちらも実装が必要でまぁまぁ面倒です。 そこで、最近 Amplify Gen 2 を使った検証を行うことが多く、フロント＋バックエンドAmplify のクイックスタート＋αで組み込みダッシュボードを実装出来ると便利かもしれないなと思ったので実装してみることにしました。 やることとしては最終的には React + Vit
はじめに 実務の隙間時間に、kintone 開発を行っている人も少なく無いはず。 いかに効率よく開発するかに重きを置いて、テンプレートリポジトリを作りました。 せっかく React で開発するなら、コンポーネントやモジュールの使い回しをできる限りやりたい。 CSS についても同じプロジェクトにおいては同様のスタイリングを行いたい。 これらを解決するために、カスタマイズやプラグインを同一のリポジトリ内で管理できるようにしています。 React のコンポーネント指向について コンポーネントの再利用: React は UI を小さな独立したコンポーネントに分割することができます。各コンポーネントは特定の機能やビジュアル要素を表現し、それらを他の場所で再利用できます。これにより、コードを効率的に再利用できるため、開発が迅速に進行し、保守が容易になります。 階層構造: React コンポーネントは、
【React】レンダリングに時間がかかるページを useTransition を使ってユーザーの体験を向上させる | DevelopersIO
アプリケーションを開発していると、どうしてもレンダリングに時間がかかるページが出てくることがあります。何も対策していないとレンダリングが完了するまで、ユーザー操作がブロックされユーザー体験が悪くなってしまいます。 useTransitionを使用することで、ユーザー体験を向上させることができます！
10月3日、Engineering at Metaで「Meta Connect 2024 でのReact(React at Meta Connect 2024)」と題した記事が公開された。この記事では、MetaにおけるReactとReact Nativeの深い活用方法、さらにはこれらの技術がどのようにしてMetaの大規模な製品開発に革新をもたらしているかについて、詳しく紹介されている。 ReactとReact Nativeは、Metaにとって単なるツール以上の存在であり、これらの技術は製品開発の根幹を成すものだという。毎月5,000人以上のエンジニアがこれらを駆使して、新しい製品やエクスペリエンスを作り上げている。Metaが開発する製品の品質と、凄まじいリリース頻度の背景には、ReactとReact Nativeの強力な基盤がある。 InstagramとFacebookのMeta Ques
【React】ライブラリを使わずにuseReducerでインタラクティブな複数フォームを作成してみた | DevelopersIO
リテールアプリ共創部のるおんです。 Reactでフォームを作成する際に皆さんはどのように実装しているでしょうか。一般的には React Hook Form や Formik などの便利なライブラリを使用することが多いと思います。これらを利用するとライブラリが提供するカスタムフックのおかげで簡単にフォームが作成できて便利ですよね。 一年ほど前にライブラリに頼らずReactが標準で用意している useReducer というフックを用いてフォームを作成した経験があります。その時はフォームデータやエラーの状態管理、バリデーションなどを自前で実装するのが結構大変だった記憶があるので、今回その経験を共有しようと思います。 多くの開発者には普通にライブラリを使用することをお勧めしますが、どうしてもReactのエコシステム内で完結したいという要望を持つ方や、useReducerの使い方を学びたいという方の
ブックマークしました ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください Twitterで共有
startTransition – React
さらに例を見る 引数 scope: 1 つ以上の set 関数を呼び出して state を更新する関数。React は引数なしで直ちに scope を呼び出し、scope 関数呼び出し中に同期的にスケジュールされたすべての state 更新をトランジションとしてマークします。このような更新はノンブロッキングになり、不要なローディングインジケータを表示しないようになります。 返り値 startTransition は何も返しません。 注意点 startTransition は、トランジションが保留中 (pending) であるかどうかを知るための方法を提供しません。トランジションの進行中にインジケータを表示するには、代わりに useTransition が必要です。 state の set 関数にアクセスできる場合にのみ、state 更新をトランジションにラップできます。ある props や
概要 Reactを実務で使っている投稿者が 曖昧になっていた部分 印象に残った部分 をピックアップします 気軽にコメントください JSXはあくまでも糖衣構文 ReactはあくまでもJavascriptであり、 例えJSXを使用していても、その正体はJSに他ならない 一見、HTMLを記述しているように見えるが、JSを記述していることを忘れないように Babel Javascriptトランスコンパイラ 最新のイケてるJS構文や、JSXを現行のブラウザでも動くようにトランスパイルしてくれる Atomic Design react設計の考え方 ページと部品（コンポーネント）で分けて考える 単位は以下の通り Atomics（原子） Molcules（分子） Organisms（有機物） Templates（テンプレート） Pages（ページ） webpack モジュールバンドラー モジュール化された
これからReact / Next.jsの勉強をする方は、何を使ってどんな勉強をすれば良いか迷う方も多いと思います。 勉強方法を間違えると、遠回りになってしまう可能性もあるので、勉強方法や手順を知ることは重要です。 この記事では、何を使ってReact / Next.jsの基礎を勉強すれば良いかにフォーカスを当てて解説します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
Vercel Vercel は、Webアプリケーション向けのサーバーレスホスティングプラットフォームです。 彼らはGitベースのデプロイをサポートし、各ブランチやプルリクエストに対するデプロイプレビュー、さらに上に構築されたいくつかの素敵なコラボレーションツールも提供しています。 Vercelでは、ページごとにNodeランタイムまたはV8 Edgeランタイムを使用するかどうかを指定できるため、一部のページにはNode関数を使用し、他のページにはV8関数を使用できます。デフォルトではエッジ関数を使用し、必要に応じてNode関数を使用することをお勧めします。 Vercelは各エンドポイントを独自の関数に分割するため、各関数バンドルの50MB制限を超えるのは非常に困難です。 VercelはWebsocketsをサポートしておらず、ストリーミングをサポートしているものの、接続は30秒間しか開かれな
こんにちは、Web エンジニアのまさぴょんです！ 今回は、React で動画プレイヤーを作成するなら react-player が簡単に実装できて、おすすめなのでご紹介していきます 🐱 React 動画ライブラリ比較結果 (2024 年 9 月時点) React の動画プレイヤー・ライブラリで調べて出てきたものを比較してみました 👀 候補は「React 動画ライブラリ」で調べてでてきた次の 5 つです 🙏 react-player mux-player-react react-video-js-player video-react video.js 結論：react-player がよさそう 判断基準は、次のとおりです 👀✨ 要件を満たす機能を備えていること。 React 対応のライブラリであること。 正式リリースがされており、安定版であること。 定期的にメンテナンスがされているこ
はじめに React Testing Library でテストを書いている際、<h2>こんにちは<strong> 世界</strong></h2> のように複数の要素で構成されたテキストのテストに手こずったため、備忘録として残しておきたいと思います。 どの場合にテキストの取得が難しいか <h1>合計¥10,000です</h1>のような単一の要素で作成されたテキストの取得は以下のようにgetByRole, getByTextで問題なく取得することが可能です。 const SingleElementText = () => { return <h1 data-testid="single-element-text">合計¥10,000です</h1>; }; // getByRole expect( screen.getByRole("heading", { name: "合計¥10,000です
こんにちは。 開発本部 SJC共同開発推進室の中野です。 ReactでWebフロントエンドの開発を行う際、多くの開発者が「状態管理ライブラリ」について一度は頭を抱える思います。 ReduxやZustandそして本記事で取り扱うRecoilやJotaiのような多種多様な状態管理ライブラリが存在しますが、「これが最適解！」と断言できるものは存在しません。 そのため、ライブラリ選定で多くの開発者が混乱することでしょう。 （私自身もかなり迷いました… そこで今回は、現在担当しているプロジェクトで大活躍中の状態管理ライブラリ、Jotaiについて 「なぜJotaiを採用したのか」というバックグラウンドに焦点を当て、 RecoilとJotaiで迷っている方、あるいは「そもそもJotaiって何？」という方に向けて、Jotaiの概要とその魅力をご紹介します。 なぜ状態管理ライブラリが必要なのか そもそも「な
はじめに この記事は、「GUIプログラミングのベンチマークとして提案された7つの課題を題材に、React状態管理ライブラリのJotaiを学んでみよう」というテーマのJotai学習記事の第一回Counter編です。 完成したコードの解説がメインになります。もしご自身で実装してみたい場合はネタバレになってしまうのでご注意ください。 7GUIsとは 言語やライブラリ系のベンチマークといえば計算速度が評価軸にされることが一般的ですが、この７GUIsはいくつかの指標を軸に7つGUIアプリのお題を用意し、それをベンチマークとして提案しています。 2018年頃に話題となったようで、web系だとReact/MobXやSvelteが実装例として掲載されています。 詳しくはこちら。 7GUIs x Jotai の元ネタ Jotai作者の@dai_shiさんが過去に取り組んでおり、CodeSandboxで既に実
GitHub ActionsでReactアプリをCloudFront + S3にデプロイして静的サイトをホスティングする - Qiita
GitHub ActionsでReactアプリをCloudFront + S3にデプロイして静的サイトをホスティングする 最近、ReactアプリケーションをS3とCloudFrontを使って静的にホスティングするプロジェクトに取り組みました。このブログでは、そのアーキテクチャやCICDパイプラインの構築について解説します。 タイトル内容のソースコードを先に把握したい方はGitHubリポジトリを参照してください。 アーキテクチャ概要 今回構築したアーキテクチャは、以下の要素で成り立っています。 S3バケット: Reactアプリの静的ファイルをホスティングします。S3はサーバーレスで静的サイトのホスティングに最適です。 CloudFront: S3上のコンテンツを高速に配信するためのCDN（Content Delivery Network）。世界中にあるエッジロケーションを利用し、ユーザーに近
Reactグラフライブラリの検証の備忘録（MUI X Charts, Recharts, Victory）
Rechart や Victory が先駆者で、MUI X Charts が後発ですね。ただ、どのライブラリも開発は活発に行われており、その中では Rechart がデファクトスタンダードになっていそうです。 また、チャートライブラリということもあってか、サイズはどれも大きそうというイメージでした。 比較検証 ここからは、3 つのライブラリについて詳しく見ていきました。折れ線グラフや棒グラフなどのシンプルなグラフで検証を進めていきますが、特に以下が気になっていましたので、実現できるかを見ていきます。 棒グラフと折れ線グラフのシリーズを足すグラフ、積み上げ棒グラフなどは対応できるか デザインカスタマイズの柔軟性はどの程度あるか パフォーマンスには問題がないか すべての検証コードは以下となっております（バーっと検証した感じで結構汚くてｺﾞﾒﾝﾅｻｲ）。 MUI X Charts MUI は U
はじめに 今回はJISOUの自由課題として、大学で授業の課題や定期テストの過去問を共有し合えるアプリ「KakomonShare」を開発しました。開発期間は1ヶ月ほどの小規模なアプリではありますが、アイディアや機能を考えるところから自分で行うのは初めてだったのでかなり苦労しました。今回は初めての個人開発で取り組んだことや苦労したこと、反省点や得た学び等を共有していきます！ そもそもなぜこのアプリ案にしたのか 自分の学部では中間や期末試験、課題がほとんど過去のものと同じまま出されることが多く大体の過去問は先輩を探せば手に入ります。もちろんすでに先輩の知り合いがたくさんいればいいのですが、大学に入りたての1,2年生はまだ知り合いの先輩が少ないと思うので、気軽にweb上で過去問の募集や誰がどの過去問を持っているかを閲覧・コンタクトできるような場所を作りたいと思い今回のアプリ案に至りました。 機能一
はじめにこちらは、2024年7月31日に開催された「フロントエンドTechCafe〜Reactでのプロダクト開発を語る〜」において、参加者の皆様から投稿いただいた質問のうち、時間の都合で当日お答えできなかったものに対し、イベント出演者の方々にインタビュー形式で回答いただき、それをまとめたものです。 出演者の紹介 松浦 昂生 (インタビュワー) フロントエンド開発2課 「楽楽明細」「楽楽電子保存」担当 2022年新卒入社後、フロントエンドエンジニアとして、入金管理v1の開発に参画。その後、楽楽電子保存の開発にも参画。 フロントエンドチームの活動を紹介するブログやFE_TechCafeなどのイベントを主体的に開催している。 趣味は筋トレ。💪 伊藤 彪我（楽楽電子保存代表） フロントエンド開発2課 「楽楽明細」「楽楽電子保存」担当 2020年新卒入社後、フロントエンドエンジニアとして楽楽電子保
結論：ほとんど違いはなし buttonタグ内にあるonClickの書き方はどちらでも可 違いとしては onClick={handleClick}の書き方の場合 コンポーネントが再レンダリングされても関数は再生成されない onClick={() => handleClick()}の書き方の場合 コンポーネントが再レンダリングされる度にアロー関数が再生成される 基本は前者の書き方で、引数を受け取りたい場合は後者の書き方がよい const handleClick = () => { console.log("clicked") } return ( <div> <button> // 下記はどちらでも可 onClick={handleClick} onClick={() => handleClick()} > hgoe </button> </div>
概要 Reactで始めてアプリを作成したので、その際の学びを記事にしました。 Reactの学習を始めたばかりのため、間違い等あるかもしれませんが、その際は優しくご指摘・アドバイス等頂けると幸いです。 よろしくお願いします。 対象読者 これからReactの学習を始めたい方 始めてReactでアプリを作ろうと考えている方 本記事の内容 Reactで始めてアプリを作成する際に学んだこと 何をやったのか 大まかに以下の要件を持ったアプリを作成しました。 学習時間と学習内容を登録できる フォームに入力されている内容を動的に表示する（確認用） 登録をしたらフォームが初期化される フォームを入力せずに登録ボタンを押すとエラーが表示される 記録した勉強の時間を合計して表示する 難しかった点 今回苦労した点としては、state でのデータの管理についてです。 今回作成したアプリでは学習内容と学習時間という二
本書はReactベースフレームワーク「Next.js」を利用したWebアプリ開発手法を解説した入門書です。フロントエンドとバックエンドの両方の開発手法について、Next.jsによるWebアプリ開発に精通する著者の三好アキさんが解説しています。 コードを1行1行書きながら、1つのWebアプリケーションを作成するプロセスを丁寧に解説しているので、初心者の方でも挙動を確認しながら安心して学習できます。 Next.jsを利用したWebアプリの開発手法を知りたい方におすすめの1冊です。 目次 Chapter 1 基礎知識と開発ツールの準備 Chapter 2 バックエンド開発の準備 Chapter 3 アイテム操作機能 Chapter 4 ユーザー登録とログイン機能 Chapter 5 バックエンドのデプロイ Chapter 6 フロントエンド開発の準備／ Reactの書き方／ サーバーコンポーネン
Reactを学びたい動機 こんにちは。私は普段RubyやRailsでのバックエンド開発をメインに行っています。 昨今の流れとして、バックエンドはRailsのAPIモードで用意して、フロントエンドはReactやNextJS で記述するといった構成が増えていると思います。 私は常々Reactも使いこなせるようになりたい！とは思いつつも、JavaScriptの理解が不十分だったこともあり、いざReact構文に触れても、そもそも意味がよくわからないといったことが多かったように思います。 そこでReactを勉強していくうえで必要最低限のJavaScriptを勉強してからReactを触っていこうと思いました。 この記事はそれらを端的にまとめたものです。 JavaScript基礎 以下雑多に必要そうだと思ったことを書き連ねています。 JavaScriptのバージョンはES6想定です。 const で定義
【React】material-tailwindでplaceholder等の設定が不要なコンポーネントでも型チェックで必須となってしまう
概要 material-tailwindはMateial UI も tailwind CSS も使いたい？ そんなあなたに『Material Tailwind』がおすすめの記事で紹介されている通り、Material UI準拠のコンポーネントをTailwindでスタイル設定できるライブラリです。今回はReactでmaterial-tailwindを使ってみたときに、表題の通りplaceholderが本来不要なコンポーネントでも型チェックで必須となってしまう事象が出たので、対応などメモ書きします。 前提 使用したmaterial-tailwind/reactのバージョンは2.1.10です。 原因・対応など Property 'placeholder' is missing in type... for some 'non-form' components?のmaterial-tailwindの
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 以前作成した学習記録アプリを改良し、SupabaseというBaaSと接続して、データを永続化するように実装しました。 今回はその時の手順をまとめたいと思います。 ↓前回の記事はこちらです https://qiita.com/Daisuke_Kikukawa/items/f404a53f4e55b2a8e033 制作したアプリ 機能面は変わらないのですが、今回新たにDBに接続しました。 最初は、ローカルでデータを管理していた学習記録アプリを、Supabaseと連携させることで、データを永続的に保存できるようになりました。 これに
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React+TypeScript+WebAssembly+RustでWebアプリを作ってみる
【React Testing Library】コンポーネントのユニットテストにふれる
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
Converse All Star のインソールを React に換装した話 - マインドパレス
Next.jsによるWebアプリ開発の入門書、『動かして学ぶ！Next.js/React開発入門』発売
[メモ] react-scriptsで環境毎にビルドできる様にする - Qiita
【2024年最新版】0からReactを勉強するならこのロードマップに従え！ - Qiita
【React】 SWR で CRUD 試してみた備忘録 - 膝肘歪美 技術録ブログ
react-router-dom v6 ネスト構造の表示方法について
react で開発する kintone テンプレートリポジトリ
【海外記事紹介】React、そしてReact Nativeは、Meta社自身にどう使われているのか？
『Rules of React を経典に React を書いて心の安寧を保つべし - Qiita』へのコメント
Reactのこれ、覚えてますか？ - Qiita
【初心者向け】React / Next.jsの勉強方法と手順を紹介！ | 模写修行メディア
2024年、Remixアプリはどこでホスティングされる？ - React Japan
Reactで動画プレイヤーを作成するならreact-playerがおすすめ！
React Testing Libraryの複数の要素で作られたテキストのテストで手こずった話
Reactの状態管理ライブラリ「Jotai」を採用した背景
7GUIsで学ぶReact状態管理Jotai | Counter 編 (1/7)
【React個人開発】大学で過去の試験や課題を共有し合えるアプリを開発しました✨ - Qiita
ラクス_FE_TechCafe ~Reactでのプロダクト開発を語る~ アフタートーク｜matsu
【React】onClick内の関数の書き方の違い - Qiita
Reactを使った初めてのアプリ作成 - Qiita
Next.jsによるWebアプリ開発の入門書、『動かして学ぶ！Next.js/React開発入門』発売
React入門のためにJavaScriptの基礎を学び直した - Qiita
【React】アプリをDBにつないでみた - Qiita
【BlockNote入門】ReactでNotion風のメモアプリを作る方法 - Qiita