React 【React】スクロールしてもあるエリアを固定したい！要素の固定をする ByMon 2024年9月18日2024年9月18日 検索項目エリアを固定するためにはCSS でスタイリングを行う方法が一般的です position: fixed を使用すると、スクロールしてもその要素が常に画面の特定位置に固定されます 1. CSSのスタイリング 2. R…
React 【React】ボタンアクションのテストを実装するよ！！ライブラリを使う！ ByMon 2024年8月30日2024年8月30日 JavaのjunitのようにReactでもテストを実装したい。。。！ Reactでもできます！！ 今回はボタンアクションのテストを紹介します Reactでボタンアクションのテストを行うには、@testing-librar…
React 【React】タブ表示切替画面作りたい！1からパッケージを作って、簡単に作ってみるよ ByMon 2024年7月31日2024年8月3日 以前タブ表示切替について記事をあげました が、 部分的過ぎてわかりずらかったと思うので 改めて、一から作成する記事を書きました ぜひ参考になればと思います！ さて、一から作っていきましょうか 1. 環境の準備 まず、cr…
React 【React】タブ表示（タブ切り替え表示）したいよ！こんな感じどう？ ByMon 2024年7月28日2024年7月28日 Reactでタブによる切り替え画面を実装する方法はいくつかありますが、最も一般的な方法は、Reactの状態管理と条件レンダリングを使用することです 必要なコンポーネントは以下のイメージで作成します Appコンポーネント …
React 【React】スクロール位置に応じて処理をさせたい！これ実装してみて（遅延読み込み） ByMon 2024年7月26日2024年7月26日 ※ 今回は「スクロール位置に応じて画像を取得するAPIを呼び出す」を例に紹介していきます 1. Intersection Observer API を使う方法 Intersection Observer APIを使うと、…
React 【React】ボタンの連打を防ぎたい！デバウンス（Debounce）もしくは、処理中は非活性にするのはいかがでしょう！？ ByMon 2024年7月25日2024年7月25日 1. Debounceしてみるよ デバウンスとは特定の時間内に何度も発生するイベントを一度にまとめる技法です 例えば、ユーザーが連続してボタンをクリックしても、一定の時間内には1回だけ処理を実行するようにできます use…
React 【TypeScript】Reactでモーダルを実装してみるよ！ ByMon 2024年5月28日2024年5月28日 1. モーダルコンポーネントの作成 2. モーダルの基本的なスタイリングを追加 3. モーダルを使用します 4. Appのスタイリング ぜひ、ご参考ください！
React 【TypeScript】Reactでラジオボタンを実装してみるよ！ ByMon 2024年5月27日2024年5月27日 1. ラジオボタンコンポーネントの作成 srcフォルダ内にRadioButton.tsxというファイルを作成し、ラジオボタンのコンポーネントを実装します 2. スタイリングの追加 ラジオボタンに簡単なスタイリングを追加す…
React 【React】ReactとTypeScriptを使用してリストボックスを実装したい！ ByMon 2024年5月24日2024年5月24日 1. TypeScript設定の作成 TypeScriptの設定ファイル（tsconfig.json）を作成します 詳細に説明！ compilerOptions セクションは、TypeScript コンパイラに対するオプ…
React 【React】VS CodeのLive Serverを使って簡単に動作確認しちゃうよ！簡単にレンダリングだ！ ByMon 2024年4月22日2024年4月22日 VS Codeの拡張機能であるLive Serverを使用して、Reactアプリケーションを簡単に実行する方法を説明します Live Serverは静的なHTMLやJavaScriptファイルをローカルサーバーで実行し、…
