[B! React] raimon49のブックマーク

raimon49 id:raimon49

Reactに関するraimon49のブックマーク (28)

jQueryは1個の要素と複数個の要素を同じように書かせる - fsubal
#フロントエンド #設計 #JavaScript 「1個の要素と複数個の要素を同じように書かせる」というのが実は jQuery の特徴の一つだと思っている。 document.querySelector() や querySelectorAll が出現して以降 jQuery の必要性はほとんどなくなったと言われる。実際にこんなサイトもあるし https://youmightnotneedjquery.com/ これは実際その通り一方、jQuery で書かれたコードを querySelector や querySelectorAll に移行しようとしたら苦しかったという経験をした人は多そう。上のコードが下のようになる。 code:javascript $('.foo').on('click', e => { // ... }) Array.from(document.querySele
raimon49 2023/12/16
API

HTML

JavaScript

React

design

programming
リンク
丁寧なDeno+JSX - laiso
*1 サーバーレスFunctionsぐらいの気軽さでサーバーアリのWebアプリをデプロイしたいという時がある。主に自分たちだけが使うようなツール系のやつ。その時に今までのようにSPA+APIアーキテクチャではなく、モノリシックなサーバーサイドアーキテクチャにしつつもフロントエンド開発と同じツールチェインを使いたい、と前から思っていた。これは単にReactメタフレームワークでも一気通貫に時短で作れそうだけど、個人の楽しみのための活動なので、一旦世間のトレンドからは離れて自分が本当に必要だと思った要素技術のみを最小限に使って理解しながら試行錯誤したい。 ※ただ第三者に提供するシステムとかは安全に作られた既存フレームワークに乗るのがいいというのもあるしばらく考えてみたところ、私にとっては﹁TypeScriptでJSXをテンプレートエンジンに使ってHTMLを書けるだけでよい﹂という所に落ち着
raimon49 2023/10/26
Deno

Docker

React

TypeScript

deployment
リンク
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開
React.js開発当初、﹁そんなものが使えるはずがない﹂とFacebook社内で評価されていた。React.jsの開発経緯を振り返る﹁React.js: The Documentary﹂YouTube公開代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画﹁React.js: The Documentary﹂がYouTubeで公開されています。動画の作成と公開を行ったのは、IT エンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画﹁Kubernetes: The Documentary﹂を公開しています。参考‥KubernetesをGoogleが開発し、
raimon49 2023/02/22
Facebook

JavaScript

Instagram

Netflix

OSS

React

YouTube

performance

歴史

広告
リンク
Web フロントエンドの実装において本来の機能を損なってはいけない
Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で
raimon49 2023/01/05
CSS

HTML

JavaScript

React

accessibility

usability
リンク
Reactのトレンドよくわからん
PWA Conference 2022 でのセッションの資料です。 https://conf2022.pwanight.jp/
raimon49 2022/12/04
Facebook

JavaScript

React

OSS

開発
リンク
最近Reactを始めた人向けのReact Hooks入門
ReactにHooksの仕組みが導入されてからずいぶん経ちました。Hooks導入当時のコミュニティの熱狂は、それはもう凄いものでした。﹁Reactにとんでもない機能が実装されたぞ！﹂と大騒ぎで、Hooksについての新しい記事を見ない日はありませんでした。そんな盛り上がりも冷めつつあり、Hooksも実務に密着した﹁当たり前﹂の機能になったのかな、と思いました。しかしその一方でまだHooksについてはよくわからないという人も多く、知識の二極化を生んでいるように感じます。世の中にはReactにすでに全く馴染んでいる人向けのHooksの解説記事は多く見当たりますが、最近のReact初心者に向けてのHooks解説記事はあまり多くありません。この記事では、Hooksについて実例を示しつつReactの基礎的な面からの解説を行います。 React初心者向けのHooks 世の中にはもう多くの高品質なHo
raimon49 2022/11/23
HTML

JavaScript

React

cache

pattern

study
リンク
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
raimon49 2022/09/25
HTML

JavaScript

PHP

React

Security

XSS

browser

crossdomain

password

