Reactの状態管理におけるuseReducerとuseContextの活用例
こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
【React】ドラッグ&ドロップで並べ替えできるリストを実装する話
ドラッグ状態で触れた要素のindexがそのまま移動先になると考えるのが1番簡単そうです。 やりたいこと これが検知できるのはonDragEnter,onDragOver,onDropということになります。 ただ、これだと末尾に移動させることができません。 なのでカーソルが触れている位置で移動先を変えることにします。 「上側 → index」「下側 → index + 1」 加えてゴースト(またはキャレット)の表示位置はドラッグ中に移動先が変わるたび更新しないといけないので、移動先の決定にはonDragOverを使用することになります。 ミニマムな実装 以上を踏まえてミニマムに実装したのがこちらです。(ゴーストなどは未実装) 補足 iOSのSafariではdraggable属性だけではなく、CSSで -webkit-user-darg: elementを付けていないとonDragStartが
ちょうどいいWebデザインギャラリー
カラー ネイビー (7) カラフル (259) スカイブルー (228) ホワイト (1226) ベージュ (423) グレー (434) ブルー (353) パープル (57) ピンク (126) レッド (212) オレンジ (124) イエロー (215) グリーン (310) ブラウン (148) ブラック (539) ゴールド (54) 業種 スポーツ (27) 旅行・ホテル・観光 (154) 美容 (112) エンタメ・趣味・娯楽 (177) 製品・工業・素材 (134) 金融・保険・会計・法律 (47) ファッション・アクセサリー (76) 就職・人材サービス (32) インフラ (26) 不動産・建築・空間・施設 (152) アート (41) 車・バイク他 (18) 事業・組織 (72) 暮らし商品・サービス (149) 飲食・食品・飲料 (481) 行政・NPO・団体・協
【HTML】知っておくと便利！短いHTMLコードで実装できる小技テク17選
この記事では、あまり知られていないHTMLの小技20個を実例サンプルと一緒にご紹介します。 CSSやJavaScriptなども使わずに、わずかなHTMLコードだけで実装可能な便利テクニックで、手軽に利用できるのもポイントです。 先日紹介したCSS小技テクと一緒に活用してみてはいかがでしょう。 【CSS】知っておくと便利！短いコードで実装できるCSS小技20選 たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個 そもそもHTMLってなに？ HTML（Hypertext Markup Language）は、Webブラウザで表示するための基本となる標準的なマークアップ言語です。また、CSS（Cascading Style Sheets）などの技術や、JavaScriptなどのスクリプト言語によってサポートされることもあります。 ホームページを作るときは、まずHTMLを
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
React Hooks でリストの絞り込み検索と並び替え機能のサンプル
React Hooks でリストの絞り込み検索と並び替え機能のサンプル ReactとHooks機能を使ってリストの絞り込み検索（フィルター）と並び替え（ソート）機能を作成してみます。 投稿日2019年07月23日 更新日2019年07月23日 準備 適当なコンポーネントファイルを作り作成しましょう。 importするのはuseStateとuseMemo import React, { useState, useMemo } from 'react'; export default () => { // ここにコードを追加していきます。 }; 初期データ（initialState） initialStateとして最初に表示されるデータを作成します。 実際のアプリケーションでは必要ないかもしれませんが、今回はサンプルの動きを見るために作成してます。 今回の検索は、テキスト入力でのタイトル検索と
Creating Sortable Tables With React — Smashing Magazine
Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, we’re going to implement all you need to sort out all of your table sorting needs. Table sorting has always been a pretty hard issue to get right. There’s a lot of interactions to keep track of, extensive DOM mutations to do and even intricate sorting algorithms, too. It
FlexboxとCSS Gridの使い分け方、よく見かけるUIコンポーネントをFlexboxとGridで実装するテクニックのまとめ
FlexboxとCSS Gridのどちらを使った方がよいか悩んだことはありませんか？ FlexboxとCSS Gridの使い分け方、それぞれの違い、Flexboxの実装例、CSS Gridの実装例、FlexboxとCSS Gridを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS GridとFlexboxの違い CSS GridとFlexboxの使い分け方 CSS Gridの実装例 Flexboxの実装例 CSS GridとFlexboxを組み合わせて使用する フォールバックと古いブラウザのサポート CSS GridまたはF
機械学習を仕事に使うには？ 03_Pythonのコーディング手順 - Qiita
株式会社デジサク がお送りするプログラミング記事、 今回はAI（機械学習）の具体的なコーディング手順を扱います。 ※ 無料セミナーも開催中なので、ぜひご覧になってみて下さい。 はじめに これまで「機械学習を仕事に使うには？」というテーマで記事をお届けしてきましたが、 第３回の今回は「Pythonのコーディング手順」をテーマに、具体的なプログラミングを紹介します。 バックナンバーも読んで頂くと機械学習の基礎からPythonのコーディングまで全体を理解できますので、ぜひご活用ください。 第１回：機械学習の目的を理解する 第２回：AI開発のプロジェクト全体像 SNS でも色々な情報を発信しているので、記事を読んで良いなと感じて頂けたら Twitterアカウント「Saku731」 もフォロー頂けると嬉しいです。 機械学習に必要なプログラミングスキル まず、機械学習を習得するために必要なスキルは下記
gRPC-Web + React + Node.js + TypeScriptでシンプルなチャットサービスを作る - Qiita
概要 かねてよりgRPCおよびgRPC-Webに興味があり、これを用いてシンプルなリアルタイムチャットサービスを制作し、公開した。 本稿では、その開発工程について解説する。 ゴール gRPC-Webを用いて「わいわいチャット」を作る。 https://waiwai-chat-2019.aanrii.com/ ※2020年9月現在、公開停止しました。 内容はシンプルなチャットアプリケーションだ。サイトを開くとまず過去ログが表示され、ほかの入室者の投稿が随時流れてくる。任意の名前で入室すると投稿欄が出現し、発言ができる。発言した内容はサイトにアクセスしている全員に、即座に共有される。過去ログは無限スクロールで遡ることができる。 フロントエンドはReactを用いたSPAとし、Netlifyを使って静的サイト生成・配信する。また、バックエンドはGKE上で動くNode.jsアプリケーションとし、かつ
How Uber "Go"es
Maintaining a large codebase with maximum readability and minimal overhead is hard. This is the story of how Go language went from a few enthusiastic Gophers to the most popular language for microservices at Uber. Learn where we failed, and how that led us to solutions that we think are pretty darn neat!
Flexboxを使う時に覚えておきたい！固定幅と可変幅を組み合わせたレイアウトを簡単に実装する方法
幅が決まっている固定要素と幅が決まっていない柔軟な可変要素をうまく組み合わせたレイアウトをFlexboxで実装するCSSのテクニックを紹介します。 画像とテキストを並べたり、ナビゲーションだったり、横に並べた際に高さが異なってしまったり、さまざまなレイアウトを解決するテクニックです。 Making width and flexible items play nice together 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 短い答え 詳しく解説 さらに詳しく解説 最終的な答え このテクニックを使った応用技 短い答え flex-shrinkとflex-basisを使用します。 詳しく解説 下記のように、widthが決まっている画像とテキストを並べて配置したいとします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Bad Todo 非常に多種の脆弱性を含む診断実習やられアプリ
GitHub - mercari/mercari-microservices-example
Patterns
GitHub Actions by Example
Simple search form in REACT using hooks 🔎.
Table sorting example - CodeSandbox
eslint-rules-example/.eslintrc at master · makotot/eslint-rules-example
