Reactでローカルの外部ファイルを読み込む
Reactで別のjsファイルや、txtファイルを読み込む方法Reactを使う時jsx内で外部ファイルとしてjsやtextファイルを読み込ませる方法 目次通常のHTMLでjsファイルを読み込む際は？なぜこのようなことをするのか？Reactでローカルのファイルを読み込む方法グローバル変数にするfetchで読み込むappednchildで読み込むまとめ 通常のHTMLでjsファイルを読み込む際は？ 普通にjsファイルを読み込にはHTMLにwindow.onloadを付けてファイルを読み込みjsファイルを使うことができる。ReactもHTMLに書けば使うことはできるのだが... react(jsx)内で変数として使いたい場合どうすればいいのか？ なぜこのようなことをするのか？ Reactのjsx内に変数、データを含める、もしくはimportして使用すると、難解化されてしまい手動で単純なファイルを修
Reactで<script>タグを生成しスクリプトを実行/外部スクリプトを読み込む方法 - あるSEのつぶやき・改
React に限った話ではないかもしれませんが、JavaScript(TypeScript)で <script>タグを動的に生成してスクリプトを実行したい、もしくは外部スクリプトを読み込みたいことは結構あると思います。 外部スクリプトを読み込む方法はネットを探せば結構見つかるのですが、<script>...</script>の内部のスクリプトを実行する方法を見つけることがほとんどできなかったので、その方法をご紹介します。 まず、React で外部スクリプトを読み込む方法です。useEffectを外せば普通の JavaScript(TypeScript) でも動作します。 useEffect(() => { const head = document.getElementsByTagName('head')[0] as HTMLElement; const scriptUrl = docum
これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。 他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。 Swapy Swapy -GitHub Swapyの特徴 Swapyのデモ Swapyの使い方 Swapyの特徴 Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。 MITライセンスで、個人でも商用でも無料で利用できます。
初回レンダリング時にuseEffectを実行しないようにする方法
はじめに ReactのuseEffectは、コンポーネントがレンダリングされるたびに副作用を実行するためのフックです。通常、useEffectは初回レンダリング時にも実行されますが、場合によっては初回レンダリング時に副作用を実行したくないケースもあるかと思います。今回はそういったケースの対象法を紹介します。 useRefを使って初回の処理をスキップする方法 useRefを使って初回レンダリング時の副作用をスキップすることができます。まず、useRefを使って参照を作成し、useEffect内でその参照をチェックして初回レンダリング時の処理を回避できます。 以下にコード例を示します。 import { useEffect, useRef } from 'react'; const ExampleComponent = () => { const isFirstRender = useRef(
【完全版】これ1本でReactの基本がマスターできる！初心者チュートリアル！ - Qiita
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ
Reactでブラウザの横幅を取得する - Qiita
はじめに タブレットやPCなどで表示を切り替える場合、横幅を取得する必要がある。Reactで横幅を取得する方法を記載します。 成果物 開発 import React, { useState, useEffect } from 'react'; const useWindowWidth = () => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = () => setWidth(window.innerWidth); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); };
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
【React】画像を表示するパターン。
概要 Reactで画像を参照する方法は通常のhtmlとは方法が違うので、忘備録としてメモ。 また、画像を参照してCSSで背景画像として設定する方法もメモ。 画像を表示する方法 publicフォルダにある画像を参照する create-react-appでプロジェクトを作成するとpublicフォルダが作成されている。 publicフォルダ内に配置したどのようなファイルも、オンラインでアクセスできる。 例えば、publicフォルダにさらに画像だけのimagesフォルダを作成してpublic/images/dummy.jpgという画像が場合、ローカル環境（localhost）でReactを動かしているとき、画像は以下でアクセスすることができる。
【React】オブジェクトリストをループしてコンポーネント化する - Qiita
はじめに プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください） WesBos.com のオンラインビデオコースでReactを学習しています。 動画は以下から。 https://reactforbeginners.com/ 「Reactでオブジェクトリストをループしてコンポーネントを動的に複数生成する」ための学習メモです。 今回の目的 以下のような商品リストがオブジェクトリストとして存在するとします。 const fishes = { fish1: { name: "Pacific Halibut", image: "/images/hali.jpg", price: 1724, }, fish2: { name: "Lobster", image: "/images/lobster.jpg", price: 3200, }, fish3: { name: "Sea
Axiosとは、AxiosでGETリクエストを実装するには？
Axiosとは、AxiosでGETリクエストを実装するには？ Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。 Axiosは、JavaScriptのHTTPクライアントライブラリとして、APIとの通信を行う時に非常に通用されるツールになります。それでは、AxiosでGETリクエストを送信するには、どうしたらいいですか？本文では、Axiosを詳しく紹介した上、それを使ってGETリクエストを実装する方法を皆さんに紹介します。また、Axiosより直感的でAPIリクエストを送信したり、レスポンスを取得したりできる方法も一緒に紹介していきた
[React Router] URLクエリストリングを取得する
React Router(v5)を使っていて、http://localhost:3000/books?hoge=1111&fuga=aiueoというようなURLのクエリストリング?hoge=1&fuga=aiueoを取得する方法をいくつか試してみました。なお、TypeScriptで実装しています。 自力で取得する searchには?hoge=1111&fuga=aiueoというような文字列がセットされています。この文字列を操作して無理やり取得してみました。何かものすごく制約がない限り、これは採用しないと思います。 import React from 'react'; import { useLocation } from 'react-router-dom'; interface QueryString { [key: string]: string; } const Books: Rea
![[React Router] URLクエリストリングを取得する](https://cdn-ak-scissors.b.st-hatena.com/image/square/bafed6bc63654302211967641a742ada89013840/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--tc6ZDmcZ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520Router%25255D%252520URL%2525E3%252582%2525AF%2525E3%252582%2525A8%2525E3%252583%2525AA%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%252592%2525E5%25258F%252596%2525E5%2525BE%252597%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aurawa72%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2c1VEpfbHBhTExxQlZQT2luTmo4OXEwTV83WndVNXNGNGlpa3RsTVE9czk2LWM%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法
私はいつも、ReactのuseStateでオブジェクト(連想配列)の更新に手を焼いています。 どうやるんだっけ？ ということで、この記事に更新のやり方を残しておきます。 useStateでオブジェクトを更新する方法 オブジェクトの一部だけ変更 const [state, setState] = useState({ id: 1, name: 'foo' }); const updateState = () => { setState((prevState) => ({ ...prevState, name: 'bar' })); // { id: 1, name: 'bar' } }; 前の状態(ここではprevState)を関数として渡して、オブジェクトの一部を書き換えています。 …prevStateはスプレッド構文といって、オブジェクトの要素を展開します。 name: ‘bar’は上書
![[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f7b670b37ab90694daf805b6f5c4908576a2722/height=288;version=1;width=512/https%3A%2F%2Famateur-engineer.com%2Fwp-content%2Fuploads%2F2022%2F05%2Fundraw_React_re_g3ui.png)
React JSX の中で if で分岐させたい - かもメモ
React のアプリで例えば編集モードの時にはフィールドで、そうでない時はテキストを表示するなど、条件によって表示を変えたい時など JSX 内で分岐をさせたい場合とか。 ふと思った。 JSXの中でif文使いたい場合って何がスタンダードなんだろう？ JSXの中で {(() => { if {...} else {...} }()} って即時関数にするんはなんか違和感あるし、function foo() { if {...} else {...} } を作っておいて <Foo /> で呼び出すとかなんかな？— 🌲🌲🌲 🌲🌲@芸カ18プ05 (@KiKiKi_KiKi) 2019年5月11日 JSX 内で直接 if 文は使えない JSX は { } 内で JavaScript が実行できるものだと思いこんでいたのですが、実行できるのは式 ( expression ) だけで、if や
React RouterのuseNavigateとは
今回の記事では、React におけるルーティングについて解説していきます。 React 本体にはルーティング機能が組み込まれていないため、どのようにページ遷移や URL の管理を行うのか疑問に思う方もいると思います。 そこで今回は、Reac... useNavigateとは useNavigateはReact Routerのフックで、Reactの関数コンポーネント内でページ遷移を制御するために使われます。 useNavigateを呼び出すと、ページ遷移を行うための関数（navigate関数）が返されます。 このnavigate関数に移動先のパスを渡すことで、アプリケーション内でのページ遷移を実行することができます。 基本的な使い方 useNavigateの基本的な使い方を説明します。 import { useNavigate } from 'react-router-dom'; funct
HTMLのdialog要素でDialogComponentを作る（React）
2022年3月から主要ブラウザ(Chrome, Edge, Firefox, Safari)で dialog要素が利用できるようになったそうなのでそれを使ってDialogすなわりModalのコンポーネントを作ったらどんな感じになるかを試してみました.説明少なめですが記事にします. また,今回はできるだけ最小限のコードで作成することを意識しています. dialog要素ってなに？ eventで表示/非表示を切り替えることができる backdropという疑似要素があり,すでにOverlayが作成されている（これ結構嬉しい） メリットはこの2点かなと思います. わかりやすく作ってみる Reactで最小限に作るとこんな感じですね. const Sample = () => { const dialogRef = useRef<HTMLDialogElement>(null); const openD
【React / useHooks】開発不要で使える便利なカスタムフックス20選
フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録されている便利そうなカスタムフックスをピックアップしてみました。 useHooksを使うにあたって カスタムフックスは自前で用意する方がカスタマイズ性高く安心して使える 調べれば同じ機能を持つカスタムフックのコードが出てくるので必ずしもuseHooksを使う必要はない プロトタイプ開発とかで速度が求められるなら導入するのはありかも 最初からこういうのに慣れすぎると開発理解があやふやになるのではといった議論はありそう こういうカスタムフック置くと便利だなという確認にも良さそう 結論
【React】JSXで条件分岐を記述する方法をまとめてみた
ReactのJSXとは ReactにおけるJSXとは、Reactの要素をHTMLと同じように記述することのできる拡張構文です。 JSXで記述するのは実際にはHTMLではなく、JavaScriptのコードに変換されるものになります。 // 下のコードを変換すると、 import React from 'react'; const Render = () => { return <div>Sample</div>; } // HTMLではなく、下のようなJavaScriptコードに変換される import React from 'react'; const Render = () => { return React.createElement('div', null, 'Sample'); } そのため、実はReactを使う上でJSXの記述は必ずしも必要ではないのですが、ほとんどの場合はその便
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 | ウツボウTECH![[ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 | ウツボウTECH](https://cdn-ak-scissors.b.st-hatena.com/image/square/4911df4201ee2be31aa9ff13e682cf08f8ad84df/height=288;version=1;width=512/https%3A%2F%2Futubou-tech.com%2Fwp-content%2Fuploads%2F2023%2F05%2Fcookie_react000png.png)
JSXの中にインラインスクリプトを埋め込む - React | nju33