study
リンク
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。皆さんは、状態管理ツールなどは使っておられますでしょうか。例えば、有名なところでは、Redux, Recoilなどがあります。今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
raimon49 2022/08/22
JavaScript

React

guideline

programming

study

歴史
リンク
Backlogのフロントエンドをもっと楽しく開発したい！Reactでリプレイスしている話 | 株式会社ヌーラボ(Nulab inc.)
こんにちは。Backlog開発チームの砂川です。現在BacklogではフロントエンドのReact/TypeScriptへのリプレイスを進めています。既に一部の画面︵課題検索画面、課題詳細画面︶がリプレイスされ、本番環境で稼働しています。この記事では、Reactへのリプレイスによって素早い機能開発ができる状態を実現しようとしていること、リプレイスしたコードを安心して触れる様にするために導入したものをご紹介します。本題の前に: 表示速度も大幅に高速化本題の前に今回のリプレイスによる副産物を紹介しておきます。今回のリプレイスは機能開発を楽にすることが第一目的ですが、リプレイスの過程で一部SPA化もしているため、ユーザーの体験も向上させることができました。リプレイス前(900ms程度) React版︵50ms程度︶課題検索画面と課題詳細画面をSPA化したことによって、この二画面間では、
raimon49 2022/07/30
Backlog

Haxe

React

performance

refactoring
リンク
React ユーザー向けの Next.js ガイド
最近会社で Next.js のチュートリアルを担当することがあったり、これからもあるので資料として記事をしたためておこうと思う。対象は、React は知っているけどこれから Next を学ぼうとする人が想定。つまり React 単体と Next の差分をまとめる。 React そのものから学びたい人は別の資料にアクセスした方が良いだろう。 Next の学習教材とりあえず公式だけ読めば良い。(これでいまブラウザバックされたら面白いな・・・) 主に二つあり、ドキュメントや API: https://nextjs.org/docs/getting-started チュートリアル: https://nextjs.org/learn/foundations/about-nextjs を読むと良い。 Next は何を解決しているか、何が嬉しいか元々は SSR のための煩雑な手続きをしなくてい
raimon49 2022/04/24
CDN

OGP

React

SEO

TypeScript

Webpack

cache

node.js

performance
リンク
フロントエンドのデザインパターン
本書は、Lydia Hallie 氏と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく3つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。
raimon49 2022/03/17
JavaScript

React

design

pattern

programming

study

translation

あとで読む
リンク
React ステート管理比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント︵使用者︶で同じステートを参照したい場合を考えます。useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
raimon49 2021/07/25
API

HTML

React

design

performance
リンク
英語で情報発信してたら中の人が次々と助けてくれるようになった - 丁寧に手を抜く
どうもTAKUYAです。今日は、英語で情報発信していて良かったと思う事があったので日記として書きたい。今年はもっぱら英語アカウントの方でツイートしたりブログを書いたり動画を作ったりしている。開発の泥臭いTipsからキャリア論など割と幅広く情報発信している。そうこうしている内に、開発で躓いた事をツイートすると、使っているフレームワークやツールの関係者からリプが来るようになった。いつのまにか自分の事をフォローしてくれていたようだ。例えばReact NativeでJSI Native BindingsがRemote Debuggerで動かないような事を呟くと、facebookの中の人からHermesが要るよと教えてもらったり： You need to use Hermes and the chrome debugger via Hermes. The standard chrome
raimon49 2021/05/15
インターネット使ってる時点で国境は越えていて、常用する日本語で囲われているだけなんだよな。見習わなくては。

Blog

English

React

Twitter

communication

support
リンク
Re: Rails を主戦場としている自分が今後学ぶべき技術について
この記事は、 Rails を主戦場としている自分が今後学ぶべき技術について(随筆) | うなすけとあれこれについてのアンサー記事です。うなすけ君が RubyonRails で育ってきたように、僕も JavaScript とともに育ってきたという自覚があります。なので、これについて書くことは、ポジショントークは避けられない、という感覚があります。冷静に比較しようとも思いましたが、やっぱり開き直って思いっきりポジショントークをすることにしました。そっちのほうが面白いと思うので。自分の基本的な主張は、こちらの記事にあるとおりです。 Frontend Study #1: 基調講演 - Frontend 領域を再定義する自分と RubyonRails 僕は、キャリアとしては Rails の会社で JavaScript を書いてきたことが多かったです。学生の頃は socket.io
raimon49 2020/12/14
JavaScript

