WP-Kyoto
いよいよ来月末ですね。GDPRについては、ジェトロのハンドブックがQ&A付きでわかりやすいのでぜひ一読ください。 EUからのアクセスが来る可能性がある以上、日本語でやってるからって対策しないわけにはいかないでしょ […] いよいよ来月末ですね。GDPRについては、ジェトロのハンドブックがQ&A付きでわかりやすいのでぜひ一読ください。 EUからのアクセスが来る可能性がある以上、日本語でやってるからって対策しないわけにはいかないでしょう。知り合いがWordCamp EUやJAWS-UG オランダ支部に参加した際に、「GDPR対策できてないから返ってくるまでうちのサイト見ないで」って言うわけにもいかないですし。 ただあまりにも実装に関する記事が見当たらないので、半泣きになりながらいろいろ試してみました。（2018/04/20時点ではこのサイトはGDPR未対応です。） Cookie利用の同意 最近
SweetAlert2
SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes
ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装する | フューチャー技術ブログ
Reactでは、画面に関わる表示の制御はかならず何かしらのステート管理を行いそれで行います。ダイアログの場合は開閉をuseState()で作ったフラグで管理するみたいな感じです。 たとえば、ウェブブラウザのJavaScriptから呼べるalert()やconfirm()は、関数を呼び出せばダイアログが表示されますし、ダイアログが閉じたら処理が戻ってきます。confirm()ならユーザーが選択したものと一緒に返ってきます。標準の<dialog>タグが今時ですが、このタグはDOMインスタンスのshowModal()やshow()メソッドを呼ぶ必要があります。命令志向ですね。 一方、Reactでダイアログを実装する場合を考えます。メソッド呼び出しが直接扱えればシンプルですが、Reactでは基本的にステート管理でやりましょう、というのが流儀です。useImperativeHandle()を使うとか
custom hookの返り値は配列であるべきか
つい先日、知人とペアプロしているときに custom hooks の戻り値は配列かオブジェクトかで意見が分かれたことがあって、結局何が正しいのかを調べてみました。 結論 どっちでもいい。 hooks は何でも返せる 返り値を持つ hooks の返り値は配列であることをよく見ます。 export default () => { const [state, setState] = useState(); const [store, dispatch] = useReducer(reducer, initalState); return <div>ほげ</div>; }; export default () => { const { state, setState } = useState(); const { store, dispatch } = useReducer(reducer, in
コストをかけずにWebサービスを公開するための構成例 - Qiita
はじめに 個人でフロントエンド(react)、バックエンド(node.js)、データベース(postgreSQL)を利用したWebサービスを公開したいと考えていました。 まずはテスト的に無料で外部公開できるサービスがないか調査しましたが、2022年8月に有料化されたHerokuの記事ばかりヒットしてしました。 結果的には無料で使用できる構成があり、実際にテストプログラムを動作させることができましたので構成例として記載しておきます。 ※無料なので比較的厳しい条件も含まれていたりするのでそれぞれのサービスを確認お願いします。 例えばsupabaseは数日間利用がないとインスタンスが一時停止して手動で起動させないといけないなどがあります。 今回試したサービス できるだけ同じサービスに集約したいと考えていましたが、実際にはフロントエンド、バックエンド、データベースはそれぞれ異なるサービスになってし
React Aria
Bring your own styles. React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze. Learn more <DatePicker> <Label>Date Planted</Label> <Group> <DateInput> {segment => <DateS
Reactで複数ファイルアップロードを実装するときに考えること
完全に理解してオレオレFileListControlComponentを作ってみたので解説します JavaScriptのFileListの操作ってちょっと厄介ですよね. Reactが絡むともっと厄介ですよね（本当は絡んでいないんですが） 今回は<input type="file" multiple />においてアップロードされたファイルを管理するコンポーネントを作ったので理解を深めながら解決していきます. React, TypeScriptでやります. 作ったもの 以下の条件を満たす複数選択可能なファイル入力のUIです. 選択したファイル一覧が可視化されている その一つ一つに削除ボタンがある 再度ファイルを選択すると,ファイルが追加される（再選択ではなく追加） 実際にうごくの なにが厄介なのか Reactでは基本的にはuseStateによって定義した変数で入力状態を管理します. 基本となる
React歴4年目のフロントエンドエンジニアが勧めるnpmパッケージ - kk-web
フロントエンド開発を行うにあたり、難しいと思うことの 1 つに npm パッケージの選定があると思います。 プロジェクトごとにそこまでコロコロ変えるものではないものの、パッケージを知っているのと知らないのでは開発難度も大きく変わってくるわけでして。 個人的におすすめな npm パッケージを書いていこうと思います。 create-react-app 言わずもがな、Facebook 製の開発環境構築パッケージです。 SSR が不要なときはこれ一択ですね。 Next.js 以前まであまり好きではなかったのですが、v9.3 を迎えてからはぐっと使いやすくなった印象があります。 型周りも非常にサポートが強く、公式ドキュメントも結構シンプルで見やすいのが良いですね。 ただ、webpack の設定周りの修正しずらさは結構痛い感じはします。 SSR が必要なときはこれ一択かなと。 Gatsby ブログサイ
Reactで画像入力フォームをカスタマイズする(react-hook-form対応)｜CTC Buildサービスチーム
Webサイトでファイルの入力を受け取りたいとき、input要素のtype属性に"file"を指定することで実現できます。しかし、これだけではデフォルトのスタイルが適用されてしまい、サイト全体のイメージに合わせるのが難しくなります。そこで、この記事ではカスタマイズ可能な画像用のファイル送信フォームの例を紹介し、実装のためのヒントを解説していきます。 ✍️ 伊藤忠テクノソリューションズ株式会社 BUILDサービス部 ソフトウェアエンジニア 板倉翔太 概要Reactを使用する (ただし考え方は Vanilla JS でも使えます) TypeScriptを使用する（ただし考え方はJavaScriptでも使えます） react-hook-formに対応する 「カメラを使用」と「ファイル選択」のボタンを分ける 「カメラを使用」はモバイル端末のみで有効にする ファイル名を表示する 画像のプレビューを表示
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Part 2: React — Naming Convention + Return Signatures for Hooks
react-cookie-consent
React で GDPR対応する
Building The Perfect React Table
React Aria Components
Grommet
PrimeReact | React UI Component Library
Saas UI
Get the height of an element and show/hide More... button depending on the element's height
GitHub - nygardk/react-share: Social media share buttons and share counts for React
Seeding the Query Cache