王道か邪道か？ タイムスタンプによるステート管理
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
HTML Centricで行きたい私たち - LIFULL Creators Blog
LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
NewRelic BrowserとCSP、お前らと仲良くやっていく。｜maki
早いもので、もう2019年12月14日になってしまった。そう、この記事はNew Relic Advent Calendar 2019向けに書いたものだ。 CSP - Content Security PolicyみんなどのくらいCSPを設定しているだろうか？ もしや、ご存知ない？ という方は↑のリンクを舐めるように読んでほしい。 端的に言うと、CSPはWEBサイトで意図せず埋め込まれたJavaScriptの実行や外部のリソースを制限するものだ。こいつを設定することで、XSS他の攻撃に対する防御力を高めることができる。 現代において、設定しない理由はないので、是非導入しよう。 NewRelicBrowserをつかっているがCSPを設定したい設定に関するドキュメントはちゃんとある。設定例も掲示されているが、そのままでは使えない。 In order to obtain accurate bro
JavaScript で遅延評価を導入して起動を高速化した話
この記事は、JavaScript で Flash Player の実現を頑張った（もしくは現在進行系で頑張っている）人たちの集う Flash Advent Calendar 2020 に参加しております。 Flash Player を JavaScript で実装していた際に、現場から「起動の高速化」という難しい要求をもらった際、「遅延評価」を導入したところ大変効果がありました。今回、その遅延評価について簡単なご紹介をしたいと思います。 Flash Player 起動までのステップ 当時 Flash Player を JavaScript で提供していた際、当時のスマートフォン端末においてロード完了から最初の画面が出るまで大体 150ms くらいかかっていました。普通の Web ページであれば 150ms はロード時間の中に吸収され許容範囲になる可能性が高いのですが、当時 Flash Pl
WebGazer.js: Democratizing Webcam Eye Tracking on the Browser
WebGazer.js Democratizing Webcam Eye Tracking on the Browser WebGazer.js is an eye tracking library that uses common webcams to infer the eye-gaze locations of web visitors on a page in real time. The eye tracking model it contains self-calibrates by watching web visitors interact with the web page and trains a mapping between the features of the eye and positions on the screen. WebGazer.js is wri
Evaluating JavaScript code via `import()`
The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works. eval() does not support export and import # A significant limitation of eval() is that it doesn’t support module syntax such as export and import. If we use i
Async Clipboard APIでJavaScriptからクリップボードを操作する
JavaScriptからのクリップボードの操作は、長いあいだ開発者たちに切望されていました。かつてはFlashを使って実現するハックなどがありましたが、各ブラウザがexecCommandによるクリップボード操作を実装したことで、現在は落ち着きつつあります。 ただ、APIが綺麗に整備されているとは言いにくく、あまり現代的ではありません。そこで、スマートかつ現代的にクリップボードを扱うことができる、Async Clipboard APIの実装が進みつつあります。 Async Clipboard APIはその名の通り非同期でクリップボードを扱うAPIです。Async Clipboard APIはPromiseを返すので、直感的に扱えるようになっています。 従来のAPIでも、execCommandを用いることによってクリップボードを操作することができました。しかし、バグが多くブラウザ間の整合性が取
iframe sandbox は万能ではない - 葉っぱ日記
HTML5で導入されたiframe要素のsandbox属性は、そのiframe内のコンテンツに対しJavaScriptの実行を始め様々な制約を課すことでセキュリティの向上に役立つ機能である。例えば、以下のように指定されたiframeでは、iframe内からformのsubmitなどはできるが、iframe内でのJavaScriptの実行やtarget=_blankなどによってウィンドウを開くことなどは禁止される。 <iframe sandbox="allow-forms" src="..."></iframe> sandbox属性に明示的に allow-scripts という値を指定しない限りはiframe内では直接的にはJavaScriptは実行できないが、かといってiframe内から間接的にJavaScriptを必ずしも実行させることが不可能かというとそうでもない。 sandbox属性
deck.gl
deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
茨城県と栃木県のデータがおかしいときに確かめること - Qiita
都道府県別のデータを扱う機会ってありますよね． 私もとあるサービスの都道府県別データを解析しておりました． $ wc -l location_data/location-*.csv | sort | head 0 location_data/location-8.csv 0 location_data/location-9.csv 12 location_data/location-38.csv 14 location_data/location-36.csv 20 location_data/location-31.csv 26 location_data/location-32.csv 29 location_data/location-16.csv 33 location_data/location-18.csv 48 location_data/location-39.csv 52
人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は？ 一方で仕事の多い言語は？ CodementorXとCoding Dojoの調査結果
人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は？ 一方で仕事の多い言語は？ CodementorXとCoding Dojoの調査結果 仕事としてどんなプログラミング言語が扱えるかは、プログラマのスキルやキャリアにとって重要事項でしょう。 フリーランスエンジニアのマッチングサイト「CodementorX」は、GitHubやTwitter、Stack Overlowなどのコミュニティサイトにおける人気や、同社の求人データの傾向などを基に、人気が下降し求人も少ないプログラミング言語を、記事「Worst Programming Languages to Learn in 2018 | Codementor Blog」で発表しています。 一方、プログラミング学習サイトの「Coding Dojo」は、求人サイトIndeed.comの情報を基に、仕事の多いプログラミング言語を「Th
Proxy "it": アローすら面倒な怠惰JavaScripterのための遅延評価 - Qiita
//Proxyでこれが data.map(row => row.values.split(',').map(col => col.trim()).map(parseFloat)[2]); //こうなる data.map(it.values.split(',').map(it.trim()).map(parseFloat)[2]); ※ Proxyを用いてオブジェクトのメソッド・プロパティの評価を遅延させる話です。関数型言語のような引数の「遅延評価」の話ではありません。知人から指摘を受けたので、一部記述を改めました。 はじめに 何をしたいのか JavaScriptを書いていると、コールバック的な関数利用でプロパティ参照/メソッド呼出をする場合など、引数の定義と参照で2度同じ変数名を書かなければいけないことが多々あります。 // 例1 カンマ区切りのテキストデータを2次元配列にする text.
ブラウザから使える O/R マッパ、 js-data を使ってみる - クックパッド開発者ブログ
ヘルスケア事業部の濱田です。花粉がつらい時期ですが、みなさん楽しく開発してますか？ おいしい健康では、JavaScript（以下 JS）で非同期にサーバ側のリソース操作を行う際に、js-data というライブラリを使っています。Rails ユーザにとってはとっつきやすい便利なライブラリですが、日本語での情報がほとんど見当たらなかったため、簡単にご紹介したいと思います。 js-data とは JS 製のデータ管理用ライブラリです。RESTful API などを通じて取得できるデータ（リソース）を抽象化して、CRUD 操作を統一したインターフェースで行えるようにしてくれます。 リソースごとにオブジェクト（モデル）を定義したり、find でデータを取ってくるなど、ActiveRecord などの O/R マッパのような使い勝手が特徴。設計等には Ember data の影響を受けています。 以下
Falcor入門 1日目 Falcorとは何者か - Qiita
はじめに 最近、ある程度の時間を割いてFalcorを触っています。 まだ日本語での情報は豊富とは言えない状況ですし、自分の理解を整理する意味も含め、何回かに分けてFalcorについて書いていきます。 1日目の今日は「Falcorとはどのような目的のために生まれ、どのような仕組みに依存しているのか」を説明します。 概念的な話ばかりでコードは殆ど出てきません。実装寄りの話は次回以降に書きますが、行ったり来たりしながら読むのも有りじゃないかなと思います。 ちなみに次回以降の目次はこちら： Falcor入門 2日目 FalcorのJSON Graphに触れてみる Falcor入門 3日目 Falcor Routerでサーバサイドを実装してみる Falcor入門 4日目 FalcorとReactを組み合わせる 昨今、Webアプリケーションの大半は、ReactやAngularなどのMVCフレームワーク
RunKit is Node prototyping
RunKit is a node playground. Full node environment, right in the browser with every npm package already pre-installed Create a Notebook Prototype and explore your ideas RunKit notebooks completely remove the friction of trying new ideas. With one click you'll have a sandboxed JavaScript environment where you can instantly switch node versions, use every npm module without having to wait to install
Visual Studio CodeのシンタックスハイライトをWebページで使う - ぷろじぇくと、みすじら。
Created at: 2016-01-11 Visual Studio Codeのエディタ部分はVisual Studio Codeがリリースされるよりも前からいろいろなところで使われていて、 最初はVisual Studio Online “Monaco”のエディタ部分として公開されていました。 それから徐々にMicrosoftの中での利用範囲が広がりTypeScriptのPlaygroundやWinJSのPlayground、 ちょっと変わったところではInternet Explorer/EdgeのF12開発者ツールの中でも使われていたりします。 そして月日は流れて、Visual Studio Codeがオープンソースになってついにエディタ部分(Monaco Editor)が公開されました。 ということでそれを使う方法を調べていたのですが、たまたまシンタックスハイライトの機能が備わっ
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
useHooks
GitHub - tomi/fromfrom: A JS library written in TS to transform sequences of data from format to another
