技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
React ＆ TypeScriptを用いた業務システム開発 - Opt Technologies Magazine
先日、オプトからFeed Terminal というツールがリリースされましたので、主にフロントエンドについての大まかな全体像と技術的な拘りをご紹介しようと思います。 あいさつ Feed Terminal とは フロントエンド設計 管理画面の要件 アーキテクチャ選定 チームへの共有 実装・設計の中身の紹介 全体像（package.json） TypeScriptとの付き合い方 reduxの使い方 開発時の動作確認の仕方 テストやlintとの付き合い方 まとめ あいさつ こんにちは。uryyyyyyyです。 社内では遊撃手的ポジションにおりまして、今回のReact ＆ TypeScript案件であるFeed Terminalでは、フロントエンドの基盤設計やUIデザインなどを担当していました。 Feed Terminal とは Feed Terminalとはデータフィードマネジメントツールと呼ば
FumioNonaka.com
21年04月トップ5テクニカルノート 01. FN1609006「TypeScript入門 05: get/setアクセサをを使う」 02. Creators MeetUp「ネイピア数 〜美しきムダな数〜」 03. FN1702006「Vue.js入門 03: データから動的にリストをつくる」 04. FN1609004「TypeScript入門 03: クラスを継承して使う」 05. FN1707007「Sass: SCSSの基本的な書き方」 21年04月注目テクニカルノート 09. FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす」 10. FN1009002「力のモーメント」 2021.06.15 FN2106001「TypeScriptハンドブック 06: nullとundefinedなど」 「TypeScriptハン
FumioNonaka.com
21年04月トップ5テクニカルノート 01. FN1609006「TypeScript入門 05: get/setアクセサをを使う」 02. Creators MeetUp「ネイピア数 〜美しきムダな数〜」 03. FN1702006「Vue.js入門 03: データから動的にリストをつくる」 04. FN1609004「TypeScript入門 03: クラスを継承して使う」 05. FN1707007「Sass: SCSSの基本的な書き方」 21年04月注目テクニカルノート 09. FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす」 10. FN1009002「力のモーメント」 2021.06.15 FN2106001「TypeScriptハンドブック 06: nullとundefinedなど」 「TypeScriptハン
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する | DevelopersIO
[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する React + Typescript で実装されたフロントエンドにreact-beautiful-dndを使ったドラッグ＆ドロップ機能を実装しました。 全体の流れ 本記事でやることの全体の流れです。 React + Typescript で簡単な画像のリストを作成する react-beautiful-dndを導入してリストのアイテムをドラッグ＆ドロップできるようにする 成果物 React + Typescript プロジェクトの雛形を作成する ドラッグ＆ドロップを実装する前準備です。 create react app コマンドでプロジェクトの雛形を作成します。言語は Typescript を指定します。 npx create-react-app sample_dd
![[React + Typescript] react-beautiful-dnd を使ってドラッグ＆ドロップ機能を実装する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
When React 0.13 came out, everybody freaked out. The introductory post made it clear that mixins are on their way out: Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts. There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped
巷で難しい難しいと言われていた react-dnd でドラッグアンドドロップを実装してみたところ、案外楽だったのでまとめる。 用語整理 DragSource : マウスで掴んでドラッグする対象 DropTarget : ドロップ対象 monitor : drop/hover時に今現在のイベント対象の状態を取り出せるもの 使い方 @DragDropContext を ドラッグアンドドロップしたい領域のコンポーネントに注入する @DropTarget を落としたい先のコンポーネントに注入する @DragSource をドラッグさせたいコンポーネントに注入する たとえばドラッグアンドドロップでリストの要素を入れ替えたい場合、 リスト全体が DragDropContext で、 リスト要素が DragSource かつ DropTarget になる。 実装例 並び替えられるリスト要素の実装 @Dr
GitHub - react-dnd/react-dnd: Drag and Drop for React
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
HTML5 - テクニカルノート一覧
スクリプティング | CSS3 | Sass | jQuery | Angular v6 v5 | React | Vue.js Vue CLI Vuex | D3 | three.js | RxJS 6 v5.5 | TypeScript | トラブルシューティング | リファレンス | 数学 | スクリプティング FN1202002 <canvas>要素で定めた領域に図形を描く FN1202005 EaselJSで図形を描く FN1203001 EaselJSで描いた星形を回す FN1203005 EaselJSのマウスクリックとドラッグ&ドロップ FN1203006 JavaScriptでオブジェクトに設定した関数のスコープ FN1204005 EaselJSで外部ビットマップファイルを読込んで回す FN1205001 EaselJSでインスタンスをクリックした座標で回しながらドラッ
Edit · Jul 18, 2015 · 13 minutes read · Follow @mgechev Flux JavaScript AngularJS React MVC MVW This is the second, and probably be the last, blog post of the series “Flux in Depth”. In the first post we did a quick overview of flux, took a look at the stateless, pure components, immutable data structures and component communication. This time, we’re going to introduce the store and how we can com
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
The Redux ecosystem
Or packages you should know to create a Redux production applicationWarning: This article is about front-end applications and nothing about server rendering. What’s going on?Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems re
introducing react-beautiful-dndDrag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible. PhysicalityThe core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best ill
FumioNonaka.com
21年04月トップ5テクニカルノート 01. FN1609006「TypeScript入門 05: get/setアクセサをを使う」 02. Creators MeetUp「ネイピア数 〜美しきムダな数〜」 03. FN1702006「Vue.js入門 03: データから動的にリストをつくる」 04. FN1609004「TypeScript入門 03: クラスを継承して使う」 05. FN1707007「Sass: SCSSの基本的な書き方」 21年04月注目テクニカルノート 09. FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす」 10. FN1009002「力のモーメント」 2021.06.15 FN2106001「TypeScriptハンドブック 06: nullとundefinedなど」 「TypeScriptハン
有益なReactライブラリまとめ - Qiita
この記事について Web開発で１からいい感じのUIを作成しようと骨が折れることが多いですが、世の中にはOSSで簡単にかっこいいUIを作れるライブラリがあります。 本記事では、実際に使ってみてよかったそんな便利なReact UIライブラリをご紹介していきます。 この記事は良さげなライブラリを見つけるたびに不定期更新していきます 「こんなライブラリもあるよ！」という方はコメント欄へ🙏 ちなみにGithubのReactトピックでは面白いプロジェクトが結構見つかるので仕事の合間とかにみています。 UI系 Material UI 言わずもがな最も有名なUIフレームワーク 数年前に比べドキュメントも充実しコミュニティも成熟してきた感があり、サンプルが多いのも魅力的です。 React Boostrap 超有名Web FrameworkのReact版。Material UIや後述のAnt Designよ
始めに STORES 予約でエンジニアをしているTak-Iwamoto です。 今回はある項目の並び替え機能を実装する際に React DnD を使用したので、その知見について書かせていただきます。 実装した画面はこんな感じです。 ライブラリ STORES 予約の管理画面は Rails の slim -> React へのリプレイスが進行中です。 なので React のドラッグ&ドロップライブラリを検討しました。 star 数の多いライブラリは以下のものがあります。 React DnD react-beautiful-dnd React-Draggable React-Draggable は最終リリース ver が 2016/12 なので対象外として、React DnD と react-beautfiul-dnd のどちらかが候補となります。 あくまで自分の考えではありますが、それぞれの
React DnD
Drag and Drop for React
まえがき React DnDの和訳ドキュメントがなさげので、自分用に私訳した記録です。 私訳なので英文の直訳を自分なりに解釈し記述した部分が結構あります。 むしろ内容すら間違ってる。と、見兼ねてつっこみたくなる箇所がありましたら、どうぞ宜しくお願いします。 Overview ： 概要 本家ページ： Overview - React DnD Items and Types fluxと同じく、React DnDはデータをviewとしてではなく、事実上のソースとして使用します。 画面上で何かしらのデータをDragした際、そのデータをコンポーネントやDOMノードとしては扱わず、代わりにDragされているデータを特定のタイプのアイテム("item")として扱います。 ■ "item"とは？ 現在Dragされているものがどのようなものなのかを、プレーンなJavascriptオブジェクトで説明しているも
FumioNonaka.com
21年04月トップ5テクニカルノート 01. FN1609006「TypeScript入門 05: get/setアクセサをを使う」 02. Creators MeetUp「ネイピア数 〜美しきムダな数〜」 03. FN1702006「Vue.js入門 03: データから動的にリストをつくる」 04. FN1609004「TypeScript入門 03: クラスを継承して使う」 05. FN1707007「Sass: SCSSの基本的な書き方」 21年04月注目テクニカルノート 09. FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす」 10. FN1009002「力のモーメント」 2021.06.15 FN2106001「TypeScriptハンドブック 06: nullとundefinedなど」 「TypeScriptハン
（2017/12/13）弊社アドベントカレンダーに追加したので気持ち程度修正しました。 CSV一括登録機能？ 下記のようなことをしたい！ ドラッグアンドドロップでCSVをアップロード CSVをJSONにパース JSONを配列に変換し、Storeへ格納 フォーム量産 今回は上2つの実装について書きます。 D&D ReactのD&Dライブラリはこんな感じ。 react-dndが有名だけど、今回はreact-dropzoneを使った。 OS標準のFile Promptを呼び出すのが簡単だった。 react-dnd React-Dropzone-Component react-dropzone( https://react-dropzone.js.org/ ) import Dropzone from 'react-dropzone'; import Button from 'components
この記事は次の日本語訳です（Reactの部分のみ抜粋） https://github.com/enaqx/awesome-react 公式 React Official Website React Documentation React GitHub コミュニティ Reactiflux Discord Channel React StackOverflow React Twitter オンラインでReactのコードを試せるサービス CodePen CodeSandbox JSFiddle チュートリアル Reactのチュートリアル React Official Tutorial - 公式 Using React in Visual Studio Code - ReactをVSCodeで使う Scrimba - Learn React for free interactively - Scr
React ComponentsでDRAG、SORTABLEなどで検索すると出てくる中、星が一番多いのがreact-dndですが、恐らく一番少ないコード量であろう、04 Sortable/Simpleの中身がなかなか禍々しく、かつfluxでも無いため、読むのに苦労しました。 そこで 環境設定 どうすればreact-dnd@2.0.2が最低限動くのか viewにaction / storeを付与して操作する mobile対応（申し訳程度の） を考えた手順を紹介します。 環境設定 以下のpackage.jsonを使用します。 { "name": "try-dnd", "scripts": { "start": "webpack-dev-server --port 59798 --host 0.0.0.0 --content-base dist", "build": "webpack" }, "
How To Use The HTML Drag-And-Drop API In React — Smashing Magazine
In this tutorial, Chidi Orji will show you how to build a React drag-and-drop component for file and image uploads. In the process, we’ll learn about the HTML drag-and-drop API. We will also learn how to use the useReducer hook for managing state in a React functional component. The drag-and-drop API is one of the coolest features of HTML. It helps us implement drag-and-drop features in web browse
React DnDでかんばんボードを作ってみる
※本記事はSansan Advent Calendar 2020の3日目になります。 はじめに 自分はSansanが展開しているtoC向けの名刺管理サービス Eight を開発しています。 先日EightのWebページでReact DnDを利用した並び替えを実装していたので、そのときの経験を踏まえてかんばんボードを作成してみました。 できあがりのサンプルはこちら、ソースコードはこちらになります。参考としたのは本家のSortable Simpleです。 本記事では以下の流れで簡単な解説をしていきます。 React DnDの概要 環境構築 Sample作成 まとめ React Dndの概要 React Dndは2014年から開発されているReact用のドラッグ＆ドロップを実現するライブラリです。 Reduxの作者であるDan Abramovさんによるものとしても知られています。 READMEで
Electron、TypeScript、React を使って、なにか作りたかったので漫画ビュワーアプリを作りました。 開発環境や、使用したライブラリーなどを書いていきたいと思います。 GitHub: ElectronMangaViewer ※この記事のアプリのスクリーンショット内の漫画は、二次利用フリーの"ブラックジャックによろしく"を使用させて頂いてます。 タイトル:ブラックジャックによろしく 著作者名:佐藤秀峰 佐藤漫画製作所 からPDF形式版をダウンロードできます。 開発環境 プログラミング言語にはTypeScript、TypeScriptの静的解析ツールTSLint、モジュールバンドラにwebpack、コードフォーマッターにはPrettierを使用。 TSLintでもコード整形できますが、なぜPrettierを利用するのかと言うと以下のページを参考 Prettier 入門 ～ESL
Sudachiの開発計画(2018年)
2017年の初め頃から、SudachiというmacOS向けのタイムテーブルエディタを作っています。少し遅れましたが、2017年の開発振り返りと、2018年の開発計画を自分への備忘録として綴ってみたいと思います。 2017年の振り返り2017年は「初期構築」の1年でした。ElectronやReactの知識が足りず思わぬバグを踏んで時間をとられたり、設計の甘い部分があり何度もリファクタを繰り返したりしましたが、少しずつアプリのコアとなる機能を作りました。 Firebaseを使ってユーザ認証機能を追加データストアをローカルファイルからFirestoreに移行エディタのライブラリをDraft.jsからSlateに移行エディタエリア改善（ツールバー・インデント・明日に持ち越し機能）React DnDを使ってドラッグ&ドロップでのタスク移動state管理の大幅リファクタリングアプリの自動アップデート対
Reactでdrag&dropを実装できるReactDnDについて解説します。 (React.js Advent Calendar 2015の15日目の記事です。) ReactDnDについて Reactでdrag&dropコンポーネントを実装するのにおそらく一番有名(Redux作った人が作った)かつドキュメントが豊富なパッケージです。ドキュメントの情報量が結構多く自由度が高くて混乱しやすいので軽く使ってみたい人向けに核となるところだけ解説します。Danさん本当好き。 API 各コンポーネントをdrggable&droppable化するためのAPIがES7のdecoratorとして提供されています。 babel6使っている人はdecoratorがまだ公式では対応していないみたいなので注意してください(babel5なら大丈夫です)。公式じゃなければbabel6用のプラグイン作っている人がいたと
A relevant ad will be displayed here soon. These ads help pay for my hosting. Please consider disabling your ad blocker on Pony Foo. These ads help pay for my hosting. These are short-form “thoughts”, in addition to the usual longer-form articles in the blog. The goal is to publish one of these every weekday. I’d love to know what you think. You may send your questions to thoughts@ponyfoo.com. I’l
Webpack is an ambitious, powerful tool for bundling modern web applications. Unfortunately, its complexity can make it daunting to learn. While the team has made incredible strides improving the docs, there are still a few places which remain counter-intuitive. In this post I’ll introduce and discuss those features which I found most difficult to learn, namely code splitting, and managing bundle s
【React / Laravel / AWS Lambda】ポートフォリオ (カンバン方式のタスク管理アプリ) を作成しました。 - Qiita
【React / Laravel / AWS Lambda】ポートフォリオ (カンバン方式のタスク管理アプリ) を作成しました。TypeScriptLaravellambdaReactGitHubActions 主にスキル向上を目的に、ポートフォリオとしてタスク管理アプリ (Miwataru) を作成しました。 これはシングルページアプリケーション (SPA) になっており、フロントエンドには、TypeScript / React、バックエンドには、PHP / Laravel、インフラには、Vercel (静的サイト) / AWS Lambda (API) を使用しています。詳細は後述の開発環境 (フロントエンド)、開発環境 (バックエンド)、本番環境をご覧ください。 アプリケーションや作成したコード、実装過程の説明については、以下のリンクからアクセスできます。 アプリケーション: htt
GitHub - jas-chen/react-dnd-card: Create a drag and drop list in a minute. Built on top of React DnD.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Material-UI では、Material Design Guidelines で定められているドラッグ＆ドロップで並べ替えられるリストが提供されていません。ドラッグ＆ドロップの機能を提供するライブラリと組み合わせることで、これを実現できます。 ドラッグ＆ドロップ React でドラッグ＆ドロップを実現するライブラリは数多ありますが、今回は以下の4つを比較・検討しました。箇条書きはあくまで個人的な感想です。 react-dnd react-dnd/react-dnd: Drag and Drop for React 一番有名どころ。オリジナルの作者は、React や Redux の Dan Abramov (gaearon) 氏。 拡張性が高いので、その気になればいろんなことができそう。一方で、アニメーションなど自力で実装しなければならない部分が多い。 記述量は多め。 react-be
GitHub - web-pal/react-trello-board: Trello like board based on React, Redux, React-dnd
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに このドキュメントは自分の備忘録的にこの分かりづらいReact DnDを読み解くために書いたものです。なので一部しか翻訳していませんが、ご了承ください。 Hooks APIを使っているのでHooks中心になっています。 概要 React DnD は今までの大抵のドラッグ＆ドロップライブラリとは違います。もしあなたがこれを使ったことないのであれば、威圧的なものになるでしょう。しかし、この設計のコアコンセプトを少しかじったことがあれば理解できるでしょう。残りのドキュメントを読む前にこれらのコンセプトについて一読するのをおすすめします。 コンセプトの一部は Flux や Redux のアーキテクチャに似ています。 これは偶然ではなく、React DnDの中でReduxを使っているからです。 バックエンド React DnD は HTML5 drag and drop APIの上に作られて
npm rank
00.Intro.md npm rank This gist is updated daily via cron job and lists stats for npm packages: Top 1,000 most depended-upon packages Top 1,000 packages with largest number of dependencies Top 1,000 packages with highest PageRank score 01.most-dependent-upon.md Date: Fri, 16 Aug 2019 07:31:10 GMT Input file: ./data/dependenciesGraph.out.graph Top 1000 most depended-upon packages lodash - 69147 chal
GitHub - joshburgess/not-awesome-es6-classes: A curated list of resources on why ES6 (aka ES2015) classes are NOT awesome
Not Awesome: ES6 Classes A curated list of resources on why ES6 (aka ES2015) classes are NOT awesome Reverse-inspired by all of the awesome lists on GitHub, like Awesome, Awesome Awesomeness, Awesome JavaScript, Awesome React, Awesome Cycle.js, Awesome Go, Awesome Elixir, Awesome Elm, etc. Table of Contents Introduction TL;DR Reading Videos ES6 Classes in React Don't Want to Use ES6 Classes in Rea
React DnD
Drag and Drop for React
Note: React DnD 1.0 is finally released. This article is the manifesto behind it. Front-end development matures. We used to keep state in global variables and DOM. Then we wired our apps with message buses and used fine-grained events to translate model changes into DOM updates. Now is the dawn of the next-generation frameworks that embrace top-down data flow, treat DOM as a remote rendering engin
Note: All of the code can be found on GitHub. This article covers creating an HTML5 based drag and drop container that accepts items from compatible containers, has nice animations, and only uses React.js (no Flux based architectures). Others have written on drag and drop with React.js. It is worth the time to check out some of them. For example, Daniel at webcloud.se has a great article on creati
HTML5 - テクニカルノート一覧
スクリプティング | CSS3 | Sass | jQuery | Angular v6 v5 | React | Vue.js Vue CLI Vuex | D3 | three.js | RxJS 6 v5.5 | TypeScript | トラブルシューティング | リファレンス | 数学 | スクリプティング FN1202002 <canvas>要素で定めた領域に図形を描く FN1202005 EaselJSで図形を描く FN1203001 EaselJSで描いた星形を回す FN1203005 EaselJSのマウスクリックとドラッグ&ドロップ FN1203006 JavaScriptでオブジェクトに設定した関数のスコープ FN1204005 EaselJSで外部ビットマップファイルを読込んで回す FN1205001 EaselJSでインスタンスをクリックした座標で回しながらドラッ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
Mixins Are Dead. Long Live Composition
react-dnd これだけ抑えておけばおｋ - Qiita
Flux in Depth. Store and Network Communication.
Rethinking drag and drop
React DnDを使ったので知見をまとめた - STORES Product Blog
React DnDのドキュメント私訳 : Overview - Qiita
Reactで「CSV一括登録機能」 を開発した話 - Qiita
Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ - - Qiita
react-dnd…Reactjsのドラッグ並び替え処理 - Qiita
Electronで漫画ビュワーを作った話 - Qiita
ReactでDrag&Drop - Qiita
Why I Write Plain JavaScript Modules
Vendor and code splitting in webpack 2
Material-UI で並べ替え可能なリストを作る - Qiita
React DnDドキュメントの日本語化 - Qiita
The Future of Drag and Drop APIs
Complex Drag and Drop Lists using React.js