OSS

Rails

React

Ruby

SQL

TypeScript

design

performance

programming
リンク
React17におけるuseEffectの破壊的変更を理解する
しばらく前、React 17 RCが発表されました。現行のReact16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。この記事では、React17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます︵以下は公式サイトから引用︶。InReact 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.
raimon49 2020/09/20
React 16までのuseEffectもちゃんと理解できていなかった事が分かった。

API

JavaScript

HTML

React

guideline

programming

非同期
リンク
Web Speed Hackathon Online 出題のねらいと解説
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
raimon49 2020/09/11
CSS

JavaScript

Polyfill

React

Webpack

node.js

performance
リンク
React hooksのユースケースまとめ - たまめも(tech)
プロダクションでのReact Appの立ち上げ・運用をやっとこ1サイクル回すことができたので、忘れないうちにいくつか知見を書き溜めておこうと思います。しかし本当に変化が目まぐるしいですね。過去の薄まってしまった記憶を取り戻すためにチュートリアルを一回しして、さーてやっていき〜と思ったところで﹁クラス型はもうオワコン！これからはhooks！﹂と言われたときにはどうしようかと思いました︵早めに気づけてよかったともいう︶。さて今回はそんなhooksについて。ベーシックな解説は公式ドキュメントや各種記事に譲るとして、ユースケースに絞ったメモを残しておきます。useState ご存知stateですね。値のストアとsetterを提供してくれる、シンプルなhookです。まあこれはそのまんまなんですが…、主にパラメータの受け渡し時に活躍してくれました。子コンポーネントに値を渡しつつ、onCli
raimon49 2020/07/28
API

React

UI

pattern

非同期
リンク
styled-componentsへの最近の感想 - saneyuki_s log
今の職場で既に組まれたシステムが既にstyled-componentsにべったり依存していて、別に積極的に入れ替える理由もないので普通に使っているけれども、やっぱりこれ微妙だなと思った話。そもそもとして、ビルドシステムへの介入が多くて不必要にロックインになったり、提示されてる手法がだいたいイマイチで普通にCSSとかSCSSを書く以上の意義が見出せないので、僕は基本的に「JS中にCSSを書いたり、ES Moduleのimportを使ってCSSを読み込むタイプのアプローチ（以下CSS-in-JS）」がそんなに好きではない・大人しくCSS書く方が好きではあるんだけど。色々あった理由はこちら: https://saneyukis.hatena blog.com/entry/2019/02/28/022750 https://saneyukis.hatena blog.com/entry/2019/0
raimon49 2020/06/28
CoffeeScript

CSS

Facebook

Java

JavaScript

React
リンク
SwiftUIではSingletonの代わりにEnvironmentを使うことができる - cockscomblog?
ここで言うSingletonというのは、ある種のグローバル変数を指している。そもそもクライアントアプリケーションの開発においては、実質的なグローバル変数が出現しやすい。環境にたった一つしか存在しない、存在すべきでない、というものが見出せる。例えばタイムゾーンがそれである。アプリケーション内のタイムゾーンはシステムに合わせるのが自然であり、アプリケーション中で複数存在することはほとんど起こり得ない。 iOSやmacOSでは、タイムゾーンを表すのはFoundation frameworkのTimeZoneである。システムのタイムゾーンはTimeZone.currentで取得できる。これはSingletonパターンのインターフェースに近い︵本当にインスタンスが一つであるかどうかをここでは問題にしない︶。このように環境中で存在する個数が限定されるような値を表すのに、Singletonパターンが用
raimon49 2020/02/27
React

Swift

programming
リンク
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容検証/導入フェーズ技術スタック React Native がもたらした効果途中でやめたこと追加で登壇者に聞いたことその他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
raimon49 2020/01/31
Twitter webってフロントエンドもScalaだったの。

Android

GraphQL

React

Scala

UI

Twitter

TypeScript
リンク
1 2 次のページ